Assignment 2 – Looping in the Dunes

Concept

When thinking about what kind of loops and patterns I would like to code for my assignment, I had my ideas brainstormed from floral patterns to portraits created using loops. But, I decided to choose a loop concept stylistically resembling the Dune movie. Since, the movie and its style is very diverse and highly aesthetic, I thought it would present a great room for experimentation (and also I am just a fan of the Dune sequel).

Looking through a Pinterest board, I’ve identified main elements that I would implement in my project, which was the sun and the desert. It was also important for me to work on the colors of the design.

Since, the coded image of the Dune universe was not as realistic as in the movie, I decided to add a pop art element of kind of vintage picture of the scene. So, I additionally added loop of the points.

What I’m Proud of
//desert imitation & animation
 fill ('#ea941b')
 stroke('#dd691e');
 strokeWeight (1);
   
 for(let x=25;x<=550; x += 100){
   for (let y=190;y<=510; y += 15){
     if(mouseIsPressed){
       fill(238,159,28);
       arc(x,y,50,15,PI,0)
   }
     else {
       arc(x,y,50,15,0,PI);
     }
   }
 }
   
 for(let x=75;x<=550; x += 100){
   for (let y=190;y<=510; y += 15){
     if(mouseIsPressed){
       fill(216,99,29);
   arc(x,y,50,15,0,PI);
      } else {
       arc(x,y,50,15,PI,0)
     }
   }
 }

I’ve been struggling a lot with how to visualize the dunes in the code. After experimenting with the arcs, I switched from noFill arcs to filled ones, cause they looked more on point in the visuals. Moreover, I wanted to animate the arcs, so I used conditionals to create some difference in the forms and image of moving dunes in the desert. I feel like I could accomplish my vision, even though it took a lot of trials.

Sketch

Reflection

In the future development of this project, I would like to work more on the image of the dunes, to make them more realistic and appealing (so it would be easier to recognize theme of the Dune). I think this could be accomplished through Bezier curves or experimenting with another forms of arcs. Moreover, I would work on interactivity of the project, since even though it is now interactive in some way, I would like to focus specifically on resemblance of the desert environment, such as wind moving the sand or just the sunrise and the sunset. In addition, I think color scheme could be improved, by adding more gradients.

 

 

 

Assignment 2 – Interactive Mandala

Inspiration

For this assignment, the task was to make a simple work of art using loops. My first thought was that  I wanted to make something that resulted in a visually appealing pattern of some sort (with an element of interactivity as well). As I was brainstorming ideas, I scrolled through my Pinterest boards and came across various dot mandala designs. The intricate patterns and vibrant colours of these mandalas instantly caught my eye, inspiring me to create a digital version that would capture the same sense of symmetry and beauty. I wanted to explore this concept – an effect where symmetrical shapes radiate out from a center point, creating an interesting pattern.

Concept

The core concept behind my project is to also incorporate a kaleidoscope-like pattern that keeps rotating, creating a mesmerizing visual effect. I aimed to use symmetrical shapes (circles) and a gradient of colors to mimic the aesthetic of traditional mandala designs. To add an interactive element, I decided to map the number of segments to the horizontal position of the mouse, allowing viewers to alter the complexity of the pattern by simply moving their cursor. This interaction not only makes the art more engaging but also gives viewers control over the visual complexity, making each interaction unique.

Implementation

Here’s the final product!

I started by setting up a square canvas with a black background to make the colours stand out. The origin was moved to the center of the canvas to simplify the rotation and placement of symmetrical shapes. I used two nested loop to create the series of symmetrical shapes (circles in this case) radiating from the center. Each shape is rotated by an equal angle to maintain symmetry. The number of these symmetrical segments is dynamically adjusted based on the mouseX variable, adding interactivity.

Something I explored on my own was how to use the rotate function and incorporated it for two purposes in the artwork:

  • To rotate the entire canvas continuously over time, creating the overall animation effect of the whole mandala rotating.
