- Chapter 4 Variables through Ex. 4.5
- Chapter 8 Motion through Ex. 8.9
- Going further: Chapter 6 Transformations
- Going further: Chapter 8 Motion 8.10-8.15 (More complex motion)
- Getting Started with p5.js book
- Ebook (free with NYU Library login)
- git source code
- recommendation: read chapters before watching videos. play with the sketches discussed in the chapters as you read.
-
setup()
,draw()
, and other events:mousePressed()
, etc. -
Built-in variables
-
User defined variables
-
Incrementing variables
- video 2.3: Incrementation Operations (~5 min)
-
The random() function
-
The map() function
-
video 9.1: translate (~ 22min)
-
video 9.2: scale (~ 9 min)
-
video 9.3: More on transformations (~ 9 min)
-
Clock example
- sketch - clock
- video : Clock coding challenge (~21 min)
-
Tutorial article: Recode Catalog by John Whitney
-
Rainbow Paintbrush in p5.js by Kelly Lougheed
Let's recap, explore, and experiment with the concepts introduced in this session.
Ways to add one to a variable x
:
x = x + 1;
x += 1;
x++;
sketch - p5js Code! - 2.1 - mouseX,mouseY Open these sketch in a separate window so that you can play it and read this page at the same time.
This sketch from the video uses the p5js variables mouseX
and mouseY
to draw circles on the canvas. Code in the function mousePressed
causes the canvas to be black whenever mouse is pressed anywhere on the page. A circle is drawn when the mouse moves over the canvas.
function draw() {
noStroke();
fill(255, 50);
circle(mouseX, mouseY, 24);
}
function mousePressed() {
background(0);
}
Let's re-mix this sketch and spice it up a little using basic arithmatic.
To have drawing happen only when the mouse button is pressed and moved, we define function mouseDragged.
function mouseDragged() {
circle(mouseX, mouseY, 24);
}
sketch - 2.1.2 mouseX,mouseY arith Two circles are drawn when the mouse moves in this sketch.
We can draw multiple shapes based on the mouse location using some basic arithmetic.
function mouseDragged() {
circle(mouseX-25, mouseY, 24);
circle(mouseX+25, mouseY, 24);
}
- adding other shapes to draw when the mouse is dragged.
- as one shape is drawn, another shape is drawn to mirror it
- Add ui elements to control color and give feedback about mouse location and canvas color. Borrow code from previous session.
sketch - 2.1.4 mouseX mirror ui
sketch - make your own variable
In this sketch the variable circleX is used to control the location of the circle. The circle will move to the right indefinitely. We'll use the math operator remainder to have the circle jump back to the left after it has passed the right edge of the canvas.
The remainder operator will give the remainder when a number (x) is divided by another (n). The net effect is that one value can be use to limit another value. Some examples:
1 % 3 // result is 1, 1 divided by 3 is 0, remainder 1
4 % 3 // result is 1, 4 divided by 3 is 1, remainder 1
5 % 3 // result is 2, 5 divided by 3 is 1, remainder 2
x % n // result is always between 0 and n-1
- variable circleX is incremented and limited to the range 0 ... width
- when the value circleX + 1 equals width the result will be clipped to 0
circleX = (circleX + 1) % width;
- add another shape that moves top to bottom
- re-mix sketch - growing circle use the remainder operator to limit the circle growth
sketch - 2.2.3 circleR growing
- remix sketch - 2.2.1 variable... with buttons to change the diameter of the circle
sketch - 2.2.4 circleX width ui
-
disable background drawing and play with alpha colors
-
add buttons to change colors
-
add button for random color
sketch - sketch - 2.2.5 variable circleX rgb
These examples use this coding pattern to create animation: A variable, circleX, is updated by incrementing its value. There is an illusion of motion as the shape is drawn one pixel to the right each time the function 'draw' is called.
circleX = (circleX + 1) % width;
We could increase the apparent speed of this animation by adding a value greater than 1:
circleX = (circleX + 2) % width;
By increasing the value of the increment, the speed of the shape across the canvas increases.
- create a new variable that controls the speed of the animation
- create a second shape that animates across the screen at a different speed
sketch - 2.3.2 shape1 shape2 speed
Ex 2.4 function random()
The random function is a versatile function that can add variety to our sketches. We've seen it used to produce a random number with in a range:
// x will be a random number between width/2 and width
// ie. the right half of the canvas
let x = random(width/2,width);
We can also get a less random selection by using an array
of values. An array is a series of values enclosed in square brackets. In future session we'll get deeper into creating and modifing arrays. For now we'll use them as a source for values.
// x will be one of 10,20,100,200
let x = random([10,20,100,200]);
// col will be one of 'red', 'green' or 'yellow'
let col = random(['red','green','yellow']);
The array notation can also be used to specify colors with alpha values:
let cRed = [255,0,0,10]; // red,green,blue,alpha
let cGreen = [0,255,0,10];
let cYellow = [255,255,0,10];
// pick a random color value
let col = random([cRed,cGreen,cYellow]);
- remix one of the circleX sketches to change the shape to a random color when the canvas is clicked.
- use alpha color and remove
background
function call fromdraw
function so drawings build up.
- use the frameRate function to slow down the animation
- add variables to quickly experiment with alpha, change in shape1x variable, and size of circle.
sketch - 2.4.3 shape1 alpha slow
sketch - 2.5 setup pattern draw_shape1
Open the sketch, make sure the console panel below the sketch is visible,
and play the sketch. You'll see a pattern of gray circles and squares.
The draw
function is not used. All drawing is done in the setup
function so only static or non-animated pattern is created.
The canvas should look like this:
and you should see the console messages. If you don't see all of these lines, pull the top edge of the console panel up to make it bigger.
row 1
draw_shape1 x=0 y=0
draw_shape1 x=50 y=0
draw_shape1 x=100 y=0
row 2
draw_shape1 x=0 y=100
draw_shape1 x=50 y=100
setup done
What's going on?
In this sketch the function draw_shape1
draws a a circle atop a square. It is called several times from the setup
function.
The function draw_shape1
is defined in this sketch. It draws a circle and a rect. The location of the drawing will be relative to the position given to the function. By defining our own function we can easily run (or call) a series of instructions. In this case we only do two simple drawings as an illustration. To make a different static pattern, add or modify the function calls circle
or rect
.
// Draw a circle on top of square
function draw_shape1(x, y) {
console.log('draw_shape1 x=' + x + ' y=' + y)
circle(x + 0, y + 25, 50)
rect(x - 25, y + 50, 50, 50);
}
The terms x
and y
are called parameter variables
and they will take on values when the function draw_shape1
is called. The console.log
line displays the values of x
and y
to help us follow the execution of this code.
The function draw_shape1
is called several times in the setup
function:
draw_shape1(0, 0);
draw_shape1(50, 0);
...
Each time draw_shape1
is called it will have new values for x
and y.
In the first call both x
and y
will be 0, in the second call x
will be 50 and y
will be 0.
In effect the parameter variables x and y
are place holders for values that will be supplied later.
-
adding
draw_shape1
calls to fill the canvas with the shape. -
modifying the shapes drawn to get a new pattern.
- When you are experimenting and discover that you have created an interesting pattern it would be nice to easily save it. Here's an example of a button to save your canvas as a png file.
sketch - 2.5 setup pattern draw_shape1 save
- add the save button to one of your animated sketches and save a special moment.
These sketches help visualize the behavior of the rotate
function.
- As the mouse is moved horizontally the line is rotated. Extra lines are drawn to show the X-Y axis.
- A variable is used for the angle. Try different values for the angle.
- UI elements are added to display the value used for the angle.
sketch - 2.6.3 rotate ui
sketch - 2.6.4 rotate mouseDragged ui
sketch - 2.6.5 rotate mouseDragged ui map
- Creating your own sketches to expore the behavior of other drawing functions
Sketches from the Getting Started book.
You are invited to remix and combine them to further explore drawings in motion.
- Chapter 4 through Ex. 4.5
Ex_04_01 Reuse the Same Values
Ex_04_02 Change Values
Ex_04_03 Adjust the Canvas
Ex_04_04 Basic Arithmetic
Ex_04_05 Do the Same
Ex_04 Robot 2: Variables
Ex_04 Robot 2: Variable func -remix-
Ex_04 Robot 2: func jiggle -remix-
- Chapter 8 through Ex. 8.9
Ex_08_03 Move a Shape
Ex_08_04 Wrap Around
Ex_08_05 Bounce Off the Wall
Ex_08_06 Tween
Ex_08_06 Tween mouse -remix-
Ex_08_08 Draw Randomly
Ex_08_09 Move Shapes Randomly
- Going further: Chapter 6 (Transformations)
Ex_06_01 Translating Location
Ex_06_02 Multiple Translations
Ex_06_03 Corner Rotation
Ex_06_04 Center Rotation
Ex_06_05 Translation Rotation
Ex_06_06 Rotation Translation
Ex_06_07 Articulating Arm
Ex_06_08 Scaling
Ex_06_09 Strokes Consistent
Ex_06_10 Isolating Transformations
Ex_06_99 Robot 4: Translate
Ex_06_99 Robot 4: Translate func -remix-
- Going further: Chapter 8.10-8.15 (More complex motion)
Ex_08_10 Time Passes
Ex_08_11 Triggering Timed
Ex_08_12 Sine Wave Values
Ex_08_13 Sine Wave
Ex_08_14 Circular Motion
Ex_08_15 Spirals
Ex_08_99 Robot06_Motion