diff --git a/template_sketch.js b/template_sketch.js new file mode 100644 index 0000000..a988f3d --- /dev/null +++ b/template_sketch.js @@ -0,0 +1,197 @@ +const vec = p5.Vector; + +class Leg { + constructor() { + this.base = new vec(0, 0); + this.end = new vec(0, 0); + this.interPos = new vec(0, 0); + this.ikJoint = new IKJoint(8, 8); + this.repositionDist = 50; + this.moveSpeed = 0.4; + } + + moveTo(startX, startY, endX, endY) { + // mover final de pierna cuando quede esta fuera del rango + } + + getPoints() { + return this.ikJoint.points; + } +} + +class IKJoint { + constructor(numSegments, pointDist) { + this.origin = new vec(0, 0); + this.points = []; + for (let i = 0; i < numSegments + 1; i++) { + this.points.push(new ConstraintPoint(0, 0, pointDist, 0.5)); + } + this.pointDist = pointDist; + this.iterations = 20; + } + + moveStart(targetX, targetY) { + // empezar a mover desde el punto 0 + } + + moveEnd(targetX, targetY) { + // empezar a mover desde el punto final + } + + moveTo(origX, origY, targetX, targetY) { + // alternar movimientos + for (let i = 0; i < this.iterations; i++) { + this.moveEnd(targetX, targetY); + this.moveStart(origX, origY); + } + } +} + +class ConstraintPoint { + constructor(x, y, size, angleConstraint = 0.2) { + this.size = size; + this.pos = new vec(x, y); + this.forward = new vec(0, 0); + this.angleConstraint = angleConstraint; + } + + getRel(angleOffset, dist) { + // devolver vector relativo al punto con un angulo y distancia, completar + return this.pos; + } + + follow(targetX, targetY, parentForward = null) { + // mover punto dentro de los constraints, completar + let target = new vec(targetX, targetY); + + if (parentForward) { + // si tenemos punto anterior, limitar angulos, completar + } + + // asignar sigiente forward, completar + this.forward = null; + + this.pos = target; + } +} + +function drawPoints(points, sizes, turnSegments = 10) { + beginShape(); + // dibujar vertice, completar + + let numPoints = points.length; + let head = points[0]; + let tail = points[numPoints - 1]; + // debug + push() + noFill(); + for (let i = 0; i < numPoints;i++) { + circle(head.pos.x, head.pos.y, sizes[i] * 2); + } + pop() + + endShape(CLOSE); + +} + +function drawGills(basePoint, sign) { + push(); + // dibujar forma de branquias, completar + + pop(); +} + +let numPoints = 0; +const bodySizes = [60, 55, 50, 40, 45, 47, 50, 47, 45, 42, 39, 35, 30, 25, 22, 17, 13]; +const legSizes = Array.from({ length: 20 }, () => 15); +const bodyPoints = []; +const leg1 = new Leg(); +const leg2 = new Leg(); +const leg3 = new Leg(); +const leg4 = new Leg(); +let mouseInter = new vec(0, 0); +let baseColor; +let gillColor; +let lastBlinkTime = 0; +let nextBlinkDelay = 3000; +let blinkDuration = 150; + +function setup() { + createCanvas(displayWidth, displayHeight); + numPoints = bodySizes.length; + for (let i = 0; i < numPoints; i++) { + let pt = new ConstraintPoint(400, 400, 20); + bodyPoints.push(pt); + } + baseColor = color(249, 182, 249) + gillColor = color(243, 158, 189) +} + +function draw() { + background(150); + + mouseInter.lerp(new vec(mouseX, mouseY), 0.01); + let time = millis(); + + // fisica + bodyPoints[0].follow(mouseInter.x, mouseInter.y); + + for (let i = 1; i < numPoints; i++) { + let prevPoint = bodyPoints[i - 1]; + bodyPoints[i].follow(prevPoint.pos.x, prevPoint.pos.y, prevPoint.forward); + + let tailStart = Math.floor(numPoints / 2); + } + let legEndDist = 70; + let baseJointL1 = bodyPoints[2]; + let baseL1 = baseJointL1.getRel(-HALF_PI, 30); + let endL1 = baseJointL1.getRel(-HALF_PI, legEndDist); + let baseR1 = baseJointL1.getRel(HALF_PI, 30); + let endR1 = baseJointL1.getRel(HALF_PI, legEndDist); + + let baseJointL2 = bodyPoints[6]; + let baseL2 = baseJointL2.getRel(-HALF_PI, 30); + let endL2 = baseJointL2.getRel(-HALF_PI, legEndDist); + let baseR2 = baseJointL2.getRel(HALF_PI, 30); + let endR2 = baseJointL2.getRel(HALF_PI, legEndDist); + + leg1.moveTo(baseL1.x, baseL1.y, endL1.x, endL1.y); + leg2.moveTo(baseR1.x, baseR1.y, endR1.x, endR1.y); + leg3.moveTo(baseL2.x, baseL2.y, endL2.x, endL2.y); + leg4.moveTo(baseR2.x, baseR2.y, endR2.x, endR2.y); + + // dibujar + fill(baseColor); + stroke(0); + strokeWeight(2); + + drawPoints(leg1.getPoints(), legSizes); + drawPoints(leg2.getPoints(), legSizes); + drawPoints(leg3.getPoints(), legSizes); + drawPoints(leg4.getPoints(), legSizes); + + let currentBodySizes = [...bodySizes]; + + // animacion de respirar, completar + + drawPoints(bodyPoints, currentBodySizes); + + // dibujar aleta, completar + let p1 = bodyPoints[4].pos; + let p2 = bodyPoints[6].pos; + let p3 = bodyPoints[8].pos; + let p4 = bodyPoints[10].pos; + + drawGills(bodyPoints[2], 1); + drawGills(bodyPoints[2], -1); + + let eye1 = bodyPoints[0].getRel(HALF_PI / 2, 45); + let eye2 = bodyPoints[0].getRel(-HALF_PI / 2, 45); + + push(); + fill(0); + noStroke(); + circle(eye1.x, eye1.y, 12); + circle(eye2.x, eye2.y, 12); + pop(); +}