Concept

For the Third Assignment, my aim was to incorporate everything we have learned in class such as Arrays, collisions, and Classes, and use it to create an engaging piece of art. Initially, I planned to create a intricate animation, but realized that it was beyond the scope of the assignment. So, I settled on creating an animation that would pique the viewer’s interest and leave them wondering about how it was created.

I started off with replicating an in-class example of dropping snowflakes, which were reproduced, and I thought of replacing that with colored circles over a black background. This did look interesting, but seemed a bit basic – the circles were originally only rebounding from the walls (edges of the canvas). So I developed it further such that they collide with each other and exchange their speeds to seem interesting. Then, developing it further, I added a Neon Image on top of it and exchanged the images on collision as well.

I achieved a mixture of Chaos, but order. Everything had its set path – an order to follow. However, a lot of order among multiple objects that were not coordinated amongst each other caused Chaos. This is something I drew as an inspiration from an in-class discussion.

Embedded Canvas

The assignment outcome is attached as an embedded sketch as follows:

Try pressing the ‘m’ key! (In case it does not work, make sure to have clicked on the canvas)

Code

// Note: Press 'm' to view a messy functionality

let circles = []; //Array to store the circles
let noCircles = 20; //Number of circles that appear on the screen
let messup=false; //To enable the messy functionality

//Function to preload the graphics. This would load all the graphics before the setup function is run
function preload() {
  purple_img = loadImage('purple.png');
  green_img = loadImage('green.png');
  red_img = loadImage('red.png');

}

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

  // Create objects of the class Circle and store them in an array
  for (let i = 0; i < noCircles; i++) {
    // A random positioning and size of each circle     
    let r = random(10, 30);
    let x = random(0, width-2*r);
    let y = random(0, height-2*r);


    // Check if a circle with the same position and size already exists
    let overlap = false;
    for (let j = 0; j < circles.length; j++) {
      let distance = dist(x, y, circles[j].x, circles[j].y);
      if (distance < r + circles[j].r) {
        overlap = true;
        break;
      }
    }

    // If there is no overlap, create a new circle
    if (!overlap) {
      circles[i] = new Circle(x, y, r);
    } else {
      i--;
    }
    
    // The above code blocks avoid any colliding circles being drawn in the initial stages
    
  }
}

function draw() {
  background(0);

  // Display objects in the array and update their position
  for (let i = 0; i < circles.length; i++) {
    circles[i].update();
    circles[i].display();

    // Check for collisions between circles
    for (let j = i + 1; j < circles.length; j++) {
      if (circles[i].collidesWith(circles[j])) {
        // If the messup functionality has been set, a different collision resolve function is called
        if (messup==true){
          circles[i].resolveCollisionWeird(circles[j]);
        }
        else{
          circles[i].resolveCollision(circles[j]); 
        }
      }
    }
  }
}

