On the second day of the code camp, the objectives are to delve into key concepts and skills related to programming and coding. Participants will first gain an understanding of the special functions setup() and draw() and their roles in coding. Additionally, they will explore how the sequence of code execution influences program output. The day’s curriculum also covers fundamental JavaScript syntax, highlighting the distinctions between JavaScript and the P5.js library. Participants will grasp the concept of variables and functions, essential building blocks of programming, and learn how to manipulate colors effectively using functions such as fill(), stroke(), and strokeWeight() to enhance their coding capabilities.
By the end of this session, students should be able to draw a smiley shape on the canvas. They should also be able to upload an image and position it on the canvas using the mouseX and mouseY properties.
Objectives:
- Understand what the special function setup() and draw() do.
- Understand how to use the P5.js Reference
- Understand how sequence in the code affects the output.
- Understand basic Javascript syntax.
- Know the difference between Javascript and P5.js
- Understand what a variable is.
- Understand what a function is.
- Be able to draw using the circle() method.
- Know how to use color using fill(), stroke(), and strokeWeight()
- Be able to adapt these to other drawing shapes.
Agenda:
- Let’s see some of your work (volunteers).
- Concept “quiz”
- Draw a simile
- Circle
- Colors
- Arc
- Radians
- Functions
- Copy a Sketch
- How to use an image
- Assets
- Sketch Files
- preload
- Daily Project: Create a program that draws a variety of faces.
- Consider how the program could change face properties
- Consider what control you give to the user (can they make changes?)
- Can you make multiple faces?
- Can you control where the faces are drawn?
Assets
These assets are released to the public domain:
How to draw simple shapes in p5.js
- 0:00 Error messages
- 0:20 The Console
- 1:15 Case Sensitivity
- 2:09 Drawing a Rectangle: rect()
- 2:22 p5.js Reference
- 3:28 Rectangle Parameters
- 4:32 Drawing Coordinates
- 6:40 rectMode()
- 8:24 Color Settings
- 8:47 fill(), stroke(), & strokeWeight()
- 9:54 Tidy Code
- 10:25 Getting mouse locations: mouseX, mouseY
- 11:28 Draw order – Display one shape on top of another
Here is the code used in this video: https://editor.p5js.org/TigerCodeCamp…
