let logo
let bubble
async function setup() {
  logo = await loadImage('')
  createCanvas(400, 400, WEBGL)
  bubble = buildMaterialShader(() => {
    let t = uniformFloat(
      () => millis() * 0.001
    )
    
    objectInputs.begin()
    objectInputs.position.y +=
      0.05 * sin(objectInputs.position.x * 5 + t)
    objectInputs.end()
    
    pixelInputs.begin()
    let c = mix(
      normalize([
        0.5*sin(pixelInputs.normal.y * 3) + 0.5,
        0.5*sin(pixelInputs.normal.z * 4) + 0.5,
        0.5*sin(pixelInputs.normal.x * 5) + 0.5,
      ]),
      [1, 0, 1],
      0.3
    )
    let a = (1 - abs(pixelInputs.normal.z)) * 0.75
    pixelInputs.color = [c, a]
    pixelInputs.ambientMaterial = c
    pixelInputs.end()
  })
}
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()
  })
}