Skip to content

Latest commit

 

History

History
409 lines (299 loc) · 16.4 KB

03_interaction.md

File metadata and controls

409 lines (299 loc) · 16.4 KB
Raw

3. Interaction: Conditionals

book - Getting Started with p5.js

tutorials: Conditional Statements

GUI Interfaces

One way to practice working with conditionals is to try to code common interface elements in the canvas: e.g. rollover, button, slider, etc.

3. Recap, Explore and Experiment - Interaction: Conditionals

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

Ex 3.1 Variable circleX

Recall from the last session we used a variable circleX to animate a circle moving across the screen. When the circle reaches the right edge of the canvas it disappears.

  circle(circleX, 150, 64);
  circleX = circleX + 1;

sketch - make your own variable

To have the animation wrap around when the circle passes the right edge of the screen, we used the remainder arithmetic operator %.

  circleX = (circleX + 1) % width;

sketch - 2.2.1 circleX width

In this sketch we replace the remainder arithmetic operator with an if statement to get the same effect.

  circleX = circleX + 1;
  if (circleX > width) {
    circleX = 0;
  }

When the variable circleX reaches a value greater than width it is set to zero.

sketch - 3.1.1 variable circleX width if

Let's take a closer look at the if statement. It has two main parts, the test and the statements.

  if (**test**) {
    **statements**
  }

The statements is any number of statements that will be executed if the test is true. Let's take a deeper look at what tests are possible. The syntax of the comparision is a > b where a can be any expression, and b another expression. The expression is true if the value of a is greater than b. We can also test for a less than b with a < b.

We can use what we have seen with basic arithmetic to get some variations. In this script two circles move in opposite directions.

  circle1X = circle1X + 1;
  if (circle1X > width) {
    circle1X = 0;
  }
  circle2X = circle2X - 1;
  if (circle2X < 0) {
    circle2X = width;
  }

sketch - 3.1.2 variable circle1X circle2X

> Try

  • have the circles remain entirely within the canvas.

sketch - 3.1.3 variable circle1X tight

Ex 3.2 Bouncing animation

To have the circle animate horizontally back and forth on the canvas we introduce a variable, circleXspeed, that controls the direction of the animation.

sketch - 3.2 variable circleXspeed

let circleXspeed = 1;
...
  circleX = circleX + circleXspeed;
  if (circleX > width) {
    circleXspeed = -1;
  }
  if (circleX < 0) {
    circleXspeed = 1;    
  }

When circleXspeed is 1, or any value greater than zero, the circle will move to the right. When circleXspeed is -1, the circle will move to the left. It's helpful to visualize the X-axis as a number line:
... -2 -1 0 1 2 3 4 5 6 7 8 9 10 ...

Adding positive values to variable circleX will move to the right, adding negative values will move to the left.

> Try

  • add two buttons to adjust the speed of the animation

sketch - 3.2 variable circleXspeed buttons

better bounce

  • using negation and logical OR operator we can simplify the bounce script
  if (circleX > width || circleX < 0) {
    circleXspeed = - circleXspeed;    
  }

In pseudo-code (english like code) the if statement reads

if the variable circleX is greater than the width of the canvas
OR less than the value of the left edge of the canvas, do this:

change the sign of variable circleXspeed from positive to negative, or negative to positive

sketch - 3.2 variable circleXspeed OR

> Try

  • introduce a variable for the Y location and have the circle also travel top to bottom

sketch - 3.2 variable circleXspeed scan

> Try

  • add DOM elements to control one of your animated sketches.

Ex 3.4 patterns from animation

Let's re-mix the bouncing ball sketch to visualize the animation as a pattern. In this re-mix the call to function background is commented out to produced a pattern of the drawings over time.

3.4 bouncing ball pattern

> Try

  • convert an animation sketch to a pattern of drawings over time.

Ex 3.5 revealing the invisible

