Tag: Fall 2022 – Mang

For the midterm project, I will be drawing inspiration from the Snake game on old Nokia phones. The aesthetics of the game will be the same as the one seen below.

However, I want to increase the complexity of program which will randomly generate a moving maze. This is to incorporate a sense of randomness to the game.

Firstly I will have to use the lessons learned in the OOP lectures, to create the Snake and the food class. The snake class will also have a sub class depicting each body component (for length of snake). I have started work on the snake class and body classes.

After this is done we will implement a maze class where certain walls will be in a fixed position and other walls will appear and disappear randomly. I want to make this more frequent when the hallway is further away from snakes head.

Concept

The artwork initially depicts raindrops falling onto a dark background.  I thought of it as a depiction of when I am feeling down or having a bad day. However, I wanted the background to change color as the raindrops are clicked, as I wanted to depict how absorbing the beauty in the small things or interactions can reflect positively on my wellbeing and entirely change the vibe.

Implementation

// global variables 
let s;
let gShapeArray = [];
let numShapes = 10;
let howmanyCircles = 10;
let deletedCircles = 0;
let rr = 0;
let bb = 0;
let gg = 0;

//function for detecting the shape on mouse press
function mousePressed(){
  for(let i = 0; i < gShapeArray.length; i++){
    gShapeArray[i].clicked(mouseX,mouseY,i);
  }
}

//class for a Shape being dropped 
class Droped_shape{
  constructor() {
    this.x = random(width);
    this.y = 0;
    this.width = random(20, 50);
    this.speed = random(0.5,3);
    this.r = random(250);
    this.g = random(250);
    this.b = random(250);
  }
  //movement downwards
   move() {
    this.y += this.speed;
  }
  //how the shape is shown on screen
  display() {
    fill(this.r,this.g,this.b);
    stroke(255);
    strokeWeight(2);
    ellipse(this.x, this.y, this.width, this.width);
    this.move();
  }
  //what happens to shape when clicked 
  clicked(px,py,index){
    let d = dist(px,py,this.x,this.y);
    if(d < this.width){
      rr = this.r;
      bb = this.b;
      gg = this.g;
      //deleting object from array(destructor)
      gShapeArray.splice(index,1);
      numShapes--;
      
    }
    
  }
  
}
function setup() {
  createCanvas(400, 400);
 // creating an instance of dropped shape
  s = new Droped_shape();
  //creating initial instances of shapes
  for(let i = 0; i < numShapes; i++){
    gShapeArray[i] = new Droped_shape();
  }
}

function draw() {
  background(rr,gg,bb);
  smooth();
  s.display();
  for(let i = 0; i < numShapes; i++){
    gShapeArray[i].display();
    //delete circles exiting canvas from array
    if(gShapeArray[i].y > height){
      gShapeArray.splice(i,1);
      numShapes--;
      deletedCircles++;
    }
  }
  //controlling the rate and flow of dropped shape 
  let rand = int(random(0, 100));
  let rand2 = int(random(0, 100));
  //randomly creating shapes over time controlled with two if loops, could have used Perlin noise for this.
  if(rand % 5 == 0){
    if(rand2 % 3 == 0){
    //adding obects to arracy (could have been done with gShapeArray.push)
    gShapeArray[numShapes] = new Droped_shape();
    numShapes++;
      howmanyCircles++;
     }
  }
  //print to console to keep track of circles 
  console.log(howmanyCircles,deletedCircles);

}

Some interesting parts of the code were definitely the creating and and using the classes. I wanted the background to take the color of the object that has been clicked. The workaround for this was to assign the objects color (where random RGB values were given to 3 variables r, g and b) to a global variable later assigned to background when the mousePressed() function was called. This could have also been done as an array where the numbers were saved to an array and the values inside the array were later given to the background.

Also, I realized that the array just keeps on taking objects indefinitely, which significantly slowed the sketch later in run-time. The workaround for this was to delete the objects which had reached the bottom of the screen.

I had to revisit a lot of p5.js reference, sketches done during lectures and coding train videos to solidify the concepts of Object oriented Programming before I could implement a functioning class.

Sketch

Reflections

Looking back, I could have used more elegant features such as array.push(object) and Perlin noise to determine creating of objects. However, it was really cool to be able to finally give more meaning to my artwork than before. The animation still isn’t as smooth as I would like it to be, as there are very evident glitches, this maybe due to the inefficient memory use. I would have also like to implement a function to merge objects or detect collisions as this would have made the sketch look much more natural in a way that it shows the true behavior of water droplets.

 

 

Concept

I was inspired by Case Reas’ talk and his showing of Jared Tarbell’s Invader Fractal. The concept that the contrast in a group of squares could trick the brain into perceiving different shapes was intriguing to me. I wondered if increasing the complexity of artwork such as Fractal invaders could trick our perception into making more complicated constructions out of random arrangements. What if I changed the colors used? Or the frame rate? I tried to answer these questions through the assignment.

Implementation

//Fucntion to draw a quadrat of fractals
function drawfractals_1(c1, c2){
  //Nested for loops used to create rectangles for each row 
  for (let j=0; j<4; j++){
    for (let i=0; i<4; i++){
      //array to select integers from
      let bin_array = [0,1];
      //selects randomly from 0 or 1
      let r_num= random(bin_array);
      //fills with black if random number returned is 0
      if (r_num == 0){
        fill(c1);
        rect(i+(50*i), j+(50*j), sq_width, sq_height);
      }
      //fills with white if random number returned is 1 
      else {
        fill(c2);
        rect(i+(50*i), j+(50*j), sq_width, sq_height);
      }
    }    
  }
}

