xxxxxxxxxx
146
/*
Check our the GOAL and the RULES of this exercise at the bottom of this file.
After that, follow these steps before you start coding:
1. rename the dancer class to reflect your name (line 32).
2. adjust line 19 to reflect your dancer's name, too.
3. run the code and see if a square (your dancer) appears on the canvas.
4. start coding your dancer inside the class that has been prepared for you.
5. have fun.
*/
let dancer;
function setup() {
// no adjustments in the setup function needed...
createCanvas(windowWidth, windowHeight);
// ...except to adjust the dancer's name on the next line:
dancer = new connieDancer(width / 2, height / 2);
}
function draw() {
// you don't need to make any adjustments inside the draw loop
background(0);
drawFloor(); // for reference only
dancer.update();
dancer.display();
}
// You only code inside this class.
// Start by giving the dancer your name, e.g. LeonDancer.
class connieDancer {
constructor(startX, startY) {
this.x = startX;
this.y = startY;
// add properties for your dancer here:
}
update() {
}
display() {
// the push and pop, along with the translate
// places your whole dancer object at this.x and this.y.
// you may change its position on line 19 to see the effect.
push();
translate(this.x, this.y);
noStroke();
// ******** //
// ⬇️ draw your dancer here ⬇️
// opticalILLUSION color scheme
fill("#ffffd1");
this.drawDancer(random(-0.02, 0.03),random(1.5, 2));
fill("#150413");
this.drawDancer(random(-0.02, 0.03),random(1, 1.5));
fill("#635c6d");
this.drawFace(random(0.1, 0.2),random(0.5,1));
// try different color schemes below!
// sunBURST color scheme
// fill("#ffffd1");
// this.drawDancer(random(-0.02, 0.03),random(1.5, 2));
// fill("#150413");
// this.drawDancer(random(-0.02, 0.03),random(1, 1.5));
// fill("#e6bb45");
// this.drawFace(random(0.1, 0.2),random(0.5,1));
// secondaryColorsTRIAD
// fill("yellow");
// this.drawDancer(0.01, 0.03);
// fill("pink");
// this.drawDancer(-0.02, 1.0);
// fill("cyan");
// this.drawFace(0.01, 1.2);
// ⬆️ draw your dancer here ⬆️
pop();
}
drawDancer(spd, scl) {
push();
frameRate(3);
rotate(frameCount * spd); // rotates below stuff
pop();
push();
rotate(frameCount * spd); // rotates below stuff
scale(scl);
noStroke();
ellipse(0, 0, 100, 40);
ellipse(0, 0, 40, 100);
pop();
}
drawFace(spd, scl) {
push();
frameRate(3);
rotate(frameCount * spd); // rotates below stuff
pop();
push();
rotate(frameCount * spd); // rotates below stuff
scale(scl);
noStroke();
ellipse(0, 0, 100, 40);
ellipse(0, 0, 40, 100);
fill(255);
circle(-20, 20, 35);
circle(20, -20, 35);
fill(0);
circle(20, -20, 20);
circle(-20, 20, 20);
circle(20, 20, 15);
pop();
}
}
/*
GOAL:
The goal is for you to write a class that produces a dancing being/creature/object/thing. In the next class, your dancer along with your peers' dancers will all dance in the same sketch that your instructor will put together.
RULES:
For this to work you need to follow one rule:
- Only put relevant code into your dancer class; your dancer cannot depend on code outside of itself (like global variables or functions defined outside)
- Your dancer must perform by means of the two essential methods: update and display. Don't add more methods that require to be called from outside (e.g. in the draw loop).
- Your dancer will always be initialized receiving two arguments:
- startX (currently the horizontal center of the canvas)
- startY (currently the vertical center of the canvas)
beside these, please don't add more parameters into the constructor function
- lastly, to make sure our dancers will harmomize once on the same canvas, please don't make your dancer bigger than 200x200 pixels.
*/