Author: Ahmed_Bilal

Concept:

For my assignment, I wanted to make something unique but also practical. The initial idea I had outlined was a switch that did not exclusively need human manipulation to work and could be tweaked to work automatically. My first thought was a circuit involving a photo sensor.

Brainstorming: 

In class, we talked about photoresistors on Tuesday and that gave me the idea to build a circuit with a photoresistor. The dynamic resistivity of these special devices allowed them to ‘open’ and ‘close’ the circuit depending upon the light conditions. So, I came up with the idea of connecting the photoresistor in a circuit so that other parts of the circuit (in my case an LED) would turn on when there was adequate light shining on the photoresistor (the resistance would be very low in this case) and then turn off once the light level reduced (causing the resistance of the photoresistor to shoot up to some absurdly high level). This type of circuit could be used to automate street lights (with a reversed mechanism obviously) to turn off lights during the day and turn them on in the evening.

Implementation:

The photoresistor that I used:

LED on in adequate light:

LED turned off in lower light conditions:

 

Reflection:

During my experiment, I realized the circuit was not going to be perfect in the real world. although theoretically, in zero light conditions, the resistivity in the photoresistor would approach a near-infinite level, however not only is that impossible in real life, there was ambient light all around the IM lab where I was doing the experiment. It led to the LED being faintly lit even when the circuit was supposed to be ‘open’.

In the future, I will have to link the photoresistor to perhaps a mechanical device like a servo that can physically open the circuit or close it depending on the current passing through the wire.

Concept

The idea I had for my game came to me while I was watching a skit by a stand-up comedian on the absurdity of big tech companies. he likened the monopolies that the big tech firms have on our lives to the level of mastery a chess grandmaster has. At the same time, we, normal human beings, are trapped as newbies (“noobs”). this gave me the idea to make a satirical chess game where the capitalist big tech companies have complete, overarching control while providing the player the illusion of choice. Still, whatever happens, the big tech always wins. or you pay. the concept at first was to make a fully-fledged chess game with tweaked rules which allowed an eventual win for the capitalist side. but that was beyond the scope of my project so instead, I modified it to a simpler and more absurd version.

 

Process

To start, I drew a storyboard kind of thing on my iPad to make sure I had all my plans noted down. I decided to include two different game states; the start screen and the game screen. I went about populating the game screen first, using some maths to make a chessboard. after that, I made the start screen and added buttons and text. then I added the game state conditional statement which allowed the console to load the screen procedurally. the images came next. At first, I was going to make an array and generate the chess pieces by push() and pop() but then a friend suggest I add only queen and king pieces for the capitalist side and give only 3 pieces to the player. For this, I instead chose to make the opposite side into a single png and load in the player pieces separately.

 

After this, I chose to generate popups with promotional messages. to achieve this, i created a class for all the messages. i also created a class to make the highlighted areas for the chess pieces. the final aspect was to create the death animation for the king. i took inspiration from youtube and tried adding an animation for the king to be sliced in half. but instead i decided on an explosion gif image and an explosion sound for added effect.

Initially, I wanted to add a separate game state for the ending screen with more cheeky ‘buy our stuff’ remarks from the capitalist side but decided instead for a simple, crude game over. partially because I wanted to reduce the complexity of the code and partially because I appreciated the crude, absurdly low quality aesthetic that it presented juxtaposed with the seemingly shiny image that people have of big tech companies.

 

let mode = 0;
let startButton;
let imgCapitalist;
let imgPlayerPawn1;
let imgPlayerPawn2;
let HighlightPosX;
let pawn1y = 470;
let KillShotX = 252.5;
let KillShotY = 27.5;
let collision = false;
let explosion;

//loading all the image assets
function preload() {
  imgCapitalistSide = loadImage("CapitalistSide.png");
  imgPlayerPawn1 = loadImage("pawn1.png");
  imgPlayerPawn2 = loadImage("pawn1.png");
  imgPlayerKing = loadImage("king1.png");
  imgExplosion = loadImage("explosion.gif");
 explosion = loadSound('explosion.mp3')
}

//seting up the intitial screen
function setup() {
  print("Use Arrow Keys to Move the Pawn Piece");

  createCanvas(600, 600);
  background(149, 53, 83);

  textSize(20);
  text("Please Select Difficulty Level:", 168, 370);

  textSize(50);
  text("CAPITALISM CHESS", 70, 100);

  startButton = createButton("Please Press to Begin");
  startButton.position(200, 200);
  startButton.size(200, 100);
  startButton.mousePressed(updatemode);
  startButton.style("font-size", "25px");
  startButton.style("background-color", "white");

  DifficultyButton1 = createButton("Easy (selected)");
  DifficultyButton1.position(100, 400);
  DifficultyButton1.size(100, 60);
  DifficultyButton1.mousePressed(eraseMessage);
  DifficultyButton1.style("font-size", "15px");
  DifficultyButton1.style("background-color", "white");

  DifficultyButton2 = createButton("Easy Premium 🔒");
  DifficultyButton2.position(250, 400);
  DifficultyButton2.size(100, 60);
  DifficultyButton2.mousePressed(promoMessage);
  DifficultyButton2.style("font-size", "15px");
  DifficultyButton2.style("background-color", "white");

  DifficultyButton3 = createButton("Easy Premium Plus+ 🔒");
  DifficultyButton3.position(400, 400);
  DifficultyButton3.size(100, 60);
  DifficultyButton3.mousePressed(promoMessage);
  DifficultyButton3.style("font-size", "13px");
  DifficultyButton3.style("background-color", "white");

  highlight = new highlightedarea();
  DisplayMessage = new PromoMessage();
}

