Week02: Vector/Force

I simulated elastic forces and drag forces in this assignment.
Two formulas were used for this simulation:

Fe = k*d (Fe: elastic force, k: elastic coefficient, d: stretched distance from the center)

Fd = 1/2 * v^2 * Cd * A (Fd: drag force, v: velocity, Cd: frictional coefficient)

The sketch works as below:

  • There are  10 springs and they are standing in a circle at the beginning.
  • Users can drag a head of a spring at a time.
  • The heavier the head is, the darker.
  • Users can control the drag coefficient by dragging the slider under the canvas.
  • The bigger the drag coefficient is, the darker the plane(background)’s colour changes.

Followings are the code of this sketch:

[sketch.js]

let springs = [];
let plane;
let updatingIdx = -1;

let slider;

function setup() { 
  createCanvas(600, 600);
  
  angleMode(DEGREES);
  colorMode(HSB);
  
  let t = 36;
  for(let i=0; i<10; i++, t+=36) {
    let x = width/2 - 100*sin(t);
    let y = height/2 - 100*cos(t);
    let c = createVector(x, y);
    springs.push(new Spring(createVector(x, y), c));
  }
  
  plane = new Plane(0.001);
  
  let div = createDiv('');
  let span = createSpan('&nbsp Drag Coeffient &nbsp');
  span.style('font-family', 'Helvetica');
  span.style('color', 'grey');
  slider = createSlider(0, 100, 0);
  
}

function draw() { 
  background(240);
    
  let c = slider.value();
  c = map(c, 0, 100, 0.001, 0.1);
  plane.setCoef(c);
  
  plane.display();
  
  for(let i=0; i<springs.length; i++) {
    springs[i].display();	
    if(springs[i].isOn) {
      springs[i].update();
      springs[i].applyElasticForce();
      let df = plane.calDrag(springs[i]);
      springs[i].applyDragForce(df);
    }
  }
  
  
}

function mousePressed() {
  for(let i=0; i<springs.length; i++) {
    if(springs[i].isCatched()) {
      springs[i].isOn = false; 
      updatingIdx = i;
    }
  }
}

function mouseDragged() {
  if(updatingIdx >=0) {
    springs[updatingIdx].dragging(mouseX, mouseY);	
  }
}

function mouseReleased() {
  if(updatingIdx >=0) {
    springs[updatingIdx].isOn = true;
    updatingIdx = -1;
  }
}

 

[plane.js]

class Plane {
  
  constructor(c) {
    this.w = width;
    this.h = height;
    this.coef = c;
    this.b = map(c, 0.001, 0.1, 100, 0);
  }
  
  setCoef(c) {
    this.coef = c;
    this.b = map(c, 0.001, 0.1, 100, 0);
  }
  
  display() {
    noStroke();
    fill(37, 0, this.b);
    rect(0, 0, this.w, this.h);
  }
  
   // drag force f = 1/2 * v^2 * coef * A (let's say A=1)
  calDrag(h) {
    let spd = h.vel.mag();
    let dragMag = this.coef * spd * spd;
    
    let dragForce = h.vel.copy();
    dragForce.setMag(-1*dragMag);
    
    return dragForce;
  }
}

 

[spring.js]

class Spring {
  constructor(p, c) {
    this.pos = createVector(p.x, p.y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.center = createVector(c.x, c.y);
    
    this.rad = 30;
    this.col = random(30, 100);
    this.mass = map(this.col, 30, 100, 10, 1);
    this.isOn = true;
  }
  
  display() {
    // spring
    stroke(30);
    line(this.center.x, this.center.y, this.pos.x, this.pos.y);
    
    // spring head
    noStroke();
    fill(50, 100,this.col);
    ellipse(this.pos.x, this.pos.y, this.rad);
  }
  
  applyElasticForce() {
    
    // elastic force f= k*d (let's say k=1)
    let ef = p5.Vector.sub(this.center, this.pos);
    let ef_mag = map(ef.mag(), 0, width/2, 0, 10);
        
    ef.setMag(ef_mag);
    
    // a = f/m
    ef.div(this.mass)
    this.acc.add(ef);
    
  }
      
  applyDragForce(dragForce) {
    let df = p5.Vector.div(dragForce, this.mass);
    this.acc.add(df);
  }
    
  
  update() {
    
      if(this.isOn) {
        this.vel.add(this.acc);
//		this.vel.mult(0.995);
    this.pos.add(this.vel);
        this.acc.mult(0);
      }
    
  }
  
  
  dragging(x,y) {
    this.pos.x = x;
    this.pos.y = y;
  }
  
  
  isCatched() {
    let d = dist(mouseX, mouseY, this.pos.x, this.pos.y);
    if(d <= this.rad) {
      return true;
    } else {
      return false;
    }
  }
  
}

 

Here is the sketch:

Github: https://github.com/yeony102/noc2018/tree/master/Week02

Leave a Reply

Your email address will not be published. Required fields are marked *