Category: S2025 – Shiloh

Concept

For my art project, I initially aimed to create dynamic helix structures using sine and cosine functions combined with loops. I wanted something dynamic and wavy like in the image below I saw from the Computer Graphics and Art resource document;However, achieving a realistic 3D effect proved challenging. Despite this, my efforts were not wasted—they laid the foundation for my new project: Color Waves. Throughout the process, I discovered my passion for interactive art, balancing control with an element of randomness in the colors.

Code Highlight

I’m particularly proud of how I successfully integrated sine curves and loops to create a smooth, gradual increase in the size of both circles and squares.

for (let x = initial_x + offsetX; x < width; x += spacing) {
  for (let y = initial_x + offsetY; y < height; y += spacing) {
    let size = sin(frameCount * 0.05 + (x + y) * 0.01) * 15 + 30;

Reflection & Future Improvements

Although I didn’t fully achieve my original vision of a helix, I notably improved from my previous project as far as interactivity is concerned.  I also gained valuable insights throughout the creative process. This experience has deepened my interest in digital art, and I’m excited to explore and master 3D figures and objects in future projects.

CLICK 🙂

 

 

Concept

While looking through  the old computer art magazines, I came across a design that instantly reminded me of pixels and TV static. The random arrangement of small squares felt similar to the scattered and colourful pattern on an old television screen.After seeing this, I wanted to recreate something along those lines, using code to generate a pixelated display that mimics this static.

This project was the perfect opportunity to experiment with loops and randomness, especially when it came to generating different colors for each pixel. So, by using a loop to fill the screen with these randomly colored squares, I was able to create a simple yet visually interesting effect that kind of recreated the essence of  this TV static.

Process

For this project, the TV frame and buttons were easy to set up, where I used  basic shapes like rectangles and ellipses.

//tv
fill(50);
rect(100, 100, 300, 220, 30);

// antenna
stroke(50);
line(150, 70, 200, 100); 
line(350, 70, 300, 100);
ellipse(150, 70, 10, 10);
ellipse(350, 70, 10, 10);

The most interesting part was creating the static effect on the screen. In this case I used used two nested for loops to generate the grid of small squares, each filled with a random color. This randomness gave the appearance of the moving static, similar to an old television with no signal. One challenge was making sure the pixels aligned correctly within the  shape of the tv, which required adjusting the starting and ending values of the loops. Once that was fixed, the effect worked well, and I liked how the simple loop and random color values could create something visually engaging.

  // pixels in tv
  for (let y = 120; y < 280; y += 10) {
    for (let x = 135; x < 355; x += 10) {
      fill(random(200), random(200), random(200));
      rect(x, y, 10, 10);
    }
  }
}

Reflections & Improvements for Future Work

Overall I’m very happy with how my project turned out. However if I were to improve this I could add more interactivity. To do this I could make the pixels change color when the mouse hovers over them or allow a mouse click to generate a new static pattern. I could also add like different channels to the tv, and add a remote control to allow the users to change channels.

Concept

This concept originated from the fact that our lives are never still, and I recently have been getting more and more aware and educated about the importance of mental health which inspired me to do this design. The initial idea was inspired from this piece of art.

The core of the design lies within the order of our lives, which I will represent using a grid of rectangles with varying sizes to represent life responsibilities and events with varying importance which is relevant to the size of the rectangles. The grid then, after a set period of time, begins to mosh into itself creating a sense of confusion and loss of control, which will reset after the user clicks on the screen. This resembles the idea that, mental problems will follow people despite them avoiding them or not trying to get them. Then, to reset the grid, the user has to take action, not just give in into the moshing effect and allow the mental problems to consume them. After the user clicks, the grid comes back and the timer resets, but the grid doesn’t come back to the same initial state as some mental problems are life changing and can leave a scar.

Sketch

Code Highlights

  for (let i = 0; i < 10; i++) { // using a for loop as a timer
    timer++; // increment timer
  }
  
   if (timer >= timerLimit) {
// randomly mosh over time
}

This is my usage of a for loop for a timer, where the variables timer and timerLimit have been initialized as global variables.

 

let randomX = random(width); // grab random x location
let randomY = random(height); // grab random y location

let moshedArea = get(randomX, randomY, 30, 30); // get the specific area with the random x and y positions with size 30
let offsetX = random(-10, 10); // move the area randomly between a range of 10 and -10
let offsetY = random(-10, 10); // same thing

   // redraw the image
image(moshedArea, randomX + offsetX, randomY + offsetY);  }

