Playing with Perlin Noise in p5.js - generative art with lots of options, plus wave convections

You don't need to know code or download anything to play with these two programs. View in your browser. Making generative art with lots of options using a Perlin noise flow field. And, a ripple / wave making program that also creates convection. I'm modifying code from Daniel Shiffman / The Coding Train.
Perlin noise flow field with color:
editor.p5js.or...
Shiffman's Perlin noise flow field video and code:
thecodingtrain...
Shiffman's 2D water ripple video and code:
thecodingtrain...
Ripple code with rectangles added:
editor.p5js.or...
Ripple code with randomness / convection added:
editor.p5js.or...
The Coding Train YT Channel:
/ thecodingtrain
Join my Discord: / discord
Follow me on Twitter: / stevemakerspace
Music:
Funk Down (Sting) by MK2 (theme)
Delta by TrackTribe
Rhythm Changes by John Deley and the 41 Players
Saturday Groove by John Deley
Hold on a Second by John Deley and the 41 Players

[@StevesMakerspace]

Here are two more variations on the flow field. Rainbow rain: editor.p5js.org/StevesMakerspace/sketches/erSVBQnr- and one where lots of options change randomly: editor.p5js.org/StevesMakerspace/sketches/pJMo9fwPU

[@Nothing-cx4jt]

This is amazing! Excellent tutorials and insights. Learning a lot from you. So many thanks for your valuable efforts. It helps a lot.

[@StevesMakerspace]

You’re welcome and thank you!

[@CoryGassner]

The dampening * randNum * noiseNum effect is so cool. Came here for the Perlin noise flow fields, but glad I stuck around for the ripples too.

[@StevesMakerspace]

Thanks!

[@0xscoopta]

very neat

[@StevesMakerspace]

Thanks!

[@greek42069]

so i am wondering if there is a way to use the preload image function to call an image and then somehow use a grid of thos pixels the be affected by a flow field or perlin noise to distort the loaded image or even if i took an image and was able to use that ripple effect on it that would be awesome

[@StevesMakerspace]

Yes, I would think so. You can load a pixel array on an image, like if you loaded the image as img, then you can do img.loadPixels() etc., and then replace the pixels with something else - either moving the pixels around or changing their color, and then place the final image on the canvas.

[@marinatedstudio746]

hi, how would you change the colour of the 2d water ripple code? (away from black and blue?) Thanks!

[@StevesMakerspace]

It looks like the coding train link is broken. If you're referring to the water ripples convection that I modified, then look at line 55. It's currently /4 which is causing the color blue. You can play with that line and 56 and 57, like if you take out the /4 on line 55 and add /4 to line 56, you'll get purple, or add to line 57, you'll get yellow. It's not the best way to define color, but that's mostly Shiffman's code.

[@lamia361_]

hello, i would like to use this shapes and colors in my code but i don't wanna to play with it. i want able to create vectors like this but without movement so it will as picture. how could i do it?

[@StevesMakerspace]

See if this video of mine answers your question. czcams.com/video/oKwi8h_yTsY/video.html Not sure if it does. I'm working on something now that might help, but not it's not ready yet.

[@lamia361_]

@@StevesMakerspace thank you a lot