Free Printable p5.js - shape, color, syntax

Worksheets

p5.js - shape, color, syntax

Total questions: 19

Worksheet time: 17mins

Name

Class

Date

What is a function?

A toaster

Lines of code that perform specific tasks

Input

Kale Chip

What are some shapes we can create with p5.js?

Rectangle

Circle

Dog

Triangle

What is a correct code to create a rectangle in p5.js?

rectangle(40,120);

rect(40,120,120,40);

rectangle(40,120,120,40);

rect();

How do I create a rectangle located 50px to the right and 80px down on the canvas?

rect(40,100,80,50);

rect(100,40,50,80);

rect(80,50,100,40);

rect(50,80,100,40);

What function do we use to add color to a shape in p5.js?

fill();

color();

colorize();

paint();

Which are correct ways to add color to a shape in p5.js?

fill(‘yellow’);

fill(amarillo);

fill(255,255,0);

fill(‘#ebe12d’);

Which code makes an ellipse measuring 140px width and 100px height?

ellipse(175, 130, 100, 140);

circle(175, 130, 140, 100);

ellip(175, 130, 140, 100);

ellipse(175, 130, 140, 100);

Which code sets the canvas' color to "pink" in p5.js?

background-color('pink');

background('pink');

bg('pink');

bg-color('pink');

What, if anything, is the difference between function setup () and function draw()?

Function setup is a loop and function draw only runs once.

There are no differences.

Function setup and function draw are both loops but they allow the programmer to do different things.

Function setup runs once and function draw is a loop.

10.

How many parameters are there in the code for drawing a line in p5.js?
_Hint_{: line(x1,y1,x2,y2)}

11.

Which of the following is the correct syntax for drawing a rectangle?

Rect(x,y,width,height);

rect(x,y,width,height);

rect(width, height, x, y)

rect(x1, x2, y1, y2, width, height);

12.

What is the height of the following ellipse?
ellipse(70, 120, 150, 180);

120

150

180

13.

What are the parameters in the 'createCanvas' function?

x and y

color

width and height

There are no parameters in this function.

14.

When using 'RGB' to fill the color of a shape, the 4th parameter controls the __________ of the color.

stroke

weight

transparency

size

15.

Which of the following would create a blue fill?

fill(255, 255, 255);

fill(255, 0, 0);

fill(0, 255, 0);

fill(0, 0, 255);

16.

What x and y coordinates would you use to center a circle on a canvas that is 400 by 400 pixels?

(100, 100)

(200, 200)

(300, 300)

(400, 400)

17.

What number would you change to move the y position of this rectangle?

20 (the first argument)

30 (the second argument)

100 (the third argument)

150 (the fourth argument)

18.

How do you remove the outline on a shape?

nofill()

NoFill()

dontFill()

noFill()

19.

How do we fill a shape with green?

fill("green")

fill(255, 0, 0)

fill(0, 255, 0)

fill(verde)

100 %

p5.js - shape, color, syntax

Total questions: 19

Worksheet time: 17mins

Similar Resources on Wayground