Final Project: Electoral Map Swing States

sketchDownload="">
//Alyssa Song
//Section C

var trump; //trump and trump 2 are the animations of trump talking
var trump2;
var biden; //biden and biden 2 are the animations of biden talking
var biden2;
var repLead; //decorative marks when trump wins a state
var demLead; //decorative marks when biden wins a state
var trumpWin; //trump illustration when he gets more than 270 votes
var bidenWin; //biden illustration when he gets more tahn 270 votes
var mapUs; //US map of states
var counter = 0; 
var mouseCount = 0;

var demVote = 264; //controls democratic electoral votes
var repVote = 232; //controls republican electoral votes

var mouseCountNV = 0; //mousepress count for nevada
var mouseCountPA = 0; //mousepress count for pennsylvania
var mouseCountGA = 0; //mousepress count for georgia

var rx = []; //controls x, y, speed, and color of red confetti
var ry = [];
var rdx = [];
var rc = [];

var dx = []; //controls x, y, speed, and color of blue confetti
var dy = [];
var ddx = [];
var dc = [];

var vNV, vPA, vGA; 

function preload() {
  trump = loadImage('https://i.imgur.com/vs8qJCA.png');
  trump2 = loadImage('https://i.imgur.com/vSXFveX.png');
  biden = loadImage('https://i.imgur.com/KyIf8lC.png');
  biden2 = loadImage('https://i.imgur.com/s50pOcq.png');
  mapUs = loadImage('https://i.imgur.com/JZU3xQQ.png');
  repLead = loadImage('https://i.imgur.com/aTzVMNw.png');
  demLead = loadImage('https://i.imgur.com/XqAbIHD.png');
  trumpWin = loadImage('https://i.imgur.com/XY9IJ0M.png');
  bidenWin = loadImage('https://i.imgur.com/4NKsHuM.png');

}

function setup() {
  createCanvas(600, 400);
  background(220);
  frameRate(10);
  textSize(32);

  //sets up different speeds, x, y, and color for confetti
  for (var i = 0; i < 120; i++) {
    rx[i] = random(width);
    ry[i] = random(height);
    rdx[i] = random(-10, 10);
    rc[i] = color(random(150, 255),
    random(0, 100), random(0, 50));
    dx[i] = random(width);
    dy[i] = random(height);
    ddx[i] = random(-10, 10);
    dc[i] = color(random(0, 100),
    random(0, 100), random(150, 255));
  }

  //create object of states
  vNV = vState(0);
  vPA = vState(1);
  vGA = vState(2);

}

function draw() {
  imageMode(CENTER);
  strokeWeight(0);

  //writes the swing states and number of electoral votes
  push();
  fill(50);
  textSize(12);
  text("Nevada: 6 electoral votes", 200, 280);
  text("Pennsylvania: 20 electoral votes", 200, 300);
  text("Georgia: 16 electoral votes", 200, 320);
  pop();

  image(mapUs, 275, 150, 600, 400);
  fill(0);

  //nevada dot
  circle(140, 100, 10);

  //pennsylvania dot
  circle(420, 100, 10);

  //georgia dot
  circle(390, 180, 10);


  if (repVote > demVote) {
    image(repLead, 500, 275, 300, 250);
  }

  //animation of biden and trump talking
  if (counter % 2 == 0) {
    image(biden, 100, 275, 300, 250);
    image(trump2, 500, 275, 300, 250);
  }

  if (counter % 2 == 1) {
    image(biden2, 100, 275, 300, 250);
    image(trump, 500, 275, 300, 250);
  }

  //rep electoral votes display
  fill(179, 82, 64);
  text(repVote, width - 90, 100);

  //dem electoral votes display
  fill(75, 108, 199);
  text(demVote, 10, 100);

  counter++;

  electionWin(); //function that displays election winner when they reach 270 votes
  }


function mouseClicked() {
  mouseCount++;
  vNV.update(); //updates votes for Nevada
  vPA.update(); //updates votes for Pennsylvania
  vGA.update(); //updates votes for Georgia
}


function vState(stateNo) { //defines object
  let w = {
    state: stateNo,

    update: function() {
      if (this.state == 0)
        updateNV();
      else if (this.state == 1)
        updatePA();
      else if (this.state == 2)
        updateGA();
      else
        print(state);
    }

  }
  return w;
}


function confetti(x, y, dx, c) { //draws confetti
  fill(c);
  ellipse(x, y, 20, 20);
}