background(0); // black background
  translate(width/2, height/2);  // moving origin to the center of the canvas (instead of top left corner)

  // Rotating the entire canvas to animate the mandala
  rotate(frameCount * 0.6);  // rotating by frameCount * 0.6 to make the animation and control speed (since frameCount increases with every iteration of the draw() function)
  • To manage the placement of individual symmetrical segments of the mandala.
// Mapping the mouseX position to the number of symmetrical segments (between 6 and 30)
  numShapes = int(map(mouseX, 0, width, 6, 30));
  // print(numShapes);

  let maxRadius = 250;  // max radius (distance from center of canvas till edge) for shapes

  // Loop to create symmetrical patterns
  for (let i = 0; i < numShapes; i++) {
    push(); // saving current drawing style settings and transformations
    rotate((360 / numShapes) * i);  // rotating each shape by equal angles

While working on this project, I also learned to use the map() function, which became necessary for adding dynamic and interactive elements. Initially, I found it challenging to map values between different ranges, but experimenting with map() helped me control aspects like the number of segments, shape sizes and color gradients. By mapping the mouse position to the number of segments, I could easily adjust the pattern’s complexity, and mapping distance to hue allowed for smooth color transitions.

Another thing I did differently was use the HSB (Hue, Saturation, Brightness) colour mode instead of traditional RGB values or HEX codes. This was mainly done to create the smooth gradient that changes as you go outwards in the mandala. By mapping the shapes’ distance from the center to the hue value, I achieved a transition in colour that adds to the overall visual appeal.

Reflections and Further Improvements

Working on this project taught me a great deal about the creative potential of code. It also deepened my understanding of how symmetry and rotation can turn simple elements into complex, visually appealing patterns. Beyond the technical skills, I discovered the importance of experimentation and iteration in the creative process, allowing me to refine my ideas to achieve the outcome I was looking for. For this project, I used circles to keep the design simple, but to achieve a more authentic mandala feel, I might want to incorporate other shapes of varying sizes in the future. This would add complexity and better mimic the intricate details often seen in traditional mandala designs. Overall, this project was a rewarding experience that broadened my perspective on combining art and coding.

Reading Reflection – Week 2

I found myself enjoying Reas’s lecture quite a lot more than I thought, and a big part of that was the endless visual examples of works of art that he showed rather than told. It was interesting to see such diverse forms of art, and some pieces even made me question what art actually is. Some of the pieces honestly just looked like close up clumps of hair (3:08) or balls of lint (10:19). Maybe it was a bit too random for my personal liking. Overall, it was still really cool to see just how much randomness there was, which made me think of how different randomness would be when it comes to humans vs computers. Needing random numbers in our code would be easy work for a computer–(and it would actually be random), meanwhile if I was told to choose a bunch of random numbers, I would choose them based on numbers I like and numbers that are special to me. Since I would be more focused on the significance of the number rather than its randomness, it would end up not being very random.

Going back to computer randomness, I feel like I learned a lot more about the structured potential computers have at creating arts of randomness. Take for instance the black and white squares that changed color depending on heads or tails. It looked pretty alright being that random, but just by adding symmetry, it completely transformed the look of the art, and I enjoyed that a lot more than how it was before. It made me realize that just because it’s random doesn’t mean it has to be messy.

The overall concept of randomness and chance when it comes to creating art is still a new concept to me, but I find it to be interesting, and I’m intrigued to see just how much you can do with randomness and loops combined. I would like to incorporate random color and random movement into my work because 1) I think it would be really cool to see what unexpected and/or expected results come from it and 2) all of my projects would look related if I didn’t let randomness take over. I think the right balance between total randomness and complete control is over how serious things are. In the context of Intro to IM projects, I think the freedom to allow randomness to dominate is fine for the creative visuals, while control is more necessary for coding and the order of the code. In terms of using randomness to create everything, I question just how much it would be considered art if everything stemmed from a computer’s algorithm and you having no control over it. It reminds me of the debate over whether AI art is considered art.