//this function will display the message for the locked modes
function promoMessage() {
  DisplayMessage.createMessage2();
}

function eraseMessage() {
  DisplayMessage.eraseMessage();
}

function draw() {
  //this if statement is based on the condition mode = 1, the game mode is start mode

  if (mode == 1) {
    noStroke();
    startButton.hide();
    DifficultyButton1.hide();
    DifficultyButton2.hide();
    DifficultyButton3.hide();

    let SquareSize = width / 8;
    let squareNum = 0;
    for (let columny = 0; columny < height; columny += SquareSize) {
      squareNum++;

      //by adding squarenum+1 here i can add the value for the boxes in the y-axis

      for (let rowx = 0; rowx < width; rowx += SquareSize) {
        squareNum++;

        //by adding squarenum+1 i was able to add the box values in the x-axis

        if (squareNum % 2 == 0) {
          fill(224, 255, 255);
        } else {
          fill(0, 139, 139);
        }
        rect(rowx, columny, SquareSize, SquareSize);
      }
    }
    //here we can add all our sprites and maths because elsewhere doesnt work lol because it is being overwritten by the grid-making function

    image(imgCapitalistSide, 0, 0);
    image(imgPlayerPawn1, 242, pawn1y);
    image(imgPlayerPawn2, 315, 470);
    image(imgPlayerKing, 244, 545);

    if (
      mouseIsPressed == true &&
      mouseX > 225 &&
      mouseX < 300 &&
      mouseY > 75 * 6 &&
      mouseY < 75 * 7
    ) {
      HighlightPosX = 225;
      highlight.create(24);
      // HighlightState= !HighlightState ;
    } else {
      if (
        mouseIsPressed == true &&
        mouseX > 300 &&
        mouseX < 375 &&
        mouseY > 75 * 6 &&
        mouseY < 75 * 7
      ) {
        HighlightPosX = 300;
        highlight.create();
      } else {
        if (mouseIsPressed == true && mouseY > 450) {
          DisplayMessage.createMessage1();
        }
      }
    }

    // these statements deal with teh mechanics of the bomb released at the opponent side

    if (pawn1y < 470) {
      fill(204, 85, 0);
      circle(KillShotX, KillShotY, 20);
      if (collision == false) {
        KillShotX = KillShotX - 5;
        KillShotY = KillShotY + 5;
      }
    }
    if (KillShotX < 0) {
      collision = true;
    }
    if (collision == true) {
      KillShotX = KillShotX + 5;
      KillShotY = KillShotY + 5;
    }
    if (KillShotX > 252 && KillShotY > 552) {
      image(imgExplosion, 165, 450);
      fill(110, 38, 14);
      rect(100, 200, 400, 200);
      fill(250, 250, 250);
      textSize(60);
      text("GAME OVER", 115, 310);
      explosion.play()
    }
  }
}

//making classes for the messages in the pop up windows/rectangles
class PromoMessage {
  constructor() {
    this.a = mouseX;
    this.b = mouseY;
  }
  createMessage1() {
    fill(0, 0, 0);
    rect(mouseX, mouseY, 350, 60);
    fill(300, 300, 300);
    textSize(20);
    text("Join Chess Premium for More Pieces", mouseX + 7, mouseY + 40);
  }
  createMessage2() {
    fill(0, 0, 0);
    rect(45, 480, 510, 100);
    fill(300, 300, 300);
    textSize(23);
    text("You Are Not Subscribed to our Premium Plan", 70, 510);
    textSize(24);
    text("Join Now to Get 2% Off for the Next 2 Months", 55, 550);
  }
  eraseMessage() {
    noStroke();
    fill(150);
    rect(44, 479, 515, 105);
  }
}

//class was made for the highlights that pop up to show legal moves available
class highlightedarea {
  constructor(HighlightPosX) {
    this.x = HighlightPosX;
  }

  create() {
    fill(0, 139, 250);
    rect(HighlightPosX, 300, 75, 150);
  }
}

//function added to make the pawn move to intended position via arrow keys. it can go forward and backwards
function keyPressed() {
  if (keyCode == UP_ARROW) {
    pawn1y = pawn1y - 75;
  } else {
    if (keyCode == DOWN_ARROW) pawn1y = 470;
  }
}

//this function updates the game mode from the intro screen to game screen
function updatemode() {
  mode++;
}

