2.5d blob test

let engine

let blobs = []

let metaballShader

let spheremap

​

function preload() {

  spheremap = loadImage('https://deckard.openprocessing.org/user67809/visual2181338/h987a85d77bacbc3b232fb87ce6fe440a/dusseldorf_bridge.jpg')

}

​

function setup() {

  createCanvas(600, 600, WEBGL)

  metaballShader = createShader(vert, frag)

  setupScene()

  blobs.push(new Blob(random(-1,1)*100, 50, 100, '#f3e17e'))

  blobs.push(new Blob(random(-1,1)*100, -150, 100, '#dd483c'))

  blobs.push(new Blob(random(-1,1)*100, -350, 50, '#4b8a5f'))

  blobs.push(new Blob(random(-1,1)*100, -550, 50, '#0d150b'))

}

​

function setupScene() {

  engine = Matter.Engine.create()

  const ground = Matter.Bodies.rectangle(0, height / 2 + 30, width, 60, {

    isStatic: true,

  })

  const wallLeft = Matter.Bodies.rectangle(-width/2 - 30, 0, 60, 3 * height, {

    isStatic: true,

  })

  const wallRight = Matter.Bodies.rectangle(width/2 + 30, 0, 60, 3 * height, {

    isStatic: true,

  })

  Matter.World.add(engine.world, [ground, wallLeft, wallRight])

}

​

function draw() {

  background('#faf8e2')

  // translate(width/2, height/2)

  for (const blob of blobs) {

    blob.update()

  }

  Matter.Engine.update(engine, 1000 / 60)

  for (const blob of blobs) {

    blob.drawBlob()

  }

}