you may recognize this guy from the header- actually they’re cousins.
this was some code I wrote/stole to get started in processing.js.
okay, so I clearly enjoy watching things fall down.
[processing]
// . 0 0,0
//. . . 123 -1,-1 0,-1 +1,-1
// . 4 0,-2
//. . 5 7 -1,-3 +1,-3
//. . 6 8 -1,-4 +1,-4
//
// 0-2head, 2-1armL, 2-3armR, 2-4back,
// 4-5thighL, 5-6shinL
// 4-7thighR, 7-8shinR
VerletPoint vPointA = new VerletPoint(100, 100);
VerletPoint[] vPointArr = new VerletPoint[9];
VerletStick[] vStickArr = new VerletStick[8];
int nVP = 9;
int nVS = 8;
int xDIM = 300;
int yDIM = 100;
void setup() {
background(255);
fill(255);
stroke(#568984);
size(xDIM, yDIM);
smooth();
frameRate(30);
strokeWeight(3);
vPointArr[0] = new VerletPoint(100, 100); //
vPointArr[1] = new VerletPoint(100-10, 100-10);
vPointArr[2] = new VerletPoint(100, 100-10);
vPointArr[3] = new VerletPoint(100+10, 100-10);
vPointArr[4] = new VerletPoint(100, 100-20);
vPointArr[5] = new VerletPoint(100-10, 100-30);
vPointArr[6] = new VerletPoint(100-10, 100-40);
vPointArr[7] = new VerletPoint(100+10, 100-30);
vPointArr[8] = new VerletPoint(100+10, 100-40);
vStickArr[0] = new VerletStick(vPointArr[0], vPointArr[2]);
vStickArr[1] = new VerletStick(vPointArr[2], vPointArr[1]);
vStickArr[2] = new VerletStick(vPointArr[2], vPointArr[3]);
vStickArr[3] = new VerletStick(vPointArr[2], vPointArr[4]);
vStickArr[4] = new VerletStick(vPointArr[4], vPointArr[5]);
vStickArr[5] = new VerletStick(vPointArr[5], vPointArr[6]);
vStickArr[6] = new VerletStick(vPointArr[4], vPointArr[7]);
vStickArr[7] = new VerletStick(vPointArr[7], vPointArr[8]);
}
void draw() {
if(mousePressed){
vPointArr[0].x = mouseX;
vPointArr[0].y = mouseY;
}else{
vPointA.y += 0.5;
}
vPointA.update();
vPointA.bounds(0, 0, xDIM, yDIM);
for(int p = 0; p < nVP; p++){
vPointArr[p].y += 0.5;
vPointArr[p].update();
vPointArr[p].bounds(0, 0, xDIM, yDIM);
}
background(225);
for(int s = 0; s < nVS; s++){ vStickArr[s].update(); } line(vPointArr[0].x, vPointArr[0].y, vPointArr[2].x, vPointArr[2].y); line(vPointArr[2].x, vPointArr[2].y, vPointArr[1].x, vPointArr[1].y); line(vPointArr[2].x, vPointArr[2].y, vPointArr[3].x, vPointArr[3].y); line(vPointArr[2].x, vPointArr[2].y, vPointArr[4].x, vPointArr[4].y); line(vPointArr[4].x, vPointArr[4].y, vPointArr[5].x, vPointArr[5].y); line(vPointArr[5].x, vPointArr[5].y, vPointArr[6].x, vPointArr[6].y); line(vPointArr[4].x, vPointArr[4].y, vPointArr[7].x, vPointArr[7].y); line(vPointArr[7].x, vPointArr[7].y, vPointArr[8].x, vPointArr[8].y); } class VerletStick { VerletPoint pointA, pointB; float len; VerletStick(VerletPoint _pointA, VerletPoint _pointB){ pointA = _pointA; pointB = _pointB; len = dist(pointA.x, pointA.y , pointB.x, pointB.y); } void update(){ float dst = dist(pointA.x, pointA.y , pointB.x, pointB.y); float diff = len – dst; float offsetX = (diff * (pointB.x – pointA.x) / dst) / 2; float offsetY = (diff * (pointB.y – pointA.y) / dst) / 2; pointA.x -= offsetX; pointA.y -= offsetY; pointB.x += offsetX; pointB.y += offsetY; } void render(){ line(pointA.x, pointA.y , pointB.x, pointB.y); } } class VerletPoint { float x, y, oldX, oldY; VerletPoint(float _x, float _y) { setPosition(_x, _y); } void setPosition(float _x, float _y) { x = oldX = _x; y = oldY = _y; } void update(){ float tempX = x, tempY = y; x += getVx(); y += getVy(); oldX = tempX; oldY = tempY; } void bounds(float left, float top, float right, float bottom){ x = constrain(x, left, right); y = constrain(y, top, bottom); } void setVx(float value){ oldX = x – value; } float getVx(){ return x – oldX; } void setVy(float value){ oldY = y – value; } float getVy(){ return y – oldY; } void render(){ ellipse(x, y, 10, 10); } } [/processing]
if you clicked>5 times you do too.