This is how I did the moshing effect by grabbing random blocks in the sketch and offsetting them between a range of -10 and 10 pixels each direction. Here’s the link for the code I found online to help me/inspire me to write my own moshing code.

I wanted to use a while loop but that crashes my browser for some reason, potentially due to ram usage or the browser i am using is not compatible with p5, so I used the draw function for this effect which I interpreted basically as a while(true) loop.

 

For the drawing of rectangles, I made a function that draws rectangles through a for loop, where indices i and j indicate the amount of rectangles the loop is gonna draw. Since the time complexity is O(n * n), therefore the loop below with n = 30, will iterate 900 times, creating 900 rectangles. This could be changed to illustrate the drawing in a different way.

The x and y variables are set to the counters i and j respectively then multiplied by the value rectSize, which determines the spacing between the rectangles.

This is similar to the following:

where the n in this case in either i  or  j.

function drawGrid() {
  let rectSize = 20; // base grid size
  timer =0; // reset timer
background(0);
  for (let i = 0; i < 30; i++) {
    // rows
    for (let j = 0; j < 30; j++) {
      // columns
      let x = j * rectSize; // X position
      let y = i * rectSize; // Y position
      let w = random(1, 20); // width between 1 and 20
      let h = random(7, 20); // height between 7 and 20

      fill(0);
      stroke(255);
      rect(x, y, w, h); // draw rectangle
    }
  }
}

 

Reflection and self improvement

I wanted to rotate each square, but the process of doing that seemed a little bit out of my knowledge scope and I did not want to just copy what I found online without understanding, so I assume the next step would be stepping out of my comfort zone and learning concepts I am not familiar with like the use of rotation when drawing shapes. This is also not the exact use of data moshing as it is sometimes used for transitions when video editing, I want to implement that using code but that is a little bit too hard with the limited knowledge I have right now.

I would also love to add an effect of pixel sorting, which I usually used to do when I used to create my motion graphics videos, but now with p5.js this is a new realm that I want to explore slowly and not rush, so I will probably come back to this sketch and improve it more when I have more experience with p5.js and implement the pixel sorting effect.

 

Thank you for reading.

-Mustafa Bakir

The interplay between order and chaos in art is certainly a must when it comes to modern day art, especially art that is created digitally. I would argue that the usage of randomness and order definitely depends on the context of the art piece itself, which could determine whether the artist should obey every drawing/sketching principle or go full dice mode and rely on randomness of outcomes.

For my own work this week, I am already in the process of creating an ordered set of rectangles and employing an effect of “data moshing.” Data Moshing is a technique in which the footage is manipulated to look ‘trippy’ or ‘glitchy,’ usually by manual compression (see reference)

The idea of data mosh is usually very random as it takes random pixel ranges from the screen and offsets them, creating a gltchy effect that confuses the brain for a split second then it gets processed by it. The idea of my work is for the user to have a sense of what the art piece was before the moshing begins, then over time, the image would distort and gets moshed into a glitchy image shaped by the randomness of how pixels are shifting. Then, I am to add interactivity by resetting the effect. I would like to think about this art piece as how mental problems affect coherence of our brains, and the user interactivity advocates for mental health awareness and to try to combat and fight those mental problems and not let them consume our “order and coherence” over time.

I think for the purpose of my art piece, this balance between order and chaos is seamless, as shifting the balance to any of the binary directions would result in a different message or would not convey my thoughts accurately.

 

-Mustafa Bakir

1. Concept

In the beginning of this process in producing a computer graphic artwork, I was inspired by traditional patterned Indonesian batik. As I searched up some designs, my attention was kept by one particular design. I was struck by the magnitude of breathtaking blue and daring strokes of the artist here. I knew that for my artpiece, I wanted to incorporate water waves.

I was partly inspired by my memories of swirls I’d seen in Starry Night by Vincent Van Gogh and the almost swirly-shaped water wave Under the Wave off Kanagawa by Katsushika Hokusai. I wanted to incorporate patterns of swirls which highlight the tidal aspect of seawater, along with sine waves to depict its wavy nature.

