8 ms·

Creative coding, making loops with Processing

170 points by NKosmatos 4y ago

NKosmatos 4y ago
I know there are plenty of similar pages, but check out these smooth looping animations created with Processing (https://processing.org/ https://processing.org/) as well as the tutorials/FAQ from this site.
rikroots 4y ago
I clicked on the 'Latest Animations' link on the site and lost half an hour of my Saturday morning. Some excellent animations there. Thank you!
- NKosmatos 4y ago
  Yeah the same thing happened to me as well, sorry :-)
gardenhedge 4y ago
Are these all done with Processing? Love the first one on this page: https://bleuje.com/animationsite/2021_2/ https://bleuje.com/animationsite/2021_2/
- acomjean 4y ago
  They’re pretty amazing. Looks like it it’s processing (not processings JavaScript cousin p5js). There is a tutorials section where the workflow is discussed. And how to create the infinite style loops. https://bleuje.com/tutorial1/ https://bleuje.com/tutorial1/ It’s processing then exported as gif to animated gif.
lioeters 4y ago
From the FAQ: > To learn to draw stuff with code, I suggest watching The Coding Train. https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw The YouTube channel is created by Daniel Shiffman, the author of _Nature of Code: Simulating Natural Systems with Processing_. It's one of my all-time favorite books. https://natureofcode.com/ https://natureofcode.com/
infocollector 4y ago
Is there a Python library to generate such animations?
- acomjean 4y ago
  Processing is working on a python port, though it seems to lack some of the features of the other versions it seems functional. https://py.processing.org/tutorials/ https://py.processing.org/tutorials/ https://processingfoundation.org/projects https://processingfoundation.org/projects
- hx2a 4y ago
  Yes! There is py5. https://py5coding.org/ https://py5coding.org/ This version of Processing uses the amazing JPype library to connect the Processing Jars (Java) to Python 3.8+. (I am the creator of py5)
nubb 4y ago
i really want to learn to make these but the math always feels like a mountain of work to learn and i end up discouraged. i find these works so interesting and mesmerizing. really jealous of the talented artists/programmers making these.
- cinntaile 4y ago
  Don't start with the entire mountain, start with a tiny hill that produces (visual) results!
- qbasic_forever 4y ago
  Start simple and just play around. Fractals and L-systems are really satisfying and very simple, well documented places to start (but they are capable of incredible complexity and beauty). Check out implementing something like the koch snowflake or dragon curve: https://fedimser.github.io/l-systems.html https://fedimser.github.io/l-systems.html
- atoav 4y ago
  Go through this and you will learn all the math needed: https://natureofcode.com/ https://natureofcode.com/
- brudgers 4y ago
  Not being snarky. Mountains of work is what learning looks like as an adult. The bigger the mountains look, the more you will learn. If you know Python, learning another library looks like a bump in the road because you already have an adult level of proficiency that was built over a lifetime. Learning to dance ballet looks like an impassible wall to most adults, because we know that competent ballet dancing requires years of training. And forget about virtuosity. Adults tend to limit their learning to "new Python libraries." Because one thing is for sure, most of learning to dance ballet will involve sucking at dancing ballet. And probably all of it unless you are lucky. --- But, for me, there's a difference between wishing I was better at things like mathematics and wanting proficiency in things like mathematics. The difference comes from my actual interest in mathematics. My equilibrium state is quenched curiosity regarding mathematics. I learn about mathematics in proportion to my current curiosity. If I wanted to get good at making loops with Processing, I would just start trying to make loops and letting myself be bad at it. I wouldn't study mathematics. I would play.
