Assignment #3 – The Inescapable Prison pt.2

For this assignment, I wanted to further the idea I had for assignment #2, where I made (what I called) a inescapable prison and I wanted to further the exploration of how I would like to imagine the person who would stuck in it look like. I wanted the concept of how the harder the person would try to escape, the worse the prison got. I wanted to make it tortuous in a way. So I started experimenting with the push(); and pop(); functions and decided that it would look appealing to have the person gain speed, which is a concept I have implemented on the prison walls.

 

 

I think the most difficult part of making this was understanding how each function worked. However, I am proud of myself for figuring out how the pop and push mechanism worked because I had an issue with both of them and I was doing something very wrong with the arrays. I did end up only using one but at least I understand how they both could be implemented.

 // Add Square at the end of array every time mouse is pressed
  squares.push(interactiveSquare);
}
// Keyboard pressed = make the end of array fast
function keyPressed() {
  squares.push(interactiveSquare);
}

Reflection:

I would love to experiment with different shapes. I honestly considered making it Super Mario-related by having the rectangle be a Mario power star and have it make that effect, exactly how it is in the game but I wanted to make this one more. I will try to make the star in my free time.

 

Assignment #2 – The Inescapable Prison

Doing this assignment, I did not have something in mind and I just wanted to explore and play around with creations I could make. Eventually, I ended up using a loop to make lines, which formed a rather interesting shape. I decided to go with that, but I did not want to submit a random creation of complex lines, so I started exploring what I could do to make something out of these lines. After experimenting with movement, I decided to go with an inescapable prison where the harder the person tries to escape, the faster the movement gets.

 

This is my very first time experimenting with an interactive element. It was very simple to apply. However, I am very proud of myself for adding that element.

I am proud of everything on the canvas. I did have to search up how I could have the background change colors and that took a whilr to figure out. While this creation is not perfect, I still deeply love it.

//   Lines
  for (let x = 0; x <= width; x += 50) {
    for (let y = 0; y <= height; y += 50) {
      line(lineX, y, x, lineY);
    }
  }
  //Speed up when mouse is pressed
  if (mouseIsPressed) {
    lineSpeedX = lineSpeedX + 1;
    lineSpeedY = lineSpeedY + 1;
  }
  // Move the lines horizontally and vertically
  lineX += lineSpeedX;
  lineY += lineSpeedY;

  // Reverse direction when hitting the canvas edges and change colors
  if (lineX > width || lineX < 0) {
    lineSpeedX *= -1;
    stroke(random(255), random(255), random(255));
  }
  if (lineY > height || lineY < 0) {
    lineSpeedY *= -1;
    stroke(random(255), random(255), random(255));
  }
}

Reflection:

I had so much fun playing around with code and discovering new ways to implement interaction with creations. I am excited to delve deeper and to find out what this course has in store for me.

Assignment #2 – Casey Reas Talk

When we hear the word “Chaos” our minds automatically think of destruction and overall something negative. Casey Reas explored the meaning of this word and it reshaped my mind in terms of its meaning. Reas included many applications of “chaos” in beautiful pieces of art and explored how chaotic nature could be.

One concept that really stuck with me was the concept of randomness. Casey Reas’s talk opened my eyes on the ways in which the idea of randomness is perceived in art. I genuinely believe that randomness is sometimes important and Reas highlights that at one point.

Another concept that stuck out for me was the part where he talked about combining art with biology. Being a Psychology major student, I am very interested in one’s mind and knowing that it is possible to merge both of my interests into one made my day. I am truly satisfied after watching this talk.

Assignment #1 – Self Portrait | Rashed Alshamsi

For this assignment, I did not want to recreate an image of myself, but I also wanted to add elements of my personality. One thing everyone knows about me is my ongoing passion for music; I collect vinyl records, CDs, and Cassettes. I cannot go anywhere without my headphones and I thought it would be a great idea to include that particular element as well as my ongoing love for music in my self-portrait.

I was particularly proud of the animated musical notes. Originally, I was not planning on animating them but I wanted to challenge myself to try and play around with creating variables and the “If()” function. I initially knew how to animate them but I did not know how to have them bouncing back and forth in the same location. I resorted to YouTube and watched a tutorial on how to animate in P5.js https://youtu.be/s2PZvaP4dSg?si=Q81GurZ6GAjqfVSs . Even after watching the video, I did not know how I could animate multiple variables at the same time that could move altogether. I then realized I could add the condition that if the variable “MusicNoteY1” would exceed a certain point, it would have the variable “ySpeed” equal negative “ySpeed” which would make it move in the opposite direction. Then I had all other music note variables move in their own value + ySpeed which had them all move together.

//Variables
let MusicNoteY1 = 130
let MusicNoteY2 = 70
let MusicNoteY3 = 120
let MusicNoteY4 = 60
let MusicNoteY5 = 81
let MusicNoteY6 = 69
let MusicNoteY7 = 55
let MusicNoteY8 = 70
let MusicNoteY9 = 395
let MusicNoteY10 = 335
let MusicNoteY11 = 330
let MusicNoteY12 = 350
let MusicNoteY13 = 360
let MusicNoteY14 = 341
let ySpeed = 2

function setup() {
  
  createCanvas(500, 500);
}
function draw() {
  background(104,191,255);
  
  //Grass
  noStroke();
  fill(157,231,121)
  arc(250, 500, 700, 250, PI,0,OPEN)
  
  print(mouseX + "," + mouseY);
  
  //Musical Note
  fill('black')
  ellipse(40,MusicNoteY1, 35,25);
  rect(48,MusicNoteY2, 10,60);
  ellipse(92,MusicNoteY3, 35,25);
  rect(100,MusicNoteY4, 10,60);
  quad(48,MusicNoteY5,48,MusicNoteY6,110, MusicNoteY7,110,MusicNoteY8)
  ellipse(442,MusicNoteY9, 35,25);
  rect(450,MusicNoteY10, 10,60);
  quad(450,MusicNoteY11, 450, MusicNoteY12, 474, MusicNoteY13,477,MusicNoteY14);
  MusicNoteY1 = MusicNoteY1 + ySpeed
  MusicNoteY2 = MusicNoteY2 + ySpeed
  MusicNoteY3 = MusicNoteY3 + ySpeed
  MusicNoteY4 = MusicNoteY4 + ySpeed
  MusicNoteY5 = MusicNoteY5 + ySpeed
  MusicNoteY6 = MusicNoteY6 + ySpeed
  MusicNoteY7 = MusicNoteY7 + ySpeed
  MusicNoteY8 = MusicNoteY8 + ySpeed
  MusicNoteY9 = MusicNoteY9 + ySpeed
  MusicNoteY10 = MusicNoteY10 + ySpeed
  MusicNoteY11 = MusicNoteY11 + ySpeed
  MusicNoteY12 = MusicNoteY12 + ySpeed
  MusicNoteY13 = MusicNoteY13 + ySpeed
  MusicNoteY14 = MusicNoteY14 + ySpeed
  
  if (MusicNoteY1 > 180) {
  ySpeed = -ySpeed;  
  }
  if (MusicNoteY1 < 100) {
    ySpeed = -ySpeed;
  }

I am looking forward to adding an interactive element to my work in the future.