Making Generative Art | Intro to Processing

Learn how to make generative art with processing, no programming knowledge required! In this tutorial I will teach you the basics of programming, and we will make some art together.
Processing is free and can be downloaded here: processing.org/download/
Final code from this video: github.com/hapiel/intro_to_pr...
0:00 Introduction
0:35 What is processing
1:40 Functions
3:53 Variables
7:06 Built in variables and the setup + draw functions
8:56 Loops
12:44 2d grid
15:53 Random
18:49 Final project
29:10 Learn more about Processing
You can follow me online for more creative and technological content.
Twitter: / hapiel
DanielSimu.com
If you'd like to create something together, send me an email:
[e-mail]

[@Rambho009]

I've been looking for a video that explains basics of generative art with examples.... pretty much BANG ON - the way you did it!! This video is one of the ideal first steps for whoever wants to become a code generated artist...I sincerely want to THANK YOU for your efforts 🙏

[@DanielSimu]

You're very welcome!

[@Draaack]

Super cool and inspiring, Daniel. I want to jump in and make some art in Processing right now!

[@marc-antoinechoiniere1516]

Great introduction to generative art! I rarely watch 30 minutes videos but this one was definitely worth it!

[@Dapps254]

This is awesome! Subscribed immediately! So clean and clear!

[@wissanuuea-amornleot9890]

exactly, i just search about coding and art, and im glad i found your clip video which light my way to be a generative artist!

[@jonasaxel]

amazing video, really well made and informative. excited for more!

[@JeSuisNerd]

Fantastic introduction! I've been curious about Processing ever since I saw it used a decade ago for some very cool generative wallpapers. I'm finally dipping my toes in now because I think it will be my medium of choice for building mathematically-inspired laser-cut relief artworks.

[@lackeymal]

thanks so much for this ! i’ve been trying to explore Processing and this tutorial made it super easy.

[@MICHAELGATE13]

Really great work dude, so comprehensive, thank you

[@guchfun]

Thank you for the great tutorial! I like how you build up to the final result by incrementally introducing concepts one at a time.

[@DanielSimu]

Thank you!

[@timothymicah7307]

OMG I made my first generative art! I have zero coding experience but this was easy to understand and follow. Thank you for this tutorial!

[@DanielSimu]

Yay, congratulations!

[@myfunde3987]

waiting for more tutorials like this, love the way you explain

[@DanielSimu]

Thank you! I hope I find time soon :)

[@pqr590]

I made my first generative art!! Thankyou for this tutorial!! Will be staying tuned!!

[@DanielSimu]

Yay, congratulations! I hope to see the stuff you come up with some time :)

[@AncientWisdomAppliedToML]

holy shit dude, that was awesome! I was especially suprised how easy it is to change a simple structure with the controlframe at the end. Well done, thank you!!

[@DanielSimu]

I'm glad you liked it, thanks for the comment!

[@neetones]

This is terrific. Please make more!

[@eduardocampolina4522]

The best of the best, really a teacher, clear and progressive and a simple way of showing things (I'm in Brazil, thank you so much).

[@DanielSimu]

Thank you, I'm glad you like it!

[@LeoKahng]

Great informative video - thank you for sharing!

[@juleshorne8580]

Excellent teaching - thank you!

[@Robbebeest]

Toffe demonstratie, vooral met al die sliders op het laatst!

[@36nibs]

I just discovered this application and its so fun to learn

[@amanpathak2338]

Really helpful video man, thanks a tone👌🏻

[@RedHedDes]

Great tutorial. Thanks! Thought your re-takes were quite funny, glad you kept them in :P

[@DanielSimu]

Whilst editing I discovered that I messed up the second time as well, and I was so annoyed by that that I totally forgot to cut the first one out! But you're the first to comment on it, hopefully nobody else noticed ;)

[@toriberends502]

@@DanielSimu I noticed but I loved it! those moments are always great for a little giggle. Makes learning something new less intimidating

[@geoffreyslack]

Great video - used it for an introduction to Processing, very cool program

[@DanielSimu]

I'm glad you're enjoying it!

[@indiedy_ghaze0968]

Thank you so much you were the first person to teach me so I am able to get into processing thank you so MUCH!!!!!

[@DanielSimu]

So happy I could help :)

[@DannyRotten]

Great video !! Thank you.

[@zzzmzzz4466]

thank you!! hope u make more videos like this

[@lordbillaire9638]

Great content. Keep it up.

[@xegawontv6724]

SUPER GREAT TUTORIAL🔥🔥🔥🔥🔥 thank u alot broo

[@yashgarg5992]

Ending part is lovely, you are awesome :)

[@DanielSimu]