// Circle object
class Circle {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.speed = random(1, 5);
    this.dx = random(-this.speed, this.speed);
    this.dy = random(-this.speed, this.speed);
    // A Number that checks the image_type to choose from the 3 types that we have
    this.image_type = int(random(1,4));
  }

  
  display() {
    // The circle image is displayed, depending on the image it got allotted in the constructor
    if(this.image_type%3==1){
      image(green_img, this.x, this.y, this.r*2, this.r*2);
    }
    else if(this.image_type%3==2){
      image(purple_img, this.x, this.y, this.r*2, this.r*2);
    }
    else{
      image(red_img, this.x, this.y, this.r*2, this.r*2);
    }
  }

  update() {
    this.x += this.dx;
    this.y += this.dy;

    // Check for collisions with the edges of the canvas
    if (this.x + this.r*2 > width || this.x < 0) {
      this.dx = -this.dx;
    }
    if (this.y + this.r*2 > height || this.y < 0) {
      this.dy = -this.dy;
    }
  }

  // Checks for collision with one another
  collidesWith(other) {
    // Calculates the distance between the current object and other objects
    let distance = dist(this.x, this.y, other.x, other.y);
    // If it is less than a threshold, it has collided!
    return distance < this.r + other.r;
  }

  // Once a collision is detected from the above function, the following function is called. It changes the speed of each, changes the image type with the other
  resolveCollision(other) {
    let tempX = this.dx;
    let tempY = this.dy;
    this.dx = other.dx;
    this.dy = other.dy;
    other.dx = tempX;
    other.dy = tempY;
    other.image_type = this.image_type;
  }
  
  // The following block of code was a modification of the above function which did not seem to work as I wanted it to, however it actually did something more artsy and interesting that I wanted to keep it as a hidden functionality to play with!  
  resolveCollisionWeird(other) {
    let angle = atan2(other.y - this.y, other.x - this.x);
    let overlap = 
        (this.r + other.r) - dist(this.x, this.y, other.x, other.y);
    this.x += cos(angle) * overlap / 2;
    this.y += sin(angle) * overlap / 2;
    other.x -= cos(angle) * overlap / 2;
    other.y -= sin(angle) * overlap / 2;
    
    let tempX = this.dx;
    let tempY = this.dy;
    this.dx = other.dx;
    this.dy = other.dy;
    other.dx = tempX;
    other.dy = tempY;
  }
  
}

// In the case that the key 'm' is pressed, the collision works differently.
function keyPressed(){
  if (key == 'm'){
   messup=true; 
  }
}

Problems

A small problem that I ran into was an issue where some of the images were colliding up to a point where an overlap could be observed. Since I started off with ellipses instead of the images, I was using their centre as a reference point, however, changing that to an image caused a shift in the reference point, which was now the top left of the image. This caused multiple issues including the one mentioned in the beginning of this paragraph.

It may not be noticeable to everyone, however I tried to resolve the issue and instead came up with something chaotic. You can press ‘m’ to see that!

The full canvas is linked here.

Concept:

Object Oriented Programming (OOP) and art are two separate concepts to me. I have only ever used it to create games, or different data structures, so when it came to creating art, I was in an art block. Since OOP is extremely useful when it comes to motion of objects and graphics on the screen, I was immediately drawn to something dynamic. But what? Since all of my friends are taking Foundations of Science, I am continuously surrounded by physics. This month, the topic was circular motion. When I think about circular motion, I think about rotation and revolution of celestial bodies. Hence, for this week’s project, I have created a small work that depicts the motion of planets (Mercury through Neptune _{sorry Pluto 🙁} ) around the Sun.

The Solar System 

Link: https://editor.p5js.org/ajlasacic/full/GIWVhC73H

Challenges:

To start off, circular motion was hard to think about when working with OOP. Since I was working with many orbits, it was a struggle to spread them adequately across the screen. The model is obviously scaled down, it is an artistic representation of the system, but managing the distances between the planets and setting up the asteroid belt was really tricky and took some fiddling to get right.

  this.display = function () {
    fill(this.color);
    ellipse(this.x, this.y, this.radius);
  };
}

// Move objects in a circle by updating the angle
move() {
  this.x = this.xPos + this.distance * cos(this.angle / this.speed);
  this.y = this.yPos + this.distance * sin(this.angle / this.speed);

  this.angle++;
}

The asteroid belt was another point of concern. I wanted to contain it in one place, so that it can be considered one object. Although I could have just used for loops outside of the code, I created another class which made it easier to control the specific parameters of the belt such as the size and number of circles.

// Asteroid belt 
class Belt {
  constructor(m, n) {
    // Number of belts
    this.n_belts = m;
    
    // Number of asteroids in belt
    this.n_rocks = n;
    
    // Array for storing asteroid objects
    this.beltArray = [];
  }

