x: 100,

    y: 50,

  }

  let middle = {

    x: 100,

    y: 50,

  }

  let bottom = {

    x: 100,

    y: 50,

  }

  let col = {

    r: 255,

    g: 0,

    b: 0,

  }

  let on = false;

​

  function setup() {

    createCanvas(500, 500);

    background(0);

  }

​

  function draw() {

​

    //christmas tree

    fill('brown')

    noStroke()

    rect(220, 430, 50, 80)

​

    fill('Green')

    noStroke()

    triangle(150, 430, 250, 260, 350, 430)

​

    fill('Green')

    noStroke()

    triangle(170, 320, 250, 180, 330, 320)

​

    fill('Green')

    noStroke()

    triangle(190, 220, 250, 100, 310, 220)

​

    fill('yellow')

    circle(250, 100, 40)

​

​

    //button

    fill('red')

    rect(20, 20, 80, 50)

​

    fill('green')

    textSize(20);

    textStyle('bold')

    textFont('Helvetica')

    stroke('black')

    strokeWeight(3)

    text('LIGHTS', 24, 52)

​

    //lights

    if (on) {

      //lights

      col.r = random(0, 255)

      col.b = random(0, 255)

      col.g = random(0, 255)

      first.x = random(230, 260)

      first.y = random(150, 220)

      fill(col.r, col.b, col.g)

      noStroke()

      circle(first.x, first.y, 10)

​

      col.r = random(0, 255)

      col.b = random(0, 255)

      col.g = random(0, 255)

      middle.x = random(230, 270)

      middle.y = random(220, 340)

      fill(col.r, col.b, col.g)

      noStroke()

      circle(middle.x, middle.y, 10)

​

      col.r = random(0, 255)

      col.b = random(0, 255)

      col.g = random(0, 255)

      bottom.x = random(228, 275)

      bottom.y = random(260, 425)

      fill(col.r, col.b, col.g)

      noStroke()

      circle(bottom.x, bottom.y, 10)

    }

  }

​

  function mousePressed() {

    if (mouseX > 20 && mouseX < 100 && mouseY > 20 && mouseY < 70 && mouseIsPressed)

      on = !on;

  }