createCanvas(700, 600);

}

​

​

class Circle {

  constructor() {

    this.x = 700 / 2;

    this.y = 600 / 2;

    this.d = 400;

    this.r = this.d / 2;

    this.lines = 1;

    this.xp = 700 / 2;

    this.yp = 600 / 2;

    this.xSpeed = 10;

    this.ySpeed = 1;

  }

​

  display() {

    frameRate(300);

    noFill();

    strokeWeight(1);

    stroke(255);

    circle(this.x, this.y, this.d);

​

    print(mouseX, mouseY);

  }

​

  move() {

    if (temp >= 1){

      strokeWeight(10);

      point(this.xp - this.r, this.yp);

      this.xp += this.xSpeed;

​

      if (this.xp <= this.x) {

        this.xSpeed *= -1;

      }

​

      if (this.xp >= this.x + this.d) {

        this.xSpeed *= -1;

      }

    }

  }

​

  addline() {

    strokeWeight(1);

    if (temp == 1){

      line(this.x - this.r, this.y, this.x + this.r, this.y);

      line(this.x, this.y-this.r, this.x, this.y+this.r);

    }

    if (temp == 2){

      line(this.x - this.r, this.y, this.x + this.r, this.y);

      line(this.x, this.y-this.r, this.x, this.y+this.r);

      line(this.x - 140, this.y + 140, this.x + 140, this.y - 140);

      line(this.x - 140, this.y - 140, this.x + 140, this.y + 140);

    }

  }

// Couldn't figure out how to remove lines with continious clicks

//   removeline(){

//     if(temp == 3){

//       line(this.x - this.r, this.y, this.x + this.r, this.y);

//       line(this.x, this.y-this.r, this.x, this.y+this.r);

//     }

//     if (temp == 4){

//       background(1);

//       circle(this.x, this.y, this.d);

//     }

//   }

}

​

let foo = 0;

let temp = 0;

let circle1 = new Circle();

​

​

​

function draw() {

  frameRate(1);

  background(0);

  circle1.display();

  circle1.move();

  circle1.addline();

  //circle1.removeline();

}

​

function mouseClicked(){

  if (temp == 0){

    temp = 1;

  }

  else {

    temp = 2;

  } 

}

​

​

​

​

​

​

​

​

​