- 14
- 6 947
ME TA DA AT
Приєднався 7 жов 2013
Fractal MIDI control
I hooked up the parameters of this SDF based fractal to my X-Touch Mini MIDI controller and play around for a couple of minutes
Made with 100% my own code, running in the browser, no dependencies or external libraries, Javascript + WebGL2 + GLSL.
You can see a live version of it running here:
majestic-donut-6aed52.netlify.app/
Or try half resolution if you have a lower powered GPU:
majestic-donut-6aed52.netlify.app/?mres=.5
There are also some other options to adjust the recursion level and smoothing:
majestic-donut-6aed52.netlify.app/?mres=1&level=11&smooth=0.2
The live version just morphs with time, it does not have MIDI controls cause it's hard getting that to work with everybody's MIDI devices instead of specifically my own X-Touch Mini.
Made with 100% my own code, running in the browser, no dependencies or external libraries, Javascript + WebGL2 + GLSL.
You can see a live version of it running here:
majestic-donut-6aed52.netlify.app/
Or try half resolution if you have a lower powered GPU:
majestic-donut-6aed52.netlify.app/?mres=.5
There are also some other options to adjust the recursion level and smoothing:
majestic-donut-6aed52.netlify.app/?mres=1&level=11&smooth=0.2
The live version just morphs with time, it does not have MIDI controls cause it's hard getting that to work with everybody's MIDI devices instead of specifically my own X-Touch Mini.
Переглядів: 811
Відео
Signed Distance Functions for generative art (#genuary8)
Переглядів 3,4 тис.Рік тому
This is Piter Pasma's explanation about Signed Distance Functions. Helpful links: Code in this video: editor.p5js.org/triplezero/sketches/IeE6fvLY7 Earlier version of the same: editor.p5js.org/triplezero/sketches/rJ_46grmz Circle packing with SDFs: editor.p5js.org/triplezero/sketches/iInAUsZF8 Inigo Quilez's articles: iquilezles.org/articles/ GENUARY: genuary.art Thanks to @DenisovichPy for val...
GenArtClub Shader Workshop 2022-03-25
Переглядів 1,5 тис.Рік тому
In this workshop I talk about how to make a fragment shader in WebGL2 from the bottom up, and then how to build a raymarcher in that fragment shader. The code I wrote is on Github: github.com/tripzilch/genartclub-shaderworkshop-2022-03-25
Genuary 2023 Day 2: Made in 10 minutes
Переглядів 497Рік тому
This is my entry for Genuary 2023 Day 2: Made in 10 minutes. Genuary is the Generative Art month, more info at genuary.art The soundtrack I'm using is Shamanix by Hallucinogen, which will probably get copyright-flagged, but it's a super cool classic Goa/Psytrance track almost exactly 10 minutes long, and I love coding to music like this. And I'm not monetizing this, so it's fine I guess?
Plotter video for Genuary 2021, Day 19: Increase the randomness along the Y-axis.
Переглядів 593 роки тому
Plotter video for Genuary 2021, Day 19: Increase the randomness along the Y-axis. See end result: pCKPWj4KlTw_/
Plotter video for "Doodle Identity", February 2021
Переглядів 893 роки тому
Plotter video for "Doodle Identity", February 2021 End result here: pCLeTlVQnm9V/
Megapasta Hyper-extrusion
Переглядів 1253 роки тому
Just a quick-ish render, could've done a better job on the lighting, probably. But these are just first steps in exploring animated hatching. People asked for morphing shapes, so here's your morphing shapes :-)
You know it's time to rush into the emergency room when experiencing « fractal vision » like that!
This is wacky 😮
so this is math hmm?
Shoutout to the homie Computation, doing the heavy lifting
yes it's all math, generated on GPU in real time using 100% my own code, I added some more info in the description now
There's no audio
That's right
@@metadaat5791 Ah sorry I thought you meant you hooked it up to a MIDI music player, not a controller 😅
@@j-maffe next time I'll add WebAudio to play muffled squeaks when I turn the knobs 🤣
This is great, thank you so much for sharing, Piter! The time has finally come that I can experiment with shaders and even with sdfs. one minor remark: at 43:37 you mean the lengths are 1 (and not zero)
I've been wanting to make a video about SDF's for about 5 years now, maybe 2024 will finally be the time I manage to do it! Thank you for this wonderful resource! I have only watched the first 10 seconds, but I can just tell it's going to be GREAT!!!!! (will report back when I'm done)
@TheCodingTrain, thanks so much!! I'm a huge fan of your channel! :D You've been super inspirational in my creative coding journey, especially your enthusiasm, "go for it" attitude and I especially learned about not worrying about smaller details getting in the way :-) BTW if you're short on time, feel free to watch my video at 1.5x speed, it's not edited and I don't talk that quickly :-) Very much looking forward to see your video on SDFs :-) It's a broad subject to give a short intro to :-) My approach was to stick to 2D SDFs (so I don't need to also explain a raymarcher) and hopefully provide people with intuition how to recognize they might already be using 2D SDFs (like checking if a point's inside a margin frame == box SDF, or say, circle packing is full of circle SDFs and their union) and then show how they give you super powers :-)
@@metadaat5791 Thanks for the reply, this video is so terrific! I especially love the simplicity of rendering by just drawing lots of random dots over time (rather than filling in every pixel every frame!)
thank you for sharing. Ray march and sdfs are fun way to create worlds with formulas. Appreciated your video very much!
I've got learning p5.js on my to-do list. But I'm trying to replicate this in Java and struggling. I get most of the function stuff he does, but I can't understand what's happening with lin starting around 11:00. Is "let lin = y;" the equivalent of float "lin = vector.y;"? Where is the y value coming from here (11 mins, line 22)?
Yep, y is an argument to the function representing the y coordinate of the vector.
the end result looks very good!
in my opinion, hard to read/highly condensed code like "(a,b)=>a>0&&b>0?L(a,b):a>b?a:b;" should not be in a tutorial introducing a topic to beginners. One letter variables too. These things add unnecessary difficulty when I'd like to be focused on the topic and basics rather than the code itself. That said, the basics were explained well! I will look through Inigo Quilez's articles and videos, then return to this tutorial. thanks Piter
Beginners can also come in several flavours :-) I know I would've eaten that up, studied and peeled it apart, when I just got into SDFs. I also want to give that part of my audience some meat to chew on. But it doesn't really matter for the rest, it's just to show that the box SDF as constructed from the max() function is not 100% correct. There's many more tricks you can do with the k/edge function which deserve their own 30 minute video (and I don't think these tricks are in any Iq article, either). I will, however, firmly disagree on one letter variable names adding unnecessary difficulty. This is a math topic with math formulas, and formulas get increasingly harder to read, the longer variable names you use. They quickly can start spanning multiple lines. There's a reason math and physics papers use single letters in their formulas. I find it much harder to spot a mistake in a wide formula with long variable names. Also I think the letters I used are pretty self explanatory: x, y, d for distance, p for point. And it's not like if you're a beginner coder, one letter variable names are any harder to read, in fact many beginner coders use single letter variable names themselves :-) You may know I also enjoy size optimizing, so I could be a _little bit_ biased :-) But I wasn't writing size optimized code here (except the `k` formula, which I copypasted from one of my projects), and was using short variable names honestly to aid with readability. My hope is that people learn to get an intuition for when a piece of their program logic is actually using an SDF, and quickly seeing a formula's "shape" helps with that.
Wow this was incredible! Thank you!
great tutorial!
Good explanation thank you
Good Stuff!
great video.
Great video! Thank you! As you mentioned in your introduction, I realized that I have been using SDF . @lemonvlady
Thanks a lot Peter, really useful!
Thx. 2d and not as shader is very good as an introduction. Well done !👍
Thanks Piter,great introduction to sdfs
Best introduction to SDF I've seen! Congrats Piter
Perfect, just what I needed.
A really well made video! Thank you!
Really? I couldn't stand the constant "and uuuhmm yeah uuuhhmmm".
Love watching SDFs in realtime!
this has been a really great explanation so far, thank you