p5.js Web Editor | animation test

xxxxxxxxxx
function setup() {
  createCanvas(400, 400);
}
​
var timeScale = 0.8
var DTcount = 0;
var strobe = false; // makes the background and lines switch color every second
var speed = Math.PI;
var NW = 27;
​
​
var Bx = 50;
var By = 433;
​
var J1x = 0;
var J1y = 0;
var J1r = 0;
var J1ra = 90;
var J1ro = 0;
​
let J2x = 0;
let J2y = 0;
let J2r = 0;
let J2ra = 90;
let J2ro = 0;
​
let J3x = 0;
let J3y = 0;
let J3r = 0;
let J3ra = 90;
let J3ro = 0;
​
let J4x = 0;
let J4y = 0;
let J4r = 0;
let J4ra = 110;
let J4ro = -Math.PI/32;
​
function draw() {
  J1ro = (6 * PI) / 8;
  J2ro = 0;
  J3ro = 0;
​
  DTcount = DTcount + floor(deltaTime*timeScale) / 1000; // in seconds
  DTcount = round(DTcount * 1000) / 1000;
​
  // background/color control
​
  if (strobe) {
    background(255 * (floor(DTcount + 1) % 2));
    fill(255 * (floor(DTcount + 1) % 2));
    stroke(255 * (floor(DTcount) % 2));
  } else {
    background(0);
    fill(0);
    stroke(255);
  }
​
  // 'joint' rotation
​
  J1r = float(sin(DTcount * speed) * (PI / 12) + J1ro);
  J1x = float(sin(J1r) * J1ra + Bx);
  J1y = float(cos(J1r) * J1ra + By);
​
  J2r = float(sin((DTcount - 0.2) * speed) * (-PI / 8) + J2ro + J1r);
  J2x = float(sin(J2r) * J2ra + J1x);
  J2y = float(cos(J2r) * J2ra + J1y);
​
  J3r = float(sin(DTcount * speed) * (-PI / 6) + J3ro + J2r);
  J3x = float(sin(J3r) * J3ra + J2x);
  J3y = float(cos(J3r) * J3ra + J2y);
​
  J4r = float(sin((DTcount + 0.4) * speed) * (-PI / 6) + J4ro + J3r);
  J4x = float(sin(J4r) * J4ra + J3x);
  J4y = float(cos(J4r) * J4ra + J3y);
​
  // drawing graphics based on joints
​
  //neck
  line(
    sin(J1r + PI / 2) * NW * 1.4 + Bx,
    cos(J1r + PI / 2) * NW * 1.4 + By,
    sin(J2r + PI / 2) * NW + J1x,
    cos(J2r + PI / 2) * NW + J1y
  );
  line(
    sin(J1r - PI / 2) * NW * 1.2 + Bx,
    cos(J1r - PI / 2) * NW * 1.2 + By,
    sin(J2r - PI / 2) * NW + J1x,
    cos(J2r - PI / 2) * NW + J1y
  );
​
  line(
    sin(J2r + PI / 2) * NW + J1x,
    cos(J2r + PI / 2) * NW + J1y,
    sin(J3r + PI / 2) * NW + J2x,
    cos(J3r + PI / 2) * NW + J2y
  );
  line(
    sin(J2r - PI / 2) * NW + J1x,
    cos(J2r - PI / 2) * NW + J1y,
    sin(J3r - PI / 2) * NW + J2x,
    cos(J3r - PI / 2) * NW + J2y
  );
​
  line(
    sin(J3r + PI / 2) * NW + J2x,
    cos(J3r + PI / 2) * NW + J2y,
    sin(J4r + PI / 2) * NW + J3x,
    cos(J4r + PI / 2) * NW + J3y
  );
  line(
    sin(J3r - PI / 2) * NW + J2x,
    cos(J3r - PI / 2) * NW + J2y,
    sin(J4r - PI / 2) * NW * 0.9 + J3x,
    cos(J4r - PI / 2) * NW * 0.9 + J3y
  );
​
  //line(Bx,By,J1x,J1y)
​
  //line(J1x,J1y,J2x,J2y)
​
  //line(J2x,J2y,J3x,J3y)
​
  // head
  //line(J3x,J3y,J4x,J4y)
​
  line(
    sin(J4r + PI / 2) * NW * 1.1 + J3x,
    cos(J4r + PI / 2) * NW * 1.1 + J3y,
    sin(J4r + (1 * PI) / 8) * NW * 0.8 + J4x,
    cos(J4r + (1 * PI) / 8) * NW * 0.8 + J4y
  );
  line(
    sin(J4r - PI / 2) * NW * 0.9 + J3x,
    cos(J4r - PI / 2) * NW * 0.9 + J3y,
    sin(J4r - PI / 2) * NW + J4x,
    cos(J4r - PI / 2) * NW + J4y
  );
​
  line(
    sin(J4r + (1 * PI) / 8) * NW * 0.8 + J4x,
    cos(J4r + (1 * PI) / 8) * NW * 0.8 + J4y,
    sin(J4r - PI / 2) * NW + J4x,
    cos(J4r - PI / 2) * NW + J4y
  );
​
  line(
    sin(J4r + PI / 2) * NW * 0.6 + J3x,
    cos(J4r + PI / 2) * NW * 0.6 + J3y,
    sin(J4r - PI / 2) * NW * 0.9 + J3x,
    cos(J4r - PI / 2) * NW * 0.9 + J3y
  );
​
  //horns
  noStroke();
​
  triangle(
    sin(J4r + PI / 2) * NW * 1.1 + J3x,
    cos(J4r + PI / 2) * NW * 1.1 + J3y,
    sin(J4r + PI / 2) * NW * 1.1 + J3x + sin(J4r + (10 * PI) / 11) * J4ra,
    cos(J4r + PI / 2) * NW * 1.1 + J3y + cos(J4r + (10 * PI) / 11) * J4ra,
    sin(J4r + PI / 2) * NW * 0.6 + J3x,
    cos(J4r + PI / 2) * NW * 0.6 + J3y
  );
​
  if (strobe) {
    stroke(255 * (floor(DTcount) % 2));
  } else {
    stroke(255);
  }
​
  line(
    sin(J4r + PI / 2) * NW * 1.1 + J3x,
    cos(J4r + PI / 2) * NW * 1.1 + J3y,
    sin(J4r + PI / 2) * NW * 1.1 + J3x + sin(J4r + (10 * PI) / 11) * J4ra,
    cos(J4r + PI / 2) * NW * 1.1 + J3y + cos(J4r + (10 * PI) / 11) * J4ra
  );
  line(
    sin(J4r + PI / 2) * NW * 0.6 + J3x,
    cos(J4r + PI / 2) * NW * 0.6 + J3y,
    sin(J4r + PI / 2) * NW * 1.1 + J3x + sin(J4r + (10 * PI) / 11) * J4ra,
    cos(J4r + PI / 2) * NW * 1.1 + J3y + cos(J4r + (10 * PI) / 11) * J4ra
  );
​
  //eyes
  line(
    sin(J4r + PI / 2) * 16 + J3x + sin(J4r + PI) * -35,
    cos(J4r + PI / 2) * 16 + J3y + cos(J4r + PI) * -35,
    sin(J4r + PI / 2) * 14 + J3x + sin(J4r + PI) * -55,
    cos(J4r + PI / 2) * 14 + J3y + cos(J4r + PI) * -55
  );
  line(
    sin(J4r + PI / 2) * 4 + J3x + sin(J4r + PI) * -65,
    cos(J4r + PI / 2) * 4 + J3y + cos(J4r + PI) * -65,
    sin(J4r + PI / 2) * 14 + J3x + sin(J4r + PI) * -55,
    cos(J4r + PI / 2) * 14 + J3y + cos(J4r + PI) * -55
  );
  line(
    sin(J4r + PI / 2) * 4 + J3x + sin(J4r + PI) * -65,
    cos(J4r + PI / 2) * 4 + J3y + cos(J4r + PI) * -65,
    sin(J4r + PI / 2) * 6 + J3x + sin(J4r + PI) * -45,
    cos(J4r + PI / 2) * 6 + J3y + cos(J4r + PI) * -45
  );
  line(
    sin(J4r + PI / 2) * 16 + J3x + sin(J4r + PI) * -35,
    cos(J4r + PI / 2) * 16 + J3y + cos(J4r + PI) * -35,
    sin(J4r + PI / 2) * 6 + J3x + sin(J4r + PI) * -45,
    cos(J4r + PI / 2) * 6 + J3y + cos(J4r + PI) * -45
  );
  line(
    sin(J4r + PI / 2) * 15 + J3x + sin(J4r + PI) * -50,
    cos(J4r + PI / 2) * 15 + J3y + cos(J4r + PI) * -50,
    sin(J4r + PI / 2) * 6 + J3x + sin(J4r + PI) * -50,
    cos(J4r + PI / 2) * 6 + J3y + cos(J4r + PI) * -50
  );
​
  line(
    sin(J4r + PI / 2) * 7 + J3x + sin(J4r + PI) * -122,
    cos(J4r + PI / 2) * 7 + J3y + cos(J4r + PI) * -122,
    sin(J4r + PI / 2) * 2 + J3x + sin(J4r + PI) * -120,
    cos(J4r + PI / 2) * 2 + J3y + cos(J4r + PI) * -120
  );
}
​
Cookies

Sketch Files

Console

Preview