I thought of having my artwork depict a scene, so while keeping patterns as a motif in this piece, I added a sun composed of concentric circles, a sky made of turquoise and cyan waves (because I thought these colours looked cool) and rainfall. However, upon revising my plan much later, so that I would draw a night scene, I realised that a moon instead of a sun makes more sense, as well as dark blue and violet colours for the sky instead of turquoise and cyan.

In order to code up this piece, I first had to study the fundamentals. To generate a spiral, I studied The Coding Train’s explanatory video on polar coordinates. It was very crucial in helping me understand why using the 2D polar coordinate system (location described in terms of radius and angle) is crucial in drawing special (and especially circular shapes) than the 2D Cartesian coordinate system (location described in terms of x- and y- coordinates).  Through this video, I got the idea to draw a spiral: I could use the formula for a circle, except I would increase the angle while decrease the radius over time. This is much preferred over using describing a multitude of precise x- and y- coordinates.

At first, my idea to generate an animated sine wave was to move an entire sine wave line to the left or to the right. However, after watching two of The Coding Train’s explanatory videos one on simple harmonic motion and one on graphing sine wave, I realized there’s another really interesting approach. Start from a dot oscillating up and down, then make an array of such dots, all oscillating up and down but with varying period and frequency.

2. Code Highlights

Firstly, generating the spirals, a complex shape is a highlight of the project, and a huge challenge as well. I faced multiple issues:

• Incorrect loop structure: The inner loop used ‘i’ instead of ‘j’ as the variable, potentially causing a conflict with the outer loop. Additionally, the inner loop was never updated, potentially causing an infinite loop.
• Spiral positioning: My translate() was not positioning each spiral correctly, resulting in spirals being drawn on top of each other.
• Spiral reset: Whilst the angle and radius were reset, it was done outside the loop that drew the spiral, so this would cause just one dot of each spiral to be visible, with each point of the spiral being drawn on top of the other spiral points.

At one point, my canvas wasn’t visible, and I think it was because of an infinite loop occurring. AI was a useful resource to help me resolve this, as well as provide suggestions for my code. I learned one correct approach of drawing many spirals: by translating each spiral using i and j and incrementing by the spiral radius (in order to space out spirals evenly with some padding between them).

let angle_spiral = 2.5;
let r_spiral = 30;

function drawSpirals() {
  for (let i = 0; i < (height / 2 - 20) / (r_spiral + 20); i++) {
    for (let j = 0; j < width / (r_spiral + 20); j++) {
      push();
      translate(
        j * (r_spiral + 20) + r_spiral,
        300 + i * (r_spiral + 20) + r_spiral
      ); // spaces out spirals evenly with some padding between them
      strokeWeight(2);
      stroke(0, 191, 255);
      let tempAngle = angle_spiral;
      let tempRadius = r_spiral;
      while (tempRadius > 3) {
        let x = tempRadius * cos(tempAngle);
        let y = tempRadius * sin(tempAngle);
        point(x, y);
        tempAngle += 0.2;
        tempRadius -= 0.2;
      }
      pop();
    }
  }
}

 

Second, another highlight is the sine waves representing the sky. To implement the array of dots, we need to first find out the total number of wave dots that can fit across the entire width of the canvas. Then comes the mapping function, which becomes really important in generating the sine waves. In this case, it maps each point’s position i along the wave to an angle between 0 and 8*PI radius.

let sky_angles_wave = [];
let r_wave = 0.5;
function setup() {
  ...
  let total_wave_dots = floor(width / (r_wave * 2));
  ...
  for (let i = 0; i < total_wave_dots + 1; i++) {
    sky_angles_wave[i] = map(i, 0, total_wave_dots, 0, 8 * TWO_PI);
  }
  ...
}

In the drawing function, the x-coordinates (or angle) of the sine wave will be mapped to span the entire width of the canvas (600 px). The y-coordinates (or sine of each angle in sky_angles_wave) is mapped to a value between -15 to 15, resulting in a sine wave with an amplitude of 15.