Thank you! You are awesome too!

[@atikahrostam5778]

Thank you so much for this tutorial!

[@DanielSimu]

You're very welcome!

[@siahhighashell8915]

I wish we had more videos of you coding, was able to follow you easily

[@DanielSimu]

Thank you! I'm planning to do more, but it's gonna take a while before I find the time.

[@Stufe2]

Thank you! Well explained!

[@DanielSimu]

You're welcome!

[@idpi2379]

lIke the way you explain. Thank you Dani

[@DanielSimu]

My pleasure!

[@witch-doctor]

Dude this is amazing thanks for sharing your information

[@DanielSimu]

My pleasure!

[@maxtownsley]

Good teaching style :)

[@axs203]

Thanks you Daniel that was very helpful

[@DanielSimu]

I'm glad it was! Thanks :)

[@itsnotsure]

love this intro video, very well put together and easy to follow. any plans on following up with some more in-depth concepts within processing?

[@DanielSimu]

I hope I find the time!

[@jackglacken2944]

That was doooope!

[@matto4849]

Great tutorial, honestly one of the best I've followed.

[@DanielSimu]

Thank you!

[@miroda3203]

Great video

[@flolow.4990]

Nice video :) I've been programming with Processing for 3 years and I would have loved to see this video when I started

[@DanielSimu]

Thanks Flolo!

[@Fnow_]

so cool! thank you!

[@DanielSimu]

so welcome!

[@uushk6631]

very detailed, thank you:) (although i don't think i'll code lol too complex!)

[@josehurtado1372]

really great video!

[@DanielSimu]

Thanks :)

[@chiahsiangliao2901]

help a lot ! thanks

[@noslowerdna]

Fun stuff!

[@DanielSimu]

Thanks! I'm sure there must be Processing libraries that can track objects in a webcam, it might be a very good platform to create juggling animations with!

[@YoyoBoum1]

Thank you SO MUCH!!

[@DanielSimu]

You're SO WELCOME :)

[@koboss_]

thank you so much

[@andrewperkinson8941]

Thank You!

[@DanielSimu]

You're welcome!

[@Bobo-ft8zu]

This is really good.

[@DanielSimu]

Thank you!

[@alexvaillancourt6767]

MERCI DANIEL !

[@DanielSimu]

AVEC PLAISIR! :)

[@gabrielv4902]

Dankje!

[@Guus]

Awesome thanks!

[@DanielSimu]

Glad you like it :)

[@Guus]

@@DanielSimu Are you gonna do more processing stuff?

[@DanielSimu]

@@Guus Likely so, I wish I had more time but it will happen some time!

[@Guus]

@@DanielSimu I'm gonna stay tuned for that!

[@freeelectron8261]

Just sub'ed - hope you still doing cool code in 2024!

[@DanielSimu]

Thanks! Not as much as I wish, but hopefully soon more!

[@smanzoli]

I read many places that indeed Processing it is jit compiled. But when I compare it to Python, it's always just as slow or slower. And when I jit compile Python with numba (jit), then it's like 50x slower. BTW, I do love Processing! This very simple test processing.py sketch runs in 11,4s: def adds(x): a =0 for k in range(1,x): a+= sqrt(abs((sin(k) + cos(k)))) return a start = millis() a = adds(10000000) dt = millis() - start print(a) print(dt) and this one in Python (exactly the same), runs in 5 seconds: from timeit import default_timer as timer from math import * def adds(x): a = 0 for k in range(1,x): a+= sqrt(abs((sin(k) + cos(k)))) return a start = timer() a = adds(10_000_000) dt = timer() - start print(a) print ("Tempo: %f s" % dt) and if I add the @jit decorator after importing numba, then it runs in 0,2 seconds... 50x faster than Processing. If processing is not really compiled, is there a way to jit compile it? Thank you so much, Sander Manzoli

[@DanielSimu]

I don't know how processing (or Java) is compiled, but if you need high performance there are probably better solutions for any specific task. It's not designed to do complex calculations efficiently, it's designed to make art easy.

[@laracadorna123456789]

Hi Daniel, do you have more videos on creating the slides section? I want to create that to allow other people to manually play around and export what they did using my parameters. Exports in PNG/SVG/JPG

[@YVRGraham]

Exccellent

[@gonzlocarrera9949]

Awesome! thank you for sharing! Would you happen to know how could I draw ellipses tangent to each other?

[@rogermunro]

thank you, I had a play around with this- super helpful. What is the process for outputting still images from the sketch results- for example an image file of the artwork. Is there a native export image or video function inside processing- or is code required? many thanks

[@DanielSimu]

try adding: save("filename.png"); at the end of your sketch.