ubavic 4y ago
For anyone that wants to try this type of coding, I would recommend just to start. Pick your favorite language and just start drawing things. You will often need some thing that you don't know, but you will learn as you go. It often feels like 'hacking' to get result. Coding train, reddit, and personal blogs are perfect starting points. Remember, like in any art, it is about process, not result. BTW: Every January is month of creative coding (https://genuary.art/ https://genuary.art/), so you can join hundreds of other artists in 'solving' daily prompts. I did last Genuary (well not all prompts), and I got some some results that I am proud of (https://github.com/ubavic/genuary2022 https://github.com/ubavic/genuary2022). That was the first time I coded in Processing.
- benj111 4y ago
  > I would recommend just to start That's good advice for most things, except perhaps free climbing or fire eating.
  - eddsh1994 4y ago
    Give a man a fire and he will be warm for the day, set a man on fire and he will be warm for the rest of his life
    - sophacles 4y ago
      GNU Terry Pratchett (c.f. http://www.gnuterrypratchett.com/ http://www.gnuterrypratchett.com/ )
jmfldn 4y ago
Wow. These animations are incredible. Inspiring! I love Processing. I actually used it to make a GUI and some data visualisation tools for my Comp Sci MSc. The bulk of the project was a Java program to do with time series analysis, but I'm not a graphics person and didn't want to learn Swing, JavaFX, HTML/JS or anything "serious". It was a joy to use.
- zubspace 4y ago
  What makes Processing useful for such visualizations? Haven't really looked at it, but the tutorial here [1] begins with rendering images and then combining them into a gif, which seems a bit awkward? [1] https://bleuje.com/tutorial1/ https://bleuje.com/tutorial1/
  - ailef 4y ago
    He's just saving the output as an extra, but when you run the sketch you can see it displayed as well. > What makes Processing useful for such visualizations? You have a bunch of useful primitives to draw stuff on screen immediately, without having to go through all the troubles that this entails with a normal programming language. It's really fun!
  - bglazer 4y ago
    Making gifs with processing is (weirdly) one of the more painful exercises in the framework. Kind of baffling, given the goals of the project. Regardless, the best thing about processing is that it makes getting the first pixels on the screen extremely easy. Like two lines of code. In normal Java that’s a highly nontrivial exercise with lots of incidental complexity and boilerplate. For creative visual work, just getting something on the screen and then iterating quickly is the key. It keeps the ideas flowing. Processing has a lot of useful primitives for drawing and animation as well, combining them into interesting patterns is very straightforward. On top of that the documentation is really well done, it’s written in a very accessible tone and it has tons of useful examples.
    - jmfldn 4y ago
gcanyon 4y ago
If anyone (like me) is wondering what/where "Processing" is: https://processing.org https://processing.org "Processing is a flexible software sketchbook and a language for learning how to code." "The Processing software has always been free and open source and has always run on Mac OS, Windows, and Linux." "The Processing community has written more than a hundred libraries for computer vision, data visualization, music composition, networking, 3D file exporting, and programming electronics."
mnsc 4y ago
Some of these actually gave me shivers. Nice work!
808nrlnd303 4y ago
This is something that is pretty much whats closest to my heart. The creative coding / visual scene. Here is a good list. https://github.com/kosmos/awesome-generative-art https://github.com/kosmos/awesome-generative-art Also… Shaders ! Is a great way to start. https://www.vimeo.com/nrlnd https://www.vimeo.com/nrlnd Thats my work. All realtime.
pengaru 4y ago
surprised to not see anyone mention https://shadertoy.com https://shadertoy.com also check out bonzomatic: https://github.com/Gargaj/Bonzomatic https://github.com/Gargaj/Bonzomatic You can find some live bonzomatic shader coding vids on youtube too, it's even done competitively at demo parties these days: https://www.youtube.com/results?search_query=bonzomatic https://www.youtube.com/results?search_query=bonzomatic
danielbln 4y ago
This works quite well with ChatGPT. I asked it for various animations, asked it to be more organic, breathing, flying, various other neat effects, then pasted it back to Processing. It super neat creating these animations with NLP.
arjonagelhout 4y ago
This is absolutely stunning! A little while ago, for a university introductory course to programming we had to use Processing for generative art. I created a little 3D island generator using P3D: https://github.com/ArjoNagelhout/3D_Island_Generator_In_Processing https://github.com/ArjoNagelhout/3D_Island_Generator_In_Proc...

170 points by NKosmatos 4y ago

I know there are plenty of similar pages, but check out these smooth looping animations created with Processing (https://processing.org/ https://processing.org/) as well as the tutorials/FAQ from this site.

rikroots 4y ago

I clicked on the 'Latest Animations' link on the site and lost half an hour of my Saturday morning. Some excellent animations there. Thank you!

NKosmatos 4y ago
Yeah the same thing happened to me as well, sorry :-)

gardenhedge 4y ago

Are these all done with Processing? Love the first one on this page: https://bleuje.com/animationsite/2021_2/ https://bleuje.com/animationsite/2021_2/

acomjean 4y ago
They’re pretty amazing. Looks like it it’s processing (not processings JavaScript cousin p5js). There is a tutorials section where the workflow is discussed. And how to create the infinite style loops. https://bleuje.com/tutorial1/ https://bleuje.com/tutorial1/ It’s processing then exported as gif to animated gif.

lioeters 4y ago

From the FAQ: > To learn to draw stuff with code, I suggest watching The Coding Train. https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw The YouTube channel is created by Daniel Shiffman, the author of _Nature of Code: Simulating Natural Systems with Processing_. It's one of my all-time favorite books. https://natureofcode.com/ https://natureofcode.com/

infocollector 4y ago

Is there a Python library to generate such animations?

acomjean 4y ago
Processing is working on a python port, though it seems to lack some of the features of the other versions it seems functional. https://py.processing.org/tutorials/ https://py.processing.org/tutorials/ https://processingfoundation.org/projects https://processingfoundation.org/projects
hx2a 4y ago
Yes! There is py5. https://py5coding.org/ https://py5coding.org/ This version of Processing uses the amazing JPype library to connect the Processing Jars (Java) to Python 3.8+. (I am the creator of py5)

nubb 4y ago

i really want to learn to make these but the math always feels like a mountain of work to learn and i end up discouraged. i find these works so interesting and mesmerizing. really jealous of the talented artists/programmers making these.

cinntaile 4y ago
Don't start with the entire mountain, start with a tiny hill that produces (visual) results!
qbasic_forever 4y ago
Start simple and just play around. Fractals and L-systems are really satisfying and very simple, well documented places to start (but they are capable of incredible complexity and beauty). Check out implementing something like the koch snowflake or dragon curve: https://fedimser.github.io/l-systems.html https://fedimser.github.io/l-systems.html
atoav 4y ago
Go through this and you will learn all the math needed: https://natureofcode.com/ https://natureofcode.com/
brudgers 4y ago
Not being snarky. Mountains of work is what learning looks like as an adult. The bigger the mountains look, the more you will learn. If you know Python, learning another library looks like a bump in the road because you already have an adult level of proficiency that was built over a lifetime. Learning to dance ballet looks like an impassible wall to most adults, because we know that competent ballet dancing requires years of training. And forget about virtuosity. Adults tend to limit their learning to "new Python libraries." Because one thing is for sure, most of learning to dance ballet will involve sucking at dancing ballet. And probably all of it unless you are lucky. --- But, for me, there's a difference between wishing I was better at things like mathematics and wanting proficiency in things like mathematics. The difference comes from my actual interest in mathematics. My equilibrium state is quenched curiosity regarding mathematics. I learn about mathematics in proportion to my current curiosity. If I wanted to get good at making loops with Processing, I would just start trying to make loops and letting myself be bad at it. I wouldn't study mathematics. I would play.

ubavic 4y ago

For anyone that wants to try this type of coding, I would recommend just to start. Pick your favorite language and just start drawing things. You will often need some thing that you don't know, but you will learn as you go. It often feels like 'hacking' to get result. Coding train, reddit, and personal blogs are perfect starting points. Remember, like in any art, it is about process, not result. BTW: Every January is month of creative coding (https://genuary.art/ https://genuary.art/), so you can join hundreds of other artists in 'solving' daily prompts. I did last Genuary (well not all prompts), and I got some some results that I am proud of (https://github.com/ubavic/genuary2022 https://github.com/ubavic/genuary2022). That was the first time I coded in Processing.

benj111 4y ago
> I would recommend just to start That's good advice for most things, except perhaps free climbing or fire eating.
- eddsh1994 4y ago
  Give a man a fire and he will be warm for the day, set a man on fire and he will be warm for the rest of his life
  - sophacles 4y ago
    GNU Terry Pratchett (c.f. http://www.gnuterrypratchett.com/ http://www.gnuterrypratchett.com/ )

jmfldn 4y ago

Wow. These animations are incredible. Inspiring! I love Processing. I actually used it to make a GUI and some data visualisation tools for my Comp Sci MSc. The bulk of the project was a Java program to do with time series analysis, but I'm not a graphics person and didn't want to learn Swing, JavaFX, HTML/JS or anything "serious". It was a joy to use.

zubspace 4y ago
What makes Processing useful for such visualizations? Haven't really looked at it, but the tutorial here [1] begins with rendering images and then combining them into a gif, which seems a bit awkward? [1] https://bleuje.com/tutorial1/ https://bleuje.com/tutorial1/
- ailef 4y ago
  He's just saving the output as an extra, but when you run the sketch you can see it displayed as well. > What makes Processing useful for such visualizations? You have a bunch of useful primitives to draw stuff on screen immediately, without having to go through all the troubles that this entails with a normal programming language. It's really fun!
- bglazer 4y ago
  Making gifs with processing is (weirdly) one of the more painful exercises in the framework. Kind of baffling, given the goals of the project. Regardless, the best thing about processing is that it makes getting the first pixels on the screen extremely easy. Like two lines of code. In normal Java that’s a highly nontrivial exercise with lots of incidental complexity and boilerplate. For creative visual work, just getting something on the screen and then iterating quickly is the key. It keeps the ideas flowing. Processing has a lot of useful primitives for drawing and animation as well, combining them into interesting patterns is very straightforward. On top of that the documentation is really well done, it’s written in a very accessible tone and it has tons of useful examples.
  - jmfldn 4y ago

gcanyon 4y ago

If anyone (like me) is wondering what/where "Processing" is: https://processing.org https://processing.org "Processing is a flexible software sketchbook and a language for learning how to code." "The Processing software has always been free and open source and has always run on Mac OS, Windows, and Linux." "The Processing community has written more than a hundred libraries for computer vision, data visualization, music composition, networking, 3D file exporting, and programming electronics."

mnsc 4y ago

Some of these actually gave me shivers. Nice work!

808nrlnd303 4y ago

This is something that is pretty much whats closest to my heart. The creative coding / visual scene. Here is a good list. https://github.com/kosmos/awesome-generative-art https://github.com/kosmos/awesome-generative-art Also… Shaders ! Is a great way to start. https://www.vimeo.com/nrlnd https://www.vimeo.com/nrlnd Thats my work. All realtime.

pengaru 4y ago

surprised to not see anyone mention https://shadertoy.com https://shadertoy.com also check out bonzomatic: https://github.com/Gargaj/Bonzomatic https://github.com/Gargaj/Bonzomatic You can find some live bonzomatic shader coding vids on youtube too, it's even done competitively at demo parties these days: https://www.youtube.com/results?search_query=bonzomatic https://www.youtube.com/results?search_query=bonzomatic

danielbln 4y ago

This works quite well with ChatGPT. I asked it for various animations, asked it to be more organic, breathing, flying, various other neat effects, then pasted it back to Processing. It super neat creating these animations with NLP.

arjonagelhout 4y ago

This is absolutely stunning! A little while ago, for a university introductory course to programming we had to use Processing for generative art. I created a little 3D island generator using P3D: https://github.com/ArjoNagelhout/3D_Island_Generator_In_Processing https://github.com/ArjoNagelhout/3D_Island_Generator_In_Proc...