let vertical_speed = -1;

let horizontal_speed = -1;

let upspeed = 2;

let leftspeed = 2;

let uplimit = 325;

let leftlimit = 250;

let upspeed2 = 2;

let uplimit2 = 275;

let wire_width = 3;

let img;

let sound;

let on_button = false;

let button_x = 30;

let button_y = 370;

let button_radius = 50;

​

// Define variables

function preload() {

  font = loadFont("havelberg.ttf"); //cursive font

  //img = loadImage("neon.avif");

  sound = loadSound("neonsound.mp3"); //electricity sound

}

​

function setup() {

  createCanvas(400, 400);

  frameRate(80);

  textFont(font); //ensure havelberg is used for the quote

  textSize(38);

}

​

function draw() {

  background(0);

  //image(img, 0, 0);

  button(); //show button to control the sign

​

  textFont(font); //the button font and size appears so to counter that use this

  textSize(38);

​

  //this is for when there is a grey background

  // fill("black");

  // noStroke();

  // rect(360, 400, wire_width, -(height - uplimit));

  // rect(360, uplimit, -(width - leftlimit), wire_width);

  // rect(360 + -(width - leftlimit), uplimit, wire_width, -(height - uplimit2));

  // stroke(0, 0, 0);

  // strokeWeight(4);

  // noFill();

  // rect(25, 25, 350, 175, 20);

  // strokeWeight(1);

  // fill(0, 0, 0);

  // text("you didnt come this far", 45, 95);

  // text("just to come this far", 70, 145);

​

  //if the button is on then we start the light

  if (on_button == true) {

    if (!sound.isPlaying()) {

      sound.play(); //the electric static voice

    }

    fill("gold"); //for the wires

    noStroke();

    //since upspeed is in negative values that is why we subtract

    if (height + upspeed > uplimit) {

      upspeed = upspeed + vertical_speed;

      rect(360, 400, wire_width, upspeed); //the first part of the wire and looks like electricity is travelling up

    } else {

      rect(360, 400, wire_width, upspeed); //when it has reached its limit, then it stops and stays there

      if (width + leftspeed > leftlimit) {

        //as soon as the wire part 1 has reached its designated limit, now we start moving to the left

        leftspeed = leftspeed + horizontal_speed; //horizontal speed is the same as upspeed so that it looks uniform

        rect(360, uplimit, leftspeed, wire_width); //leftspeed keeps updating so it looks like it is moving to the left

      } else {

        rect(360, uplimit, leftspeed, wire_width); //same as above

        if (height + upspeed2 > uplimit2) {

          upspeed2 = upspeed2 + vertical_speed; //upspeed2 is different from upspeed since the starting and ending points are different

          rect(360 + leftspeed, uplimit, wire_width, upspeed2);

        } else {

          rect(360 + leftspeed, uplimit, wire_width, upspeed2);

          stroke(57, 255, 20);

          strokeWeight(4);

          noFill(); //make rectangle after the last wire reaches the rectangle

          rect(25, 25, 350, 175, 20); //rectangle but with curved edges

          strokeWeight(1);

          fill(57, 255, 20, sin(frameCount * 0.7) * 255); //fills the text and adds a flicker effect to it

          text("you didnt come this far", 45, 95);

          text("just to come this far", 70, 145);

        }

      }

    }

  }

}

​

function button() {

  fill(255, 0, 0);

  noStroke();

  ellipse(button_x, button_y, button_radius, button_radius); //circle as a button at the bottom-left

  fill(255, 255, 255);

  textSize(15);

  textFont("Georgia"); //different text font that the cursive neon

  fill(255, 255, 255);

  if (on_button == false) {

    text("ON", button_x - button_radius / 4 + 1, button_y + 5); //adjust the written stuff and the position

  } else {

    text("OFF", button_x - button_radius / 3.5 - 1, button_y + 5);

  }

}

​

function mouseClicked() {

  if (

    mouseX >= button_x - button_radius &&

    mouseX <= button_x + button_radius &&

    mouseY >= button_y - button_radius &&

    mouseY <= button_y + button_radius &&

    on_button == true

  ) {

    if (sound.isPlaying()) {

      sound.stop(); //stop the sound when off is pressed

    }

    on_button = false;

  } else if (

    //ensure changes occur only when button is clicked

    mouseX >= button_x - button_radius &&

    mouseX <= button_x + button_radius &&

    mouseY >= button_y - button_radius &&

    mouseY <= button_y + button_radius &&

    on_button == false

  ) {

    sound.play(); //play the sound when button is pressed

    on_button = true;

    //reset all the changing variables so that the electricity starts from the bottom

    upspeed = 2;

    leftspeed = 2;

    upspeed2 = 2;

  }

}

​