Integrate soft body dynamics
This commit is contained in:
parent
3902e212bc
commit
fcc8a14c4a
@ -24,7 +24,7 @@ var centerX;
|
|||||||
var centerY;
|
var centerY;
|
||||||
var numberOfEdges;
|
var numberOfEdges;
|
||||||
var radius;
|
var radius;
|
||||||
var angle;
|
var rotAngle;
|
||||||
|
|
||||||
function record() {
|
function record() {
|
||||||
/**
|
/**
|
||||||
@ -141,13 +141,41 @@ class GeneratedShape {
|
|||||||
**/
|
**/
|
||||||
this.synth = new p5.MonoSynth();
|
this.synth = new p5.MonoSynth();
|
||||||
|
|
||||||
this.points = [];
|
|
||||||
this.calculatePoints();
|
|
||||||
|
|
||||||
this.opacity = 0;
|
this.opacity = 0;
|
||||||
this.colour = this.chooseColour();
|
this.colour = this.chooseColour();
|
||||||
|
|
||||||
this.curveTightness = -5;
|
this.accelX = 0.0;
|
||||||
|
this.accelY = 0.0;
|
||||||
|
this.deltaX = 0.0;
|
||||||
|
this.deltaY = 0.0;
|
||||||
|
this.springing = 0.0009;
|
||||||
|
this.damping = 0.98;
|
||||||
|
this.organicConstant = 1.0;
|
||||||
|
|
||||||
|
this.startXs = [];
|
||||||
|
this.startYs = [];
|
||||||
|
this.xs = [];
|
||||||
|
this.ys = [];
|
||||||
|
this.angle = [];
|
||||||
|
this.frequency = [];
|
||||||
|
|
||||||
|
this.initialise();
|
||||||
|
}
|
||||||
|
|
||||||
|
initialise() {
|
||||||
|
/**
|
||||||
|
* Initialise all movement related arrays.
|
||||||
|
**/
|
||||||
|
for (let i = 0; i < numberOfEdges; i++) {
|
||||||
|
this.startXs[i] = 0;
|
||||||
|
this.startYs[i] = 0;
|
||||||
|
this.ys[i] = 0;
|
||||||
|
this.xs[i] = 0;
|
||||||
|
this.angle[i] = 0;
|
||||||
|
}
|
||||||
|
for (let i = 0; i < numberOfEdges; i++) {
|
||||||
|
this.frequency[i] = random(5, 12);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
collide(shapes) {
|
collide(shapes) {
|
||||||
@ -166,17 +194,9 @@ class GeneratedShape {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
move() {
|
|
||||||
/**
|
|
||||||
* Move the shape around the canvas.
|
|
||||||
**/
|
|
||||||
// TODO: implement once again
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fadein() {
|
fadein() {
|
||||||
/**
|
/**
|
||||||
* Fade intro the shape.
|
* Fade-in the shape using alpha values.
|
||||||
**/
|
**/
|
||||||
if (this.opacity < 256) {
|
if (this.opacity < 256) {
|
||||||
let currentAlpha = this.colour._getAlpha();
|
let currentAlpha = this.colour._getAlpha();
|
||||||
@ -199,56 +219,63 @@ class GeneratedShape {
|
|||||||
];
|
];
|
||||||
let index = floor(random(0, colourChoices.length));
|
let index = floor(random(0, colourChoices.length));
|
||||||
let chosenColour = colourChoices[index];
|
let chosenColour = colourChoices[index];
|
||||||
|
|
||||||
chosenColour.setAlpha(this.opacity);
|
chosenColour.setAlpha(this.opacity);
|
||||||
|
|
||||||
return chosenColour;
|
return chosenColour;
|
||||||
}
|
}
|
||||||
|
|
||||||
display() {
|
draw() {
|
||||||
/**
|
/**
|
||||||
* Show the shape on the canvas.
|
* Draw the shape vectors.
|
||||||
**/
|
**/
|
||||||
// TODO: use getSoundInfo function to influence how shape is drawn
|
if (this.opacity != 256) this.fadein();
|
||||||
if (this.opacity != 256) {
|
|
||||||
this.fadein();
|
|
||||||
}
|
|
||||||
fill(this.colour);
|
fill(this.colour);
|
||||||
this.createShape();
|
|
||||||
}
|
|
||||||
|
|
||||||
calculatePoints() {
|
for (let i = 0; i < numberOfEdges; i++) {
|
||||||
/**
|
this.startXs[i] = centerX + cos(radians(rotAngle)) * radius;
|
||||||
* Calculate the vectors of the shape.
|
this.startYs[i] = centerY + sin(radians(rotAngle)) * radius;
|
||||||
**/
|
rotAngle += 360.0 / numberOfEdges;
|
||||||
for (var i = 0; i < numberOfEdges; i++) {
|
|
||||||
var pointX = cos(angle * i) * radius + random(-77, 77);
|
|
||||||
var pointY = sin(angle * i) * radius + random(-77, 77);
|
|
||||||
var vector = createVector(pointX, pointY);
|
|
||||||
this.points.push(vector);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
createShape() {
|
|
||||||
/**
|
|
||||||
* Draw curved vectors of the shape.
|
|
||||||
**/
|
|
||||||
curveTightness(this.curveTightness);
|
|
||||||
|
|
||||||
|
curveTightness(-5);
|
||||||
beginShape();
|
beginShape();
|
||||||
|
for (let i = 0; i < numberOfEdges; i++) {
|
||||||
var lastItem = this.points.length - 1;
|
curveVertex(this.xs[i], this.ys[i]);
|
||||||
curveVertex(this.points[lastItem].x, this.points[lastItem].y);
|
}
|
||||||
|
for (let i = 0; i < numberOfEdges - 1; i++) {
|
||||||
for (var i = 0; i < this.points.length; i++) {
|
curveVertex(this.xs[i], this.ys[i]);
|
||||||
curveVertex(this.points[i].x, this.points[i].y);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var firstItem = 0;
|
|
||||||
curveVertex(this.points[firstItem].x, this.points[firstItem].y);
|
|
||||||
|
|
||||||
endShape(CLOSE);
|
endShape(CLOSE);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
move() {
|
||||||
|
/**
|
||||||
|
* Move the shape vectors.
|
||||||
|
**/
|
||||||
|
|
||||||
|
this.deltaX = mouseX - centerX;
|
||||||
|
this.deltaY = mouseY - centerY;
|
||||||
|
|
||||||
|
this.deltaX *= this.springing;
|
||||||
|
this.deltaY *= this.springing;
|
||||||
|
this.accelX += this.deltaX;
|
||||||
|
this.accelY += this.deltaY;
|
||||||
|
|
||||||
|
centerX += this.accelX;
|
||||||
|
centerY += this.accelY;
|
||||||
|
|
||||||
|
this.accelX *= this.damping;
|
||||||
|
this.accelY *= this.damping;
|
||||||
|
|
||||||
|
this.organicConstant = 1 - (abs(this.accelX) + abs(this.accelY)) * 0.1;
|
||||||
|
|
||||||
|
for (let i = 0; i < numberOfEdges; i++) {
|
||||||
|
this.xs[i] =
|
||||||
|
this.startXs[i] + sin(radians(this.angle[i])) * (this.accelX * 2);
|
||||||
|
this.ys[i] =
|
||||||
|
this.startYs[i] + sin(radians(this.angle[i])) * (this.accelY * 2);
|
||||||
|
this.angle[i] += this.frequency[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setup() {
|
function setup() {
|
||||||
@ -264,8 +291,8 @@ function setup() {
|
|||||||
centerY = windowHeight / 2;
|
centerY = windowHeight / 2;
|
||||||
|
|
||||||
numberOfEdges = 5;
|
numberOfEdges = 5;
|
||||||
angle = radians(180 / numberOfEdges);
|
radius = 45;
|
||||||
radius = random(30, 50);
|
rotAngle = -90;
|
||||||
}
|
}
|
||||||
|
|
||||||
function draw() {
|
function draw() {
|
||||||
@ -273,7 +300,6 @@ function draw() {
|
|||||||
* The p5.js draw loop.
|
* The p5.js draw loop.
|
||||||
**/
|
**/
|
||||||
background("#69D2E7");
|
background("#69D2E7");
|
||||||
translate(centerX, centerY);
|
|
||||||
blendMode(BLEND);
|
blendMode(BLEND);
|
||||||
smooth();
|
smooth();
|
||||||
noStroke();
|
noStroke();
|
||||||
@ -284,7 +310,7 @@ function draw() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
for (var shape of shapes) {
|
for (var shape of shapes) {
|
||||||
shape.display();
|
shape.draw();
|
||||||
shape.move();
|
shape.move();
|
||||||
if (shape.collide(shapes) === true) {
|
if (shape.collide(shapes) === true) {
|
||||||
shape.sound();
|
shape.sound();
|
||||||
|
Loading…
Reference in New Issue
Block a user