  // Produces a 2d array - this.beltArray[] 
  add_asteroids() {
    for (let i = 1; i <= this.n_belts + 1; i++) {
      let belt = [];
      for (let j = 1; j <= this.n_rocks; j++) {
        belt[j] = new Celestial(
          width / 2,
          height / 2,
          random(2, 4),
          i * (start - 10) + 170,
          j * 130 + i * random(10, 15),
          random(12.5, 37.5) * rotation,
          random(100, 200)
        );
      }
      this.beltArray.push(belt);
    }
  }

  // Displays each meteor by calling Celestial
  display_meteors() {
    for (let i = 1; i <= this.n_belts; i++) {
      for (let j = 1; j <= this.n_rocks; j++) {
        this.beltArray[i][j].move();
        this.beltArray[i][j].display();
      }
    }
  }
}

Unfortunately, when I came to that point, my code got deleted. In all honesty, it was my fault since I did not save the file once before leaving my workstation. From then on, it took another couple of hours to get back to my original progress, but I was devastated for quite some time because a split second was all it took to lose hours of work.

I was struggling to create the trail effect. In the beginning, I was trying to write more code in order to make it appear behind the celestial object. In the end, I realized that if I decrease the alpha of the background, a nice trail should be left behind by the celestial objects.

// Opacity can change for trail effect of moving objects
  background(0,0,0, opacity);

Finally, in order to introduce some creativity, I wondered whether an orbit can be drawn for each planet. For some time I tried to create it within the class, but since my Belt class creates instances of the Celestial class, it would make an orbit for each asteroid as well. I settled for creating a separate orbit() function that uses the start variable to size the orbits. Unlike C++ I could not make getter functions, so I could not extract radii for the planets which is why I ultimately could not make everything resizable .

function orbits() {
  // Sun glow
  for (let i = 0; i < 50; i++) {
    fill(241, 93, 34, 3);
    ellipse(width / 2, height / 2, i * 1.3);
  }
  
  noFill();
  stroke(255, 255, 255, val);
  ellipse(width / 2, height / 2, start * 4);
  ellipse(width / 2, height / 2, start * 6);
  ellipse(width / 2, height / 2, start * 10);
  ellipse(width / 2, height / 2, start * 14);
  ellipse(width / 2, height / 2, start * 24);
  ellipse(width / 2, height / 2, start * 28);
  ellipse(width / 2, height / 2, start * 32);
  ellipse(width / 2, height / 2, start * 37);
  noStroke();
}

function mousePressed() {
  val = 20;
}

function mouseReleased() {
  val = 0;
}

Reflection

Overall, I am satisfied by the look of the project. I altered some CSS parameters to make the canvas corners rounded which gives a nice effect to the piece. Although we can intuitively realize that this is our solar system, I wished to add more detail to the planets. For example, Saturn’s rings and Earth’s life, i.e., greenery. Unfortunately, since I lost all of my progress and had to trace my steps in order to remake the piece, I was left with little time to try and achieve that. Although I could have created a Saturn class, I wanted to make use of OOP and use one class for all planets. I am very happy with the trail and glow effect I created by utilizing the alpha variable of fill. In the future, I wish to create pieces that are more artistic, perhaps expressionist, but since I am not used to combining art with OOP, I know it will take some time.

Concept

As part of the second assignment, for which the task was to produce a creative piece, something that caught my attention was the following image from COMPUTER GRAPHICS AND ART Aug1977.

Therefore, I decided to replicate that, but not only replicate a single instance, but make it interactive such that I can essentially see every single one of the types of squares. Starting off with a basic Mouse Movement in the in-class exercise, I built upon it to make it move periodically over a speed as an automated animation. When that was done, I moved forward with adding more colors and making it playful! If you press the RIGHT ARROW, LEFT ARROW, or the ‘a’ key, you can add specific colors!

The reason I made the animation squares move automatically in the manner seen below was to replicate the old ‘DVD’ behavior in Screen Savers of Old Televisions!

Embedded Canvas

The final production for my assignment is as follows:

Code

