Week 9 Unusual Switch

 

For this week’s assignment, we were asked to make an unusual switch without any coding. The inspiration for this came from another project of mine. Back home, I  placed a switch and a simple circuit with an LED panel in my cupboard. A push-button switch is placed in between the hinges of the cupboard. Every time I open the cupboard door, the button gets pushed, and the LED panel lights up, making my life easier.

So, for this, I wanted to think of a simple switch that would make my life easier. I came up with the idea to make a switch that will light up a LED every time I step on it. Imagine waking up at night and taking a step; the LED would promptly light up, guiding your way.

The concept for the switch was to use cardboard from delivery package and copper tape as a switch. Cardboard  will  be  placed  on  the  floor.  And  if there is  pressure  on  the  cardboard  the  LED  will  light  up. 

I placed one piece of copper tape on top of the bottom layer and another piece of copper tape under the top layer. So, if there is enough pressure, the in between corrugated layer gets squeezed, and both pieces of copper tape touch each other.  If the pressure gets released, the corrugated layer gets back to its original shape, and the switch disconnects. The copper tapes are connected in between the negative terminal of the LED and the ground of the Arduino. And the positive terminal of the LED is connected to the Arduino’s 5V pin through a 330 ohm resistor.

My Schematic Diagram

The main challenge I faced was deciding on the switch  material itself. I was sure that I wanted to replicate a floor that lights up if you step on it, and as soon as you step away, the LED should turn off, but I could not initially find a material that I could use a switch to replicate this behavior. The other challenging part was cutting the middle layer of the cardboard and placing the copper tapes carefully to avoid unwanted connections. In future, I would want to use any other sensor to detect if someone is stepping on the floor or not and turn on the LED accordingly.

Week 8a Reading Response

Attractive Things Work Better” by Donald A. Norman

One key question this reading raises for me is about finding the right balance between usability and aesthetics in design. Norman argues that while usability is extremely important, especially for tools used in stressful situations, aesthetics and emotional appeal also play a vital role that designers should not ignore. But he cautions against veering too far into just making things “pretty” at the expense of functionality. This tension between utility and beauty is an age-old debate in design circles, and Norman seems to be staking out a middle ground position. I’m left wondering where exactly that line should be drawn and how designers can best integrate those two priorities harmoniously.

Norman’s discussion of how positive and negative affect can influence cognitive processing styles was thought-provoking to me. The idea that negative emotions like anxiety tend to induce a depth-first, focused cognitive style while positive emotions promote a breadth-first, creative processing mode was new to me. His examples, like being able to walk easily across a plank on the ground versus being fearful of doing so high up, illustrated this vividly. It made me reflect on the emotional states that different product designs might evoke in users and how that could impact their ability to understand and utilize the design effectively.

 

Her Code Got Humans on the Moon—And Invented Software Itself

It makes me wonder about all the other underrecognized women who made pioneering contributions to early computing and coding during an era when it was an extremely male-dominated field. How many other “founding mothers” were there whose stories have gone untold?

The narrative surrounding the Apollo computer’s hardware, especially how its memory was intricately hand-woven into copper wires by a team dubbed the “Little Old Ladies,” struck me.  The physicality and manual labor involved in producing this early digital memory seem almost quaint compared to today’s silicon memory chips, and it is quite difficult to imagine how it would look. But it’s a powerful reminder of how software was so revolutionarily abstract during that era—lines of code inscribed into physical materials to control machinery. The leap of imagination required to conceptualize and construct software systems is fascinating.

I was reminded of the film Hidden Figures and the stories it told about the African American women “computers” at NASA who did crucial mathematical calculations for the space program. While their roles were more analog data processing rather than software programming, there are parallels in how these marginalized groups were instrumental to NASA’s achievements yet rendered nearly invisible by societal prejudices of the time. Both highlight how institutional blindspots caused pioneering technical work by minorities and women to be overlooked and undervalued for decades.

Midterm Project – Inkling of Life

For the midterm project, my inspiration was the “Bounce” game. The game play is similar to the original Bounce game: the character moves and tries to avoid the dangers. I wanted to challenge myself, so the whole game is built using “Vector” shapes. I went through Daniel Shifman’s THE NATURE OF CODE book’s first chapter, “Vector,” and his videos on Vector on YouTube (1, 2, 3) to grasp the basic understanding of the vector shape. As I used vector for all the shapes, all the shapes were preplanned, and it took a good amount of time to figure out the exact configuration.

The game is designed with multiple screens, each offering a different part of the game experience. The game structure is as follows:

  1. Title Screen: Initially, the game will open to a title screen (scene 1), where players can see the game’s title and interact with inkdrop animations. I’ll include a play button and an options button, making sure to check for player interactions to navigate to other parts of the game.
  2. Game Play Screen: Moving onto this scene (Scene 2), I plan to have the main character move, attack, and be displayed on the screen. The gameplay will involve navigating through jump blocks, floors, jelbys (damage elements), and other elements, with the camera following the character to keep them in focus. I’ll implement a jumping function for character movement, and as players progress, they’ll encounter a moving door and health items that affect the character’s health, which will be displayed and updated on the screen. If the character’s position falls below a certain threshold, it’ll trigger a transition to the dead screen (scene 3), whereas reaching a higher position will lead to the winner screen (scene 4).
  3. Dead Screen: If the character dies (scene 3), I’ll display a game over screen where players can see their failure and have options to interact with, possibly to retry the level or go back to the main menu.
  4. Winner Screen: For those who conquer the levels (scene 4), I’ll cover the screen with a rectangle and display a winner message, indicating their success. This screen will also include interactions, possibly to proceed to the next level or return to the main menu, marking the `won` variable as true to track the player’s progress.
  5. Options Menu: Lastly, an options menu (scene 5) will be included to allow players to customize their game experience. I’ll handle this functionality through an `optionsStuff()` function, providing various settings for players to adjust according to their preferences.

The UML diagram:

 

I wanted to highlight the code for the floor design of the game. It was really challenging to find the sweet spot, as it could have made the game too easy or too hard. For this, I could not find any references. So I played the game itself to understand where to put the holes and hills.

//Normal Floors
function setupFloor() {
  floors.push(new Floor(-500, 0, 525, 600));   //0
  floors.push(new Floor(0, 500, 605, 100));    //1
  floors.push(new Floor(600, 425, 250, 400));  //2
  floors.push(new Floor(849, 325, 150, 500));  //3
  floors.push(new Floor(995, 500, 1000, 1000));//4
  floors.push(new Floor(1850, 375, 100, 500)); //5
  floors.push(new Floor(1950, 500, 300, 500)); //6
  floors.push(new Floor(2249, 370, 200, 500)); //7
  floors.push(new Floor(2448, 500, 200, 500)); //8
  floors.push(new Floor(2647, 240, 150, 500)); //9
  floors.push(new Floor(2796, 500, 450, 500)); //10
  floors.push(new Floor(3245, 400, 200, 500)); //11
  floors.push(new Floor(3444, 500, 400, 500)); //12 
  floors.push(new Floor(4050, 500, 500, 500)); //13
  floors.push(new Floor(4549, 380, 150, 500)); //14
  floors.push(new Floor(5050, 480, 100, 500)); //15
  floors.push(new Floor(5149, 500, 1000, 500));//16
  floors.push(new Floor(6148, 365, 200, 500)); //17
  floors.push(new Floor(6550, 400, 150, 500)); //18
  floors.push(new Floor(7100, 550, 900, 500)); //19
  floors.push(new Floor(7999, 150, 200, 500)); //20
  floors.push(new Floor(8198, 500, 880, 500)); //21
  floors.push(new Floor(8977, 400, 150, 500)); //22
  floors.push(new Floor(9126, 450, 570, 500)); //23
  floors.push(new Floor(9825, 0, 20, 700));    //24
  floors.push(new Floor(9844, 450, 900, 500)); //25
  floors.push(new Floor(9705, 0, 20, 300));    //26
  floors.push(new Floor(9687, 430, 175, 500)); //27
  //This One is Special
  floors.push(new Floor(9705, 200, 20, 150));   //28
}

function Floor(x, y, w, h) {
  this.pos = createVector(x, y);
  this.w = w;
  this.h = h;
  this.dis = function() {
    fill(100, 100, 100);
    rect(this.pos.x, this.pos.y, this.w, this.h);
  }
}

//Pipes
function PipeParts() {
  this.pos = createVector(0, 0);
  this.dis = function() {
    //Pipe1 down
    fill(100, 100, 100);
    rect(this.pos.x, this.pos.y, 180, 30);
    rect(this.pos.x + 300, this.pos.y, 140, 30);
    rect(this.pos.x + 439, this.pos.y, 20, 20);
    rect(this.pos.x + 459, this.pos.y, 20, 10);
    fill(220, 100);
    rect(this.pos.x + 180, this.pos.y, 120, 100);
    fill(250, 200);
    rect(this.pos.x + 270, this.pos.y + 10, 5, 35);
    rect(this.pos.x + 270, this.pos.y + 50, 5, 15);
    rect(this.pos.x + 200, this.pos.y + 70, 5, 15);
    rect(this.pos.x + 200, this.pos.y + 85, 15, 5);
    fill(100, 100, 100);
    rect(this.pos.x + 170, this.pos.y, 20, 100);
    rect(this.pos.x + 290, this.pos.y + 0, 20, 100);
    rect(this.pos.x + 160, this.pos.y + 100, 160, 20);
    rect(this.pos.x + 156, this.pos.y + 103, 10, 14);
    rect(this.pos.x + 319, this.pos.y + 103, 5, 14);
    //Pipe2 up right
    //rect(this.pos.x + 9687,this.pos.y + 430,175,30);
    //rect(this.pos.x + 9825,this.pos.y + 200,20,500)
    fill(220, 50);
    rect(this.pos.x + 9725, this.pos.y, 100, 430);
    fill(250, 200);
    rect(this.pos.x + 9735, this.pos.y + 300, 5, 20);
    rect(this.pos.x + 9735, this.pos.y + 330, 5, 10);
    rect(this.pos.x + 9810, this.pos.y + 400, 5, 20);
    rect(this.pos.x + 9800, this.pos.y + 417, 15, 5);
    rect(this.pos.x + 9735, this.pos.y + 50, 5, 50);
    rect(this.pos.x + 9735, this.pos.y + 120, 5, 20);
  }
}

function movingDoor() {
  if (triggers[3].triggering() && floors[28].pos.y < 300) {
    floors[28].pos.y += 2;
  } else if (floors[28].pos.y > 200) {
    floors[28].pos.y += -2;
  }
  if (triggers[4].triggeredy()) {
    chars[0].pos.y += -6.5;
    triggers[4].trigged = true;
  }
}

 

I had the chance to do play testing with 3 users due to time constraints. The most common feedback was that I should have added sound effects for the damages. Two of the users felt the level was hard considering it’s the first and only level. They liked the vector animation for the jumps and movements.

As I played along to create the game, I lost sight of the difficulty. I should have play-tested while designing the floors. I wanted to make the game have infinite levels. Unfortunately, I could not finish it. The current gameplay is limited to only 1 level. In the future, I want to make the floors and scene more generative. Based on the feedback, I also want to improve the sound.

Week 5 Midterm Progress

For the midterm, I wanted to create a simple game using OOP concepts. The basic concept of the game is similar to that of Super Mario: a character moves and tries to avoid dangers. Rather than using sprites, I wanted to create all the aspects of the game fully using code. During the other assignments, I didn’t try out the createVector function. However, going through Daniel Shifman’s THE NATURE OF CODE book’s first chapter, “Vector,” and his videos on Vector on YouTube (1, 2, 3) I am fully convinced I can build all the game elements using the createVector function. My plan is to rely on vector shapes for complex game elements. This will also make my calculations easier.

I’m designing a game with multiple scenes or screens, each offering a different part of the game experience. Here’s how I’m planning to structure it:

  1. Title Screen: Initially, the game will open to a title screen (scene 1), where players can see the game’s title and interact with inkdrop animations. I’ll include a play button and an options button, making sure to check for player interactions to navigate to other parts of the game.
  2. Game Play Screen: Moving onto this scene (Scene 2), I plan to have the main character move, attack, and be displayed on the screen. The gameplay will involve navigating through jump blocks, floors, jelbys (damage elements), and other elements, with the camera following the character to keep them in focus. I’ll implement a jumping function for character movement, and as players progress, they’ll encounter a moving door and health items that affect the character’s health, which will be displayed and updated on the screen. If the character’s position falls below a certain threshold, it’ll trigger a transition to the dead screen (scene 3), whereas reaching a higher position will lead to the winner screen (scene 4).
  3. Dead Screen: If the character dies (scene 3), I’ll display a game over screen where players can see their failure and have options to interact with, possibly to retry the level or go back to the main menu.
  4. Winner Screen: For those who conquer the levels (scene 4), I’ll cover the screen with a rectangle and display a winner message, indicating their success. This screen will also include interactions, possibly to proceed to the next level or return to the main menu, marking the `won` variable as true to track the player’s progress.
  5. Options Menu: Lastly, an options menu (scene 5) will be included to allow players to customize their game experience. I’ll handle this functionality through an `optionsStuff()` function, providing various settings for players to adjust according to their preferences.

The UML diagram would be something like this:

// Preload function to load images
function preload() {
  title = loadImage('title0.jpg')

  imgs[0] = loadImage('imgs0.jpg')
  imgs[1] = loadImage('imgs1.jpg')
  imgs[2] = loadImage('imgs2.jpg')
  imgs[3] = loadImage('imgs3.jpg')
}

// Variables
let scene // 1=title, 2=level, 3=dead, 4=winner, 5=options
let title
let imgs = []
let play
let options
let winner
let optionsmenu
let won
let buttonTO;

// Arrays
let chars = []
let cameras = []
let jump
let healths = []
let floors = []
let triggers = []
let healthItems = []
let jelbys = []
let jumpBlocks = []
let inkdrop = []
let pipeParts = []

// Setup function to initialize the canvas and objects
function setup() {
  createCanvas(windowWidth, windowHeight);
  scene = 1

  play = new PlayButton()

  options = new OptionsButton()

  gameOver = new gameOverScreen()

  winner = new Winner()

  optionsmenu = new OptionsMenu()

  won = false

  buttonTO = 1

  jump = new Jump()

  for (let i = 0; i < 2; i++) {
    inkdrop.push(new Dropplet(198, 220, 3, 3, 7))
  }

  inkdrop.push(new Dropplet(282, random(320, 350), 1, 4, 3))

  inkdrop.push(new Dropplet(435, 530, 2, 4, 7))
}

// Draw function to render the game
function draw() {
  noStroke()
  background(200, 200, 200)

  buttoning()

  // This is the code for the Title screen.
  if (scene === 1) {

    image(title, 0, 0)
    noStroke()

    for (let i = inkdrop.length - 1; i > 0; i--) {
      inkdrop[i].draw()
      inkdrop[i].move()
      if (inkdrop[i].isDone()) {
        inkdrop.splice(i, 1);
        inkdrop.push(new Dropplet(198, 220, 3, 3, 7))
      }
      if (inkdrop[i].isDone2()) {
        inkdrop.splice(i, 1);
        inkdrop.push(new Dropplet(282, random(320, 350), 1, 4, 3))
      }
      if (inkdrop[i].isDone3()) {
        inkdrop.splice(i, 1);
        inkdrop.push(new Dropplet(435, 530, 2, 4, 7))
      }
    }

    play.dis()
    play.check()

    options.dis()
    options.check()

  }

  // This is the code for the 1st level.
  if (scene === 2) {

    if (!triggers[4].triggeredy()) {
      chars[0].move();
      chars[0].attack();
      chars[0].disAttackUn()
    }
    chars[0].histo();
    chars[0].dis();

    for (let i = 0; i < jumpBlocks.length; i++) {
      jumpBlocks[i].dis()
    }

    for (let i = 0; i < floors.length; i++) {
      floors[i].dis();
    }

    for (let i = 0; i < jelbys.length; i++) {
      jelbys[i].dis();
      jelbys[i].damaging(chars[0], healths[0])
      jelbys[i].move(jelbys[i].P1, jelbys[i].P2);
      jelbys[i].hitpoints();
    }

    if (!triggers[4].triggeredy()) {
      chars[0].disAttackOv()
    }

    cameras[0].cameraMan(floors, chars[0])

    if (!triggers[4].triggeredy()) {
      jump.jumping(floors, chars[0])
    }

    pipeParts[0].dis()

    movingDoor()

    if (triggers[0].triggered(chars[0])) {
      triggers[0].trigged = true
    }

    for (let i = 0; i < healthItems.length; i++) {
      healthItems[i].dis();
      healthItems[i].counter()
      healthItems[i].healthup(chars[0], healths[0])
    }

    healths[0].dis()
    healths[0].damage()

    if (chars[0].pos.y + chars[0].h > height * 1.5) {
      scene = 3
    }

    if (chars[0].pos.y + chars[0].h < -100) {
      scene = 4
    }

  }

  // This is the code for the Dead screen
  if (scene === 3) {
    gameOver.dis()
    gameOver.check()
  }

  // This is the code for the Winner screen
  if (scene === 4) {
    fill(227, 227, 227);
    rect(0, 0, width, height)
    winner.dis()
    winner.check()
    won = true
  }

  // This is the code for the Options menu
  if (scene === 5) {
    optionsStuff()
  }

}

 

So far, I am done with the different scenes. Since the beginning, I have started coding the different scenes separately. I will focus on the gameplay now. As I am using vector elements, I am confident that creating the gameplay will not be difficult. However, I realized if I can create the game with something like infinite level with each level creating different pattern for the floor would be more challenging.  So, I will try to work on this later.

Week 5 Reading Reflection

The exploration of computer vision in interactive art, as discussed in the article, highlights its transformative impact on the way artists recreate, manipulate, and explore physical reality. What struck me most was the early adoption of computer vision, dating back to the late 1960s, underscoring the longstanding curiosity and experimentation within the art community towards integrating technology with creative expression. The article not only provides a historical overview but also introduces simple algorithms and multimedia tools that democratize computer vision for novice users unfamiliar with the field.

The potential of computer vision to convey complex sociopolitical themes was both surprising and occasionally unsettling. For instance, Rafael Lozano-Hemmer’s “Standards and Double Standards” uses this technology to critique surveillance culture, illustrating the power of computer vision to metaphorize our realities. Conversely, the “Suicide Box” project reveals the ethical considerations inherent in employing such powerful tools, highlighting the necessity of thoughtful engagement with technology’s capabilities and impacts.

I was particularly intrigued by the emphasis on adapting computer vision techniques to the physical environment. This approach not only challenges creators to think critically about the interaction between technology and space but also broadens the concept of interactivity in digital creation. Learning about the specific strategies employed by artists to optimize their work for different environments reinforced my appreciation for the nuanced relationship between art, technology, and the physical world.

Week 4 Reading Reflection

I enjoyed reading Don Normam’s “The Design of Everyday Things.” After reading Crawford’s definition’s of interactivity in “The Art of Interactive Design,” it was necessary to understand the fundamentals of interactions themselves, which go beyond the definition and importance. To me, the fundamental principles of interactivity were very well put in Don Norman’s book. I liked the text, probably because the examples were very grounded in our day-to-day interactions.  The way Norman advocated for human-centric design seemed very similar to Myron Krueger’s philosophy that technology should serve human needs and desires (What Should You Wear to an Artificial Reality?). This also prompted the benchmark of calling a design good or bad.  The reading really helped me to understand the importance of intuitive design. I always wondered why all the cars, phones, and computers looked similar.  Norman’s examples of the learning curves of the users and intuitive design pretty much answered that question. However, I felt the examples lacked the presence of age groups. It would have been interesting to explore how intuitive design changes through time and generations. Norman’s illustration of the distinction between affordances and signifiers was very thought-provoking for me, as I had never explored the dimension of interactivity this much.

 

Assignment 4

For this assignment, I wanted to recreate the Matrix movie’s Neo sees the matrix for the first time in the scene, in which we see everything in green from Neo’s perspective.

I wanted to create the scene using the transcript of the movie itself. So, I quickly downloaded the transcript from open source. While looking for any tutorials online, I found Daniel Shiffman’s tutorial on creating images with ASCII text. I followed this tutorial only to complete the assignment. Following the tutorial, I started with creating the still image attached to this post with the movie transcript. I quickly realized that due to the presence of unwanted characters (numbers, :, etc.),  the visualization was not looking great. I decided to clean up the transcript according to my needs. I used p5.js to remove any unwanted characters from the data. However, following the tutorial, I could not replicate the brightness using empty/smaller ASCII text, as I was using sentences to create the visualization. So, I decided to manipulate the brightness of the text itself, and it worked. However, moving into the video loop, the code was not working smoothly. I realized that as I was using a large string (3300 lines), the array became too big to loop and refresh in the draw loop. I had to cut down the data to the first 70 lines of the transcript to accommodate that.

 

// draw function
function draw() {
  background(0); // setting background as black

  let charIndex = startIndex;
  // calculating the width and height of the cells
  let w = width / capture.width; 
  let h = height / capture.height;

  // load the pixels of the webcam capture
  capture.loadPixels();
  
  // loops to iterate over each pixel of the webcam capture
  for (let j = 0; j < capture.height; j++) {
    for (let i = 0; i < capture.width; i++) {
      // calculate the pixel index
      const pixelIndex = (i + j * capture.width) * 4;
      // rgb component of the pixel
      const r = capture.pixels[pixelIndex + 0];
      const g = capture.pixels[pixelIndex + 1];
      const b = capture.pixels[pixelIndex + 2];
      
      // calculating brightness 
      const brightness = (r + g + b) / 3;
      
      // Adjust the fill color based on brightness
      // map brightness to green color range
      let fillColor = map(brightness, 225, 0, 225, -150);
      fill(0, fillColor, 0);
      
      textSize(w * 1.3);
      textAlign(CENTER, CENTER);
      
      // retrieve a character from the matrixText string based on charIndex
      let textChar = matrixText.join('').charAt(charIndex % matrixText.join('').length);
      if (random(1) < 0.05) {
        textChar = matrixText.join('').charAt(floor(random(matrixText.join('').length)));
      }
      text(textChar, i * w + w / 2, j * h + h / 2);
      charIndex += rainSpeed;
    }
  }
}

 

I still could not replicate the rain sequence in the visuals as expected. I hope to improve that in the future.

 

Week 3 Reading Response

I enjoyed “The Art of Interactive Design.” While doing the coding assignment for this week, I was questioning myself: What is interactivity, and why is it significant in art? This week’s reading perfectly aligned with that specific question. I liked how Crawford emphasized that interactivity is a form of art. And this also sheds light on understanding audiences’ needs and desires while creating any interactive experience, just as with any other form of art.  Although I had implemented a basic form of interaction in the last two weeks’ coding problem, I had not actually thought of it as an artistic expression and also did not consider my responsibility to present a coherent interactive experience. After reading Crawford’s thoughts, I went back and reevaluated this week’s coding assignment and tried to think about the audience’s perspectives. Crawford’s perspective on bringing objectivity into the subjective world of interactions was really thought-provoking. I hope to incorporate the three dimensions of interaction labelled in the reading into my future projects and optimize designs for all three dimensions. However, I am still a bit confused between the lines of low-level interaction and no interactivity.

Assignment 3: OOP

The task for this assignment was to implement an interactive visual experience using the concepts we learned last week, primarily object-oriented programming and arrays. For this assignment, I wanted to play with the visual perceptions of the audience. I wanted to create a very simple piece, but I also wanted to make it look like the piece has different underlying layers by incorporating a sense of depth. To give the illusion of 3D, I modified how shapes are displayed to include shading and perspective distortion. I introduced a z-axis movement illusion for the shapes. In the draw function, an interactive background changes hue based on mouse position, and shapes are updated and displayed with 3D effects.

class DynamicShape {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.z = random(-20, 20); // Simulate depth
    this.size = size;
    this.rotationSpeed = random(-0.05, 0.05);
    this.color = color(random(360), 80, 80);
    this.type = random(['square', 'circle', 'triangle']);
  }

  // updating the depth
  update() {
    this.z += random(-1, 1);
    this.adjustSizeBasedOnDepth();
  }

  // displaying different shapes
  display() {
    push();
    translate(this.x, this.y);
    scale(map(this.z, -20, 20, 0.8, 1.2)); 
    rotate(frameCount * this.rotationSpeed);
    fill(this.color);
    noStroke();
    switch (this.type) {
      case 'square':
        rectMode(CENTER);
        rect(0, 0, this.size, this.size);
        break;
      case 'circle':
        ellipseMode(CENTER);
        ellipse(0, 0, this.size, this.size);
        break;
      case 'triangle':
        this.drawTriangle();
        break;
    }
    pop();
  }

  // adjusting the depth
  adjustSizeBasedOnDepth() {
    this.size = map(this.z, -20, 20, 10, 50);
  }

  // drawing the triangle
  drawTriangle() {
    triangle(
      this.size * cos(0), this.size * sin(0),
      this.size * cos(TWO_PI / 3), this.size * sin(TWO_PI / 3),
      this.size * cos(TWO_PI * 2 / 3), this.size * sin(TWO_PI * 2 / 3)
    );
  }
}


// draw fucntion
function draw() {
  drawInteractiveBackground();
  shapes.forEach(shape => {
    shape.update();
    shape.display();
  });
}

 


The most challenging part was for me to figure out the static floral background and how to keep changing the hues to keep track of the depth of the newly created objects. Initially  struggled a bit with the new z-axis movement.

Reading Reflection – Week 2

I enjoyed Casey Reas’s talk more than I expected I would. Although the presentation is from 2012, I think the talk is more important than ever in the new rise of Generative AI arts. In his talk, he explained his work, which utilizes chance operations and algorithms to create visual outcomes, and claimed these demonstrate the tension between order and chaos. However, the more I looked at his works, the more I felt the presence of an emerging order or pattern out of the caos. I think this just further exemplifies the quintessential human endeavor to find coherence in chaos. The technical difficulties of achieving randomness and the limitations of noise in the arts have been explored quite well in the talk, raising the question of whether it is truly possible to generate randomness with technology where everything is bound by the code. Reas’s assertion, “Artists maintain order in the face of nature,” stuck with me throughout the talk. And this assertion again questions the ownership of the generative AI arts: is the AI or the person behind the model trying to maintain that order?