# 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.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);

noStroke();
fill(50, 100,this.col);
}

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)

}

applyDragForce(dragForce) {
let df = p5.Vector.div(dragForce, this.mass);
}

update() {

if(this.isOn) {
//		this.vel.mult(0.995);
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: