Embedded Files
JavaScript Beginner
Welcome! Today is Tuesday, 11th of July, 2023.
Welcome! Today is Tuesday, 11th of July, 2023.
Today's Agenda
1:30 - 1:45: Log on, recap & Ice breakers
1:45 - 2:30: Rectangles, Ellipses, and Layering
2:30- 2:35: Bio Break
2:35 -2:45: Activity with Social Worker
2:45 - 3:30: Various Shapes, Stroke Weight, Fill()
3:30- 4:00: Export & Share!
How can we use shape functions to create images?
How can we use shape functions to create images?
In this learning activity students will create a visual composition using the p5 shape-drawing functions rect() and ellipse(). They will continue to build on their understanding of functions and their parameters to recreate the robot from lesson 1.
Step 1: Consult the p5 reference
Step 2: Create rectangles using the rect() function
Step 3: Create ellipses using the ellipse() function
Step 4: Understand the concept of layering to create images using multiple shape functions
Step 5: Create triangles
Step 6: Create quadrilaterals
Step 7: Create arcs
Step 8: Create shapes defined by their vertices
Step 9: Use layering to create images
Draw A Rectangle
Draw A Rectangle
p5 has many built-in functions to draw different shapes. In this example, we are drawing a rectangle.
The rect function takes four parameters: x, y, width and height. The x and y values refer to location on the canvas and the width and height refer to size.
Change the parameters
Change the parameters
Mess around a little...
Results
Results
Tips and tricks
Code
Code
To help you place shapes where you want them on the canvas, you can add the following line to your code:
text(mouseX + ", " + mouseY, 20, 20)
Results
Results
You can move your mouse to where you would like your shape to be, and write down the coordinates to use them as parameters in your function call.
Time to explore
Edit the parameters
Edit the parameters
See the changes
Results
Results
Recreate this look.
Recreate this look.
Use rect()
Draw an ellipse
Solution
Solution
The ellipse function takes four parameters: x, y, width and height. The x and y values refer to location on the canvas and the width and height refer to size.
Understand the concept of layering to create images using multiple shape functions
Recreate this look.
Recreate this look.
Layer your shapes.
Let's continue working on our robot
Challenge
Challenge
Using code, draw/improve the robot that you made on graph paper.
Well done!
Well done!
Create triangles
Stroke and fill
Change The Shade and Stroke of your Shapes
Change The Shade and Stroke of your Shapes
Mess around with the parameters
Draw Other Shapes and Navigate the p5.js Reference
Requirements:
Your sketch should include:
A canvas size of 600 pixels wide by 120 pixels high.
Light gray background.
Use the p5 reference to complete this:
Triangle using triangle() function
Quadrilateral using quad() function
Star using beginShape() function
Arc.
Possible Solution
All functions
All functions
Let's draw a house
House
House
Results
Results
You can do this without my direct guidance
Challenge
Challenge
Check out the p5.js reference to make arcs and curves.
Arcs
Draw arcs
Draw arcs
Arcs are part of ellipses (or circles).
To draw an arc, we need to specify the start angle and end angle of the portion of the ellipse that we want to draw..
In p5js, angles are specified not in degrees but a unit called RADIANS. Angles are also measured in the CLOCKWISE direction.
Want to us degrees instead of PI?
angleMode()
angleMode()
angleMode(DEGREES);
CHALLENGE
Try recreate this
Try recreate this
Are you having fun?
Well done! We see you!
Well done! We see you!
Page updated
Report abuse