[@alanraymundo]

How do you do the pencil thing to draw over you screen? Neat tool!

[@michaelffontas5587]

At 14:56, we reach number 9, not number 10 as you state. Thanks for a great video, with a very pleasant Dutch accent.

[@DanielSimu]

Thanks! Actually the script does draw 10 boxes in each column, but my canvas is too small to see it. My bad!

[@LeonardoAguiar3D]

can you share any online resource with instructions on how to get your control p5 sliders on to a separate window?

[@DanielSimu]

Good question! Open Examples > Contributed Libraries > ControlP5 > extra > ControlP5frame It took me a while to find this one too, but within the example it should hopefully become clear how to use it!

[@segevharosh2403]

Great video thank you! How can I center the grid? and How do I create a random that starts at 4 for example so I'll have control over the min size of the squares.

[@segevharosh2403]

figured out the random thing. what's the most economic way to center the grid?

[@DanielSimu]

A random that starts at 4 is easy: random(10) + 4; is between 4 and 14. The grid is the exactly same, add or subtract an amount to each coordinate to offset the grid.

[@djbbputo6605]

hey daniel. I have mac catalina and processing stop showing the sketch. Do you know what could be the problem?

[@codaq4043]

What did you use to record? With the ability to draw on screen and keyboard actions in real time

[@Paruthi.618]

control frame is cool..

[@mindmyamoto]

Thank you 🙏 brother the most clear tutorial I've ever seen on processing till now, I'm just stuck on how to get that sliders option can u tell me how to make it work i will reach you out on twitter

[@DanielSimu]

The sliders are too difficult to explain in one comment, which is why I left it out of the video too, but in the description of the vid you'll find a link to my source code which includes sliders.

[@mindmyamoto]

@@DanielSimu i found it but i have no experience in coding so where i should post that code please

[@ifoundthistoday]

yes would love to see how you created the ControlP5 frame that functioned on an existing window ... I installed like you commented below but not connected to current sketch - thx

[@DanielSimu]

Open Examples > Contributed Libraries > ControlP5 > extra > ControlP5frame It took me a while to find this one too, but within the example it should hopefully become clear how to use it!

[@DanielSimu]

And alternatively, there is now a link to the source files in the video description

[@ifoundthistoday]

@@DanielSimu thank you ... great video btw

[@spanishmuseum3692]

hey daniel super cool work! Any chnace i can see the code for your final project with the sliders?

[@DanielSimu]

I just published all the code here: github.com/hapiel/intro_to_processing

[@ghassanbeidoun1521]

hello lets presume i created an art work in processing . how can i export it into a png file

[@thehobbygremlin]

Is there a way to get rid of the blank space (margins) on the top and left by any chance? Thanks in advance!

[@DanielSimu]

Of course, just subtract from the position values. For example: rect(i * 80 - 80, i * 80 - 80, 50, 50) Or, right now I started drawing when i == 1 but it is more common perhaps to start when i == 0, then you also don't have margins.

[@thehobbygremlin]

@@DanielSimu Thank you very much! Really hope to see more content like this from you soon! Absolutely amazing!

[@Cybertruck1000]

Hi. Thanks for the tutorial. I have a home made pen plotter. This is my start of using processing. It takes quite a bit of digging about the net to get an idea how to generate art for my plotter. Could you tell me how you would go about converting this output to gcode. Thanks again

[@DanielSimu]

Hi, I think processing features PDF export, which you can convert to svg easily, and then there are loads of tools to convert svg to gcode. I personally use vpype with gcodetools for this. However, I think processing is not ideal for pen plotting paths, so I am now using vsketch which is a python library. Vsketch is very similar to processing but it is designed specifically for pen plotting. I'll soon make a video about it, hopefully this weekend even!

[@Cybertruck1000]

@@DanielSimu Hi Daniel. First of all thank you for responding and taking the time with your tutorial. I will of course look into V sketch. Looking forward to your new tutorial. I've got my A4 plotter built and I'm ready to progress further. Thanks again for your time.

[@sallaka87]

Se puede hacer esto en Python?

[@abingbabing2830]

Where is control frame? i didn't found it? Can you show me where is it?

[@DanielSimu]

you need to download the ControlP5 library

[@happybot1134]

what happened in 21:26 ?😂 your expression made me laugh out loud

[@alejsala1]

Thanks! ✨ you are awesome presenting info⭐️⭐️⭐️⭐️⭐️ installed control p5 library ...can you do A HOW TO VIDEO, please 🙏🏼?

[@DanielSimu]

Yes, it would make sense if I do that! I'll have a think on how I could make that in a way that makes sense. In the meanwhile, I encourage you to play with the many examples that come with controlp5, they'll make it quite obvious how to use it I hope!

