Category: Spring 2024 – Aaron (Section 001)

For this project, I was super inspired by those amazing nights spent away from the city lights in the dessert, looking up at a sky full of stars. I wanted to try and capture a bit of that night sky with code.

I started by creating a bunch of twinkling stars using classes and arrays, which felt a bit like putting together a digital constellation. The fun  started when I played around with the `noise` and `sin` functions to make the stars change colors and gently pulse. 

Adding a gradient background to mimic the night sky’s colors was a bit tricky at first, but once I got it, it really brought the whole scene together. The whole process was a lot of trial and error, but seeing the final result was totally worth it. It was a cool mix of creativity and coding.

 

Code:

let stars = [];

function setup() {
  createCanvas(600, 500);
  for (let i = 0; i < 100; i++) {
    stars.push(new Star());
  }
}

function draw() {
  // To set the gradient background from blue to black
  setGradient(0, 0, width, height, color(25, 25, 112), color(0), Y_AXIS);
  
  // Update and display each star
  for (let star of stars) {
    star.update();
    star.display();
  }
}

// Function to create a vertical gradient background
function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
  for (let i = y; i <= y + h; i++) {
    let inter = map(i, y, y + h, 0, 1);
    let c = lerpColor(c1, c2, inter);
    stroke(c);
    line(x, i, x + w, i);
  }
}

// Constant to specify vertical gradient
const Y_AXIS = 1; 


class Star {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(0.5, 3);
    this.t = random(TWO_PI);
    this.color = color(random(255), random(255), random(255), random(100, 255));
  }

  // Update the star's properties
  update() {
    this.t += 0.02; 
    this.size = this.size + sin(this.t) * 0.5;
    // Randomly move the star
    this.x += random(-1, 1);
    this.y += random(-1, 1);

    // Change the star's color using Perlin noise for smooth transitions
    this.color = color(
      noise(this.t) * 255,         
      noise(this.t + 5) * 255,     
      noise(this.t + 10) * 255,    
      random(100, 255)             
    );
  }

  display() {
    noStroke(); 
    fill(this.color); 
    ellipse(this.x, this.y, this.size); 
  }
}

The provided code is designed to create a gradient background transitioning from a dark blue color to black. This effect is achieved by calling the `setGradient` function with specific parameters: the starting coordinates `(0, 0)`, the width and height of the canvas (`width`, `height`), the initial color (dark blue, defined by `color(25, 25, 112)`), the final color (black, defined by `color(0)`), and the direction of the gradient (`Y_AXIS`). This setup results in a vertical gradient that fills the entire canvas, creating a visually appealing background effect for graphics or visualizations.

Reading Response:

In the book “The Art of Interactive Design,” Chris Crawford explains that true interactivity is like having a good conversation. For something to be interactive, both sides need to listen, think, and then speak or react. He argues that many things we call interactive, such as books or movies, aren’t truly interactive because they don’t allow for this two-way communication. Crawford points out that simply pressing a button isn’t enough, there needs to be a deeper level of engagement where both the user and the system or product can exchange information and respond to each other in a meaningful way.

Crawford also criticizes how the word “interactive” is often used more for marketing than to describe a genuine interactive experience. He warns that this can lead to confusion and disappointment when the interaction isn’t as rich as expected. He urges designers and users to think more critically about what interactivity means and to seek out or create experiences that allow for a genuine conversation-like exchange, where both parties can learn and adapt from the interaction. The book challenges readers to look beyond the hype and to strive for genuine, quality interactivity in technology and design.

Concept:

 

 

Diving into this project, I was really drawn to the bright colors and the way shapes came together in those two images. It made me think about how sometimes less can be more. This idea isn’t new, but seeing it in action sparked something for me. I remembered those simple, yet catchy thumbnails on NoCopyright Sounds videos (Third Image) and wondered if I could apply the same principle. So, I decided to cut back on the clutter in my work, aiming for simplicity while still keeping it colorful and lively. It was a bit of a challenge, trying to find the right balance between too much and just enough. But in the end, it paid off. This approach helped me see my work in a new light, proving that you can make something stand out by stripping it down to its essentials. It was a great reminder that sometimes, the simplest approach can be the most effective.

A highlight of some code that you’re particularly proud of:

// Define a class for the Wiggly Circle
class WigglyCircle {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.time = 0; // Time property for animation
  }

Embedded sketch:

Reflection and ideas for future work or improvements:

Reflection on this assignment I would have liked adds layer of engagement, transforming the viewer’s experience from passive observation to active participation. Even with my academic commitments, I managed to experiment freely with colors and shapes, which was a liberating process.

