<aside> 🕺🏻 Interactive button triggered by hands

p5.js Web Editor

Challenge 1

• change the button’s shape / appearance.
  • e.g. a rectangle that fills up.

Challenge 2

• create an image slideshow for people to browse using the HandButton object.

  • hint: to quickly generate an array of random images, use the unsplash API:

    let images = [];
    function preload() {
      for (let i=0; i<5; i++) {
        images.push(loadImage(`https://source.unsplash.com/random?sig=${floor(random(100))}`));
      }
    }
    

</aside>

<aside> 🕺🏻 Lofi Hands

p5.js Web Editor

</aside>

<aside> 🕺🏻 p5 transformations

Time-based animations

p5.js Web Editor

p5.js Web Editor

Basic p5.js animated fish:

p5.js Web Editor

Using transformations to move and interact with the fish:

p5.js Web Editor

</aside>

<aside> 🕺🏻 p5 play: generating sprites with hands

p5.js Web Editor

</aside>

<aside> 👉 Dragging stuff with hands

https://editor.p5js.org/clement.zheng/sketches/Q0y1vLRWA

</aside>

Debugging p5.js Code

HappyCoding.Generated.Debugging