🤖 Motion

Do Now

Create a sketch with an emoji that bounces off the edges of the screen.

Hint: How do we make text in p5? How did you make a shape “bounce” off the edge of the screen?

Path around the edge

Very soon, we’re going to build an interactive game in p5, which will require us to be very good at using conditionals.

Now, instead of reversing direction when something hits the edge, we’re going to make something follow a path around the edges of the screen.

OM DOM DOM

We can use p5 to add familiar HTML elements to our sketches.

Try this out:

var x
var y
var speed
var slider;

function setup() {
  createCanvas(windowWidth, windowHeight)
  x = windowWidth/2
  y = 30
  speed = 3
    // create a slider we can drag, from -30 to 30 and starting at 0
  slider = createSlider(-30, 30, 0);
  // set the position of the slider on the screen
  slider.position(windowWidth / 2-90, 90);
  // set the size of the slider
  slider.style('width', '180px');
}

function draw() {
  // We need to make a variable for the slider's value...
  var speed = slider.value();
  background('white')
  textSize(32)
  text("🤖", x, y)
  // ... so that we can move the robot
  x = x + speed
}

Now, add conditionals so that the robot (or emoji of your choice) follows a path around the screen, like this:

Checklist