Skip to content

Latest commit

 

History

History
482 lines (339 loc) · 20.3 KB

02_animation.md

File metadata and controls

482 lines (339 loc) · 20.3 KB
Raw

2. Animation: Variables

book - Getting Started with p5.js

tutorials: Basics

tutorials: Transformations

More code examples

Going Further

2. Recap, Explore and Experiment - Animation: Variables

Let's recap, explore, and experiment with the concepts introduced in this session.

2.0 Increment by one

Ways to add one to a variable x:

  • x = x + 1;
  • x += 1;
  • x++;

Ex 2.1 mouseX and mouseY

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.

mouseDragged

sketch - 2.1.2 mouseX,mouseY

To have drawing happen only when the mouse button is pressed and moved, we define function mouseDragged.

function mouseDragged() {
  circle(mouseX, mouseY, 24);
}

arithmetic on mouseX

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);
}

> Try

  • adding other shapes to draw when the mouse is dragged.

> Try

  • as one shape is drawn, another shape is drawn to mirror it

sketch - 2.1.2 mouseX mirror

> Try

  • 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

Ex 2.2 Variables circleX

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

sketch - 2.2.1 circleX width

  • 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;

> Try

  • add another shape that moves top to bottom

sketch - 2.2.1 shape1 shape2

> Try

sketch - 2.2.3 circleR growing

> Try

sketch - 2.2.4 circleX width ui

> Try

  • 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

Ex 2.3 Incrementing for animation

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.

> Try

  • create a new variable that controls the speed of the animation

sketch - 2.3.1 shape1 speed

  • 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]);

> Try

  • remix one of the circleX sketches to change the shape to a random color when the canvas is clicked.

sketch - 2.4.1 random shape1

> Try

  • use alpha color and remove background function call from draw function so drawings build up.

sketch - 2.4.2 shape1 alpha

> Try

  • 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

Ex 2.5 patterns

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.

function draw_shape1

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);
}

parameter variables

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.

> Try

  • adding draw_shape1 calls to fill the canvas with the shape.

  • modifying the shapes drawn to get a new pattern.

Saving the canvas

  • 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

> Try

  • add the save button to one of your animated sketches and save a special moment.

Ex 2.6 rotate

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.

sketch - 2.6.1 rotate mouseX

  • A variable is used for the angle. Try different values for the angle.

sketch - 2.6.2 rotate a_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

> Try

  • Creating your own sketches to expore the behavior of other drawing functions

Getting Started with p5.js book sketches

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 futher

  • 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