Demo of Perlin Noise Bug

​

Using noise() and two offsets to animate a bug emoji

​

*/

​

function setup() {

  createCanvas(600, 400);

  //frameRate(20)

}

​

//need a value to allow for smooth noise movement

let xOffset = 100

let yOffset = 200 //second offset needs a different seed

​

function draw() {

  background(220);

  noStroke()

  //example with Perlin noise

  // usage: map(value, start1, stop1, start2, stop2, [withinBounds])

  let noiseX = map(noise(xOffset), 0, 1, 0, width )

  let noiseY = map(noise(yOffset), 0, 1, 0, height )

  console.log(`noiseX: ${noiseX} noiseY: ${noiseY}`)

  textSize(132);

  text("🧚🏻", noiseX, noiseY, 20)

  //what is offset this doing? what if it's not there? What if you change it?

  xOffset += 0.02 

  yOffset += 0.02

}