Glitch link:https://glitch.com/edit/#!/ccl-amber-?path=script.js%3A55%3A17
This is a rotating Tai-chi. If you put the mouse on Tai-chi, it will rotate faster and faster. If you remove the mouse, the rotation would slow down until it stopped.
Here is the code:
let Taichi;
function setup() {
createCanvas(400, 400);
Taichi = new RT();
}
function draw() {
background(100);
push();
Taichi.display();
Taichi.circleRotate();
pop();
fill(0);
text(“Put the mouse on TaiChi to make it rotate”,75,50);
}
class RT {
constructor() {
this.d = [200, 100, 100, 20, 20]
this.c = [0, -50, 50, -50, 50]
this.angle = 0
this.a = 0
}
display() {
noStroke();
translate(200, 200);
fill(255);
arc(this.c[0], 0, this.d[0], this.d[0], 0, PI, PIE);
push();
rotate(PI);
fill(0);
arc(this.c[0], 0, this.d[0], this.d[0], 0, PI, PIE);
pop();
fill(0);
circle(this.c[1], 0, this.d[1])
fill(255);
circle(this.c[2], 0, this.d[2]);
fill(255);
circle(this.c[3], 0, this.d[3]);
fill(0);
circle(this.c[4], 0, this.d[4]);
}
circleRotate() {
if ((mouseX-200)*(mouseX-200)+(mouseY-200)*(mouseY-200)<=10000) {
this.angle = this.angle + this.a
this.a = this.a + 0.07
if(this.a>=15){
this.a=15;
}
}else{
this.angle = this.angle + this.a
this.a = this.a – 0.07
if(this.a<=0){
this.a=0
}
}
rotate(radians(this.angle));
noStroke();
fill(255);
arc(this.c[0], 0, this.d[0], this.d[0], 0, PI, PIE);
push();
rotate(PI);
fill(0);
arc(this.c[0], 0, this.d[0], this.d[0], 0, PI, PIE);
pop();
fill(0);
circle(this.c[1], 0, this.d[1])
fill(255);
circle(this.c[2], 0, this.d[2]);
fill(255);
circle(this.c[3], 0, this.d[3]);
fill(0);
circle(this.c[4], 0, this.d[4]);
}
}
Leave a Reply