We have seen how we can do quick experiments by commenting out code and manually changing the initial value of variables. When we find a range of settings or sections of code that maybe interesting and we want to quickly compare, it can be convenient to create DOM elements to allow us to explore with a few clicks.

Let's explore using DOM elements to display and change variables.

> bounce ball with display

In the video tutorial a ball is animated bouncing across the canvas. In this remix, DOM elements are added to display the variables: x the location of the ball, and speed.

let x = 0;
let speed = 3;
...
function create_ui() {
  createSpan().id('ix');
  createSpan().id('ispeed');
}

function update_ui() {
  select('#ix').html('[x='+x+'] ');
  select('#ispeed').html('[speed='+speed+'] ');
}

The DOM function createSpan creates a place to show a value. The DOM function select is used to update the DOM element to show the variable with some descriptive text.

> Try

Adding buttons to change the speed or location.

> sliders and checkboxes


sketch - 3.5 circleX a_len ui

> checkBox for boolean variable

The DOM checkBox element is a simple way to set and display a boolean variable. In this example the boolean variable a_move is used to control the animation. If it is true the animation will run, otherwise there is no movement. Here are the steps to connect a variable to a checkBox DOM element.

-> 1. declare the boolean variable

The variable is declared and given an initial value.

let a_move = true;

-> 2. use the boolean variable

For example, the if statement can be used to control the action.

  if (a_move) {
    circleX = (circleX + 1) % width;
  }

-> 3. connect the variable to the checkbox

At setup use createCheckbox to create the checkBox, give it a label, give it an initial value, and give it code to run to update the variable.

  // createCheckbox([label], [value])
  createCheckbox('move', a_move).changed(function() {
    a_move = this.checked();
  });

> slider for numeric variable

A span can be used to to display a variable. A button or a slider can be used to change a variable. In this example the variable a_len determines the diameter of the circle. Let's connect this variable to DOM elements to display and change it. First we'll connect the variable to a span for display, then use buttons and a slider to change the variable.

-> 1. declare the variable

The variable is declared and given an initial value.

let a_len = 64;

-> 2. use the value

  circle(circleX, circleY, a_len);

-> 3. button to set the variable

  createButton('a_len 50').mousePressed(function() {
    a_len = 50;
  });

-> 4. connect the variable to a slider

  // createSlider(min, max, [value], [step])
  createSlider(0, 200, a_len).input(function() {
    a_len = this.value();
  });

-> 5. display the variable

  • use createSpan to create the span and give it an id.
  createSpan().id('ia_len');
  • at draw use select to update the span with the value of the variable. The text inside the single quotes is a label for the value.
  select('#ia_len').html('[a_len=' + a_len + '] ')

> Try

  • add DOM elements to display variables used in your animations

sketch - 3.5 circleX ui more

Getting Started with p5.js book sketches

Sketches from the Getting Started book.
You are invited to remix and combine them to further explore.

  • Chapter 5 Response

Ex_05_01 frameCount
Ex_05_02 setup draw
Ex_05_03 setup, Meet draw
Ex_05_04 Track the Mouse
Ex_05_05 The Dot Follows You
Ex_05_06 Draw Continuously
Ex_05_07 Set Thickness on the Fly
Ex_05_08 Easing Does It
Ex_05_09 Smooth Lines with Easing
Ex_05_10 Click the Mouse
Ex_05_11 Detect When Not Clicked
Ex_05_12 Multiple Mouse Buttons
Ex_05_13 Find the Cursor
Ex_05_14 The Bounds of a Circle
Ex_05_14 The Bounds of a Circle pulse -remix-
Ex_05_14 The Bounds of a Circle obj -remix-
Ex_05_15 The Bounds of a Rectangle
Ex_05_16 Tap a Key
Ex_05_17 Draw Some Letters
Ex_05_18 Check for Specific Keys
Ex_05_19 Move with Arrow Keys
Ex_05_20 Touch the Screen
Ex_05_21 Track the Finger
Ex_05_22 Map Values to a Range
Ex_05_23 Map with the map Function
Ex_05_99 Robot03_Response