Assignment 2(Loops)- Blinding Lights

Concept

My art assignment was inspired by a The Weeknd concert that I attended. I was amazed by the stage setting particularly how the lighting was done which I really liked. The criss-crossing lights that were constantly moving from all around the stage and changing colors perfectly rhymed with the vibe of the song being performed. If the song was more chaotic the lights would move faster and the color be more dark but when the song was more of chill the lights would move more slowly and be of more bright color. Adding to the video by Casey Reas on art, I came to visualize how the lights bear a chaotic theme in terms of movement and color but this chaos is what makes the concert more lively by creating a good vibe. This inspired me to try and recreate a similar thought but in terms of art. I do this by excluding the stage as a whole and just focus on the lights and the pattern of illumination and color. My art has light coming from the top and side which is moving to represent the light that is fixed to illuminate the stage alone. The circles which change size and color represent the moving lights that illuminate the audience.
Code Highlight
The part of the code that I am really proud of is how I executed the moving circles and making them change their size while moving.

// Changing size of circles
let size = 30 + sin(speed + i * 0.05 + j * 0.05) * 20;

fill((speed * 20 + i) % 255, (speed * 30 + j) % 255, 200);//random colouring
ellipse(x + sin(speed + i * 0.1) * 20, y + cos(speed + j * 0.1) * 20, size);

j += 50;

I implemented this by first ensuring that the circles have a minimum size. Then I used the sine function to generate values that change between -1 and 1. The sine wave makes the circles to move up and down and each circle having a different oscillation . Then by multiplying the sine function by the constant 20 ensures that the size of the circles also changes as they move. This whole results in the circles changing size in a wavy way. The circles also change color depending on their position on the screen which results in the circles having unique color in different places on the screen.

Visual Code

Reflection/Future improvements

I am proud of how I have been able to use loops to come up with something lively as compared to my first assignment. I am also proud of how I explored my creativity and being able to put down my experiences in terms of art using p5. For the future work I would like to have more user interaction with the art work like having mouse or keyboard engagement to directly change the art. I would also like to refine the movements of my art to be more complex and more random in order to embrace Casey’s logic of chaos. Other than that I am impressed with the art that i came up with and the progress that I have had.

Week 2 – Reading Reflection

I enjoyed Casey Reas’s talk more than I expected to, especially considering that this was the first time I had heard the idea of “randomness” and “chance” being used in an artistic context as compared to a math or probabilistic one. After I began to appreciate this notion of chance in art, I was struck by how even this is very subjective and can be used in countless ways.  One example of this is when Casey Reas talked about the concept of decision-making regarding the level of randomness incorporated into artwork. This means that artists sometimes also make conscious choices about how much of their work they leave to chance, creating “a delicate balance between order and chaos”. This also remined me of the quote by Gerhard Richter:

Above all, it’s never blind chance: it’s a chance that is always planned, but also always surprising. And I need it in order to carry on, in order to eradicate my mistakes, to destroy what I’ve worked out wrong, to introduce something different and disruptive. I’m often astonished to find how much better chance is than I am.

What I found extremely interesting about this idea was the intentionality behind randomness in art. It is about letting go of complete control but not entirely abandoning it, which can lead to unexpected, sometimes better outcomes than planned. This challenged my initial assumption that randomness in art is purely accidental and without thought. In the end, it made me contemplate: what exactly is the role of the artist? Is he still the creator of the work, or merely a medium that guides chance to reach the final piece? It also made me consider how we can use randomness not just to fill gaps but as a crucial tool for innovation and breaking away from mistakes.