function drawSky() {
  for (let y = 15; y <= 210; y += 30) {
    push();
    translate(300, y);
    fill(0);
    strokeWeight(6);
    stroke(81, 97, 199);
    beginShape();
    for (let i = 0; i < sky_angles_wave.length; i++) {
      let y = map(sin(sky_angles_wave[i]), -1, 1, -15, 15);
      strokeWeight(2);
      let x = map(i, 0, sky_angles_wave.length, -300, 300);
      vertex(x, y);
      sky_angles_wave[i] -= 0.001;
    }
    endShape();
    pop();
  }
  for (let y = 15; y <= 210; y += 30) {
    push();
    translate(300, y);
    noFill();
    strokeWeight(4);
    stroke(0, 104, 198);
    beginShape();
    for (let i = 0; i < sky_angles_wave.length; i++) {
      let y = map(sin(sky_angles_wave[i] + PI), -1, 1, -15, 15);
      strokeWeight(2);
      let x = map(i, 0, sky_angles_wave.length, -300, 300);
      vertex(x, y);
      sky_angles_wave[i] -= 0.001;
    }
    endShape();
    pop();
  }
}

Each point can shift down and up using: sky_angles_wave[i] -= 0.001;

Last but not least, apparently creating dotted lines (for the rainfall) is quite complicated. So I tried to think of another way. I used black sine waves to cover the grey rainfall.

All in all, this was a complex code!

3. Embedded sketch

4. Reflection and ideas for future work

I found this project to be very engaging, from the brainstorming stages to the coding process. I found the challenges a valuable opportunity to grow in learning how to graph complex shapes and animate lines (animation was something I wanted to learn from last week!). I have achieved the goal of creating a piece similar to the plan I intended, but have also exceeded that by adding in animations.

I hope the artpiece will be a calming one. An idea for the future is to animate the spirals to shift along with the deeper blue sine water waves. The moon could also be animated to grow and dim in brightness over time. Additionally, it would be cool to learn to animate rainfall (the technique used here was more of a special workaround, and I drew black lines over the moving water, the supposedly “invisible” black waves become more prominent!).

Concept

My concept originated from a visa picture I took when I was applying for my J-term.

Struggles

I made this sketch when I enrolled in the class before attending a single session, so it was pretty hard for me to be familiarized with p5 despite me having prior coding experience, so making elements like the body and hair was very tough.

Reflection and future improvements

I need to be more familiar with p5, especially with making more complex shapes like hair and body. For the next assignment I will watch tutorials and spend exponentially more time on practicing and playing around with the sketch.

Are order and randomness truly mutually exclusive? I found it very fascinating when the speaker spoke about the process behind the commission for a building incorporating chance and randomness, the actual procedure of preparing and creating the art was so orderly. Seen in this way, order can lead to, or support the creation of, chaos. On the other hand, there are plenty of examples from nature that shows randomness can lead to order, including in bird swarms and ant colonies. The relationship between order and randomness, therefore, seem to not be so simple.

As much as it is mesmerizing to observe the “creation”  of chance and randomness, I do think randomness should be utilized consciously. It may be easy to leave everything to chance, whether in art or elsewhere, and let it dictate the meaning of the final output; however, incorporating randomness to any work should not take time away from the ideation and meaningful reflection process that needs to happen throughout. Now that I have been introduced to great examples of how randomness can be utilized in art, I hope to explore (the presence or absence of) the boundary between order and chaos, while at the same time ensuring that, unless the main intention of the work is to observe randomness, randomness is not forced and incorporated just for the sake of having it in.

Concept

I was intrigued by one particular artwork in the computer graphics magazine and wanted to similarly create a sketch using a single type of shape:

I was walking along the highline thinking of potential ideas for my sketch when I saw the A3 building and quite liked how the windows were of different widths and colors so I decided to use the building as my inspiration:

Process

I incorporated randomness into my art in multiple ways — in the position and width of the windows, the weight of the strokes, as well as in the choice of colors. I wanted to add interactivity to my sketch this time and after thinking of different ways of incorporating action, I decided to embrace the original inspiration of the A3 building. On a mouse click, if it lands on a window, the corresponding window (home) lights up to give a warm ambience, and if it lands outside of any window, the background changes color to represent the shift from day to night, and vice versa.

Writing the logic for the mouse click action was harder than I expected. I needed to differentiate between a click outside and inside a window (rectangle) to toggle the background, while also checking if the current window being clicked is the same as before to turn the light off.

function mouseClicked() {
  let insideWindow = false;

  for (let r of rectangles) {
    // check if mouse click falls inside a window
    if (mouseX >= r.x && mouseX <= r.x + r.w && mouseY >= r.y && mouseY <= r.y + length) {
      insideWindow = true;
      let newLightPosition = {x: r.x + r.w / 2, y: r.y + length / 6};

      if (lightPosition && lightPosition.x === newLightPosition.x && lightPosition.y === newLightPosition.y) {
        lightPosition = null;
      } else {
        lightPosition = newLightPosition;
      }
      break;
    }
  }
  
  // if mouse click falls outside a window, toggle the background
  if (!insideWindow) {
    lightsOff = !lightsOff;
  }
}

