Author: Linus Jiang

Assignment 3: Basketball Player

Sketch: 

Concept:

There wasn’t a specific artwork that inspired my piece, instead my inspiration just came from watching basketball over the  weekend. The artwork features a stickman dribbling a basketball, and the ball and stickman follows the horizontal movement of your mouse.

 

Code Highlight:

class Stickman {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.ly = y + 65;    //seperate variable for the left arm y to make it move
    this.lyspeed = 1;     //speed variable of left arm
  }

  show() {
    // Draw the stickman's body parts
    circle(this.x, this.y, this.size);                     // Head
    line(this.x, this.y + 37, this.x, this.y + 186);       // Body
    line(this.x, this.y + 186, this.x - 49, height);       // Left leg
    line(this.x, this.y + 186, this.x + 52, height);       // Right leg
    line(this.x - 2, this.y + 60, this.x - 81, this.ly);  // Left arm with moving ly
    line(this.x - 2, this.y + 60, this.x + 36, this.y + 112);  // Right arm remains static
  }

  move() {
    // Move the left arm
    this.ly = this.ly + this.lyspeed;
  }

  limit() {
    // Limit the arm movement between y+65 and y+80
    if (this.ly > this.y + 80 || this.ly < this.y + 65) {
      this.lyspeed = this.lyspeed * -1;  
    }
  }
}

This class I created was in charge of the stickman. Specifically I want to focus on the arm movement part of the code, which is the variables ly, lyspeed, and the functions move and limit. Initially I had all the variables for all four limbs be the same, which resulted in all four limbs moving at the same time in my sketch, which was not what I intended. Instead, i solved this issue my creating a separate variable that would only vary the y variable of the line that was being drawn, creating an illusion of hand movement, bouncing the ball.

Future Improvements:

One part of the assignment where I wasn’t able to figure out was how to connect the movement of the bouncing ball and the hand movement, to ensure they are always synced up. Right now, they are moving at different speeds, so the animation could go out of sync sometimes. I also want to improve by adding more functions, such as being able to shoot into the hoops.

Week 2 reading reflection

What Casey Reas was trying to show through his talk was the usage of “controlled chaos” through an artistic manner. He gives many examples of art pieces that he took part in where through his code, he determines how much of the piece he was to leave up to chance.  Within my own work I aim to start incorporating randomness within my work through noise and random numbers to determine different aspects of my work like colors or placement. Through watching the talk, I believe the optimum balance depends on the specific works, but it really comes down to utilizing randomness in a way that is still cohesive to the work as a whole. For example, in a music piece, if incorporating randomness, you may not want the timing and the notes to be completely random, sounding like a complete mess, instead, you may want to incorporate randomness and chaos in a way where the piece still works nicely together.

One example piece that he showed during the count that stood out to me the most was the one line algorithm in the commodore 64. Even though it was simply just an algorithm that does a simulation of a coin flip, where one results prints a character and the second result prints a different character. This randomness creates a very unique piece of art that, to the human eye, may look like order. Although this piece was very simple, I found it to be the perfect balance of order and randomness.

Week 2 Assignment: Spinning Records


Concept: 

This idea of records spinning came into my head as I was djing over the weekend and seeing how the dj software looked like:

I was also inspired by the album cover of Kanye West’s album “yeezus”:

My piece inspired by these has a couple of functions. It spins freely when nothing is touching it. Once a mouse is hovering and pressed down above one of the records, that specific records starts slowing down, eventually coming to a stop, much like a real record. Once the mouse is released, the record starts spinning again, but with a different rectangle and central circle color, as if you have swapped the record out.

Code highlight: 

// Rotate and draw elements for each circle
 let angles = [angleLeft, angleRight];
 let rectColors = [rectColorLeft, rectColorRight];
 let innerCircleColors = [innerCircleColorLeft, innerCircleColorRight];
 for (let i = 0; i < centers.length; i++) {
   push();
   translate(centers[i], 200); // Move the origin to the center of each circle
   rotate(angles[i]); // Rotate by the current angle for each circle
   drawSpinningElements(rectColors[i]); // Draw spinning arcs and rectangles
   pop();
 }

// Update angles based on rotation speeds of each record
angleLeft += rotationSpeedLeft;
angleRight += rotationSpeedRight;

This segment of code is in charge of the spinning element of the piece, using a loop, it affects both records. Within the loop, rotate is used to rotate the elements of the rectangle and the arcs. the angleLeft and angleRight incrementing is what creates the animation.

Reflection and future improvements: 

For future improvements of this piece, I would love for the record to be spinning only when music is planning, and/or have the colors respond to different parts of music like drums or snares.

Assignment 1 – Self Portrait

Concepts: 

For this assignment, my concept was a self portrait of me, wearing a NYU shirt, and a sunny and sandy background. I utilized basic shapes to construct the portrait, with the concept being me in NYUAD right now. I aimed to recreate my hairstyle as much as I could on a 2D space. Apart from the portrait of myself, I also drew the sun in the background, which I believe is an important feature of Abu Dhabi.

Portrait

Highlight

I implemented a feature where the nightsky, moon, and stars would show when you click down on the canvas. I used an if statement to detect whether a mouse button was being held down, which is detected with the function ‘mouseIsPressed’.

if (mouseIsPressed){
//nightsky
fill(40)
rect(0,0,400,250)
fill(190)
//moon
circle(0,0,250)
fill(240)
circle(30,24,30)
fill(230)
circle(16,81,15)
fill(215)
circle(48,83,20)
fill(242)
circle(87,19,15)
fill(250)
circle(70,50,30)
//stars
fill(255)
circle(294,25,2)
circle(187,42,2)
circle(361,52,2)
circle(218,9,2)
circle(276,115,2)
circle(279,70,2)
circle(355,85,2)
circle(133,91,2)
circle(215,85,2)

}

Improvements 

For the drawing of the rays of the sun, I tediously drew the triangles one by one to achieve the way I wanted it to look. This was quite time consuming and wasn’t very efficient. In the future, I could utilize a loop to speed up this process.