If I were to work on this again in the future improvements, I would consider either thickening the lines to give the shapes more definition or reducing the background’s opacity to allow for a clearer view of the action on the canvas. Both adjustments aim to enhance the visual impact and ensure that the vibrancy and movement I’m striving for are fully realized.

For this assignment, I wanted to further the idea I had for assignment #2, where I made (what I called) a inescapable prison and I wanted to further the exploration of how I would like to imagine the person who would stuck in it look like. I wanted the concept of how the harder the person would try to escape, the worse the prison got. I wanted to make it tortuous in a way. So I started experimenting with the push(); and pop(); functions and decided that it would look appealing to have the person gain speed, which is a concept I have implemented on the prison walls.

 

 

I think the most difficult part of making this was understanding how each function worked. However, I am proud of myself for figuring out how the pop and push mechanism worked because I had an issue with both of them and I was doing something very wrong with the arrays. I did end up only using one but at least I understand how they both could be implemented.

 // Add Square at the end of array every time mouse is pressed
  squares.push(interactiveSquare);
}
// Keyboard pressed = make the end of array fast
function keyPressed() {
  squares.push(interactiveSquare);
}

Reflection:

I would love to experiment with different shapes. I honestly considered making it Super Mario-related by having the rectangle be a Mario power star and have it make that effect, exactly how it is in the game but I wanted to make this one more. I will try to make the star in my free time.

 

Taking inspiration from a basic car drawing, I started what I thought was an easy assignment. But as the deadline got closer, I realized I had misunderstood the instructions. Even though I spent a lot of time on it, the final result wasn’t what it should’ve been. Still, I decided to include it in my work to show my effort. 🤣🤣🤣🤣🤣

Not giving up, I tried again. This time, I wanted to make something different. This time I created a random canvas, inspired by children’s drawings of random shapes. (since that was what my niece was doing right beside me when I was working on this assignment 🙂 ) 

where each time the mouse clicks a new shape, a new color appears on the place you have clicked. Although it was very simple, since I was rushing, I still managed to include arrays 

class Circle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.diameter = random(30, 100);
    this.color = color(random(255), random(255), random(255));
  }
  
  move() {
    this.x += random(-3, 3);
    this.y += random(-3, 3);
  }
  
  draw() {
    fill(this.color);
    noStroke();
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}

class Triangle {
  constructor(x, y) {
    let x2 = x + random(-50, 50);
    let y2 = y + random(-50, 50);
    let x3 = x + random(-50, 50);
    let y3 = y + random(-50, 50);
    
    this.points = [{x: x, y: y}, {x: x2, y: y2}, {x: x3, y: y3}];
    this.color = color(random(255), random(255), random(255));
  }

I had to use class, and the concept of randomness to create this abstract, and noise to create the jittering effect, that adds interactivity to this project, making it more interesting.

 

Looking back, even though I made the huge mistake of skimming through the instructions, I learned a lot from this project. It taught me to pay more attention to details and understand what I needed to do, and I was able to experiment and find a way to trigger the creation of a random object each time the mouse was clicked.

Concept:

The visual design that I created is reminiscent of waves moving. The inspiration for this design comes from the ‘Bees and Bomb’ design named cube wave . This effect is achieved by varying the height of each box according to a sine wave, with the wave’s phase offset by the box’s distance from the center of the canvas. This creates a harmonious, visually appealing pattern that continuously evolves. I came across this video on YouTube, that kind helped me with the basics of this design.

The choice to center the artwork, combined with the monochromatic color scheme (black boxes with white strokes), emphasizes the geometric shapes and the movement pattern, focusing the viewer’s attention on the fluidity of the motion rather than being distracted by color.

Code:

In this generative art project, I’ve merged Object-Oriented Programming (OOP) with arrays to manage dynamic 3D visualizations using p5.js. The core of the project is the Box class in box.js, which outlines the characteristics and behaviors of the 3D boxes, including their wave-like height adjustments and rendering on the canvas. Utilizing an array, I efficiently organize multiple Box instances, populating this structure in the setup function and iterating over it in the draw function to update and display each box according to a sine wave pattern. This setup leverages OOP for encapsulation and arrays for managing multiple objects, showcasing the project’s complexity through simple user interaction—a keypress initiates the animation, demonstrating a direct engagement with the artwork and highlighting the thoughtful integration of coding principles to bring interactive, dynamic art to life.

Box.js:

class Box {
    constructor(x, z, w, h) {
        this.x = x;
        this.z = z;
        this.w = w;
        this.h = h;
    }

