xxxxxxxxxx
80
let manyRectangles = [];
let cloudStart = 0;
function setup() {
createCanvas(600, 600);
let spacing = width / 163;
for (let i = 0; i < width; i += spacing) {
manyRectangles.push( new SineRect(i, 10 + i * 2) );
}
strokeWeight(3);
}
function draw() {
// sky color + dragon's flames
let r = random(100, 220);
let g = random(100, 120);
let b = random(100, 120);
if (mouseIsPressed == true){
background(r, g, b);
}
else {
background(140, 200, 250);
}
// clouds
cloudStart += 1;
fill(255);
noStroke();
// cloud1
ellipse( cloudStart + 75, 100, 100);
ellipse( cloudStart + 150, 100, 100);
ellipse( cloudStart + 100, 55, 100);
// cloud3
ellipse( (cloudStart * 1.3) + 175, 525, 75);
ellipse( (cloudStart * 1.3) + 150, 550, 75);
ellipse( (cloudStart * 1.3) + 200, 550, 75);
ellipse( (cloudStart * 1.3) + 210, 510, 75);
// cloud2
ellipse( (cloudStart * 0.8) + 265, 240, 100);
ellipse( (cloudStart * 0.8) + 240, 210, 100);
ellipse( (cloudStart * 0.8) + 310, 210, 110);
if (cloudStart >= width){
cloudStart = -500
}
// dragon's body color
fill(140, 70, 70);
stroke(80, 50, 50);
for (let i = 0; i < manyRectangles.length; i++) {
manyRectangles[i].drawRect();
}
}
class SineRect {
constructor(x, rectWidth, rectHeight) {
this.x = x;
this.rectWidth = rectWidth;
this.rectHeight = 200;
this.speed = 0.01;
}
// dragon body + movement
drawRect() {
rect(
this.x,
map(sin((frameCount + this.x) * this.speed), -1, 1, 10, height / 2),
this.rectWidth, this.rectHeight, 20
);
}
}