Category: Spring 2024 – Aya (Section 003)

Concept

The assignment was to create an artwork using loops in p5.js. I started by experimenting on a canvas size of 500 by 400, by using various shapes and incorporating them to a for loop, for it to be randomly appearing on the canvas. I used Circles, ellipses and rectangles, looped them in such a way that they appear randomly on the canvas with different sizes and colors.

To make it even more interactive, I added a bouncing red ball. When you click on the mouse, the ball starts bouncing from one side of the canvas to the other, and I also increased the frame rate so that when the mouse is clicked, the loop speeds up, making the artwork feel alive and engaging. Overall, I wanted to make something visually interesting that you can interact with, and I had a lot of fun experimenting with loops and movements!

A highlight of some code that you’re particularly proud of

//loop for the generation of random shapes
 for(let i=0; i<80;i++){
   frameRate(2); // generation of shapes slows down
   
   //initializing
   let c= random(width);
   let d= random(height);
   let size1= random(10,100);
   let size2= random(10,50);
   
   // initializing random color
   let r= random(50);
   let g= random(50,225);
   let b= random(50,255);
   
   fill(r,g,b); //random colors of shapes
   //shapes
   circle(c,d,50,50);
   ellipse(c,d,size2,size1);
   rect(c,d,size2,size1);
 }

Embedded sketch

Reflection and ideas for future work or improvements

I want to make it more colorful and add more user interactivity to it, not just the bouncing ball.

The assignment prompted us to create a work of art using loops and other concepts we have learned so far. Looking at the examples provided for the project, I saw many instances of graphical artworks that were created by arranging small objects and shapes into a bigger artwork iteratively, so I focused on creating some custom shape and iterating it smoothly on the whole canvas. I tried to come up with a similar concept from real life and what struck me as a typical example of small shapes iterating to create an artwork was a kaleidoscope. Hence, the idea for this project was to create a custom, colorful shape and reflect it 360 degrees around the canvas, just like the kaleidoscope does. That reflection part is shown in the following code snippet.


for (let i = 0; i < 10; i++) {
rotate(angle);
strokeWeight(8);
stroke(mouseX, colval, colval/1.5, 0.5);
line(mouseX, mouseY, pmouseX, pmouseY); //trace the mouse
push();
scale(1, -1);  //reflect vertically
line(mouseX, mouseY, pmouseX, pmouseY);
pop();
push();
scale(-1, 1); //reflect horizontally
line(mouseX, mouseY, pmouseX, pmouseY);
pop();
}

The shape is drawn by hand in the upper-left corner of the canvas and gets reflected and rotated all throughout the space. The shape is drawn by hand to resemble the chaotic but appealing visuals of the kaleidoscope.
What I would like to work on in the future is more uniform construction of reflections using the appropriate angles instead of arbitrary ones. In addition to that, I would want to enable the user to draw on all of the surface of the canvas, but this might saturate the picture too much, so I yet have to find a solution for it.

Casey Reas’ presentation changed my view of art. I used to think art had to be orderly and follow strict rules. But Reas showed me, through various examples and works that chaos and randomness can be beautiful too. In a world where everything seems structured, whether in music industry, gaming industries etc, adding a bit of randomness to art brings a special kind of beauty. It’s like finding magic in unexpected places.

I liked how Casey Reas said that randomness and chance can be used as a jumping-off point for art, as I believe that such randomness can be used as a catalyst for sparking our imaginations and used for brainstorming new and innovative ideas. As a musician myself, now that I think about it, when I play around with different chords and vocals, I start to explore new ways of singing and playing music. So through this presentation, I see imperfections as part of the charm, and I’m more open to embracing the unpredictable side of creativity.

Concept: The concept of this code is to create an interactive animation of concentric polygons using P5.js. The animation features a series of concentric polygons that rotate around a central point, creating a visually engaging effect. Additionally, the animation can be paused and resumed by clicking anywhere on the canvas, providing interactivity for the user.

Inspiration: My primary motivation for this project stems from my deep passion for cars. As a child, I spent countless hours playing with remote control cars, and one aspect that always fascinated me was the motion of the wheels. I found it incredibly satisfying to watch the wheel rims rotate in a clockwise direction as the speed increased. This experience inspired me to recreate a mesmerizing wheel animation using for and while loops. Additionally, I added an interactive element to the animation, allowing users to pause the concentric polygons by tapping anywhere on the canvas and vice versa to resume the effect. Here’s a simple video on rotatory motion of the toy car’s wheels.

