let logo
let bubble
async function setup() {
  logo = await loadImage('')
  createCanvas(400, 400, WEBGL)
  bubble = baseMaterialShader().modify(() => {
    let t = uniformFloat(
      () => millis() * 0.001
    )
    getObjectInputs((inputs) => {
      inputs.position.y +=
        0.05 * sin(inputs.position.x * 5 + t)
      return inputs
    })
    getPixelInputs((inputs) => {
      let c = mix(
        normalize([
          0.5*sin(inputs.normal.y * 3) + 0.5,
          0.5*sin(inputs.normal.z * 4) + 0.5,
          0.5*sin(inputs.normal.x * 5) + 0.5,
        ]),
        [1, 0, 1],
        0.3
      )
      let a = (1 - abs(inputs.normal.z)) * 0.75
      inputs.color = [c, a]
      inputs.ambientMaterial = c
      return inputs
    })
  })
}
function draw() {
  clear()
  noStroke()

  orbitControl()
  push()
  scale(
    min(width/logo.width, height/logo.height) *
    0.5
  )
  imageMode(CENTER)
  image(logo, 0, 0)
  pop()

  // Make sure the back and front faces of
  // the sphere don't occlude each other
  drawTwoSided(() => {
    push()
    shader(bubble)
    specularMaterial(255)
    shininess(100)
    ambientLight(255)
    directionalLight(
      255, 255, 255,
      -1, 1, 1
    )
    directionalLight(
      255, 255, 255,
      0.5, 0.5, -0.5
    )
    sphere(width * 0.4)
    pop()
  })
}