ME TA DA AT
ME TA DA AT
  • 14
  • 6 947
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.
Переглядів: 811

Відео

GENUARY 2024 DAY 6: SCREEN SAVER
Переглядів 1149 місяців тому
Noodles noodling
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?
Hagelslag Age Cave Painting (2)
Переглядів 673 роки тому
Hagelslag Age Cave Painting (2)
Hagelslag Age Cave Painting
Переглядів 303 роки тому
Hagelslag Age Cave Painting
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/
ghost plasma
Переглядів 373 роки тому
shadows of sine waves
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 :-)

КОМЕНТАРІ

  • @Egzoset
    @Egzoset 3 місяці тому

    You know it's time to rush into the emergency room when experiencing « fractal vision » like that!

  • @DereIicious
    @DereIicious 3 місяці тому

    This is wacky 😮

  • @DanielTejnicky
    @DanielTejnicky 3 місяці тому

    so this is math hmm?

    • @NoonianSoong403
      @NoonianSoong403 3 місяці тому

      Shoutout to the homie Computation, doing the heavy lifting

    • @metadaat5791
      @metadaat5791 3 місяці тому

      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

  • @j-maffe
    @j-maffe 3 місяці тому

    There's no audio

    • @metadaat5791
      @metadaat5791 3 місяці тому

      That's right

    • @j-maffe
      @j-maffe 3 місяці тому

      @@metadaat5791 Ah sorry I thought you meant you hooked it up to a MIDI music player, not a controller 😅

    • @metadaat5791
      @metadaat5791 3 місяці тому

      @@j-maffe next time I'll add WebAudio to play muffled squeaks when I turn the knobs 🤣

  • @josvromans
    @josvromans 7 місяців тому

    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)

  • @TheCodingTrain
    @TheCodingTrain 8 місяців тому

    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)

    • @metadaat5791
      @metadaat5791 7 місяців тому

      @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 :-)

    • @TheCodingTrain
      @TheCodingTrain 7 місяців тому

      @@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!)

  • @frankbottcher4597
    @frankbottcher4597 Рік тому

    thank you for sharing. Ray march and sdfs are fun way to create worlds with formulas. Appreciated your video very much!

  • @adammirkovich429
    @adammirkovich429 Рік тому

    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)?

    • @chrismartens2276
      @chrismartens2276 Рік тому

      Yep, y is an argument to the function representing the y coordinate of the vector.

  • @AdityaSingh-vr6uj
    @AdityaSingh-vr6uj Рік тому

    the end result looks very good!

  • @jamesdalessandro802
    @jamesdalessandro802 Рік тому

    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

    • @metadaat5791
      @metadaat5791 7 місяців тому

      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.

  • @psykoj
    @psykoj Рік тому

    Wow this was incredible! Thank you!

  •  Рік тому

    great tutorial!

  • @bernhagen93
    @bernhagen93 Рік тому

    Good explanation thank you

  • @Achira
    @Achira Рік тому

    Good Stuff!

  • @gkreisman
    @gkreisman Рік тому

    great video.

  • @doravladimirova1409
    @doravladimirova1409 Рік тому

    Great video! Thank you! As you mentioned in your introduction, I realized that I have been using SDF . @lemonvlady

  • @AndreaBelloni63
    @AndreaBelloni63 Рік тому

    Thanks a lot Peter, really useful!

  • @bigpapsi
    @bigpapsi Рік тому

    Thx. 2d and not as shader is very good as an introduction. Well done !👍

  • @MuratAtimtay
    @MuratAtimtay Рік тому

    Thanks Piter,great introduction to sdfs

  • @CamilleRoux
    @CamilleRoux Рік тому

    Best introduction to SDF I've seen! Congrats Piter

  • @revdancatt
    @revdancatt Рік тому

    Perfect, just what I needed.

  • @DenisovichDev
    @DenisovichDev Рік тому

    A really well made video! Thank you!

    • @stysner4580
      @stysner4580 Рік тому

      Really? I couldn't stand the constant "and uuuhmm yeah uuuhhmmm".

  • @DaveLeCompte
    @DaveLeCompte Рік тому

    Love watching SDFs in realtime!

  • @aebrer
    @aebrer Рік тому

    this has been a really great explanation so far, thank you