Week 6: March 4: Generative Patterns + Conditionals + Time

Itinerary – Starting at 12:10 today!

  • Review forLoop / Generative Patterns
  • Making a ball move
  • Conditionals
  • Ball Bounce
  • KeyPressed Interactions
  • Objects / Object Oriented Programming – Classes – Intro
  • Clock

Moving an Object in the Canvas

Today we’re going to focus on creating movement inside the canvas. This is how we begin to give the idea of autonomy for an object inside our screen (and is an equally good way to introduce object oriented programming (OOP)). The OOP perspective makes writing better code easier because we think of objects as we would encounter them in the real world.

Moving an ellipse. Click on the canvas to reset.

Moving a ball + speed. Click on the canvas to reset.

Conditionals

Conditions are like questions. They allow a program to decide to take one action if the answer to a question is true or to do another action if the answer to the question is false. The questions asked within a program are always logical or relational statements. For example, if the variable ‘i’ is less than 50, fill with blue.

Relational Operators

These are necessary for creating a condition that is either true or false.

!= (inequality)
< (less than)
<= (less than or equal to)
== (equality)
> (greater than)
>= (greater than or equal to)

Logical Operators

Sometimes two conditions will need to be true, other times it can be one or the other. These will be placed inside the conditional statement.

! (logical NOT)
&& (logical AND)
|| (logical OR)

An if statement is always structured like this:

if(condition){
      do something;
    }

Or, you can have an else statement, creating two options for the switch in logic:

if(condition){
      do something;
    } else{
     do something else;
    }

Or, you can have multiple cases, such as checking if an object has touched a side of a canvas or not:

if(condition){
      do something;
    } else if(condition) {
     do something else;
    } else{
    do something other than the earlier things;
    }

This example restarts the value of the x position of the ellipse back to zero after the ellipse goes past the edge of the canvas, the edge here is stored as a variable called width.
Since the x position is stored as a variable, we can use that to see exactly where are shape is on the canvas.

//check to see if x has gone past the right edge - the width
if (xPos > width) {

//if it has, set x to 0;
xPos = 0
} else {

//if it hasn't, keep updating x's position (moving x)
xPos = xPos + acc;
}

This is the example in situ: Bouncing Restart using if Statement

Also if statement example

map()

One of the best functions to know how to use is the map function. This allows you to take one parameter, and reset it to meet another. One of the places we have seen a need for this is when we use the position of the mouse to change the background color of a canvas. Since the canvas width changes dynamically, and is larger than 255 (remember 255 is the limit of a color), we need to remap the mouse position to only go between 0 and 255. The map function allows us to do this. One note – you should declare a variable to equal what you are remapping. For example, using the above situation:

let newCol = map(mouseX, 0, width, 0, 255);

What this is saying is:

new Variable = map(value, old starting min, old stopping max, new starting min, new stopping max);

Let’s look at an example:

Without Map function

Notice that the background stops changing after about halfway across the canvas.

With Map function

See the difference? The background changes based on the whole width because of the mapping function

This comes in real handy inside lerpColor()

See it here!

Additionally, using the value of sine, which rotates between a value of -1 to 1, we can get a smooth breathing motion or change in values using map

This example uses sin to change the background color automatically

To see what a sine wave curve looks like – warning, epic music!

 

Bouncing Ball

We’re now going to use conditionals to help change the direction of the ball to give it a bit more physics and the actual sensation of bouncing.

Bouncing Ball in X Direction

 

Bouncing Ball Example

Ball changing the environment

Key Pressed Interactions

So far we’ve been using either conditionals or the mouse to create interactions, but we also have the keyboard and its keys available for us to use!

keyIsPressed();

The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed.

key

The system variable key always contains the value of the most recent key on the keyboard that was typed.

keyCode

The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.

Example from p5.js

Ball Change Diameter – click on canvas and press up or down arrows to change the Diameter

Ball Self Move – Use Arrows to move the ball

Object Oriented Programming

In JavaScript, we’ll be using classes to help construct objects that contain both data and functions. This will allow us to embed unique properties.

class Ball {
  
  constructor(x, y) {
    this.x = x;
    this.y = y;
   }
  
  move() {
    this.x = this.x + random(-5, 5);
    this.y = this.y + random(-5, 5);
   }
  
  display() {
    noFill();
    stroke(255);
    strokeWeight(5);
    ellipse(this.x, this.y, 50);
   }

 }

 

Ball Class using a constructor

Ball Class Colorful Drag – Click and drag

This page is a great resource from Dan Shiffman – and above example inspired by his work.

Clock

Image result for alternative clocks

We can use built in variables inside p5.js to control shapes, positions, and objects. Some of the easiest and most interesting ones to use are those for time. These include:

second()

minute()

hour()

For homework, I want to you to use these three variables to create a clock inside a p5.js sketch. Think about color harmony, maybe you would want to use lerpColor() to get a gradient. You will want to use map() to be able to resize or reconfigure your elements to fit to the canvas or whatever setting you want.  Feel free to also use text! You can also consider interaction of the mouse or keys.

Make the canvas set to windowWidth and windowHeight and when you are complete, download the files and include them inside your portfolio. In the Current Projects page, create a link to this sketch and title it Clock.

Clock example

Homework

  • Post 6 images to Are.na about the idea of 3 about Time  and 3 about Organisms
  • Complete Clock assignment
  • Make ongoing updates/edits to portfolio site
  • Start thinking about your organism behaviors