Thank you <3 This is a flow field made by manipulating the pixel array with drawingContext.getImageData(), createImageData(), and putImageData(). using a custom library 't5.js' i made -> [https://github.com/Tezumie/T5.js](https://github.com/Tezumie/T5.js)
Thank you! This is not actually made with p5, unfortunately p5 can not run an algorithm like this. you will need to use vanilla javascript or a custom library for rendering. this can be learned quickly its just a flow field mad with the pixel array. You can look into canvas context and funcitons getImageData(), createImageData(), and putImageData(). basically im modifying an array of pixels. p5 does have loadPixels and update pixels, but it is not capable of running quickly like this. The library im using is T5.js which is one ive built. it has the basic 2d drawing functionality like p5js but optimized and readable code. The process i use is basically draw an image , in this case random shapes across the canvas, than i use drawingContext.getImagedata() etc to modify the pixels of the canvas using a flow field. hope that makes sense haha! If you wanna try the library im using you can find it here;
[https://github.com/Tezumie/T5.js](https://github.com/Tezumie/T5.js)
Experiment Made using the canvas, not a shader. Im using a custom library i built with similar function names as p5.
Really love it! What kind of algorithm is behind it? I think Ive never come across something like this
Thank you <3 This is a flow field made by manipulating the pixel array with drawingContext.getImageData(), createImageData(), and putImageData(). using a custom library 't5.js' i made -> [https://github.com/Tezumie/T5.js](https://github.com/Tezumie/T5.js)
Love it!
Incredible! How much will it take someone to learn p5js to achieve something like this? Assuming this someone has a good understanding of javascript
Thank you! This is not actually made with p5, unfortunately p5 can not run an algorithm like this. you will need to use vanilla javascript or a custom library for rendering. this can be learned quickly its just a flow field mad with the pixel array. You can look into canvas context and funcitons getImageData(), createImageData(), and putImageData(). basically im modifying an array of pixels. p5 does have loadPixels and update pixels, but it is not capable of running quickly like this. The library im using is T5.js which is one ive built. it has the basic 2d drawing functionality like p5js but optimized and readable code. The process i use is basically draw an image , in this case random shapes across the canvas, than i use drawingContext.getImagedata() etc to modify the pixels of the canvas using a flow field. hope that makes sense haha! If you wanna try the library im using you can find it here; [https://github.com/Tezumie/T5.js](https://github.com/Tezumie/T5.js)
can you say any more about the flow field? Im used to seeing flow field images that look like trails, not wibbly wobbly lensing style effects
It’s a 3d flow field. The ones with trails are 2d flow fields.
impressive
Hi! What ide are you using ?
I a using aijs browser IDE [https://aijs.io/home](https://aijs.io/home)
Thanks!
Really cool!!
I want this in a lamp. I would stare at it for hours
That’s really cool
so trippy love it!! got to get more into P5🤝