Areas of Code I’m proud: Apart from creating a realistic rotatory motion, I aimed to add an interactive feature similar to the simple buttons used to control the pausing and driving of car wheels. Initially, I encountered difficulty in adding but  later I successfully achieved this feature through the implementation of one particular function: mouseClicked(). So I can say one noteworthy section of my code:is the implementation of the mouseClicked() function. This function toggles the isPaused variable, which controls the pause state of the animation. By toggling this variable based on mouse clicks, the code effectively enables the user to interact with the animation, pausing and resuming it at will. If this feature or option wouldn’t exist, the process of making the art interactive would be so difficult.

P5.js code:

// Define global variables
let angle = 0; // Initialize rotation angle
let rotationSpeed = 0.01; // Rotation speed for the spinning illusion
let isPaused = false; // Variable to track animation pause state

function setup() {
  // Create canvas
  createCanvas(600, 600);
  // Set background color
  background(255);
  // Set drawing properties
  noFill();
  strokeWeight(2);
  stroke(0);
  
  // Define parameters for concentric polygons using a for loop
  let numCircles = 20;
  let radius = width / 2;
  
  // Loop to draw concentric polygons using a for loop
  for (let i = 0; i < numCircles; i++) {
    // Calculate radius for current circle
    let currentRadius = map(i, 0, numCircles, 0, radius);
    // Generate random number of points for current polygon
    let numPoints = int(random(5, 15));
    let angleIncrement = TWO_PI / numPoints;
    beginShape();
    // Loop to draw vertices for current polygon using a while loop
    let j = 0;
    while (j < numPoints) {
      // Calculate vertex coordinates with rotation applied
      let x = width / 2 + currentRadius * cos(j * angleIncrement + angle);
      let y = height / 2 + currentRadius * sin(j * angleIncrement + angle);
      vertex(x, y);
      j++; // Increment counter
    }
    endShape(CLOSE);
  }
  
  // Add a central circle to create illusion of a spinning wheel
  fill(255);
  ellipse(width / 2, height / 2, 50, 50); // Draw central circle
}

function draw() {
  // Check if animation is not paused
  if (!isPaused) {
    // Set background color
    background(255);
    // Update rotation angle
    angle += rotationSpeed;
    // Redraw the artwork with updated rotation using the setup function
    setup();
  }
}

function mouseClicked() {
  // Toggle animation pause state when mouse is clicked
  isPaused = !isPaused;
}

Final Output: Here’s how it looks, click anywhere on the canvas to pause/ resume the wheel.

Reflection and Ideas for Future Work or Improvements: I believe this code successfully achieves the goal of creating an interactive animation of concentric polygons. However, I feel there are few areas for potential improvement and future work:

1) Optimization: The code could be optimized to improve performance, especially when handling a large number of polygons. So instead of 20, I tried of giving number of circles as 50 and the webpage stopped working.

2) User Interface: I feel like there should be more interactive part with many features. Like it would be better if I leave the user few options for adding controls or adding adjusting rotation speed.

3) Additional Features: Incorporating additional features such as color transitions, different polygon shapes, or customizable patterns could add depth and complexity to the animation.

Overall, this assignment was a great opportunity to experiment with loops and conditional statements. Moving forward, I’m willing to learn more and plan to incorporate and fix the above discussed areas to enhance this coding animation in future.

Casey Reas’s talk got me thinking about the relationship between order and chaos that exists all around us . I also thought about the difference between pure randomness and controlled randomness . Reas’s simulations are an example of controlled chaos – where chaos is used along with some sort of constraints to ensure that there is both an element of order and randomness .

On the other hand, there is ‘natural randomness’ – such as the sounds of a waterfall or the pattern of scattered autumn leaves on the ground . I think both of these forms of randomness can lead to beauty and profoundness in unexpected ways .

Reas’s ideas embrace the notion of chaos leading to authenticity and beauty . Chaos is a way to break free from the Structured order . One quote that I really liked was ” I am often astonished to find how much better chance is than myself ” .

His discussion at the end of how new systems open up new possibilities for art is very exciting . His demonstration of how simple algorithms can be tweaked to create different art was very fascinating .Overall, the idea of art that stems from Randomness is very interesting to me and I am excited to explore it further .

