Assignment 2 – Khalifa Alshamsi

For this assignment, I am not sure I drew my inspiration from the right place; I ended up being inspired by the Club Penguin dance floor. For some reason, while playing around with different-sized squares in p5js, that was all I remembered when I aligned them.

For reference:

The sketch:

While it isn’t the same proportions as the Club Penguin dance floor, It was because I wanted it to be more visually appealing with the size. After all, this is supposed to be an art piece…

let numTiles = 10; // Number of tiles across and down
let tileWidth;
let tileHeight;
let colors = [];

function setup() {
  createCanvas(600, 600);
  tileWidth = width / numTiles;
  tileHeight = height / numTiles;

  // Initialize colors array with bright colors
  for (let y = 0; y < numTiles; y++) {
    colors[y] = []; // Create a nested array for each row
    for (let x = 0; x < numTiles; x++) {
      colors[y][x] = color(random(255), random(255), random(255), 255);
    }
  }

  frameRate(10);
}

function draw() {
  for (let y = 0; y < numTiles; y++) {
    for (let x = 0; x < numTiles; x++) {
      // Randomly change the color of each tile to mimic the dance floor lighting effect
      if (random() < 0.1) { // 10% chance to change color each frame
        colors[y][x] = color(random(255), random(255), random(255), 255);
      }
      
      fill(colors[y][x]);
      rect(x * tileWidth, y * tileHeight, tileWidth, tileHeight);
    }
  }
}

I would say the effect function confused me so often when it came to understanding it because I didn’t want the colors to change so frequently. Still, also the issue that came up was the sketches I had taken down in class did not fully explain how things worked when it came to the randomness part and how quickly it would change, so hopefully, in the upcoming classes, I will get better at note taking so that when it comes to coding, I get to understand it better when I go back and take a look at it.

Assignment 2 – Linh Tran – Tic Tac and Toe

I was trying to apply what I have learnt in class into 1 project. However, since I am not particularly good with art, I decided to do an interactive project. This was when I remember of a game that I played a lot with my friends before: Tic Tac Toe.

I used a nested for loop to create a 2D array so that all the steps can be stored and correctly outputted. Since I want the game to be 2 players, as the way it is in  Tic Tac Toe, I used different colors (black and white) to signify for the difference in players.

In this assignment, I aims to make everything as flexible as possible. Therefore, I made the dimensions of the board environment editable. In other words, the user can change the dimension before starting the game. Below is the code for displaying the moves with any initialized dimensions:

for (let i = 0; i < boardSizeX; i++){
  for (let j=0; j < boardSizeY; j++){
    if (moves_lst[i][j] > 0){
      fill("white");
      ellipse((i + 1)*widthX - widthX/2, (j+1)*widthX - widthX/2, widthX, widthX);
    }
    else if(moves_lst[i][j] < 0)
    {
      fill('black');
      ellipse((i + 1)*widthX - widthX/2, (j+1)*widthX - widthX/2, widthX, widthX);
    }
  }
}

I part that I am proud of is doing the checking condition. I used the nested for loops to loop through every single piece and 4 cases (horizontal, vertical, diagonal left, and diagonal right). However, I also think that it is not the most efficient way to write this the program need to loop through every element in the array for every draw loop.

function checking_win(player){
    //horizontal
    for (let i = 0; i < boardSizeX; i++){
      for (let j=0; j < boardSizeY-4; j++){
        if (moves_lst[i][j] == player && moves_lst[i][j+1] == player && moves_lst[i][j+2] == player && moves_lst[i][j+3] == player && moves_lst[i][j+4] == player){
          return true;
        }
      }
    }
   //vertical
    for (let i = 0; i < boardSizeX-4; i++){
      for (let j=0; j < boardSizeY; j++){
        if (moves_lst[i][j] == player && moves_lst[i+1][j] == player && moves_lst[i+2][j] == player && moves_lst[i+3][j] == player && moves_lst[i+4][j] == player){
          return true;
        }
      }
    }
    //diagonal right
    for (let i = 0; i < boardSizeX-4; i++){
      for (let j=0; j < boardSizeY-4; j++){
        if (moves_lst[i][j] == player && moves_lst[i+1][j+1] == player && moves_lst[i+2][j+2] == player && moves_lst[i+3][j+3] == player && moves_lst[i+4][j+4] == player){
          return true;
        }
      }
    }
    //diagonal left
    for (let i = 3; i < boardSizeX; i++){
      for (let j=0; j < boardSizeY-4; j++){
        if (moves_lst[i][j] == player && moves_lst[i-1][j+1] == player && moves_lst[i-2][j+2] == player && moves_lst[i-3][j+3] == player && moves_lst[i-4][j+4] == player){
          return true;
        }
      }
    }
}