This part of the code is the function that generates one section of the random squares. It creates a random pattern by choosing whether the color will be dark or light through an binary array passed through the random() function.

Embedded sketch

Here the fractals or images are created by splitting the sketch into 4 quadrants which generate on their own a random pattern. Every iteration also has a random chance of possessing a different complimentary color combination.

I also thought that making the sketch go blank when clicked on would help someone refocus and find shapes in the patterns formed.

Reflection and ideas for future work or improvements

After staring at the patterns generated for hours, I have realized that it is probably the greater simplicity in the original fractal invaders artwork, which mirrors the pattern generated on half of the sketch to the other half, that creates some sort of meaning in our minds. I am slightly disappointed by the bulkiness and inefficiency of the code as it has multiple functions carrying out the the same process, on the same type of object. Here I can overcome the issue by using a class for the square. This would have allowed me to manipulate the randomness and animation of the squares and overall artwork much easier.

Concept

I was taken back to the time when my younger self began to learn to draw on MS Paint. So, I decided to pay tribute to those carefree days and draw a very simplified self-portrait.  The drawing utilizes intuitive shapes such as ellipses to represent soft features and triangles and rectangles to define much more defined features. In the artwork, I wanted to create a warm and playful atmosphere through the sun and a smile.

Implementation

First I implemented Owen Roberts coordinate display system template to my sketch. This helped me gain some sort of positional awareness about the placing the shapes.  This is the link to Roberts’ work.

The following code was then implemented:

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

function draw() {
//background
    fill("brown");
    rect(0,260,400,140);
    fill(82, 157, 227);
    rect(0,0,400,260);
    fill("yellow");
    circle(0,0,100);
    line(0,260,400,260);
    
  //Ears
    fill(232, 176, 72);
    ellipse(110,200,20,30);
    ellipse(290,200,20,30);
  //Face 
    fill(235, 194, 117); 
    noStroke();
    rect(160, 300, 80, 20);
    rect(50, 320, 300, 150);
  //V-neck
    fill("green");
    rect(50, 320, 100, 150);
    triangle(150,318, 150, 400,200,400 );
    rect(250, 320, 100, 150);
    triangle(250,320, 250, 400,200,400 );
    fill(235, 194, 117);
    stroke("Black");
    ellipse(200,200,90*2,110*2);
  //Eyes
    fill("white");
    ellipse(160,170,30,20);
    ellipse(240,170,30,20);
    ellipse(240,170,30,20);
  //Hair
    fill("black");
    ellipse(160,170,10,10);
    ellipse(240,170,10,10);
    ellipse(200,100,170,90);
    triangle (110,180, 115, 100, 150,110);
    triangle (290,180, 285, 100, 250,110);

    arc(200, 250, 80, 80, 0, PI , CHORD);
  //teeth
    fill("white");
    rect(170,250, 60, 10);
  //tongue
    fill("red");
    arc(200, 270, 180/4, 180/4, 0, PI , CHORD);
  //nose
    fill(232, 176, 72);
    triangle(200,180,180, 215, 215, 215);
  //arms
    line(90,355,90,400);
    line(310,355,310,400);    
}

Here I tried to use multiple shapes to create the hair (I tried to replicate a fade:)). I created the background using two rectangles that span over the entire canvas.

I found that the order in which the code was compiled to be quite interesting. You could simply layer different shapes over each other by writing the code for that shape over another.

I played around with the parameters of the shapes such as their starting point and sizes to create the facial features. Specifically, I used the fill() function before creating each feature to shade it in a different color. I also experimented with using the noStroke() function to remove and implement borders.

Sketch

Here is the simulated sketch of what the code produced:

Reflections

The next steps for this assignment would be to increase the complexity of colors being used. Specifically using the lerpColor() function to create a gradient background. Furthermore, I could also use the mouse tracking functions in P5.js to make interactive features such as opening and closing eyes and hand movement. I feel like I used most of the simple shapes available to use.  Something I really struggled with during the assignment was using and manipulating curves in a sketch. I also feel like some improvements can be made in how the features blended in with each other.

Overall, the portrait was a lot of going back and forth changing values to the parameters of the shapes. Regardless, it was very enjoyable.

 

…and I am perhaps two different beings altogether!

Trying processing for the first time was definitely a handful of a task. I mainly envisioned my portrait as an amalgamation of basic geometric shapes and structures. And even though the final result was not an exact mirror reflection, the playful bits that were coded together did seem to capture the essence of the assignment. 

In the process, I found the positioning of codes quite crucial. I had to move back and forth a few times to ensure that the right shape was being overlaid by another. Also, making sure that each side was symmetrical to the other was another important bit. The values had to be adjusted time and again through trial and error to find the exact coordinates. For example, the eyebrows were the hardest feature on the face and took quite some time to be shaped via curves. 

To highlight a bit of my artsy side through this digital mode of expression, I put a small rose in my hair wherein I primarily interacted with concentric circles and arcs. I  further hope to build upon such ideas through the usage of spiral and other animations in the upcoming tasks.

But the portion of the code that turned out to be surprisingly well was when I mapped the eyes to lend the pupils movement. It just seemed to be a clever take on a “typical eye-roll” that we do while putting a lot of effort into a new task for the first time.

I really hope to learn more about other coding functions and their implementation so that I can further sharpen my skills to more clearly express my ideas in the future. Nonetheless, I am surprised by the content I could put up in my initial take on coding and self-portraiture.

Here it is,