Problems

As expected I ran into many problems while working on this project. so many that I would probably end up running out of space if I tried listing them here:,(

but here are the three main ones:

1. the first problem I ran into was with the initialization of the board itself. I could not manage to make the boxes render in a grid pattern, instead, they were rendering in columns which weren’t ideal. I realized it was because I had been not accounting for the fact that after every row, the values were resetting and the same values were being put again into the loop causing it to render the same pattern over and over again. to work around this I simply added a digit to the value of the subsequent row to offset the answer by 1. it caused the whole pattern to shift by one to the left and made a checkered pattern that I was looking for
2. the second problem I ran into was that the highlights for the possible moves for the player were not showing up. I tried creating it by rendering a rectangle with a mouse click after the game started but that would reset the background. to combat this I decided to create a class for the highlight as it was not only easier to assign it to different positions but also allowed me to render it on top of the checkered background
3. another problem I faced was that the kill shot element in the last portion of the game would not bounce but stick instead to the wall and fall to -y infinity. the problem was caused by the if statement I used which stated if x was less than 0 (the edge of the canvas) it would start adding 5 to the x variable instead of subtracting it. what I did not realize was that it sent the loop into an endless repetition since by adding 5 it ended the loop and subtracted 5 again and entered the loop again. to combat this I added a conditional statement that split the event into two states (one in which the condition was false and once when it was true). this allowed the loop to run separately and exhibit bouncing behavior

Reflection:

despite it being a tedious game to make, I really enjoyed creating a little narrative piece with absurdist elements. the coding aspect allowed me to explore way outside of what we had covered in class and forced me to think out of the box to solve problems that I had not experienced before. for this assignment, I forced myself to take as little coding input as I could from outside sources (as in using other people’s solutions) and create my workaround. it caused me to take much more time and made it harder but gave me the freedom to experiment on my own. in the future I would like to make a similar game, with a similar theme, but more streamlined and with more functionality. I feel more confident in my ability to make such projects thanks to the experience I gained from this exercise. 

For this assignment, I wanted to create a Mandelbrot set initially. But after giving it some thought I realized simulating a 3-dimensional space with imaginary numbers on the z-axis may be a bit out of my current scope. Instead, I decided to investigate the techniques used to create simple versions of fractals. The initial version of the fractal tree was straightforward and made a beautiful pattern by using a simple if() loop to keep making branches until it reached a 1-pixel length.

After this, I decided to randomize the variables controlling the color and the rotation coefficient of the fractal pattern. at this point, the pattern started reminding me of a lightning strike specifically one that you might see coming out of wizard wands in fiction works like Harry Potter.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(100);
  stroke(random (0,255));
  translate(200, height);
  lightning(100);
}

function lightning(length) {
  var anglerotat = PI /random(4,5);
  line(0, 0, 0, -length*1.5);
  translate(0, -length*1.5);
  if (length > 1) {
    push()
    rotate(anglerotat)
    lightning(length * 0.6);
        pop()
    push()
    rotate(-anglerotat);
    lightning(length * 0.6);
        pop()
  }
}

 

So, I decided to use the skills I learned while making this fractal tree to make another version that would use a conditional statement to create lightning when the mouse was pressed. Additionally, I wanted to add spark effects. The most efficient way to create multiple lightning effects, as well as sparks, is to create classes of the respective elements and use them later as pleases.

However, at this point, I ran into a problem.

// function setup() {
//   createCanvas(400, 400);
// }

// function draw() {
//   background(100);
//   stroke(255);
//   translate(200, height);
//   lightning(100);
// }

// function lightning(length) {
//   var anglerotat = PI /3;
//   line(0, 0, 0, -length);
//   translate(0, -length);
//   if (length > 1) {
//     push()
//     rotate(anglerotat)
//     lightning(length * 0.6);
//         pop()
//     push()
//     rotate(-anglerotat);
//     lightning(length * 0.6);
//         pop()
//   }
// }
class fractalTree {
  draw() {
    function draw() {
      background(100);
      stroke(255);
      translate(200, height);
      lightning(100);
    }

    function lightning(length) {
      var anglerotat = PI / 3.5;
      line(0, 0, 0, -length * 1.5);
      translate(0, -length * 1.5);
      if (length > 1) {
        push();
        rotate(anglerotat);
        lightning(length * 0.6);
        pop();
        push();
        rotate(-anglerotat);
        lightning(length * 0.6);
        pop();
      }
    }
  }
}

let myfractalTree;

function setup() {
  createCanvas(400, 400);
  myfractalTree = new fractalTree();
}
function draw() {
  background(50);
  myfractalTree.draw();
}

As seen above, this code refuses to run and I have spent over 2 hours tweaking it to figure out why it won’t even display my magic lightning, let alone render according to conditional statements.

regardless, through this exercise, I learned about the rotate function and translate function which allows manipulating different objects on the canvas and is useful when creating artworks that require changing the origin or reference points for multiple assets.