Reflection:

In general, I want to improve the algorithm for the checking function. Also, the current codes only allow modification directly on the codes.  I want to make it more user friendly by allowing to make changes on the displaying screen.

Below is my p5.js screen:

Reading Reflection – Week 2

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.

Assignment 2 – Pavly Halim

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.

Reading Reflection – Week 2

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

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.

 

 

 

Raya Tabassum: “Chaotic Harmony” art

The artwork is supposed to represent a grid filled with random circles, squares, and triangles, each with a unique color. The number of shapes in each grid tile is also randomly determined, adding an element of unpredictability to the artwork. The black background and semi-transparent colors contribute to a visually dynamic and intriguing composition. The outer loop iterates through the x-axis, and the inner loop through the y-axis, creating a grid of tiles. The use of a while loop inside the nested loops allows for the random generation of multiple shapes within each tile. The switch statement is employed to choose between drawing circles, squares, or triangles based on a randomly generated shape type.
The element of interaction is when the user clicks on it, it alters the composition randomly every time with new colors and grids. This intricate dance creates a mesmerizing grid of shapes, each telling its own colorful story. And if you click on it rapidly, you can see some shapes forming on their own and the whole artwork feels like it’s moving.
I think the artwork effectively utilizes loops to create a visually engaging and dynamic composition. The randomization of shape count and type introduces an element of surprise, making each iteration unique. For future work or improvements, I could experiment with additional parameters such as varying the size or rotation of shapes, and introducing gradients. I also envision expanding the symphony of this visual experience by integrating sound. Each shape could emit unique tones, creating a multi-sensory journey. Additionally, exploring interactive elements, allowing users to dynamically influence the composition in real-time, could open up new dimensions for artistic expression and engagement.
The inspiration came from my desire to make something very vibrant with popping colors and simple shapes. Changing the “tileSize” and playing with different outcomes every time was a really fun experience until I found the visuals I most loved. As I reflect on this creation, I find joy in the harmonious chaos that emerges.

function setup() {
  createCanvas(600, 600);
  noLoop(); //Only draw once
}

function draw() {
  background(0); //Start with a black background
  let tileSize = 10;

  for (let x = 0; x < width; x += tileSize) {
    for (let y = 0; y < height; y += tileSize) {
      let shapeCount = floor(random(1, 5)); //Determine how many shapes to draw in each tile
      let i = 0; //Initialize while loop counter

      while (i < shapeCount) {
        //Generate a random color for each shape
        fill(random(255), random(255), random(255), 200);

        //Randomly choose a shape to draw
        let shapeType = floor(random(3)); // 0, 1, or 2
        switch (shapeType) {
          case 0: //Draw a circle
            ellipse(
              x + tileSize / 2,
              y + tileSize / 2,
              tileSize * 0.5,
              tileSize * 0.5
            );
            break;
          case 1: //Draw a square
            rect(x + 10, y + 10, tileSize - 20, tileSize - 20);
            break;
          case 2: //Draw a triangle
            triangle(
              x + tileSize / 2,
              y + 10,
              x + 10,
              y + tileSize - 10,
              x + tileSize - 10,
              y + tileSize - 10
            );
            break;
        }
        i++; //Increment while loop counter
      }
    }
  }
}

//Allow for regenerating the artwork on mouse press
function mousePressed() {
  redraw(); //Redraw everything
}

 

 

When you change “tileSize”:

Luke – Reading Reflection – Week 2

I find the work that he did the Process 18 project to be very interesting. It’s about the nature of noise or jitters. I think that whether in a controlled or uncontrolled environment, noise particles seem to group together, or in other words, homogenize, and create odd/unique patterns. Reas proves in this project that his noise system gradually became homogenous and over time, the system still kept its homogenous characteristic but added more resolution in time and space. What I wish Reas could do is maybe to add some sort of catalyst to the noise experiment, to see how such a catalyst could impact the way the particles behave over time, mimicking the real environment.

I also find his commission work in creating composited photos for the Frank Gary in Miami Beach as a miniature version of the Disney Concert Hall Los Angeles to be intriguing. Reas and his colleague Rosner used randomness as a jumping off point in tailoring the printed compositions. A lot of decision making was also taken into account to determine how they want the compositions to feel like. One of the details Reas shared behind the process is that the team rolled the dice in putting the images of the neighborhood together wherever they want it to be with a condition that they had to be at 90° angles to trigger the final composition. We talked about how randomness can prove to be a useful tool in coding in class. In Reas’ example, it not only helps him and his colleague come up with exciting artworks but also acquire a firmer grasp of the process while observing the pattern to arrive at the outcome. His work support the fac that randomness and decision making, although seeming to contrast one another, can be a helpful combination for observation in interactive media coding.