    updateHeight(offset, offsetIncrement) {
        let d = dist(this.x, this.z, width / 2, height / 2);
        let a = offset + d * offsetIncrement;
        this.h = floor(map(sin(a), -1, 1, 100, 300));
    }

    show() {
        push();
        translate(this.x - width / 2, 0, this.z - height / 2);
        // stroke(255); // White stroke
        // noFill(); // No fill, or use fill(0) for a black fill
        // box(this.w, this.h, this.w); // Draw the 3D box with p5.js's box function
        // pop();
      
        fill(0); // Fill with black color
        stroke(255); // White stroke
        box(this.w, this.h, this.w); // Draw the 3D box with p5.js's box function
        pop();

    }
}

Sketch.js:

let boxes = []; // Array to store Box objects
let angle = 0;
let w = 24; // Width of the boxes
let ma; // Magic angle
let offsetIncrement;

function setup() {
  createCanvas(400, 400, WEBGL);
  ma = atan(1 / sqrt(2));
  offsetIncrement = TWO_PI / 30; // Adjust this for smoother or more rapid changes
  
  // Populate the array with Box objects
  for (let z = 0; z < height; z += w) {
    for (let x = 0; x < width; x += w) {
      // Adjust the initial height (h) as needed to fit your artistic vision
      boxes.push(new Box(x, z, w, 200)); // Using 200 as an example height
    }
  }
}

function draw() {
  background(0);
  ortho(-400, 400, 400, -400, 0, 1000);
  rotateX(-QUARTER_PI);
  rotateY(ma);

  // Update and display boxes from the array
  let offset = angle;
  boxes.forEach(box => {
    box.updateHeight(offset, 0.15); // Adjust the second parameter to change the wave's speed
    box.show();
    offset += offsetIncrement;
  });

  angle += 0.1; // Adjust this for faster or slower animation
}

Embedded Code:

Reflections and Improvement:

Reading chapter of ‘The Art of Interactive Design,’ made me think about my understanding of interactivity, where the author offered dynamic exchange of ideas to redefine what interactivity really is. This perspective pushes against the grain of conventional digital design, where interaction is often mistaken for simple user interface manipulations. Reflecting on this, one inference that came to my mind was the depth of our daily digital engagements—are we truly interacting, or just reacting? I believe that author’s argument that true interaction involves a meaningful exchange where both parties listen, think, and respond, gives us a different conceptual framework and also make us critically examine our roles as designers and users in the digital realm.

Another critique that’s presented in the reading stirs a debate of what we value in interactive experiences. Which also more seems to be like a call to action for creators and consumers alike to seek out and foster genuine connections within digital spaces. Reading through this chapter also has truly reshaped my understanding of what makes design genuinely impactful. It’s made me rethink my previous stance on what effective design truly means, guiding me towards valuing deeper, more meaningful interactions over just eye-catching or user-friendly interfaces. This new insight is quite enlightening; it opens up a whole new world of questions about how we can create digital experiences that foster real, two-way conversations with users. It’s not just about altering my viewpoint; it’s about sparking a curiosity to explore how these insights could revolutionize our interaction with technology, making it more immersive and interactive in truly meaningful ways.

Jihad Jammal

 

Intro to IM

 

Professor Aaron Sherwood

 

Reading Reflection Week 4

 

Feb. 12, 2024

 

 

Reimagining Interactivity in the Digital Age

After reading “The Art of Interactive Design,” I find that Crawford’s definition of interactivity has a significant impact on how we use technology in our daily lives. It forces us to reevaluate not just how we create technology but also how we interact with it in our daily lives. I agree with Crawford’s focus on the conversational, cyclical aspect of engagement, which draws attention to the contrast between the promise of digital technology to foster deep human connection and the transactional, often surface-level interactions they currently encourage (Crawford, 2003). This viewpoint calls for a more deliberate use of technology, pushing us to look for and produce really engaging experiences that promote sincere communication and comprehension.

Furthermore, Crawford’s research also poses important questions regarding the viability of this kind of in-depth communication in the framework of social media and mass media. In an age where algorithms are increasingly mediating digital connections, how do we create systems that facilitate meaningful discourse at scale? This motivates us to think of how users and designers might influence the direction of interactive design in the future (Crawford, 2003). Furthermore, it motivates users to seek out more deliberate technological engagement, moving from passive consumption to active involvement. It emphasizes the significance of promoting designs that value depth and quality of interaction, proposing a transition towards more human focused technology ecosystems, as someone who is interested in the larger effects of technology on society (Crawford, 2003).

Citations:

Crawford, C. (2003). The art of interactive design : a euphonious and illuminating guide to building successful software. San Francisco: No Starch Press.

Click on the art to interact and create your own flower garden!

//Define the Flower class to represent each flower in the garden
class Flower {
  constructor(x, y) {
    this.x = x; //X position of the flower on the canvas
    this.y = y; //Y position of the flower on the canvas
    this.size = 5; //Initial size of the flower, to be grown over time
    this.growthRate = random(0.05, 0.2); //Random growth rate for dynamic visuals
    this.fullSize = random(30, 70); //Target size of the flower when fully grown
    this.petals = floor(random(4, 9)); //Number of petals, randomly chosen for variety
    this.petalSize = this.fullSize / 2; //Determines the size of each petal
    this.color = [random(100, 255), random(100, 255), random(100, 255)]; //RGB color of the petals, chosen randomly for diversity
  }

