​

const molecules = [];

var   AMT_MOLECULES = 1000

​

// idfk im doing something random

var MIN_PH = 0

var MAX_PH = 14

var MIN_CHARGE = 2

var MAX_CHARGE = 12

var MIN_WEIGHT = 1

var MAX_WEIGHT = 10000000

var MARG = 50; // THIS MAKES NO SENSE BTW.

​

var wobble;

var gel;

function setup() {

  canv = createCanvas(400, 400);

  canv.parent('canvas-holder')

  gel = createGraphics(width,height)

  noStroke();

  wobble = createSlider(0, 2, 1, 1);

  wobble.parent('canvas-holder')

  for (var i = 0 ; i < AMT_MOLECULES ; i++){

    const charge = random(MIN_CHARGE, MAX_CHARGE)

    const weight = random(MIN_WEIGHT, MAX_WEIGHT)

    molecules.push({

      charge : charge, // between 0 and 14 ph

      // pHs of less than 7 indicate acidity, whereas a pH of greater than 7 indicates a base

      weight : weight,

      pos : createVector(20, 20),

      vel : createVector(0,0),

      sorted: false,

      target: createVector(

                  map(charge, MIN_CHARGE, MAX_CHARGE, width-MARG, MARG),

                  map(weight, MIN_WEIGHT, MAX_WEIGHT, height-MARG, MARG)  

              ),

      col : color(random(0,255), 

                  map(weight, MIN_WEIGHT, MAX_WEIGHT, 50, 300),

                  map(charge, MIN_CHARGE, MAX_CHARGE, 50, 500),

                  random(55,200)), // this could be an idication of depth or amt of molecules of this type.

      size : map(weight, MIN_WEIGHT, MAX_WEIGHT, 5, 35)

    })

  }

  drawPHscale() // to gel canvas

}

​

​

​

drawPHscale = function(){

  gel.push()

  for (var x = 0; x < width; x++){

    gel.stroke( 

      (x > (4/10)*width && x < (6/10)*width) ? 0 : map(x, 0, width, 40, 255) ,

      (x > (4/10)*width && x < (6/10)*width) ? abs(sin(map(x, (width/4), (6/10)*width, 0, 1)))*500 : 0,

      (x > (4/10)*width && x < (6/10)*width) ? 0 : map(x, 0, width, 255, 40) 

    )

    gel.line(x,0, x, 20)

  }

  gel.pop()

  gel.push()

  gel.text(0, width-20, 13)

  gel.text(7, width/2, 13)

  gel.fill('white')

  gel.text(14, 5, 13)

  gel.pop()

}

​

dt = 0.005;

t = 0;

​

function draw() {

  background(220);

  push()

  for (const m of molecules){

    m.vel.add(p5.Vector.sub(m.target, m.pos).limit(0.01)).limit(min(1, m.pos.dist(m.target)+wobble.value()))

    if (!m.sorted && m.target.x-m.pos.x > 5) {m.vel.y=0} 

    else if(!m.sorted) {m.sorted=true; m.vel.setMag(0)}

​

    m.pos.add(m.vel)

    fill(m.col)

    circle(m.pos.x, m.pos.y, m.size)

  }

  pop()

  image(gel,0,0)

  push();

  stroke(0)

  text('wobble', 10, height-10)

  pop()

}