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. 

​

*/

​