While the entire code is well commented, and very concise (linked below), one specific segment of it that I would like to share is the use of a single for loop with a map function to change the x and y directions of the animations. I started the usage of the map function to make the animation follow the mouse movement, however I later adapted it to be an automated sequence.

  // A loop to draw the different squares
  for (let i = 0; i<230; i=i+20)
  {   
      // Fill with the dark backgrounds in the pyramid style
      fill(i,i,i);
    
      // To add the different colors with the key presses, such that they are added in an incremental way
      // For the Red Color
      if (i==redColorCounter){
        fill(255,160,122)
      }
      // For the Blue Color
      if(i == blueColorCounter){
        fill(0, 0, 255);
      }
      // For the Yellow Color
      if(i == yellowColorCounter){
        fill(255, 255, 0);
      }
      
      // Changing xPosition and the yPosition of the squares
      xPos = i*(map(xInc, 250, 500, 1.0, 1.9))
      yPos = i*(map(yInc, 250, 500, 1.0, 1.9))
      rect(xPos,yPos, 500-(i*2))
  }
  // Make the colors 'climb' the different squares in the animation
  redColorCounter+=20;
  blueColorCounter+=20;
  yellowColorCounter+=20;
}

Improvements

As a future step, I really want to use a modular approach with functions and eliminate any and all duplications or repetitions of similar code pieces. One example would be the movement in the x & y directions by adding a function (which I tried but was not working the way I wanted it to!).

The full canvas is linked here.

Portrait of SpongeBob SquarePants

function setup() {
  createCanvas(700, 500);
  background(32, 210, 245);
  angleMode(DEGREES);
}