function updateNV() {
  if (mouseX > 110 & mouseX < 160 && mouseY > 80 && mouseY < 130) {
    var originalRep = 232;
    var originalDem = 264;
    mouseCountNV++;

    if (mouseCountNV % 3 == 0) {
      fill(220);
      rect(110, 70, 50, 80);
      image(mapUs, 275, 150, 600, 400);
      demVote = demVote - 6;
      updateVotes(); //updates electoral vote display
    }

    // 1 is turning state red
    if (mouseCountNV % 3 == 1) {
      fill(199, 102, 84);
      rect(110, 70, 50, 80);
      image(mapUs, 275, 150, 600, 400);

      repVote = repVote + 6;

      updateVotes();
    }

    //2 is turning state blue
    if (mouseCountNV % 3 == 2) {
      fill(95, 128, 219);
      rect(110, 70, 50, 80);
      image(mapUs, 275, 150, 600, 400);


      demVote = demVote + 6;
      repVote = repVote - 6;

      updateVotes();

    }
    showLead(mouseCountNV); //shows marks for whoever won the state
  }

}

function updatePA() {
  if (mouseX > 390 & mouseX < 450 && mouseY > 80 && mouseY < 130) {
    mouseCountPA++;

    if (mouseCountPA % 3 == 0) {
      fill(220);
      rect(400, 80, 50, 40);
      image(mapUs, 275, 150, 600, 400);
      demVote = demVote - 20;

      updateVotes();
    }

    // 1 is turn state red
    if (mouseCountPA % 3 == 1) {
      fill(199, 102, 84);
      rect(400, 80, 50, 40);
      image(mapUs, 275, 150, 600, 400);

      repVote = repVote + 20;

      updateVotes();
    }

    //2 is turn state blue
    if (mouseCountPA % 3 == 2) {
      fill(95, 128, 219);
      rect(400, 80, 50, 40);
      image(mapUs, 275, 150, 600, 400);

      demVote = demVote + 20;
      repVote = repVote - 20;

      updateVotes();
    }
    showLead(mouseCountPA);
  }


}

function updateGA() {
  if (mouseX > 370 & mouseX < 420 && mouseY > 150 && mouseY < 210) {
    mouseCountGA++;

    if (mouseCountGA % 3 == 0) {
      fill(220);
      rect(360, 150, 60, 60);
      image(mapUs, 275, 150, 600, 400);
      demVote = demVote - 16;

      updateVotes();
    }

    // 1 is red
    if (mouseCountGA % 3 == 1) {
      fill(199, 102, 84);
      rect(360, 150, 60, 60);
      image(mapUs, 275, 150, 600, 400);

      repVote = repVote + 16;

      updateVotes();
    }

    //2 is blue
    if (mouseCountGA % 3 == 2) {
      fill(95, 128, 219);
      rect(360, 150, 60, 60);
      image(mapUs, 275, 150, 600, 400);

      demVote = demVote + 16;
      repVote = repVote - 16;

      updateVotes();
    }
  }
  showLead(mouseCountGA);
}

function updateVotes() {
  push();
  fill(220);
  rect(width - 100, 70, 70, 40);
  pop();

  //republican electoral vote
  fill(179, 82, 64);
  text(repVote, width - 90, 100);

  push();
  fill(220);
  rect(0, 70, 70, 40);
  pop();

  //democrat electoral vote
  fill(75, 108, 199);
  text(demVote, 10, 100);
}

function showLead(state) { //displays mark for whoever won the state
  if (state % 3 == 1) {
    image(repLead, 500, 275, 300, 250);
  }
  if (state % 3 == 2) {
    image(demLead, 100, 275, 300, 250);
  }
}

function electionWin() { //displays whoever wins the election
  if (demVote >= 270) { //biden displayed
      background(0, 0, 0, 100);

      background(75, 108, 199);
      for (i = 0; i < 104; i++) {
        confetti(dx[i], dy[i], ddx[i], dc[i]);
        dx[i] += ddx[i];
        if (dx[i] > width || dx[i] < 0) {
          ddx[i] = -ddx[i];
        }
      }

      image(bidenWin, 300, 200, 500, 400);

    }
    if (repVote >= 270) { //trump displayed
      background(0, 0, 0, 100);
      background(179, 82, 64);
      for (i = 0; i < 104; i++) {
        confetti(rx[i], ry[i], rdx[i], rc[i]);
        rx[i] += rdx[i];
        if (rx[i] > width || rx[i] < 0) {
          rdx[i] = -rdx[i];
        }
      }
      image(trumpWin, 300, 200, 500, 400);
    }
}

Alyssa Song

My program is an electoral map of the last few swing states in the 2020 election. You can test the electoral map and use it to see who can win the election based on who wins which swing states, and try different permutations and combinations of states.

For example:

Click Nevada once to turn the state red, and add 6 electoral votes to the republican count.

Next, click Pennsylvania once to turn the state red, which adds 20 electoral votes to the republican count.

Finally, click Georgia once to turn the state red. You should see an image with Trump 2020. Winning Georgia would put Trump over 270 electoral votes, so he would win the election.

To replay the program, refresh the page. Double click on any state to turn the state blue and make Biden win the election.

To use the program, you can click on the dot on the key swing states that are originally grey on the map. Clicking the dot once will turn the state red and add the respective amount of electoral votes to the Republican electoral count on the right, and clicking the dot twice will turn the state blue and do the same thing for the Democratic electoral count on the left.

Leave a Reply