Inkblots with p5.js

•

Inkblots with p5.js

...

drawVertices(yScaleFactor) {
const noiseMagnitude = this.noiseMagnitudeFactor * 0.3 * this.shapeSize;
beginShape();
let currentBasePositionX = -0.5 * this.shapeSize;
const basePositionIntervalDistance = this.shapeSize / this.vertexCount;
const progressRatio = frameCounter.getProgressRatio();
for (let i = 0; i < this.vertexCount; i += 1) {
const distanceFactor = progressRatio * sq(sin((i / this.vertexCount) * PI));
const noiseX = (2 * noise(this.xNoiseParameterOffset.x + this.noiseDistanceScale * currentBasePositionX, this.xNoiseParameterOffset.y + this.noiseTime) - 1) * noiseMagnitude;
const noiseY = (2 * noise(this.yNoiseParameterOffset.x + this.noiseDistanceScale * currentBasePositionX, this.yNoiseParameterOffset.y + this.noiseTime) - 1) * noiseMagnitude;
const vertexPositionX = currentBasePositionX + distanceFactor * noiseX;
const vertexPositionY = yScaleFactor * distanceFactor * (0.3 * this.shapeSize + noiseY);
vertex(vertexPositionX, vertexPositionY);
const rotatedVertexPosition = RorschachShape.temporalVector;
rotatedVertexPosition.set(vertexPositionX, vertexPositionY);
rotatedVertexPosition.rotate(this.rotationAngle);
this.checkScreen(this.centerPosition.x + rotatedVertexPosition.x, this.centerPosition.y + rotatedVertexPosition.y);
currentBasePositionX += basePositionIntervalDistance;
}
endShape();
}

...