function draw() {
  strokeWeight(1);

  //drawing points to get curve shape
  point(244, 422);
  point(228, 402);
  point(234, 374);
  point(223, 351);
  point(234, 320);
  point(220, 293);
  point(231, 262);
  point(222, 240);
  point(238, 230);
  point(262, 236);
  point(288, 229);
  point(320, 234);
  point(358, 231);

  //rightside curve
  point(450, 402);
  point(439, 376);
  point(448, 351);
  point(430, 321);
  point(444, 294);
  point(430, 265);
  point(438, 241);
  point(418, 228);
  point(393, 235);
  point(439, 421);

  //creating hands
  stroke(0);
  fill(255, 255, 255);
  ellipse(225, 377, 23, 40);

  stroke(0);
  fill(255, 255, 255);
  ellipse(449, 377, 23, 40);

  //creating curve from points

  stroke(197, 207, 19);
  strokeWeight(4);
  fill(241, 245, 32);
  beginShape();
  curveVertex(244, 422);
  curveVertex(244, 422);
  curveVertex(228, 402);
  curveVertex(234, 374);
  curveVertex(223, 351);
  curveVertex(234, 319);
  curveVertex(220, 293);
  curveVertex(231, 262);
  curveVertex(222, 240);
  curveVertex(238, 230);
  curveVertex(262, 236);
  curveVertex(288, 229);
  curveVertex(262, 261);
  curveVertex(320, 234);
  curveVertex(358, 229);
  curveVertex(358, 231);
  curveVertex(393, 235);
  curveVertex(418, 228);
  curveVertex(438, 241);
  curveVertex(430, 265);
  curveVertex(444, 294);
  curveVertex(430, 321);
  curveVertex(448, 351);
  curveVertex(439, 376);
  curveVertex(450, 402);
  curveVertex(439, 421);
  curveVertex(439, 421);
  endShape();

  //drawing for eyes
  stroke(0);
  strokeWeight(2);
  fill(255, 255, 255);
  circle(365, 310, 70);

  //2nd eyes
  stroke(0);
  strokeWeight(2);
  fill(255, 255, 255);
  circle(295, 310, 70);

  //inner circless for eyes
  stroke(0);
  strokeWeight(2);
  fill(32, 160, 245);
  circle(299, 310, 30);

  stroke(0);
  strokeWeight(2);
  fill(32, 160, 245);
  circle(355, 310, 30);

  //inner inner eyes

  stroke(0);
  strokeWeight(2);
  fill(0);
  circle(300, 310, 10);

  stroke(0);
  strokeWeight(2);
  fill(0);
  circle(355, 310, 10);

  //white patches of cirlcles to make eyes realistic
  //left eye
  noStroke(0);
  fill(255, 255, 255);
  circle(295, 306, 5);

  //lower circle
  noStroke(0);
  fill(255, 255, 255);
  circle(302, 315, 2.5);

  //for right eye
  noStroke(0);
  fill(255, 255, 255);
  circle(350, 306, 5);

  //lower circle
  noStroke(0);
  fill(255, 255, 255);
  circle(358, 315, 2.5);

  //lower rectangles
  stroke(0);
  fill(255, 255, 255);
  rect(241, 421, 206, 30, 10);
  fill(245, 153, 32);
  rect(245, 450, 199, 30);

  //smile on Bob's face
  stroke(0);
  strokeWeight(3);
  fill(241, 245, 32);
  arc(330, 350, 120, 80, 0, 180);

  stroke(0);
  strokeWeight(3);
  noFill();
  arc(270, 353, 20, 10, -180, 0);
  arc(390, 354, 20, 10, -180, 0);

  //red blushing of Bob
  // stroke(245, 99, 32);
  // strokeWeight(3);
  // noFill(197, 207, 19);
  // arc(270,345,50,35,-190,20)
  // arc(390,345,50,35,-190,20)

  //Bob's tie
  stroke(0);
  strokeWeight(2);
  triangle(290, 421, 330, 435, 338, 421);
  triangle(357, 421, 372, 435, 403, 421);

  stroke(0);
  strokeWeight(3);
  fill(245, 39, 32);
  arc(348, 422, 17, 35, 0, 180);
  arc(348, 455, 17, 35, 180, 0);

  // stroke(0);
  // strokeWeight(1);
  // strokeJoin(ROUND);
  // triangle(338,421,349,443,357,421)
  
  stroke(0);
  strokeWeight(2);
  fill(245, 245, 32);
  rect(288,480,10,25);
  rect(400,480,10,25)

  stroke(0);
  strokeWeight(2);
  fill(255, 255, 255);
  rect(320, 389, 12, 15);

  rect(336, 389, 12, 15);
  
  

  //ellipse for nose
  translate(61, -60);
  rotate(10);
  stroke(0);
  fill(241, 245, 32);
  ellipse(330, 339, 23, 40);

  translate(12, 1);
  rotate(1);
  noStroke();
  fill(241, 245, 32);
  rect(310, 348, 20, 20);

  //other spots on body
  translate(20, -60);
  rotate(10);
  stroke(197, 207, 19);
  fill(197, 207, 19);
  ellipse(270, 310, 20, 30);

  translate(20, -60);
  rotate(10);
  stroke(197, 207, 19);
  fill(197, 207, 19);
  ellipse(340, 370, 10, 15);

  translate(20, -60);
  rotate(10);
  stroke(197, 207, 19);
  fill(197, 207, 19);
  ellipse(470, 210, 10, 15);

  translate(20, -60);
  rotate(10);
  stroke(197, 207, 19);
  fill(197, 207, 19);
  ellipse(470, 210, 10, 15);

  translate(20, -60);
  rotate(10);
  stroke(197, 207, 19);
  fill(197, 207, 19);
  ellipse(550, 350, 15, 30);

  translate(20, -60);
  rotate(10);
  stroke(197, 207, 19);
  fill(197, 207, 19);
  ellipse(650, 170, 20, 30);
  
  // translate(20, -60);
  // rotate(-60);
  // stroke(0);
  // strokeWeight(1)
  // fill(245, 245, 32);
  // rect(-82, 692, 9, 80);
  
  

  print(mouseX + "," + mouseY);
}

Result:

Here