daniel_kauss/procedural_anim
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

final steps, change color

Browse source
This commit is contained in:
Daniel Kauss Serna 2026-03-12 13:57:04 +01:00
parent d477b63748
commit eb42ca3aa6
5 changed files with 563 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
sketch.js
View file

@ -52,8 +52,6 @@ class IKJoint {
let numPts = this.points.length;
this.points[numPts - 1].pos.x = targetX;
this.points[numPts - 1].pos.y = targetY;
// this.points[numPts - 1].size = 1;
// this.points[numPts - 1].follow(targetX, targetY);
for (let i = numPts - 2; i >= 0; i--) {
let prevPoint = this.points[i + 1];
@ -108,14 +106,14 @@ class ConstraintPoint {
}
}
function drawPoints(points, sizes) {
function drawPoints(points, sizes, turnSegments = 10) {
beginShape();
let numPoints = points.length;
let head = points[0];
let tail = points[numPoints - 1];
for (let angle = -HALF_PI; angle <= HALF_PI; angle += PI / 10) {
for (let angle = -HALF_PI; angle <= HALF_PI; angle += PI / turnSegments) {
let p = head.getRel(angle, sizes[0]);
curveVertex(p.x, p.y);
}
@ -125,7 +123,7 @@ function drawPoints(points, sizes) {
curveVertex(p.x, p.y);
}
for (let angle = HALF_PI; angle <= HALF_PI + PI; angle += PI / 10) {
for (let angle = HALF_PI; angle <= HALF_PI + PI; angle += PI / turnSegments) {
let p = tail.getRel(angle, sizes[numPoints - 1]);
curveVertex(p.x, p.y);
}
@ -178,6 +176,8 @@ const leg2 = new Leg();
const leg3 = new Leg();
const leg4 = new Leg();
let mouseInter = new vec(0, 0);
let baseColor;
let gillColor;
function setup() {
createCanvas(displayWidth, displayHeight);
@ -186,6 +186,8 @@ function setup() {
let pt = new ConstraintPoint(400, 400, 20);
bodyPoints.push(pt);
}
baseColor = color(249, 182, 249)
gillColor = color(243, 158, 189)
}
function draw() {
@ -230,7 +232,7 @@ function draw() {
leg4.moveTo(baseR2.x, baseR2.y, endR2.x, endR2.y);
// dibujar
fill(249, 182, 249);
fill(baseColor);
stroke(0);
strokeWeight(2);
@ -257,7 +259,7 @@ function draw() {
let p4 = bodyPoints[10].pos;
push();
noStroke();
fill(243, 158, 189);
fill(gillColor);
bezier(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
pop();