Genuary 24: Circles

let prev, next

let myShader

let font

​

async function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL)

  font = await loadFont("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf")

  prev = createFramebuffer({ antialias: true, format: FLOAT, width: width * 1.2, height: height * 1.2 })

  next = createFramebuffer({ antialias: true, format: FLOAT, width: width * 1.2, height: height * 1.2 })

  // Fix for a bug in 2.0 beta 1. I've already merged a fix for this, you

  // won't need this shader in the next beta!

  myShader = baseMaterialShader().modify({})

  myShader._fragSrc = myShader._fragSrc.replace(

    'inputs.color.rgb /= inputs.color.a;',

    'if (inputs.color.a > 0.) inputs.color.rgb /= inputs.color.a;'

  )

}

​

function draw() {

  [next, prev] = [prev, next];

  background('#E74AA5')

  imageMode(CENTER)

  next.draw(() => {

    clear()

    push()

    imageShader(myShader)

    translate(

      map(noise(millis()*0.0001), 0, 1, -1, 1) * width * 0.01,

      map(noise(millis()*0.0001, 1000), 0, 1, -1, 1) * height * 0.01,

    )

    // scale(0.999)

    image(prev, 0, 0)

    pop()

    stroke(0)

    strokeWeight(2)

    fill(255)

    const dist = Math.hypot(mouseX-pmouseX, mouseY-pmouseY)

    const steps = max(1, ceil(dist / 8))

    const d = min(width, height) * (0.15 + 0.05 * sin(millis() * 0.005))

    for (let i = 0; i < steps; i++) {

      if (steps === 1) {

        circle(mouseX - width/2, mouseY - height/2, d)

      } else {

        circle(map(i, 0, steps-1, pmouseX, mouseX) - width/2, map(i, 0, steps-1, pmouseY, mouseY) - height/2, d)

      }

    }

    textFont(font)

    // textAlign(CENTER, CENTER)

    textSize(d * 0.5)

    fill(0)

    text('2.0', mouseX-width/2 - d * 0.4, mouseY-height/2 + d/4)

  })

  image(next, 0, 0)

}