xxxxxxxxxx
89
let mascot
function setup() {
createCanvas(400, 400);
}
function draw() {
canvas = createCanvas(800,800)
//background(200)
mascot = new drummer(350, 600);
mascot.display()
mascot.update()
}
class drummer {
constructor(startX, startY) {
this.x = startX;
this.y = startY;
this.speed = 5.5;
this.swaySpeed = 0.1;
this.eyesInnerColor = color("#5b37cb")
this.eyesOuterColor = color('#f8943e')
this.bodyColor = color("#f8943e");
this.armsColor = color("#5b37cb")
}
update() {
this.x = this.x + sin(frameCount * 0.05) * this.swaySpeed; // make him move side to side!
// this.swaySpeed
}
updateSpeedSway(drummingSpeed, swayingSpeed){
let speedMap = map(drummingSpeed, 50, 200, 12, 3);
let swayMap = map(swayingSpeed, 50, 200, 4, 7)
this.speed = speedMap;
this.swaySpeed = swayMap;
}
display() {
push();
translate(this.x, this.y)
drawArms(0, 0, this.speed, this.armsColor);
noStroke();
// creature head
fill(this.bodyColor);
ellipse(0, 0, 160, 80);
// eyes outer
fill(this.eyesOuterColor);
ellipse(-50, -40, 50, 50);
ellipse(50, -40, 50, 50);
// eyes inner
fill(this.eyesInnerColor);
ellipse(-50, -40, 30, 30);
ellipse(50, -40, 30, 30);
// fill('black')
// ellipse(-50, -40, 10, 10);
// ellipse(50, -40, 10, 10);
// mouth
//ellipse(0, 10, 40, 40)
rect(-16, 0, 30, 6);
//arms - they are drumming!!
function drawArms(x, y, speed, armsColor) {
fill(armsColor)
push();
let angle = frameCount / speed;
rotate(radians(cos(angle) * 8));
translate(0, -10);
strokeWeight(15);
stroke(armsColor);
//left arm
curve(-7, 17, -37, 47, -58, 28, -19, 40);
//right arm
curve(7, 17, 37, 49, 58, 30, 19, 42);
pop();
}
pop();
}
}