Microscope Simulator

/*

Microscope Simulator

#WCCChallenge Obscure 2023.12.3. Tân Kiàn-tiong

​

Press WSAD or Mouse to move the camera, 

use the slider to modify the focal length

​

Hello Raph and friends,

​

This week, I developed a microscope simulator that utilizes

multiple layers and the BLUR filter to create varying degrees

of blur effects. I'm thankful for the recent updates in p5.js,

which significantly enhanced the performance of the BLUR filter. 

If you downgrade to version 1.7.0, the sketch becomes extremely 

laggy, and the blurred effects don't look as good.

​

For the cells, I use the circular Bezier curve system I

had previously developed to draw them. I incorporated some 

dynamic noise to make their movements appear more natural 

and organic. I find them quite adorable; it really feels like

observing cells through a microscope.

​

I wrote some CSS to make it RWD,

this sketch is mobile friendly, you can play this on your phone

​

*/

​

// ---Configuration---

// here's some config you may want to modify :)

const creatureAmount = 50;

let creatureAverageSize = 50;

const layerAmount = 4;

// --nucleusMode can be 'dot' or 'glyph'--

const nucleusMode = "glyph" 

// const nucleusMode = "dot"

// --set the array to modify what to put in the cell--

// const glyphArray = ["♥︎"]

// const glyphArray = ["♣︎","♥︎","♦︎","♠︎"]

const glyphArray = ["☻","✈︎","♛","☸︎","☮︎","☯︎","☭"]

// const glyphArray = ["陳","建","中"]

// -------------------

​

let creatureArray = [];

let layerArray = [];

let cameraOffsetX;

let cameraOffsetY;

let cameraV;

​

let controllerX,controllerY

​

let inputElement;

​

let mainHue;

​

let texture;

​

function preload(){

  texture = loadImage('12001200noise.png')

}

​

function setup() {

  describe(`A microscope simulator base on the performance improvement of filter blur effect in p5.js 1.9.0.

            Press WSAD or Mouse to move the camera, 

            use the slider to modify the focal length`)

  if(windowWidth>600 && windowHeight>600){

    createCanvas(600, 600);

  }else{

    createCanvas(windowWidth-50,windowWidth-50)

    creatureAverageSize = windowWidth/10;

  }

  pixelDensity(0.8);

  cameraOffsetX = width/2

  cameraOffsetY = height/2

  cameraV = createVector(0,0);

  mainHue = random(360)

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

    const layer = createGraphics(width*2,height*2)

    layerArray.push(layer);

  }

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

    creatureArray.push(new Creature({

      p:createVector(random(width*2),random(height*2)),

      r:randomGaussian(creatureAverageSize,10),

      layer:floor(random(0,layerAmount))

    }))

  }

  inputElement = select("#focal-length")

}

​

function draw() {

  push()

  translate(cameraOffsetX,cameraOffsetY)

  background("#EAE4D3");

  for(let layer of layerArray){

    layer.clear()

    // layer.background('red')

  }

  for(let creature of creatureArray){

    creature.update()

    creature.draw()

  }

  // print(inputElement.value())

  for(let [i,layer] of layerArray.entries()){

    const focalLength = map(inputElement.value(),0,10,-1,layerAmount)

    const blurRatio = map(abs(i-focalLength),0,10,0,20)

    layer.filter(BLUR,blurRatio)

    push();

    imageMode(CENTER)

    scale(1)

    image(layer,0,0)

    pop();

  }

  pop()

  // 

  push()

  tint("#FFFDA50C")

  // blendMode()

  image(texture,0,0)

  pop()

  if(mouseIsPressed&&dist(mouseX,mouseY,width/2,height/2)<width/2){

    fill("#0000000F")

    noStroke()

    circle(controllerX,controllerY,100)

    const d = dist(mouseX,mouseY,controllerX,controllerY)

    const angle = atan2((mouseY-controllerY),(mouseX-controllerX))

    if(d<40){

      circle(mouseX,mouseY,20)

    }else{

      circle(controllerX+cos(angle)*40,controllerY+sin(angle)*40,20)

    }

    cameraV = createVector(cos(angle),sin(angle))

    cameraV.setMag(map(d<40?d:40,0,40,0,3))

  }else{

    cameraV.mult(0.9)

  }

  cameraOffsetX += cameraV.x

  cameraOffsetY += cameraV.y

  if(keyIsPressed){

    if(key === 'w' || key === 'W'){

      cameraOffsetY+=2

    }

    if(key === 's' || key === 'S'){

      cameraOffsetY-=2

    }

    if(key === 'a' || key === 'A'){

      cameraOffsetX+=2

    }

    if(key === 'd' || key === 'D'){

      cameraOffsetX-=2

    }

  }

  if(cameraOffsetX<0)cameraOffsetX=0

  if(cameraOffsetX>width)cameraOffsetX=width

  if(cameraOffsetY<0)cameraOffsetY=0

  if(cameraOffsetY>width)cameraOffsetY=width

}

​

function mousePressed(){

  controllerX = mouseX

  controllerY = mouseY

}