[@alejsala1]

super fun! created what you showed!

[@mateuszkiebasa4537]

how to make the text to image ai?

[@jameswilsonmusic7749]

Is there a way to make it out put every variable as random... so every single output will be random ?

[@DanielSimu]

I don't understand what you mean

[@cortneymumphrey2266]

@@DanielSimu I think he means randomly create x amount of files. Also, after creating randomly generated files how can I save each file numerically going up i.e: Squares #1 Squares #2 etc. Great content! Im subscribing.

[@natdistime]

how can I add some sort of animation with this?

[@DanielSimu]

You will need to put everything in the 'draw' function (see 7:30) and then include some variable that is different every time the draw loop runs, for example by using : myVar = myVar + 1; Good luck

[@nazishahmad1337]

Can we create math animation like animating any math equation using processing ??

[@DanielSimu]

Sure! The only limit is your imagination!

[@negraof]

Hi. what I don't know how to program, which language is best for me to learn to make generative art?

[@DanielSimu]

Processing of course, which is why I made this video about it :)

[@negraof]

@@DanielSimu is better than p5?

[@user-ob9zo9cr4c]

love your hair, I had the same. but cutted out )

[@rahulpradeep660]

How do I export my work??? like to a gif or somthing else Please someone tell

[@DanielSimu]

Add this to the bottom of your code: save("name.png");

[@rahulpradeep660]

@@DanielSimu Thankuuu

[@guymello]

I found when I run out of elastic bands for my hair I ask the vegetable clerk at the grocery store for left over broccoli or green onion bands.

[@spiralspirit7604]

Hi love your video but only have integrated graphics, will it still work?

[@DanielSimu]

Yes, you don't need a good graphics card for this at all, processing will run on a potato if needed!

[@spiralspirit7604]

@@DanielSimu Well I now know I don't need any extra graphics, thank you but will the Potato in my skull be up to it.

[@DanielSimu]

@@spiralspirit7604 That's where this video comes in, I made it to be potato proof (if you watch it 3 times ;) )

[@Yassine-pu9ez]

What programming language are you using ??

[@DanielSimu]

Processing, which is built upon Java

[@MemeFunnyV]

Any one know how to randomly generate 100 piece series?

[@DanielSimu]

Throw all of the code from the tutorial in one big loop ('for' loop, or 'while' loop as shown in video) Then in every loop include a save() function, and make sure the save includes the loop number so you don't override your old files (so something like save("my_img" + i + ".png"); ) Good luck!

[@MemeFunnyV]

@@DanielSimu nice thank you for the advices 😍

[@adrimathlener8008]

Vond net je video en lijkt me erg leuk. Ga je nog meer videos over Processing maken? Ik ken het werk van 'The Coding Train' Deze man maakt ook mooie zaken met Processing en J5: twitter.com/Hau_kun

[@lotcha...]

Please can you do the translation arabic

[@45Hammetje]

Geef je cursus in Nederlands?

[@DanielSimu]

Het lijkt me leuk eens ergens een cursus te geven, als ik gevraagt wordt!

[@gurpchirp]

i am just cursed; i will never be able to learn how to code. my code is exactly yours and i get errors "the method rect(float, float, float) in the type PApplet not applicable for the arguments (int, int, int). it happened with javascript too. so frustrating.

[@DanielSimu]

The rect() function requires 4 arguments, it seems you've only input 3 of them! Don't give up yet, I'm sure you can learn this :)

[@gurpchirp]

@@DanielSimu omg thank you. i feel so dumb. hahaha! unbelievable. this stuff is *so* fascinating. makes me look at nature and the world/universe differently. thank you again!

[@DanielSimu]

@@gurpchirp Haha, such a contrast from your previous comment. I'm glad you're discovering this!

[@gurpchirp]

@@DanielSimu dude, i was *so mad* lol. i keep on messing up with coding, but i want to be good at it.

[@niyagentleman8143]

how do you make a java organic art in 2 lines LOL ^^

[@mad4warzone]

can you make nft with processing?

[@michapiotrowski6300]

0:10 third artwork a lil sus

[@nzrklym]

can you make a project jsut like BAYC or CryptoPunks? its it NFT on the ethereum blockchain? They have 10,000 copies each one being different, with all types of traits. they also code it. can you do a project like this? Let me know..

[@MrKenKanif]

@hashlips has some cool tuts for this : kzbin.info/www/bejne/aZSVdnmmeNeSrLs

[@Mounthuapleb5890]

I hate math...

[@DanielSimu]

Me to, but the patterns it makes are so beautiful 😭