Luke Nguyen – Assignment 2

Concept:
During last week, I got to listen back to one of my favorite song, “Sativa” by Jhené Aiko from her album “Trip.” I have been obsessed with this song since high school. What really interests me is the cover for the album:

Jhené Aiko, Trip

It has graphically designed rings that circularly loop around the square cover. So, I thought I’d apply the concept learned in class to recreate my interpreted version of this album cover.

A highlight of some code I’m particularly proud of:
I’m particularly proud of creating the circular loops of the rings. I learned how to do the circular loop from Daniel Shiffman’s The Coding Train YouTube video here (https://www.youtube.com/watch?v=rO6M5hj0V-o), at around 6:27 where he teaches using the sin and cos in the for loop.

drawingContext.shadowBlur=10;
drawingContext.shadowColor=color('rgb(250,84,0)');

// first loop of rings
for (let m = 0; m < 1440; m += 30) {
noFill()
let x = 50 * sin(m) + 200;
let y = 50 * cos(m) + 200;
stroke('rgb(250,84,0)')
circle(x,y,50)

Embedded sketch:

Reflection:

Creating a loop in a circular motion is rather fascinating to me. I was trying on my own to create the effect, but to no avail. Coincidentally, I was experimenting with creating custom shapes different from the primitive shapes we’ve learned in class while learning p5js on my own. And my research online into how to do so led me to come across Daniel Shiffman’s video that taught me how to create custom shape and create a circular loop.

I had fun creating all the loops and the circles. I played around with the input for the function within the loop to create the effect. Since I have multiple loops of rings for the assignment, I have to use multiple loops.

To emulate the colors from the album cover, I also looked up how to add the glow effect to an object in p5js and came across a video by Kazuki Umeda at https://www.youtube.com/watch?v=iIWH3IUYHzM. I added two functions for the effect, namely “drawingContext.shadowBlur” and “drawingContext.shadowColor=color”.

And for the girl in the center, it’s just an uploaded transparent png file. But in order to know how to insert an image, I also look up a p5js reference created by claesjohnson https://editor.p5js.org/claesjohnson/sketches/f0huO1Y4h.

Ideas for future work or improvements:

  • The codes for the loops right now are rather repetitive, so I’m trying to figure out how to clean them up, maybe into another “while” or “for” loop.
  • I wanted to add a radial gradient background and use the white color for the looped rings instead but I didn’t know how to do so, so this is another idea for improvement.
  • I also wanted to experiment with a shape that looks like a parabol instead of the primitive circle.

Week 2, Assignment 2: “Samsung” by Hyein Kim

You might wonder why the title of this art piece is “Samsung.” Yes, it is the name of the popular electronics company in South Korea. Actually, “Samsung” in Korean translates to “three stars.” Just a fun fact: I am a huge fan of Samsung Electronics. All of the electronics, including smartphones, tablets, smartwatches, earphones, and laptops that I use, are from Samsung 🙂

I really like the shape of the star, so my initial goal was to use the star shape in some way to create art. Initially, I used lines with a ‘for’ loop to create the star shape. However, I later changed my mind to use lines in the background and triangles instead for the star. Afterwards, I wanted to add animation to my art piece. I wanted my background to change somehow. My initial idea was to create a gradation of lines in the background moving from top to bottom, but I could not figure out how to do that, so I changed my plan to make the background color change to white.

To make that idea come true, I made an animation using two white lines moving toward the center. Then, I moved the background color to the setup so that the background color would not change to black again while the white lines were moving towards the center. Using the ‘if’ function, I coded the background color to change to black again if the lines reached the center, so that all of the setups could be reset. This part of my code became the proudest work for this assignment.

//background animation
stroke('white')
x1 = x1 + 1
line(x1, y1, x1-400, height)
if (x1 > width) {
x1 = 0
background('black')
}

stroke('white')
x2 = x2 - 1
line(x2, y2, x2+400, 0)
if (x2 < 0) {
x2 = 400
background('black')
}

stroke('white')
//white lines in the background
for(let x = centerX - 200; x < centerX + 200; x += 5) {
line(centerX, centerY-200, x, height)
}
for(let x = centerX - 200; x < centerX + 200; x += 5) {
line(centerX, centerY+200, x, 0)
}

While I liked the outcome, when I saw the empty space on both the left and right sides of the star, I came up with an idea of creating two more little stars which would have black colors, so that they would appear while the background color changes to white. While the background is black, they are not seen.

I really like the work I have done, but for further improvements, I would like to try to achieve my initial goal of making the background using line gradation.