One part of the talk that made it more interesting for me was the use of examples and actual works of art to illustrate this use of randomness. For instance, I found it very intriguing that something seemingly simple like the Table of Random Numbers could have such widespread use across several industries. I also liked the example of the piece “Fractal Invaders”. The idea of using a coin flip to generate art created very interesting results, but what was even more interesting was how symmetry and duplication suddenly sparks our imagination and makes us see figures in the art. It made me think that something that might initially seem highly structured or algorithmic can still engage the imagination in many ways. Overall, the talk made me rethink the creative potential of combining strict rules with the freedom of randomness, and helped me see that the “unexpected” is an important element in the artistic process.

Assignment 2: Worm

Concept

sandworm – circle – sin/cos wave

I begin with wanting to create a sandworm-looking creature from Dune. During my research, I found out this B&W worm that is visually more appealing than a big yellow worm hiding in the desert.

Few inspirations
Few inspirations

After the initial brainstorm, I started playing around with circle() & ellipse() just to experiment with the for loop. This snippet I got from one of the readings inspired me to show more of the liveness of the basic shapes.

Keeping the shape of the sandworm and the potential movement they might have in mind, I decided to create a wave. With the help of this Youtube tutorial on sin & cos wave, i was able to create a normal wave. By adding framecount into that, I create the illusion as if this sandworm is 3D. To practice using if statement, I added a colorful background that is only triggered when your mouse is moved there.


Somehow Casey Reas came in mind, so I decided to explore a bit further. For the clarity of my worm, I removed the background interaction and replaced all cos with tan. Thi si the final result:

Code & future improvement

I am happy with how the frameCount came in handy in both the fill() & circle. In future, I would give more meaning to the background.

for (i=0; i<width+100; i=i+1){
  fill(
    178+177*cos(i/2 +frameCount/2)
  );
  circle(i, height/2  + 100 * cos(i/100+frameCount/20), 50 * cos(i/30 + frameCount/50))

}

 

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.

Reading response #1: Casey Reas

View code as a tool to bring imagination to life

Reas’ website & talk.

I’m the most impressed by Casey Reas’ ability to code art from the easily overlooked details in life and how some of his works can find their roots in art history.  Every piece he presented contains multiple layers of meaning, with deep consideration before arriving at a final artwork.  Those works draw from scientific concepts, like that neuro model, or something as simple as the characters on a keyboard. They start with such tangible concepts but lands in somewhere abstract. 

What sets coding art apart from traditional forms of art? I believe it’s the ability to accept constant changes. Reas references artists like Duchamp, the Dada movement, and John Cage to illustrate the concept of ‘chance in art.’ These works embrace improvisation as part of the creative process. Coding takes this a step further by having randomness at its core, demonstrating how randomness can have a certain intentionality. It shows how meanings can shift and layer as the program runs. These added-up layers can be endless, not just limited to one canvas and small changes in a code can result in something drastically different from before. Another key distinction is accessibility. Traditional art often requires specific skills and techniques, while creative coding lowers that threshold and provides the public with the tools to easily replicate a great piece of creative coding.

 

Assignment#2_piece of art

CONCEPT:

Two artists have caught my eye for my concept: Vera Molnár and Dr. Bill. Vera Molnár’s use of grids and squares with small touches of randomness was something I thought of as cool and want to bring to my own piece, especially after watching Casey Reas and learning how randomness can create unique art pieces. Her piece “(Dés)Ordres” shows an example of balance between order and chaos by introducing little changes in color and shape within a structured grid (Molnár, 1974). I want to do something similar by using a grid of squares and making each square unique, creating a sense of predictability within the order. The second artist’s art, Dr. Bill’s, has inspired me to incorporate interactive elements into my artwork (Kolomyjec, n.d.). I plan to incorporate an interactive element where the colors of the squares shift as the viewer moves their mouse across the screen, making it engaging.

