200525 Glowing Liquid Lab - OpenProcessing

mySketch
Tube
Particle
xxxxxxxxxx
 
var colors = "fbaf00-ffd639-ffa3af-007cbe-00af54-E4572E".split("-").map(a=>"#"+a)
var pickSound, releaseSound
var notes
var tubes = []
var particles = []
​
function preload(){
  pickSound = loadSound("E4.mp3")
  releaseSound = loadSound("A4.mp3")
  notes = "A3,B3,C4,D4,E4,F4,G4,A5".split(",").map(note=>{
    return loadSound(note+".mp3")
  })
}
let overAllTexture
function setup() {
  createCanvas(800,800);
  
  
  overAllTexture=createGraphics(width,height)
  overAllTexture.loadPixels()
  // noStroke()
  for(var i=0;i<width+50;i++){
    for(var o=0;o<height+50;o++){
      overAllTexture.set(i,o,color(100,noise(i/3,o/3,i*o/50)*random([0,30,60])))
    }
  }
  overAllTexture.updatePixels()
  
  background(200);
  let ww = 100
  // for(var o=50;o<height-200;o+=ww*5){
    
    for(var i=50;i<width;i+=ww){
      let id = int((i-50)/ww)
      tubes.push(new Tube({
        p: createVector(i,height/3.5),
        size: createVector(60,400),
        id: id,
        liquidColor: colors[id%colors.length]
      }))
    }
  // }
}
​
function draw() {
  push()
    fill(0);
    rect(0,0,width,height)
​
    //decoration
​
    push()
      textSize(100)
      textStyle(BOLD)
      stroke(255,230)
      noFill()
      strokeWeight(2)
      text("LIQUID COLOR \nX'LAB β 1.5",
           50,height-150)
    pop()
​
    //grid
    stroke(255,60)
    for(var i=0;i<width;i+=50){
      line(i,0,i,height)
    }
    for(var i=0;i<height;i+=50){
      line(0,i,width,i)
    }
​
    //tube
    for(let tube of tubes){
      tube.update()
      tube.draw()
    }
    for(let particle of particles){
      particle.update()
      particle.draw()
    }
    particles = particles.filter(
      el=>el.p.y>0
    )
​
​
​
    push()
    translate(mouseX,mouseY)
    rotate(-PI/4)
    stroke(255,150)
    strokeWeight(4)
    line(0,0,100,0)
    stroke(255,250)
    strokeWeight(10)
    line(100,0,200,0)
​
    if (mTube){
      noStroke()
      drawingContext.shadowColor = mTube.liquidColor
      drawingContext.shadowBlur =30
      blendMode(SCREEN)
      fill(mTube.liquidColor)
      beginShape()
​
      for(var i=0;i<360;i+=2){
        let rr =noise(cos(i/360*PI*2)/10,sin(i/360*PI*2)/10,frameCount/50)*30
        let ang = i/360*PI*2
        vertex(rr*cos(ang),rr*sin(ang))
      }
      endShape()
​
    }
    pop()
    push()
    if (mTube){
​
​
​
      translate(mouseX,mouseY)
      fill(255)
      noStroke()
      text("Experimental number #"+ mTube.id
           +"\n"+mTube.liquidColor,30,-20)
      drawingContext.shadowColor = mTube.liquidColor
      drawingContext.shadowBlur =30
      // blendMode(SCREEN)
      // fill(mTube.liquidColor)
      // rect(0,0,5,5,3)
    }
    pop()
​
  pop()
  push()
    blendMode(MULTIPLY)
    image(overAllTexture,0,0)
  pop()
  // ellipse(mouseX, mouseY, 20, 20);
}
let mTube
function mousePressed(){
  pickSound.play()
  mTube=null
  for(let tube of tubes){
    if (tube.isInRange(mouseX,mouseY)){
      mTube = tube
      mTube.targetLiquidHeightRatio-=0.1
    }
  }
}
​
function mouseReleased(){
  releaseSound.play()
  if (mTube){
    let targetTube
    for(let tube of tubes){
      if (tube.isInRange(mouseX,mouseY)){
        targetTube = tube
      }
    }
    
    notes[mTube.id] && notes[mTube.id].play()
    
    if (targetTube){
      targetTube.targetLiquidColor = lerpColor(color( targetTube.targetLiquidColor),
                                   color(mTube.targetLiquidColor),0.5)
      
      targetTube.targetLiquidHeightRatio+=0.1
    }else{
      let p = new Particle({
        color: color(mTube.liquidColor),
        p: createVector(mouseX,mouseY),
        v: createVector(mouseX-pmouseX+random(-1,1),mouseY-pmouseY+random(-1,1)).setMag(2)
      })
      particles.push(p)
      // print("add liqid")
    }
  
    
  }
  mTube=null
  
}
​