Casey Reas’s video about computer-generated art blew me away. I never knew algorithms could create such detailed portraits and buildings. It got me thinking about how these algorithms could be used in lots of real-world stuff like computer games, designing buildings, and making interactive charts. Reas talked about how everything in his art is super precise and carefully calculated using geometry.

The part that really got me was when he showed how a string moved across a surface (Element 5) and how elements orient themselves based on what they’re touching (B6). It reminded me of what we talked about in wednesday’s class (loops: using for and while & making a bouncing ball animation), moreover the illustration resembles just like how atoms behave in sub atomic matter. Also, when he showed the artwork that looked like bacteria under a microscope (Process 18th), I was amazed by how creative algorithms can be. Before this, I only thought of algorithms as powerful tools, but now I see they can also be really creative. Reas used a framework called Processing for his art, and now I really want to learn more about it.

Watching Reas’s video made me realize that algorithms aren’t just for solving problems—they can also make beautiful art. It changed the way I see algorithms. Now, I’m curious about how we can use algorithms to create not just useful things, but also things that are interesting and fun to look at. I’m starting to think about how computer science and art can come together in cool and diverse ways. In conclusion, Reas’s video opened my eyes to a whole new world of possibilities, and now I’m eager to explore more about algorithmic art and how it all works.

Casey Reas’s insights into the dance between randomness and order in art have really got me thinking. It’s like he’s saying, “Hey, the world is way more unpredictable than we like to admit, and that’s okay.” This whole spiel about embracing chaos instead of always trying to keep things neat and tidy in our art—it’s pretty revolutionary. Historically, we’ve been obsessed with making everything orderly, but Reas is challenging us to break free from that. He’s suggesting that maybe, just maybe, there’s beauty and authenticity in letting randomness take the wheel now and then.

And that’s got me pondering why we’re so hung up on order in the first place. Is it because it feels safer and more comfortable? Reas throws out this idea of creating your reality, which hits home. It’s like he’s saying we cling to order because it’s familiar, but what if we stepped out of our comfort zones? Imagine the wild, unpredictable art we could create if we were willing to get a little uncomfortable, to embrace the chaos instead of running from it. It’s a bit scary to think about but also thrilling. It makes me wonder what kind of art we’re missing out on by sticking to the same old patterns. Maybe it’s time to shake things up, to see where a little randomness can take us.

The Concept

I created a dynamic grid of squares that continuously change in color and size, creating a mesmerizing animation effect. Perlin noise, sine, and cosine functions influence the grid’s behavior, which modulates the color and the size of each square in the grid based on the frame count variable. This results in a fluid, ever-changing pattern that is both visually appealing and technically intriguing.

Highlight of the Code

What stands out in the code is the use of mathematical functions to drive the animation’s dynamics. Specifically, the combination of Perlin noise, sin, and cos functions with the frameCount variable to alter the color and size of the squares over time showcases a sophisticated understanding of how to create complex visual effects with relatively simple code.

// Calculate noise-based angle and size variations using Perlin noise
let noiseFactor = noise(i * animationSpeed, j * animationSpeed, frameCount * animationSpeed);
let angle = noiseFactor * 360;

//more color and size variations using Sine Cosine 
//https://p5js.org/examples/math-sine-cosine.html
let colorShift = (sin(angle) + 1) * 128;
let sizeShift = (cos(angle) + 1) * (gridSize / 0.1);

Embedded Sketch

 

let gridSize = 20;
let animationSpeed = 0.01;

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  noStroke();
}

function draw() {
  background(220);
  
  //nested for loop to go through each grid position
  for (let i = 0; i < width; i += gridSize) {
    for (let j = 0; j < height; j += gridSize) {
      push();
      
      // Calculate noise-based angle and size variations using Perlin noise
      let noiseFactor = noise(i * animationSpeed, j * animationSpeed, frameCount * animationSpeed);
      let angle = noiseFactor * 360;
      
      //more color and size variations using Sine Cosine 
      //https://p5js.org/examples/math-sine-cosine.html
      let colorShift = (sin(angle) + 1) * 128;
      let sizeShift = (cos(angle) + 1) * (gridSize / 0.1);
      
      // Apply transformations
      translate(i + gridSize / 2, j + gridSize / 0.5);
      rotate(angle);

      fill(colorShift, 100, 150, 200);
      rect(-sizeShift / 2, -sizeShift / 2, sizeShift, sizeShift);

      pop();
    }
  }
}

