Creative Coding​ Draw with processing​.

Step 1: Hello Processing!

With an online processing editor, you can start coding right away without having to download or install any software. It’s a great way to get started with programming, and you can create some amazing graphics and animations with just a few lines of code.

1. Go to the online Processing editor

Go to website

2. Use the Hello Processing editor​

Your canvas is 500 pixels large and 400 pixels high​
The (0;0) position is on the top left corner ​

Example : to draw a rectangle on the top left corner, you need to set coordinates of the rectangle at the position x=0 and y=0 (0;0)​ ​ ​ ​

3. Use the Hello Processing editor​

The prompt on the bottom left is where you will write your code​
In our example, we wrote: ​
rect(0,0,100,100); ​
You can try it out and click on the run code button ​ ​

Step 2: Let’s draw a balloon​

Here’s the algorithm we want to code: ​

Draw a large circle​
Draw a small triangle under the circle with the tip touching the circle​
Draw a line from the middle of the base of the triangle to the bottom of the page

1. “Draw a large circle”

A circle is an ellipse which height and width are equal​

We can use the ellipse function​

Let’s type: 

				
					 ellipse(250,150,200,200);

This instruction means :

Draw an ellipse
which center is at X=250 and Y= 150
which width = 200 pixels
which height = 200 pixels

2. Draw a small triangle under the circle with the tip touching the circle​

To draw a triangle we need this instruction

If the center of the circle is at position (250,150) and the radius of the circle is 100, then the tip of the triangle should be at position (250, 250)​​
​
The instructions starts like this:​
​
triangle (250,250,?,?,?,?);​​
​ The next 2 points needs to be on each side of the first point. ​
Replace the question marks with the coordinates of the 2 remaining points.​ ​

This is a solution

				
					triangle (250,250,240,260,260,260);

But it’s not the only one!​

3. Draw a line from the middle of the base of the triangle to the bottom of the page​

To draw a line, we need this instruction

The middle of the base of the triangle is (in our example) at coordinate : (250,260)​

The instruction starts like this:​
line (250,260,?,?);​
The end point needs to be at the same X position and a lower Y position.

Can you complete the instruction?

This is a solution: 

				
					line(250,260,250,390);

But it’s not the only one!​

Step 3: Code your own drawings​

Illustration of the fill function

Fill() function

This function will fill all the shapes following your instruction in the color you selected.The default color is white. 
				
					fill(92);//fills with shades of grey
ellipse(200,200,50,50);

fill(0, 128, 162);//fills with RGB colors
ellipse(150,150,50,50);

Stroke() function

This function will draw the outline of all the shapes following your instruction in the selected color. The default color is black. 
				
					stroke(92);//will draw the outline in grey
ellipse(100,100,90,90);

//will draw the outline in the selected RGB color
stroke(255, 20, 11);
ellipse(150,150,50,50);

A few more details:

  • Code executes from top to bottom. What is drawn later will draw over shapes that are already present in your canvas.
  • To remove or erase lines, you can draw over them with the same color as the background.

Try to recreate the following pictures in Processing:

Dog drawn in Processing 
				
					//draw the face
triangle(190,120,250,240,310,120);

//add the ears
triangle(340,125,295,190,295,105);
triangle(160,125,205,190,205,105);

//add the nose
ellipse(250, 248, 16, 16);

//draw the eyes
fill(0);//fill the following shapes in black
ellipse(230, 150, 12, 12);
ellipse(270, 152, 12, 12);
Ghost drawn in Processing 
				
					//draw the outline of the ghost
stroke(0); //draw the following shapes in black
ellipse(255, 150, 90, 80);
rect(210, 150, 90, 100);
triangle(210, 250, 240, 250, 225, 265);
triangle(240, 250, 270, 250, 255, 265);
triangle(270, 250, 300, 250, 285, 265);

//erase the undesired lines
stroke(255); //draw in white
line(211,150,299,150); //top line of the rectangle
line(211,250,299,250); //bottom line ot the rectangle
line(211,249,299,249); //top line of the triangles

// draw the eyes
stroke(0); //draw in black
ellipse(235, 150, 12, 12);
ellipse(275, 152, 12, 12);
go back to tutorials

Feedback Form

Great job on completing the tutorial!
We would love to hear your thoughts on how we can make it even better.