  //Method to simulate the growth of the flower
  grow() {
    //Increase the size of the flower until it reaches its full size
    if (this.size < this.fullSize) {
      this.size += this.growthRate; //Grow based on the predefined rate
    }
  }

  //Method to display the flower on the canvas
  show() {
    push(); //Save the current drawing state
    translate(this.x, this.y); //Move the drawing origin to the flower's location
    noStroke(); //Petals and center will not have an outline
    fill(this.color[0], this.color[1], this.color[2]); //Set the color for the petals
    
    //Draw each petal around the center
    for (let i = 0; i < this.petals; i++) {
      rotate(TWO_PI / this.petals); //Rotate the drawing context to evenly space petals
      ellipse(0, this.size / 4, this.petalSize, this.size); //Draw an ellipse for each petal
    }
    
    //Draw the flower's center
    fill(255, 204, 0); //Color for the center of the flower
    ellipse(0, 0, this.size / 4, this.size / 4); //Draw the center as a smaller ellipse
    
    pop(); //Restore the original drawing state
  }
}

let flowers = []; //Array to hold all the flower objects

function setup() {
  createCanvas(800, 600); //Set up the canvas
  background(0); //Initial background color
}

function draw() {
  background(0); //Clear the canvas at each frame to redraw updated flowers
  //Iterate through each flower in the array to update and display it
  for (let flower of flowers) {
    flower.grow(); //Simulate growth
    flower.show(); //Draw the flower on the canvas
  }
}

function mousePressed() {
  //Create a new Flower object at the mouse position when the canvas is clicked
  let flower = new Flower(mouseX, mouseY);
  flowers.push(flower); //Add the new flower to the array
}

The title of this artwork is “The Flower Garden”. The overall concept of this generative art piece is to simulate a digital garden where flowers can spontaneously grow at locations chosen by the user. Each flower starts small and grows over time, with a unique number of petals and colors, creating a diverse and evolving garden scene. This interactive piece allows viewers to contribute to the creation of the artwork, making each experience unique.

Use of Arrays and Objects in OOP
Arrays: The flowers array is used to store multiple instances of the Flower class, showcasing how arrays can manage collections of objects in an OOP context.
Objects: Each flower is an instance of the Flower class, with its properties and behaviors encapsulated within the class. This demonstrates the use of objects to model real-world concepts (like flowers) with data (properties) and actions (methods).

I tried to create an interactive and visually appealing art, allowing both the creator and the viewer to explore the intersection of nature, art, and technology. The inspiration behind this artwork was the concept of similar virtual garden apps/games that allows users to have their garden, creating and nurturing the flowers in it. I tried to make a similar version of it with vivid colors and shapes. The part I most loved is how the flowers actually look – I think they’re very pretty and when they’re blooming it gives a calm and soothing feel to the viewer.

Here’s how it looks when the garden is full of flowers:

I made another one with some revisions(added stem and two leaves to each flower):

Full garden:

Here are some other designs I kinda played with:

In the provided text, Chris Crawford goes into the complexities of interactive media, attempting to create a specific definition while distinguishing its numerous manifestations.

In my opinion, there is a need for a broader appreciation of interactive media, which is often misunderstood as essentially superficial. However, I am confident that beyond its surface lurks great depth and importance.

Finally, I encourage for collaborative initiatives to help individuals and communities get a better knowledge of this fluid industry.

For this assignment, I decided to take my previous work and try and make it interactive. I have to admit that it took me longer than expected but I eventually got there.

First step was the code. I had to find a way in which I could create firstly a ball that was moving on the screen. After that, I just had to make a bunch of them and make them move in different directions.

I decided to make the colors of the circles random because I thought it might end up being colorful, which it did.

Regarding challenges I think that the constructor was the thing that took me longer but I eventually made it work.

END RESULT: