Exercises for p5 JS to learn coding

Learning circle, fill and ellipse API in p5 JS

These exercises are helpful when people are learning coding.

p5 JS Introduction

p5 JS editor can be accessed at link p5.js Web Editor. This is an editor where people can try functions of p5 JS and do creative coding. Creative coding is a way to write the code that draws different shapes and produces art. The functions of p5 JS help you to draw some shape or configure how to draw, so it can applied for the next draw.

When you open the p5 editor link there are two functions.

setUp

The set up function called at start once and to do setUp. By default it draws gives a 400 x 400 canvas.

draw

The draw function gets called 6o times per second. Developers can use draw API to update next iframe.

API

background

background(r,g,b)

filling the background with specific color

fill

1. The fill is a configure function that helps in subsequent commands use the fill color.

fill(r,g,b)

r, g and b are the colors of the red, green and blue that each has a range of [0–255]

circle

1. The circle API is used to draw circles at certain positions with a diameter.

circle (x,y,d)

1. x is the distance in the horizontal from left
2. y is the distance in the vertical from top
3. d is the diameter

ellipse

1. The ellipse is used to draw the ellipse at x and y position with a height and width

ellipse (x,y,w,h)

1. x is the horizontal distance from left
2. y is the vertical distance from top
3. w is the width of the ellipse
4. h is the height of the ellipse

Exercise 1

Try the background API with different combination r g b.

Try different combination of background and observe what colors each of this combination produce.

background(0, 0, 0 )

background(255, 0, 0 )

background(0, 255, 0 )

background(0, 0, 255 )

background(255, 255, 0 )

background(0, 255, 255)

background(255, 0, 255)

background(255, 255, 255)

Exercise 2

Draw a circle in with color red at position (100, 100) as shown in figure

Draw circle at 100,100 in P5 JS

Use fill API to configure the red color and circle API to draw the circle

Exercise 3

Draw a 9 x four 9 grid rectangle with circles of different colors.

Bonus Exercise: Make the code dynamic and draw circles based on variables of rows and columns

Exercise 4

Move the circles forward from (100, 100) to (300, 100). This can be done making x as variable and keeping the y constant.

Move the circle upward and down from (100, 100) to (300, 100). This can be done making y as variable and keeping the x constant.

Move the circle upward and down from (100, 100) to (300, 300). This can be done making both x and y as variables.

Now you can make the above examples move back and forth oscillating.

Bonus exercise : You can make circle bounce of all the walls to make it interesting.

Exercise 4

Draw a face using ellipsis and circle functions in the p5 JS.

Bonus exercise : Make the eyes close and open

You an explore more examples in P5 JS examples.