To draw the light and the illumination, I found a sunshine palette online and sketched multiple circles of varying sizes and colors. I learned that the fill function can take a 4th argument for transparency, which I found to be very useful in creating the illuminated effect.

function lightsUp(x, y) {
  noStroke();
  // light bulb light
  fill(255, 228, 169);
  circle(x, y, 10);
  fill(255, 218, 138);
  circle(x, y, 8);
  fill(255, 210, 112);
  circle(x, y, 6);
  fill(255, 201, 83);
  circle(x, y, 5);
  fill(255, 191, 62);
  circle(x, y, 4);
  
  // light bulb illumination
  fill(255, 228, 169, 30);
  circle(x, y, 200);
  fill(255, 218, 138, 30);
  circle(x, y, 300);
  fill(255, 210, 112, 30);
  circle(x, y, 400);
  fill(255, 201, 83, 30);
  circle(x, y, 500);
  fill(255, 191, 62, 30);
  circle(x, y, 850);
}

Reflections & Improvements for Future Work

I am quite happy about how the sketch turned out, especially the way the light is drawn in multiple layers. I also got to incorporate many of the concepts we learned in class into p5.js, including loops, mouse clicks, booleans, global/local variables and arrays. As this sketch is more or less a static work with simple mouse click triggers, I hope to continue exploring randomness and play with transformations to create live continuous actions on the canvas in the next assignments.

Concept

Inspired by the “Computer Graphics and Art” magazine which was linked in the assignment, I wanted to create an art piece which  used shapes of random sizes and colors to create an abstract, seemingly chaotic art. Given that the magazine was written in 1977 it was all in black an white, so I decided to modernize it a bit by adding different random colors to the design therefor making it even more aesthetically pleasing.

Process

When I started this project I wanted to place shapes with random attributes in random positions to create artwork. My plan was for the user to run the program and each time get a completely different result which represents a whole new piece of art. I also didn’t want to stick to just one object so I decided to add lines alongside ellipses for a better visual effect. It was a bit challenging at first putting the lines somewhat correct positions as I also wanted to introduce randomness. But with some tweaking and work I managed to create something that I find satisfying.

let numLines = random(3, 10);

for (let j = 0; j < numLines; j++) {
  let x2 = x + random(-s, s);
  let y2 = y + random(-s, s);
  stroke(r, g, b);
  line(x, y, x2, y2);
}

Reflection and future improvements

Overall creating art from something random and chaotic proved to be a fun task. I enjoyed seeing how just a little change in the code made a huge difference in the artwork. Although I did implement the code stopping in the end to allow the user to see what they’ve created, in the future I’d like to make it possible to reset the canvas and create a new piece with just a click.

 

Casey Reas’ talk at the EYEO festival 2012 gave a compelling reflection on the balance of randomness and control in the creative process. What I liked is how he showed us that even though artists use randomness in their artwork, they still have some control over it. This is something that I haven’t thought of before but now makes so much sense. The visual projects he created show exactly what he is trying to convince us. I really liked how all of his work showed randomness with some dosage of control and by combining these two he created beautiful unique structures. It is interesting how he wants to present coding as not just a technical skill, but also an art form. In the “10 PRINT” example he showed us, we had a chance to see how even a simple line of code can create beautiful, unique and diverse structures that create the digital art as we know it.

 

This talk did get me thinking though. Is it even possible to create something that is completely random? Because Reas makes an argument that artists and coders still do have some control over the artwork they are creating, does that mean that in order to create something truly random would mean that we need to bash our keyboard in order to type random letters in hopes some will combine into a sentence that is readable by the programming language? Maybe even the code alone, with its chaos, would be some sort of an art form? That is something Reas didn’t talk about but I think might be important. Can a chaotic code which is used to create randomness be used as art?

 

In my code I want to implement total chaos and randomness. I want the user to not understand what’s happening before they click to “freeze” the motion. This chaos and randomness when stopped will create a beautiful artwork which will of course every time be unique. But I am also keeping some control as from Reas example, I will be limiting some parameters of the random objects therefore making it somewhat controlled.