Creative Coding Tutorial Series part 1

whatminjacodes [she/they] - Feb 27 '22 - - Dev Community

I wanted to learn more about Creative Coding, so I decided to do this tutorial series if anyone else is interested in learning about it too! I decided to compose all the tutorials to this blog post so they are easy to find!

What is creative coding?

Wikipedia describes creative coding like this:

Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional.

There's different tools for doing creative code but two popular ones are Processing and openFrameworks. I chose Processing for this series because it's more beginner friendly.

First steps

You should download Processing before starting the tutorials. Follow the Getting Started tutorial on their website. Basically you only need to download the software and then run it!

Processing can be used on Windows, Mac and Linux. The tutorials I made assume you have some basic knowledge about programming (what are variables and functions, how to comment and uncomment code) but I tried to make them easy to follow even for people who are not that familiar with code!

The beginner tutorials on Processing website are also good for getting started and you can go through them first to learn the basics if these seem too complex to start with!

Tutorials

Here's the first four tutorials I made about creative coding!

01 - Animated Circle of Lines using Sine

The tutorial can be found from my Github: whatminjacodes.

Tutorial takes inspiration from thedotisblack Youtube tutorial. Credit the original artist if you use the code!

Screenshots of the project

Screenshots displaying different phases of the project

How to follow the tutorial

Open the Processing project and follow the instructions in the comments of the code. Uncomment/comment the lines of code and run the software in between to see how the project changes.

02 - Printing Dots

The tutorial can be found from my Github: whatminjacodes.

Tutorial takes inspiration from FunProgramming.org.
Credit the original artist if you use the code!

Screenshots of the project

Screenshots displaying different phases of the project

How to follow the tutorial

Open the Processing project and follow the instructions in the comments of the code. Uncomment/comment the lines of code and run the software in between to see how the project changes.

03 - Random Brush Strokes using Object-Oriented Programming

The tutorial can be found from my Github: whatminjacodes.

Tutorial takes inspiration from thedotisblack Youtube.
Credit the original artist if you use the code!

Screenshots of the project

Screenshots displaying different phases of the project

How to follow the tutorial

Open the Processing project and follow the instructions in the comments of the code. Uncomment/comment the lines of code and run the software in between to see how the project changes.

04 - Generating Lines

The tutorial can be found from my Github: whatminjacodes.

Tutorial takes inspiration from Ibby EL-Serafy's blog.
Credit the original artist if you use the code!

Screenshots of the project

Screenshots displaying different phases of the project

How to follow the tutorial

Open the Processing project and follow the instructions in the comments of the code. Uncomment/comment the lines of code and run the software in between to see how the project changes.

Conclusion

This was a fun series to make! I'm only learning creative code myself and thought it would be nice to help others to get started too :) I hope you learned something new and I hope you had fun time doing (creative) coding!

Give me a follow if you want to see more tutorials! You can also follow my Instagram whatminjaplays if you are interested to see more about my days as a software developer and a gaming enthusiast!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .