Assignment 2 – Shereena AlNuaimi

After further browsing the artworks that were posted to help inspire this assignments idea. My inspiration stemmed from the artwork by Bill Kolomyjec’s “Random Squares.”

At first, I fully convinced myself that it would be rather simple to recreate just a collection of squares. Nevertheless, I was shockingly mistaken. I discovered that my code seems blank after fiddling around with it and making squares within squares. Furthermore, I went ahead and made the decision to push myself simply because I know that if I set my mind to something, I’ll do all in my power to make it happen. I made the decision to attempt to program the squares to change color when the mouse is over them.

To solve the task I set for myself, I began reviewing tutorials on YouTube right away. I wanted to learn how to improvise for the if else statement I used and avoid making my code too long or complicated. and put the map statement into practice so that the code could detect if the mouse was hovering over the squares and alter its color accordingly.

In a realistic sense, the task itself was both difficult and instructive. I came to the realization that I do need to practice a little myself in order for me to find coding to be rather straightforward, so hopefully I will keep doing that. In the future, I do plan to push myself more than I did on this project, but I also want to make sure that I don’t put too much pressure on myself and take my time enjoying the process of producing. Overall, I’m somewhat proud of the outcome.

let squares = [];
let numSquares = 6; // Total number of larger squares
let nestedSquares = 4; // Number of nested squares within each larger square
let squareSize;
let maxSize, minSize;
let spacing; // Spacing between larger squares

function setup() {
  createCanvas(560, 372);
  squareSize = width / (numSquares / 2); // Assuming 3 squares in a row
  maxSize = squareSize;
  minSize = squareSize / 10;
  spacing = squareSize / 50;

  // Initialize properties for each large square
  for (let i = 0; i < numSquares; i++) {
    let x = (i % 3) * squareSize + squareSize / 2;
    let y = floor(i / 3) * squareSize + squareSize / 2;
    squares.push({ x, y, size: maxSize, hovered: false });
  }
}

function draw() {
  background(255);

  for (let i = 0; i < squares.length; i++) {
    let sq = squares[i];

    // Determine if the mouse is over the square
    sq.hovered = (mouseX > sq.x - sq.size / 2 && mouseX < sq.x + sq.size / 2 &&
                  mouseY > sq.y - sq.size / 2 && mouseY < sq.y + sq.size / 2);

    // Draw the nested squares
    for (let n = 0; n < nestedSquares; n++) {
      let nestedSize = sq.size - n * (sq.size - minSize) / nestedSquares;

      // Color change based on mouse position
      let colorValue = sq.hovered ? map(mouseY, 0, height, 255, 0) : 255 - (n * (255 / nestedSquares));

      fill(
        colorValue,
        255 - colorValue,
        map(mouseX, 0, width, 0, 255)
      );

      // Draw each nested square
      rectMode(CENTER);
      rect(sq.x, sq.y, nestedSize - n * spacing, nestedSize - n * spacing);
    }
  }
}

Assignment #2 – Reading Response

This talk was very interesting to me, particularly the parts about chance in art and code.

The second Reas started talking about Jean Arp’s artwork, the one about dropping the pieces of paper and just leaving them there, I immediately thought of the concept of “happenings”. Allan Kaprow introduced “happenings” in the 50s as an artistic event which employs randomness and improvisation, particularly in performance art. They typically required the participation of the audience, so the spontaneity of the happenings and the random environments in which they unfolded created an unpredictable result – one that Arp’s work resonates with. I was happy to see that Reas mentioned John Cage and Marcel Duchamp, as they are the predecessors of happenings. John Cage invented the technique of “prepared piano”, in which he would place different items on piano strings in order to change the way they sound. Marcel Duchamp emphasized the role of the viewer in art, affecting the way audience participation contributed to the artwork. His idea, which Reas evokes, that this kind of randomness and chance allows in a way to take a stand against authority, power, and order and to come back to our chaotic nature, is very striking to me.

Moving on to chance in code, I had actually never thought about it. Although I cannot say that chance in code is a happening, I really felt like it resonated with this “fight” against order and rationality. Reas says: “the idea of using a rational machine to do something unexpected was at the time very subversive”. In the demos he shows next, it is then interesting to see how the slightest randomizing in code impacts the images generated. Although codes are very structured, it is then very easy to create something completely unpredictable. This, then, echoes the very unpredictable nature of the results that happenings tried to achieve. In one of the demos, he mentions how one of the codes once mirrored creates images that we start giving meaning to, whether we see a face, a skull, an animal… It reveals how we as a society can make meaning out of art that perhaps was meant to have another meaning, or no meaning at all.

Assignment 2 – “Random Squares” by Sara Al Mehairi

RECREATION & CONCEPTUALIZATION

This picture is of the original art piece, Random Squares.

For this assignment, my goal was to recreate Herbert Franke’s artwork, “Random Square” from COMPUTER GRAPHICS AND ART May1976 (page 6), using p5.js as accurately as possible. Inspired by Franke’s collaboration with Georg Färber, where Färber utilized computer systems at the University of Munich to generate intricate plots based on dates provided by the artist, my goal was to capture the nature of the original piece by utilizing loops based on random coordinates within a specific range.

Code Highlight

function checkOverlap(x, y, rectangles) {
  for (let i = 0; i < rectangles.length; i++) {
    let { x: rectX, y: rectY, w: rectW, h: rectH } = rectangles[i];
    if (dist(x, y, rectX, rectY) < (rectW + rectH) / 2) {
      return true; //this means overlapping
    }
  }
  return false; //this means not overlapping
}

One aspect of the code that I take pride in is the implementation of a function that checks for (coordinate) overlaps using boolean statements. Initially, the large black rectangles were overlapping, which, to me, was distracting and not aesthetically pleasing, as they are naturally the first thing you see. This function is triggered every time the screen is clicked, causing the rectangles, both large and small, to rearrange themselves according to the specified conditions.

Challenges & Reflection

Initially, I generated black squares of different sizes at randomized locations, relying solely on the provided PDF link. However, with further research about the art piece, I realized it wasn’t a black & white piece but rather a colorful one, resembling the colors of a Starburst in my opinion! Once I came to the realization, I used the colors yellow, pink, and black and played with the opacity of the pink squares to achieve a similar effect when overlapped with yellow. Also, as I was randomizing the size of each square, I later noticed that each color had a specific size, with pink being the smallest and black the largest. You could see that every time I thought I was done, I noticed a slight detail that I had missed.

At first glance, the artwork didn’t seem to have much depth; it appeared like random squares on the screen. However, after looking into the artist’s background and understanding the process behind the artwork, I realized the significant time investment required to create such a piece. One aspect I would like to improve or explore in the next iteration of my attempt is to move away from the literal randomization of coordinates. Instead, I would like to make them dependent on meaningful factors such as dates, NETids, or other elements that can add more meaning.

 

Assignment #2 – Code – ☆Trichromatic Dance☆

For this assignment, I was inspired by one of the films I watched in my first film studies class: Synchromy (dir. Norman McLaren, 1971). This film is  a series of rectangles/squares/lines that vary in position, size, and color – each corresponding to the specific part of the soundtrack. I liked this film as it redefined art for me, particularly avant-garde/experimental film which is the field I lean towards nowadays. I just never thought this is what film could look like until I watched this. Here is the link to the film so you can have an idea:

The visuals were actually not made with a PC. In fact, they were done by scratching over the soundtrack of the film (impressive!), and I thought it could be cool to see how this would work through code instead. Obviously, my artwork is much less elaborate and has no music, but I was visually inspired:

For the color transitions, I used chatGPT to help me understand how to do them. Here is a snippet of the code I incorporated:

let r = sin(frameCount * 0.012 + PI / 2) * 127 + 128;
let g = sin(frameCount * 0.06) * 127 + 128;
let b = sin(frameCount * 0.03 + PI / 2) * 127 + 128;

fill(r, g, b);

First, I set the variables ‘r’, ‘g’, and ‘b’ to animate the three colors (which I then plugged into the ‘fill’ function). I then understood that using the sine function is what will create the oscillation of the colors between 0 and 255. The ‘frameCount’ argument, which is then modified, accounts for the frame rate. As we have seen in class, the generic frame rate is usually 60. By multiplying it, this changes the speed at which the colors transition. The smaller the number by which it is multiplied, the greater the frame rate will be, the quicker the colors will change. For each series (column) of rectangles, I just picked random numbers between 0.01 and 0.09 to multiply ‘frameCount’ with, in order to have different speeds for each ‘r’,’g’, and ‘b’ components of each series. Then, the ‘PI’, ‘PI/2’, and ‘PI/4’ arguments allowed to determine at which phase the sine wave would start. Modifying the phase offset in each series (randomly too) also allowed me to vary the starting color of each column. Finally, the ‘sin()’ function is all multiplied by ‘127+128’. At first, I didn’t really understand why I had to write ‘127+128’ instead of just ‘255’. Then, I used chatGPT to understand that because the sine wave oscillates between -1 and 1, first multiplying it by 127 allowed to get a range between -127 and 127. Then, 128 would be added, and because 128-127=1 and 128+127=255, we could get the range of 1 to 255 which fits the color components of RGB.

It was overall super interesting to learn how to make this, as well as to try and understand how the ‘sin()’ function works altogether in order to create the color transitions. Unfortunately, I accidentally wrote ‘y >= 0’ in one of the for loops at some point towards the end of my code, and I think it sent my code into an infinite loop as the sketch completely froze and I was unable to retrieve any of it. But well, it was a lesson that I had to learn eventually and honestly I had fun practicing all over again.

Reflection on Casey Reas’ Eyeo talk on chance operations

Casey Reas’ Eyeo talk on chance operations opened my eyes to a fascinating realm where art and randomness converge. The discussion around the dynamic interplay between order and chaos in art challenges conventional perceptions. Reas introduces the concept of “controlled randomness,” emphasizing the artist’s ability to set rules while allowing for surprises, ultimately contributing a unique twist to the art produced.

What struck me was the initial concern about digital art disrupting artistic expression due to its unpredictability. However, Reas showcases the idea of “ordered randomness,” demonstrating how artists can maintain control over the code while infusing an element of surprise. This not only adds diversity and excitement to art but also challenges preconceived notions about the medium.

The reading also sparked a thoughtful reflection on the difference between traditional hand-drawn art and algorithmically generated digital art. Casey Reas’ Eyeo talk not only expanded my understanding of the intricate relationship between order and chaos in art but also inspired me to explore the creative possibilities within the realm of digital art and coding. The presentation challenged stereotypes, fostering a deeper appreciation for the intentional and meaningful aspects of randomness in artistic expression.

Reading Reflection Week 3: Eyeo2012_Casey Reas

Jihad Jammal

Intro to IM

Professor Aaron Sherwood

Reading Reflection Week 3

Feb. 5, 2024

 

Controlled Randomness at the Intersection of Programming and Creativity

 

After watching the video, my understanding of digital art has been significantly broadened by the concept of “controlled randomness”, especially with the intersection of computer programming and creative exploration. Reas’s explanation, where he describes the process of “simply flipping a coin and drawing a left or right but it creates this pattern where we have open areas and closed areas; it becomes vaguely maze-like, and we are able to approach computing from many different angles just from using a single program,” (31:10 – 32:00) eloquently captures the essence of this innovative method. Because the “controlled randomness” methodology uses unpredictability as a basis for creativity in a digital world that is normally perceived as a rigid and unchanging medium, it has changed my understanding of what may be deemed artistic creation/expression. While I understood that art might be highly personal to the individual, I had always thought of art as a clear expression of the artist’s intention, as seen in the brushstrokes or the chiseled stone. Reas’s work, on the other hand, offers a convincing alternative by demonstrating how artists can create the conditions for chance to occur within limitations, so questioning traditional ideas of artistry and emphasizing the special possibilities that arise from the collaboration of computational processes and human creativity.

Furthermore, Reas’s assertion sheds light on how well-managed randomness can act as a link between the fluidity of artistic expression and the deterministic character of code. This combination elevates programming languages from being only tools to being active players in the creation of art, encouraging a deeper reflection on the creative possibilities they possess. It is both illuminating and encouraging to see that intricate, visually beautiful patterns with substantial artistic value can be produced by basic code. It opens up new avenues for artists to investigate the dynamics of order and chaos, intention, and chance by extending the creative canvas beyond conventional media. As such there is a great deal of room for creativity at any skill level when it comes to transforming computer engineering tools for creative expression, especially now that it is known that specialized equipment is not necessary.

 

Citations:

Festival, E. (2012). Eyeo2012 – Casey Reas. [online] Vimeo. Available at: https://vimeo.com/45851523 [Accessed 5 Feb. 2024].

 

Assignment 2 – Hamdah AlSuwaidi

In approaching this assignment, my initial inspiration stemmed from the intricate illustrations found in “Homage to the Squares Derivations.” However, faced with the complexity of the original concept, I decided to pivot and explore a different avenue. The revised plan led me to create a captivating Turing wheel illusion. By incorporating concentric rotating squares and pentagons, I aimed to convey a dynamic and visually intriguing composition. The shifting background color, coupled with the varying transparency levels, adds depth and dimension to the artwork. This reinterpretation allowed me to explore the interplay of shapes, colors, and optical illusions in a way that both challenges and engages the viewer.

To bring this idea to life, to code a series of concentric rotating squares and pentagons. The choice of concentric shapes creates a compelling visual hierarchy, with each layer featuring a unique size and rotation speed. The background color dynamically changes, providing an additional layer of visual interest.

The decision to incorporate transparency in both the squares and pentagons enhances the illusion, adding a nuanced play of light and shadow to the composition. This not only introduces an element of depth but also offers viewers a captivating visual experience as they observe the interplay of shapes and colors.

In essence, the assignment became an exploration of the balance between complexity and accessibility, as well as a study in the visual aesthetics derived from the juxtaposition of rotating geometric forms.

let angle = 0;
let bgColor = 0;
let colorChange = 1;
let numSquares = 8; // Number of rotating squares
let squareSize = 100; // Initial size of the squares
let numPentagons = 12; // Number of rotating pentagons

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

function draw() {
  // Shift background color
  bgColor += colorChange;
  if (bgColor > 255 || bgColor < 0) {
    colorChange *= -1;
    bgColor = constrain(bgColor, 0, 255);
  }

  background(bgColor);

  // rotating squares and pentagons
  push();
  translate(width / 2, height / 2);

  
  for (let i = numSquares; i > 0; i--) {
    push();
    let alpha = map(i, 1, numSquares, 50, 255);
    fill(bgColor, alpha);
    rotate(angle * (numSquares - i + 1)); //  rotation speed 
    let size = squareSize * i;
    square(0, 0, size);
    pop();
  }

  
  for (let i = numPentagons; i > 0; i--) {
    push();
    let alpha = map(i, 1, numPentagons, 50, 255);
    fill(bgColor, alpha);
    rotate(angle * (numPentagons - i + 1)); //rotation speed for each pentagon
    drawPentagon(0, 0, 40 * i);
    pop();
  }

  pop();

  angle += 0.5; // rotation speed 
}

function drawPentagon(x, y, radius) {
  beginShape();
  for (let i = 0; i < 5; i++) {
    let angle = map(i, 0, 5, 0, 360);
    let px = x + cos(angle) * radius;
    let py = y + sin(angle) * radius;
    vertex(px, py);
  }
  endShape(CLOSE);
}

 

Assignment 2 – Against Entropy: A Super Simple Loop Demonstration

[⚠️ Trigger Warning: This article uses intense, hyperbolic language and metaphors for dramatic effect, otherwise my high school English literature class is a waste. Reader discretion advised.]

Let’s get down to business.

Below is the p5 sketch, click 👆 anywhere to “introduce chaos” within the system.

In case p5js Editor website is down, below is the recording of working demo on YouTube.

TL;DR : Conceptualization

Against Entropy is a self-organizing system simulated in p5.js, where you play as the point of view of the universe, giving the system “problems” or “disturbances” – and the system will simply not care about any of your attempts to create problems, and will effortlessly restore the order, and get things working in no time.

1) 🤔 Long-Winded Conceptualization

This artwork is a direct response to Casey Reas’s Talk. I am confused by his appreciation for chaos and randomness. I hate chaos and unpredictability – just imagine growing up in a country with only 4ish hours of daily electricity, without knowing when it will be cut off… your computer just shut down, all your day’s work unsaved…year after year .

“I hate chaos and unpredictability…Chaos is usually the enemy of my heartblood… aesthetics and practicality”

~ Pi

My brain is simple. Things in life need to 1)  work practically – even in impossible situations and 2) be extremely beautiful. Anything which leads to these, I utilize any means to achieve them. Anything which prevents these, I avoid. Chaos is usually the enemy of my heartblood… aesthetics and practicality.

Chaos gives rise to unreliable systems. Unreliable systems are the worst, and they kill lives.  Systems need to work. When they fail, they need to restore themselves to working state.

Systems need to work. When they fail, they need to restore themselves to working state automatically.

~ Pi

Unless such unreliable systems result in extreme aesthetics (as exemplified by Casey Reas), or exhibits tangible practicality (such as in pseudorandom number generators utilized for encryption), or achieves both, it must be annihilated, eradicated, and exterminated through merciless massacre, carried out in the coldest blood and with “negative” empathy and iron fist, then shot twice and bayonetted to guarantee its complete cessation of existence.

This is how much I disgust unreliable systems.

And the professor taught loops and randomness today. And I am feeling swarm robotics these days. So, I needed a system which:

  1. Restores back to working state
  2. Uses randomness and
  3. Use Loops
  4. And of course, the cool swarms

Hence the piece “Against Entropy” is born.

Against Entropy – Pi (2024)
Against Entropy is a self-organizing system simulated in p5js, where you play as the point of view of the universe, giving the system “problems” or “disturbances” – and the system will simply not care about any of your attempts, and will effortlessly restore the order.

Imagine a universe where “perfection” and “order” is the norm. Things always work perfectly beautifully and practically – even in impossible situations, things work out.

A world where problems are identified, and annihilated even before they have a chance to form, so that the “concept of problem” is non-existent. Only working solutions exist. No need to think outside the box to solve that problem. Why think outside the box when the box does not exist in the first place?

It is an art piece about …
Need to learn to code but has only limited electricity in a third-world country? No Problem ! Just go to the library, check out the programming books, read, copy the code on the paper by hand, use your brain as the computer to execute it line by line, predict the output, and confirm when the limited electricity is available.
Everyone is using the washing machine in the NYUAD dorm? No Problem ! Just give an alarm at 2 AM and do the laundry when nobody is doing it.
Need to imitate the sound of Chinese ethnic zither instrument but only have a guitar? No Problem ! Just mess around, and discover that playing tremolo with a pick near the bridge of the guitar in minor pentatonic scale perfectly imitates this Chinese ethnic instrument.
Need a fool-proof way to get rich during a gold rush? No Problem ! Just sell shovels and gold mining equipment to those adrenaline rushed fools and “get their gold” instead
Screw up your meat noodle soup taste while cooking? No Problem ! Enhance the taste by simply pouring in coconut milk, making it like a luxury meal. She will be super impressed, and eat the entire bowl.
Need to train an audio-based neural network, but find that today’s audio processing technology is quite limiting? No Problem ! Just do what these guys do, transform the audio into a spectrogram, and convert the audio problem completely into a computer vision problem, which has a lot of out of the box solutions available already.
Got no one to jam good music with? No Problem ! Tune your guitar to Open D tuning., where you can play all the percussion, bass, melody and chords as a one man band.
Need to very quickly calculate the inverse quare root to calculate your vertex shaders, but the hardware is not powerful since it is 1999 ? No Problem !  Just single handedly write a one-liner inverse square root finding algorithm by exploiting hex values and some bit shift in C code such that

i = 0x5f3759df - ( i >> 1 );

… maybe you will revolutionize the entire early 2000s 3D game industry.
The world facing a deadly COVID-19 virus outbreak? No Problem ! Perhaps if the world had paid attention to high-school students uploading awareness videos onto YouTube months before World Health Organization declares it an official pandemic, and masked up, and we would not have had Zoom classes.

And if you say “Pi, don’t we have to be a genius to see these so-called hacks?” No, these are not hacks, this is pure common sense. You need such arrogance+laziness in your life such that when life hands you with problems you just say “I am super lazy, so I am just going to look at the rules of system, exploit the system with its own rules at its weakest places, so that the entire system crumbles down, and submits to you with unquestioning obedience so that you can command the system to do anything at will, with zero or minimal effort”.

