Creative coding –Create your first sketch now
Embark on a beginner-friendly creative coding project on Processing
Creative coding is like love at first sight. Once you lay your eyes on it, you crave to create something too. But taking the first step can be daunting. This article will help you crack a beginner-friendly interactive creative code.
I am going to share with you a few simple lines of code that my professor taught us at university. This piece of code was my confidence booster and wanted me to dig deeper into creative coding. Hope it helps you too!!
What’s our medium?
For this project, we will be using Processing. Processing is an open-source software that uses Java language. It is free to get your hands on. Click here or visit Processing.org to download.
Ok, let’s start coding!
What’s our objective?
Building an interactive sketch where when the cursor is moved on the canvas, rigid lines are drawn from a fixed point to the location of the cursor.
A program on Processing is called a sketch.
Few things to note before starting
There are two main functions in Processing –
- void setup()
- void draw()
void setup()- runs the code once when the program is run. Here we shall define the characteristics of our canvas.
void draw()- runs the code under it until the program is terminated. Here we shall define what happens on the canvas on repeat.
Under the above-mentioned functions, we’ll write our lines of code.
Simple as that!
The final output will look something like the above image. But obviously, the pattern made by you will be completely different from mine (it will differ based on your cursor movement)
Let’s get coding!
The below image shows the complete piece of code on the Processing window.
Let’s break down our code
As mentioned earlier, a piece of code is broken into two sections — void setup() and void draw(). Now we shall define our arguments (i.e., our lines of code) under them. We put curly brackets to group everything that goes under “void setup()” and “void draw()”.
Arguments under void setup()-
void setup()
{
size(800,800);
background(192,64,50);
}
For any sketch, we must define our canvas. The very basic are the size and colour of the canvas. The functions used to define size and background colour are size() and background() respectively. In the round brackets, we define the values.
We mix digital colours to assign colour value. Here we are using RGB (red, green, blue) to define the colour.
Click here to learn more about digital colours in Processing.
Arguments under void setup()-
void draw()
{
line(0,0,mouseX,mouseY);
}
In void draw(), we shall define our desired output we want on the canvas. In this case, we want a line to be drawn from a fixed point to the point at which our cursor is at. The function to draw a line is line(). Inside the brackets, we should define the starting and ending point (location) of the line.
We use the coordinate system to define the location in Processing. In this case, we want the line to start at (0,0) and end wherever the mouse is at/moved to. Therefore we define the end of the line as (mouseX, mouseY) i.e., (location x-axis, location y-axis; location of the cursor as it keeps changing every time you move your cursor).
Time to run our code
Click on the triangular button on the top left corner. Once your program starts running, run your cursor across the canvas and witness what these few lines of code can create.
Congratulations on your first sketch in Processing!
Now it’s your time to get creative. Click here to view the list of other functions you can use to make this sketch unique or even to learn about the plethora of functions available in Processing.
Learn and get inspired
If you’re an absolute beginner, I highly recommend The Coding Train (by Daniel Shiffman) on YouTube. You’ll find everything from the very basics of creative coding to interesting coding challenges.
You can find a library of codes such as this at HappyCoding.
Also, to keep you inspired, look at the OpenProcessing page where many creator’s work are on display.
Needless to say, but, you can get your dose of motivation from hashtags on social media such as #processing #creativecoding to name a few.
If you're interested, look at projects done by fellow creative coders to create something more than just art using Processing. These projects are on display on the Processing exhibition page.
Let your creative juices flow.
Happy creative coding XP
