exploring the beauty of algorithms with generative art - talk

You love code. You also love art. You want to merge the two wonderful worlds, but it can be hard. How can we create art with code and make writing code an art?
A screencast of a talk I gave at FOSSAsia 2016 in Singapore!
This talk is licensed under Creative Commons Attribution-ShareAlike 2.5 Generic (CC BY-SA 2.5): creativecommons.org/licenses/...
Links:
Code: git.io/vaPxQ
Slides: git.io/vaPxA
Talk abstract:
You love code. You also love art. You want to merge the two wonderful worlds, but it can be hard. How can we create art with code and make writing code an art? In comes generative art! Generative art is art created by an independent, non-human system, for example, art generated by algorithms. Remember screensavers from the 90s? Yeah, something along those lines. You'll learn how to create art in the browser with Processing.js. I'll demo the basics of animation and we'll explore how algorithmic and mathematical concepts such as recursion, tiling, and geometry can result in unexpectedly beautiful visuals.
About the speaker:
Sher Minn Chong is a front-end web engineer. Equal parts programmer and visual artist, she is enjoys the combination of both worlds, especially for the web. Her background spans rapid development at startups, coding education, and never graduated from Recurse Center. She is currently excited about creative coding, JavaScript technologies, and computer vision.

[@thedotisblack]

I totally agree with your message: "Simple algorithms create beautiful art." Great tutorial video!

[@renbotha]

I have been subconsciously looking for exactly this video for a very long time. Thank you!

[@ultraviolet.catastrophe]

I have been looking for this video forever. Wow, you are perfect

[@caseywillis7353]

Thank you SO much for sharing this video. It is truly inspiring!

[@thaer12345]

love this. this is one of the funnest and coolest things about programming.

[@freeelectron8261]

Nice talk Sher Minn. I did a bit of noodling in Processing (both java and JS variants) a while back - you have rekindled my interest. I loved you snowflake tessellations - very cool!

[@alimrahardian109]

Thank you for showing this, i feels like finding a goal that i don't know exist or possible. This really help me directing my action course.

[@Chaaaaaaaalie]

Looks great! Thanks for sharing :)

[@user-dj8gt6ik7c]

Girl. I love your spirit! Thanks for the wonderful video.

[@fatihtaskin1594]

Sher, This is incredibly helpful and insightful. Thanks for sharing!

[@WillYouVid]

I really wish you could keep creating content! Especially about Processing3 I like your clarity!

[@itsvollx9684]

omg you're so good!

[@t1673lai]

Be confident! Your talk is Impressive!

[@yopp1234]

What a nice video

[@tardisblue7144]

It looks like magic.

[@daanielr]

thank you for this vídeo!

[@cyancoyote7366]

Cool :D

[@minhtutranle3429]

cool!!!

[@peterosudar6653]

Great video! I am a MEd student from Ottawa and I would like to use your video to help introduce my digital learning resource to help students and educators know how to get started with generative art but more specifically creative coding/creative computing. It really summarizes precisely what it is I am trying to get across in my work.

[@blickrausch]

Great Talk!

[@JudgeFredd]

Fascinating subject

[@simpernchong]

Awesome..

[@howler_orz9340]

Thx for share it, do u have another video about how to make animation in processing ?

[@yunjoochoi7649]

Hi! Thank you for introducing awesome work! I have one questions, is it likely that those codes can be converted into OpenGL ES without too much of an effort?

[@anthrazit6262]

Hello! How can you mix Java and JavaScript code in the same file? Great video, btw! :)

[@FROST8ytes]

Greetings fellow Malaysian!

[@elfisicodeturno]

How did you create slides in HTML format like that ? That's cool!

[@Ardavan47]

WOW LOVED IT im doing a research on generative art is it possible to get in touch with you regarding it ?

[@ch3ragCS]

Thanks😊

[@olivamidnight841]

nice wich different bettwen p5 or p3 i try to install p5 and dont know how...

[@francescopannozzo]

amazing, I would to do something like this me too, I love art, I like drawing with pencils and I am an Information technology student at the university.I started to see something Processing one year ago but just a quick view becouse university exams.Great video :)

[@astarael69]

thanks! i was in the same situation too. processing is really accessible and makes it really easy to do visual things with code. have fun!

[@Esloquees]

Hello, Sher Minn, thanks for the video! can I ask you if you know more generative art courses, lessons, and insights? I will appreciate :) Cheers!

[@MrDeed44]

Can you do more videos like this one with more challenging generative pieces?

[@astarael69]

Will Lastname no plans for that now. but check out Daniel Shiffman's videos on generative art with p5js!

[@jimjajmus]

Any tips for writing this within the offline Processing 3?

[@DriesBultynck]

started with generative and processing a few weeks ago and it's such an addiction. i'm using the app now but never tried it in the browser. any tips on exporting to animated gifs or video? lots of the plugins for that don't work in processing 3

[@ShailendraPaliwal]

Use saveFrame() to save all the frames and a utility like ImageMagick to join them all to make a gif from the terminal

[@DriesBultynck]

Found it. Any ideas on how to make really big images? For canvas?

[@ShailendraPaliwal]

I think only limitation is your RAM but yes, Java is rather memory-hungry.

[@astarael69]

seconding saveFrame() and stiching them together. for making videos, an alternative is to use a screencast tool and run it while your animation is playing. (I use QuickTime for recording screencasts) you can try making your Processing canvas really large, use saveFrames()/screencast and see how that turns out. It might be slow, but could possibly work.

[@zahinshahriar007]

cool

[@ShailendraPaliwal]

Great talk! Why aren't you using p5.js?

[@astarael69]

Shailendra Paliwal thanks! only because one of my fave genart artists used Processing. I am now using p5 and prefer it.

[@virenlakum]

who is ur fav Geneart artist ?

[@munstore]

hey! why is it better p5.js? Thinking of doing a project with algorithms but I am a total amateur, which one would be more intuitive? Thanks!!

[@aaronhamilton8997]

Not really better but since p5.js just requires a web browser in order to run a visual program, it is relatively light and fast.

[@jun1408]

elo i am oso from malaysia and learning processing few month ago i wanna ask in malaysia ist any chance to find this kind of job? Or go other conutry better

[@MarinusMakesStuff]

Somehow it says: 'unexpected token: radius'. But my script is 100% identical to yours.

[@jonnowocky8179]

same issue - did you solve this?

[@MarinusMakesStuff]

@@jonnowocky8179 I can't remember if I ever did. I'll have to check when I get home..