So many of us are cursed with “prerequisite cancer” analysis paralysis .. I need this, I need that, I need tomato potato tomato potato before I can do X,Y,Z … you don’t need experience, you just need to be truly super lazy… and truly be in love with wanting to solve that problem. Then the problem automatically solve itself in the most optimized way, without you doing anything… this is the Supreme Art of Problem Solving.

Then we will have no idea what “struggle” is because we never experience problems, but instantly sees the solution and execute it. That’s good, who needs the journey when you can find an optimized way to claim the reward without the journey?

In short, we don’t “khalas” the system. The system has to “khalas” on us, and meet all our demands, by default, with zero compromise.

2) ⚙️ Technical Plan of Attack & Implementation

The code I am very proud of is of course, the use of loops. Because this piece is about editing the behaviour of a large group of entities, it is all loops over and over again.

//On line 57
for (let i = 0; i < NUM_GROUPS; i++) {
  swarms.push(
    Array.from(
      { length: SWARM_SIZE }, ...

//On line 141
for (let i = 0; i < points.length; i++) {...

// On line 332, this is the blast modelling, without the loops, I will have to write code for each entity in the swarm 😱😱😱
repel() {
    for (let swarm of swarms) {
      for (let entity of swarm) {
        let distance = p5.Vector.dist(entity.location, this.location);
        if (distance <= this.radius * 1.8) {...
// ... and so on

Also, the professor told us that using some random() is appreciated, so here are some randomness…

// When initializing the entities in the swarm, I utilized the random function such as
    swarms.push(
      Array.from(
        { length: SWARM_SIZE },
        () => new Entity(random(width), random(height), i)
      )
    );

Having implemented loops and randomness, let’s add some simple minor details 👌.

The algorithm to simulate a swarm of self-organizing organisms/entities is called the BOIDs algorithm. In human language, to implement a swarm cluster of self-organizing organisms, you just need to tell them to always move toward a goal, and not hit each other.  I also wanted explosions to disturb these swarms, so I lay down the laws of my universe in human language as –

  1. Never get lost. (a.k.a Always have a goal)
  2. Don’t bump into each other.
  3. Explosions are dangerous, run away from them.

Then sprinkle some maths magic and convert the rules into a viable model as follows, to get one cluster of swarm with n entities which follows one target :

swarm

Seeking Behaviour (a.k.a Always have a goal)

Separation Behavior (a.k.a Don’t bump into each other)

Acceleration and Velocity Update


Blast Interaction (a.k.a Explosions are dangerous, run away from them)

To model the explosion, I just have a linear force model.  Easy peasy lemon squeezy 🍋.

Monitoring Chaos of the System

I am also quantifying chaos of the system using average distance of entities to the center. This allows me to tie the rest of the system (audio,colors) to the state of the system. It goes red when chaotic, and green when in order. The chaos is formally defined as
The Stable Chaos Value is the radius of the swarm circle to the origin of the circle. This is because if the average distance of all particles to the center is the same as the radius of the circle, it means the particles are on average, more or less moving in a perfect circle, and hence more organized and less chaotic. As blasts occurs, they are more scattered, average distance increases, and hence chaos value rises.

The formal definitions of funky symbols above are

the steering force applied to an entity
desired velocity, calculated as the normalized vector pointing from the entity’s current location towards the target, scaled to maximum speed
the entity’s current velocity
the separation force
the difference vector between the current entity and the ith neighbor, normalized and weighted by the inverse of their distance.
the number of entities within the desired separation radius
New Velocity of the entity
the total acceleration applied to the entity (sum of all forces)
New Position of the entity
Current Position of the entity
the force exerted by the blast
the direction vector from the blast center to the entity
a scaling factor representing the intensity of the blast
the distance of the ith entity P from the central point C
the number of neighbors within the desired separation radius, in the case of Separation Behavior. In the case of Chaos Calculation, N is the total number of entities considered (we are not using all the entities in calculation for optimization purposes).
Are the equations displaying 👀? If they are, read on.

🤔 Wait a minute, these equations are texts and not images? If you fool around, this Intro to IM website cannot render LaTeX while official wordpress says we should be able to render an equation if you go

$latex i\hbar\frac{\partial}{\partial t}\left|\Psi(t)\right>=H\left|\Psi(t)\right>$
Did Pi just say “No Problem! Just because this wordpress site does not support LaTeX does not mean I cannot write LaTeX” and wrote his own API for LaTeX rendering using KaTeX, probably host it on somewhere like vercel, then render all of his equations and embedded it through iframes?

Practicality and Aesthetics!!!

Self Organizing Behaviour by expanding number of clusters

Then to give a self organizing behaviour as a ring, I just create an array of clusters where each entities in each cluster follows the corresponding target, and these targets rotate in a circle. Then just hide the target so the audience goes “Woah 🤯🤯!”.

3) 🎨 Artistic Plan of Attack & Implementation

Once the practicality part is handled, we enhance the aesthetics through trails, colors, audio,  and connecting lines.

I considered adding bloom effects, but this would overload both my computer and yours, so I decided against it.

4) 💪 Challenges

Again, no challenge. The entire sketch was done in one sitting during the last class lecture.

5) 💡 Potential Improvements

To make the movements of the entities more realistic, I could have used proportional–integral–derivative (PID) controllers. My current model has no calculus, but by just adding these differential and integral terms below:

you can have particles reacting dynamically according to how far they are from the target, and not just static arithmatic.

Also yes, add obstacles, obstacle avoidance and path finding.

6) 🖥️ Source code

🖥️ Source code is just a single sketch.js file at : https://github.com/Pi-31415/Intro-To-IM/blob/main/Assignment-2/swarmfinal.js

📖 References :

Good artists copy, great artists steal. Of course, I stole everything by googling these publicly available stuff below 🤫😉.

Assignment 2 – Structured chaos

So basically, after watching the lecture about art and randomness, I wanted to create something chaotic. It does seem as if it doesn’t make sense and everything is random, while in reality, everything is moving using a calculated noise that makes a grey-scale artwork.

Literally, anyone who would say “oh it’s random stuff that doesn’t make sense” I will totally tell him: yes it is. Art sometimes never makes sense and has no purpose other than being chaotic. But, every time you run the code, you will get a totally different output, a different set of squares, different numbers, and of course, different offsets. And there is actually a chance to fill out the screen fully with the squares.

To create the noisy squares that appear like segments I used the noise function.

for(let i =0; i < 500; i+=50){
     for(let j =0; j < 500; j+=50){
        n = noise( (i+xOffset)*0.005, (j*yOffset)*0.005);
          n*=j;

        rect(n, j, 20,20);
  }

The noise function tries to create randomness in a way that is connected to the randomness that was generated before and after. So as I said, all this nonsense is literally structured and calculated.

 

Assignment #2 – Sitting Under Trees by Redha

For this assignment, I used this piece by A. Michael Noll as my starting point.

Naturally, I wanted to expand on the concept of generating randomly-sized rectangles across a canvas and I decided to do this through introducing random movement to them. Upon doing so, I felt that recreating the same monotone color palette in Noll’s piece would lack depth, so I experimented by filling the rectangles with a randomly generated (yet still specific) color palette. Initially, I went for brown but, as I was experimenting with the RGB values, noticed that introducing green reminded me of a forest’s color palette. The movement of the squares (which I had already coded at this point) aided in this imagery as it was reminiscent of the swaying of branches and leaves in the wind. To complete this imagery, I changed the background color to a shade of blue which attempts to mimic the sky’s color just after the sun has set.

My main challenges and highlight of my code one and the same as I struggled to figure out how to incorporate randomness into my for loops. However, I was definitely happy with the result after incorporating them into my code. I have included it below.

for (let i = 0; i < 200; i++) {
   let x = random(width);
   let y = random(height);
   let rectWidth = random(100, 20);
   let rectHeight = random(100, 20);
   rect(x, y, rectWidth, rectHeight);
   
   
   let r = random(140, 170)
   let g = random (120, 150)
   let b = random (10, 40)
   fill(r, g, b)

 

Some further points of development could be to incorporate the use of noise to produce a swaying effect rather than the random generation of squares each frame (however I do like the “pixelated” appeal of my outcome). Another point which I considered would be to incorporate a moving gradient into the background to create a more immersive experience. A larger scale development could be to create an entire interactive exhibition with an environment made in the same style as this outcome.