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.
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)
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
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
A circle is an ellipse which height and width are equal
ellipse(250,150,200,200);
Draw an ellipse
which center is at X=250 and Y= 150
which width = 200 pixels
which height = 200 pixels
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.
triangle (250,250,240,260,260,260);
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?
line(250,260,250,390);
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);
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);
//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);
//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);