To be more specific about my design, I will use the loop function to add squares all over the canvas. However, like Molnár’s designs, I’ll also add squares within the squares, but I’ll be using randomness to change either how the square moves or how big it is inside the square, or the colors of the square. Also, I wanted to make it more interesting by picking one color on one side of the canvas that changes with the user and the mouse interaction with it. In addition to that, I wanted to make it a vibrant piece by adding random colors, but as I said, I’ll be choosing one specific color that changes within the interaction of the viewer and the mouse. Hopefully, by combining Molnár’s structured randomness with Dr. Bill’s generative interaction, I am aiming to create a dynamic and engaging piece, by working with order and unpredictability, to make something that evolves with each viewer’s interaction.

The images below are Vera Molnár and Dr. Bill’s work that inspired my piece:

Dr.Bill
Vera Molnar

SKETCH:

HIGHLIGHT:

One part I’m really proud of is figuring out how to make the cubes “shake.” I used the “random()” function to add small random movements to the X and Y coordinates of each square. By setting “randomShakeX” and “randomShakeY to values between -3 and 3, the squares move slightly, creating a subtle shaking effect.

It took me a while to get this right and was the most time-consuming part about my code. I started out by testing  different ranges for the movement and tested the effect with various square sizes. After some trial and error, I found the perfect balance where the shaking felt noticeable but not too chaotic. This part of the code may seem little, but it makes the design feel more dynamic and playful, which is something I was excited to achieve. In the end, I was proud of how it turned out because it brought my art piece together, which proved Casey Reas’s message of how small random changes can make a big difference in how a design feels.

heres a code snippet on how to do it:

// Adding random movement to create an effect of shaking (inner squares)
      let randomShakeX = random(-3, 3); 
      let randomShakeY = random(-3, 3); 

// Draw three inner squares with the shaking effect, decreasing in size.
      rect(x + randomShakeX, y + randomShakeY, 30, 30); 
      rect(x + randomShakeX, y + randomShakeY, 20, 20); 
      rect(x + randomShakeX, y + randomShakeY, 10, 10); 
    }
  }
}

REFLECTION:

One thing I learned from this assignment is how randomness can play a big role in art. It adds variety and surprises that make the piece more engaging. One thing I want to improve is to add more interactions with the user in my piece. For example, I had an idea where pressing a key on the keyboard would change the shapes, and using the arrow keys could adjust the size of the shapes. Along those lines, I’d like to eventually turn the art into a game where people can play with the shapes and make their own patterns that fit their personalities. It would be more fun to do this with the art piece.I’m happy with how the code turned out, though. It makes me feel like the art piece fits with who I am by being colorful and unique.

References

Kolomyjec, B. (n.d.). Dr. Bill, Generative Art OG. https://www.drbillkolomyjec.com/

Molnár, V. (1974). Désordres. Digital Art Museum. https://dam.org/museum/artists_ui/artists/molnar-vera/des-ordres/

 

Reading Response 1

In Casey Reas’ presentation, he explores the tension between order and chaos through the lens of visual art, particularly how software and algorithms have allowed for a deeper engagement with these concepts. His work demonstrates how randomness can coexist with controlled systems, creating art that is both calculated and unpredictable, offering new perspectives on the artistic process. What stood out to me was how his work evolved from simple systems to complex installations, with the unpredictability of the process being the common thread between all his artworks. His reliance on algorithms and chance, combined with borders, reflects a deep connection between control (borders) and randomness(algorithms and chance), making each artwork unique yet part of an artistic collection.

But the real question on my mind is whether his work is considered art. Even though his work stood out to me and it was interesting to see what pieces were created from software, algorithm, randomness and chance, I’m still wondering if this is actually considered a piece of art. I’ve been thinking about this because my twin, who is majoring in visual art, often questions what is considered art. In my opinion, not everything can be considered art; true art is what has been made with genuine feelings, created by hand, and has a meaning or story behind it. Some might argue that it is considered a piece of art because this person programmed it to do this piece of work, but I still argue that even though the person gave the commands the person still didn’t know how the artwork will end up looking like and there isn’t any story or meaning behind this piece of work. So, the question remains: is his work considered art?