Reflection

The integration of Perlin noise into the animation brings a significant enhancement in terms of visual and organic dynamics. Moving away from the predictable cycles of sine and cosine functions, Perlin noise introduces a natural, fluid variability to the movement and transformation of the grid. It showcases the power of combining mathematical concepts with computer graphics to simulate natural phenomena.

Future Work

Develop an interactive landscape where users can influence the flow and form of the animation through mouse movements, clicks, or keyboard inputs, simulating natural elements like wind or water currents.

We live in an era of disciplines. Human nature’s inclination to have everything organized and well-structured always creates certain rules in any kind of field. I remember watching a video on YouTube of a college entrance exam for the School of Art in South Korea. Of course, all of the paintings were amazing, but it somehow made me think that the drawings were quite artificial. I felt like there was no creativity in terms of how those drawings were made. Particularly, it was like copying things in the world rather than engaging in a creative process. I love order and discipline, so I always tend to create certain rules, but in the art field, I find myself looking for something beyond the rules I know.

Reas’s talk was eye-opening for me in the sense that I found the answer to why I was searching for some sort of chaos in arts. The world is not structured in the way that we might expect. There is no such thing as absolute order. We always face unexpected circumstances that can entirely change the outcome. I found this pattern of unexpectedness very similar to the idea Reas was raising. The difference between chaos and order is not as huge as we might expect. A single change in the algorithm can turn the entire art piece into randomness. However, the act of letting randomness do its further work and create chaos is what makes art beautiful. We actually think of it as discipline, but we live in a lot of chaos. But that’s not necessarily wrong. It takes courage to break rules. But I think that courage can make us special. That kind of specialness is what I wanted to see in art.

Assignment 2- A Nocturnal Landscape

Concept

I wanted to create a vivid landscape scene with a night sky, mountains, trees, and an ocean using basic p5.js shapes like rectangles, ellipses, and triangles. I used basic shapes and coordinates, but tried to make the end result visually interesting and cohesive even if not realistic. I used a loop for the stars to randomise their position on the canvas. I also slowed down the frame rate to have a calming feel to the overall movement of the stars.

This is my final artwork:

I’m most proud of the for loop I created to make the gradient sky:

 // pretty sky
for(let i=0; i<=300; i+=5){
strokeWeight(5);
stroke(255-i,128-i,64);
line(0,300-i,width,300-i); // x,y,x,y
}

This loops over and over again and draws coloured lines that transition smoothly from dark blue to orange. The decreasing RGB values create the gradient illumination. I took inspiration from an existing p5js project by @urbanatwork for the gradient.

I spent the most time on the coniferous trees, positioning the triangle branches and creating the function proved trickier than expected but I am proud of how reusable and handy I made it. This is the drawConiferousTree() function:

function drawConiferousTree(x, y, a, b){
//tree trunk
fill('#691C37');
ellipse(x, y-20, a, b);
//tree branches
triangle(x-15, y-20, x+15, y-20, x, y-50);
triangle(x-15, y-30, x+15, y-30, x, y-60);
triangle(x-15, y-40, x+15, y-40, x, y-70);
}

What I like about this is it allows me to easily draw as many tree shapes as I want by just calling this function each time with the tree’s x,y coordinate, trunk width, and trunk height.

For example, to make two trees at different places, I can just do:

drawConiferousTree(15, 305, 4, 20);
drawConiferousTree(35, 310, 4, 20);

The variables a and b even let me adjust an individual tree’s proportions if needed.

I learned that making custom functions with parameters is hugely helpful when you want to repeat elements, like trees of the same style but different sizes and positions. It’s like having a custom stamp that you can use wherever you want!

Reflection

I’m thrilled with how this landscape came together. The colours, composition, and simplicity have an engaging but simplistic aesthetic that is calming to look at. I definitely plan to keep working on this piece.

Going forward, I want to add more interactivity into the scene to bring it alive. For example: Make the sun rise and set over the mountains as I move my mouse vertically across the screen. This would create daylight cycles and slowly change the sky colour. I would love to further experiment with the sky gradient as well.

This project has me hooked to p5js and its endless opportunities for creative projects in the best way. I’m excited to include more interactive and engaging elements in my projects moving forward.