For this assignment my main inspiration came from my niece, actually, during family lunch, she was playing around with a kaleidoscope, and i remembered how as a kid, I was so intrigued by them. I searched up inspirations and patterns online and i definitely wanted to try and create a design similar to a kaleidoscope. So i created jittery, dot shape that turns into this, flowy dot when you click on the mouse, just as how the shapes change when you rotate a kaleidoscope.
Reflection:
Honestly the code wasn’t as complex and was made up of mostly arrays, OOPS what we did in class mostly, and maybe next time i should try and be more complex with it and try new codes not taken in class, but I’m still very proud of the outcome. However, I did try sin and cos to create the waviness and jitter movements with the shape , which i got inspired from Amna’s previous code last week, and I’d say that’s the code I’m most proud of as it was something new to me that took some time to get right, but after reading about it on the P5 website, I figured it out, turns out it was just coordinates and using the function random to create those flowy movements, and this is the code that allows for the dots to then turn into wavy dots so it can then look like those squares when u click/toggle on the mouse, hence if I remove it the dots would just flow up and down or side to side instead of creating the square trail.
here is code im most proud of:
// Function to move the dot
move() {
// Create two different movement patterns based on `flowDirection`
if (flowDirection === 0) {
this.x += random(-2, 2); // Random jitter in the x direction
this.y += random(-2, 2); // Random jitter in the y direction
} else {
this.x += sin(this.y * 0.05) * 2; // Wavy movement based on the y-coordinate
this.y += cos(this.x * 0.05) * 2; // Wavy movement based on the x-coordinate
}
After reading the article “The Art of Interactive Designs,” I kept thinking about what makes something truly interactive. The author does point out that a good interactive system feels almost like a conversation, like there’s this back-and-forth where the system responds to what you’re doing in real time. It made me realize that a lot of systems or designs we think are “interactive” really aren’t, especially when they don’t actually engage with the user in a meaningful way. If something just sits there and doesn’t respond, it’s basically dead weight, no matter how fancy it looks.
In my opinion, it was interesting how the writer claims that interaction isn’t just about cool or flashy videos. its about making the user feel like there in control and that their input to that piece is important. Sometimes, I would see designs that look amazing but don’t actually respond well to the user. This means that I most likely overlooked my previous artwork I created in p5.js. Yes, I’m proud that I was able to create art that looks cool, but if it’s not responsive or doesn’t react to what the user does, it’s not really interactive in the way it should be.
This article really pushed me into thinking about how I could improve my p5.js sketches to make them more interactive. Right now, for the assignment I’m doing this week, I feel like its a little bit flat, but they respond, but not in a way that feels satisfying. For instance, you can click a cube and it pops out, but that’s about it. I want to bring in smoother transitions, add more control options, and maybe even layer multiple interactions on top of each other. For example, what if clicking a cube changed its color, or if dragging across the screen triggered more than one animation? That’s the kind of engaging interaction the article talks about, and it’s the direction I want to head in. I really believe that real interaction should be immersive, and I think the article agrees on that too . I mean, from what I understood, its not about one thing happening at a time; its about creating a system that is consistently reacting to the user. In the future, I want my own projects to feel like they are alive and responding, not just a list of functions that don’t change.
For this art work, I’m going with a concept similar to my previous one and continuing the Velnor Molnar grid art. I was on the lookout for art pieces made with artists who used P5.js, and I found myself inspired by two standout visuals. I was really drawn to this vibrant 3D cube grid. It has so much depth and layers that it just stands out.
The next source of inspiration is a straightforward yet powerful idea known as the “Fading Grid.” The color changes are truly captivating, producing a gentle fading effect that evolves within the user interaction.
I’m thinking of combining both concepts. I’ll incorporate the 3D cube design and introduce some interactive color fading, drawing from both sources of inspiration. When you click on the mouse, the cubes shift, with the color changing within the user interaction to create movement in a way that feels interactive.I’m really looking forward to seeing how blending these two concepts will influence my final piece of art.
EMBEDDED SKETCH:
Click on the cubes!
HIGHLIGHT OF THE CODE:
One part of my piece where I’m really proud is how I changed the lighting of the cubes based on how the user moved their mouse. As the mouse moves toward a cube, it gets brighter. As the mouse moves away, it gets darker. This makes the background look smooth, which makes the cubes seem to be reacting to the user being there.
In the first chapter of Chris Crawford’s The Art of Interactive Design, I found myself engaged with the foundational ideas presented. From Crawford’s exploration into the nature of interaction as the core of design, one of the key takeaways for me was Crawford’s emphasis on interaction being the core of design. Before reading this, I often saw interactivity as an added feature rather than the fundamental aspect of the user experience. It was like a light bulb went off when he explained that interaction isn’t just about adding clickable elements but about making the whole design process revolve around the user’s actions and reactions. This perspective has made me question my approach to design—am I truly focusing on how users interact with my work, or am I just ticking off boxes?
I agree with him on the definition of interactivity. If I am creating an interactive device/art/product, I should always remember how four parameters, aka listening, speaking, thinking, and responding, work on my idea. I really enjoyed how he explained interactivity with examples, making it easier to even teach my 7-year-old brother about interactivity in technology.
Lastly, on the notion of traditional entertainment like movies being non-interactive, I think that might get shifted with emerging technologies. Digital media, including interactive films, virtual reality experiences, and even interactive web-based stories, demonstrate that interactivity can be a fundamental aspect of various media forms. The rise of these new media formats challenges the traditional notion that interactivity is limited to games or other explicitly interactive experiences.
A strongly interactive system, as described in The Art of Interactive Design, goes beyond just reacting to user input; it creates an ongoing back-and-forth between the user and the system. Crawford talks about the system as “listening, thinking, and speaking,” meaning it responds in meaningful ways to what the user does. In my p5.js sketches, I want to improve user interaction by giving more immediate feedback and making the system react in a way that feels more real or personalized if that makes sense. For example, much like how in Minecraft your actions (building or destroying) immediately affects the world around you, like destroying the wrong block could lead to a flood, same with my designs, I want to make my sketches change and evolve with user input. Furthermore, instead of having a single click trigger a known/set action, I want the system to adapt and change based on the actions similar to how Spotify creates personalized playlists based on previous songs you’ve listened to. So basically, the previous user inputs influence the sketch’s future outcomes. I can also add depth by layering interactions, like having multiple variables such as colors, shapes, or movement change in response to user input, which I am implementing right now to my sketches and giving it a go, as I do believe it gives a more appealing look to the system. I also just found out, that you can add sound effects on P5, which I hope we get to learn that, during the semester, as I’m sure everyone can agree sound enhances any type of design. Hence, by incorporating these elements into my sketches and designs, I aim to create more interactive and engaging sketches that feel alive and responsive, aligning with Crawford’s vision of true interactivity.
After watching Casey Reas’s assessment of randomness in art, I’m convinced of its valuable role, especially in the STEM field, where it allows researchers to predict and analyze randomness in their subjects. His explanation reminded me of a study where Japanese researchers used algae to optimize their rail transport system. The algae grew in random, unpredictable ways, yet always found the most efficient pathway to form a network based on the pattern or map of the space in which it was cultured. (In 2010, a team of researchers from Japan and the U.K. fed a slime mold with nutrients arranged to imitate the nodes of the Tokyo subway system. The resulting network closely resembled the actual subway network, leading to the development of biologically inspired adaptive network design.) This study highlights the potential of introducing randomness to the template designs of objects, something Casey Reas often emphasizes in his work.
When it comes to incorporating randomness in my own projects, I find it most effective in creating animations. For example, using a random number generator and initializing it to a variable, then applying that variable as an argument for certain shapes in my self-portrait sketch, allowed me to simulate the movement of the ‘mouth’ shape, giving the illusion of the sketch talking. To me, randomness is most enjoyable and useful when applied in animations.
In the balance between total randomness and complete control, I prefer maintaining more control over an object while leaving some variables to function randomly. This approach not only makes the model more reliable but also allows me to observe and understand the specific randomization patterns more clearly. Much like in research, where we use a “control” scenario to keep experiments fair, having a balance between control and randomness helps detect how certain variables influence the behavior of others.
In this project, I draw inspiration from the geometric artworks discussed in: COMPUTER_GRAPHICS_AND_ART_Aug1977. My goal with this project was to explore the potential of ‘for’ loops to generate grids of symmetrical, curved lines, creating a structured, rhythmic design. However, I hoped to disrupt this symmetry by introducing heavy distortion, with the intention of simulating the visual effect of mind fog. The resulting artwork presents a uniform arrangement of curves that distort and displace when the cursor hovers over it, evoking a sense of disorientation and randomness—mirroring the feeling of brain fog.
Highlight:
I’m particularly proud of the distortion animation I added to this sketch. By utilizing the dist() function, I created interactive conditions that are activated when the mouse hovers over the Bézier curves. Using an if statement, I introduced random increments within a range of negative to positive values to the variables used as arguments for the original Bézier curves. This approach helped change the positions of the curve lines at random, adding distortion and creating the brain fog effect that I intended. Additionally, reducing the frame rate helped give the animation a 90’s cartoon effect aesthetic.
While working on this project, I experimented with creating symmetrical grids and distorting the curves to simulate mind fog. Initially, I focused on generating the grids using for loops, but as I introduced interaction through mouse hover effects, I realized how much potential this had to enhance the dynamic nature of the piece. The use of dist() and if() functions to trigger random distortions worked well in creating a more immersive experience.
Looking back, I think there’s room for improvement in making the distortions more fluid and gradual. Currently, the randomness of the distortions can feel abrupt, so in future iterations, I would explore using easing functions to smooth the transitions.
Two artists have caught my eye for my concept: Vera Molnár and Dr. Bill. Vera Molnár’s use of grids and squares with small touches of randomness was something I thought of as cool and want to bring to my own piece, especially after watching Casey Reas and learning how randomness can create unique art pieces. Her piece “(Dés)Ordres” shows an example of balance between order and chaos by introducing little changes in color and shape within a structured grid (Molnár, 1974). I want to do something similar by using a grid of squares and making each square unique, creating a sense of predictability within the order. The second artist’s art, Dr. Bill’s, has inspired me to incorporate interactive elements into my artwork (Kolomyjec, n.d.). I plan to incorporate an interactive element where the colors of the squares shift as the viewer moves their mouse across the screen, making it engaging.
To be more specific about my design, I will use the loop function to add squares all over the canvas. However, like Molnár’s designs, I’ll also add squares within the squares, but I’ll be using randomness to change either how the square moves or how big it is inside the square, or the colors of the square. Also, I wanted to make it more interesting by picking one color on one side of the canvas that changes with the user and the mouse interaction with it. In addition to that, I wanted to make it a vibrant piece by adding random colors, but as I said, I’ll be choosing one specific color that changes within the interaction of the viewer and the mouse. Hopefully, by combining Molnár’s structured randomness with Dr. Bill’s generative interaction, I am aiming to create a dynamic and engaging piece, by working with order and unpredictability, to make something that evolves with each viewer’s interaction.
The images below are Vera Molnár and Dr. Bill’s work that inspired my piece:
Dr.Bill
Vera Molnar
SKETCH:
HIGHLIGHT:
One part I’m really proud of is figuring out how to make the cubes “shake.” I used the “random()” function to add small random movements to the X and Y coordinates of each square. By setting “randomShakeX” and “randomShakeY to values between -3 and 3, the squares move slightly, creating a subtle shaking effect.
It took me a while to get this right and was the most time-consuming part about my code. I started out by testing different ranges for the movement and tested the effect with various square sizes. After some trial and error, I found the perfect balance where the shaking felt noticeable but not too chaotic. This part of the code may seem little, but it makes the design feel more dynamic and playful, which is something I was excited to achieve. In the end, I was proud of how it turned out because it brought my art piece together, which proved Casey Reas’s message of how small random changes can make a big difference in how a design feels.
heres a code snippet on how to do it:
// Adding random movement to create an effect of shaking (inner squares)
let randomShakeX = random(-3, 3);
let randomShakeY = random(-3, 3);
// Draw three inner squares with the shaking effect, decreasing in size.
rect(x + randomShakeX, y + randomShakeY, 30, 30);
rect(x + randomShakeX, y + randomShakeY, 20, 20);
rect(x + randomShakeX, y + randomShakeY, 10, 10);
}
}
}
REFLECTION:
One thing I learned from this assignment is how randomness can play a big role in art.It adds variety and surprises that make the piece more engaging. One thing I want to improve is to add more interactions with the user in my piece. For example, I had an idea where pressing a key on the keyboard would change the shapes, and using the arrow keys could adjust the size of the shapes. Along those lines, I’d like to eventually turn the art into a game where people can play with the shapes and make their own patterns that fit their personalities. It would be more fun to do this with the art piece.I’m happy with how the code turned out, though. It makes me feel like the art piece fits with who I am by being colorful and unique.
CONCEPT:
For this assignment, my inspiration mostly came from Bill Kolomyjec’s art piece ‘Random Squares’. ‘Random Squares’ Bill
However, I wanted to add a bit of a twist and make it more chaotic or trippy in some sort of way. I’ve gotten the idea of the changing shapes depending on the area of the canvas from class and interpreted it into my design, which thankfully pulled the piece together. In addition, the crazy random colours definitely added to the effect of it being trippy at least I hope so. Moreover, it still felt a bit bland, and after watching Casey Reas’s video, I knew I needed to add something to make the piece seem more alive or organic, as he says. In doing so, I discovered a growing and shrinking factor, which, after some trial and error, I realized it was just a variable that I needed to create and then just adjust the shape size accordingly, and it turned out not so hard after all. This would probably be what I’m most proud of in the whole code. Code that I’m most proud of:
/ Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;
function setup() {
createCanvas(400, 400);
frameRate(5);
}
function draw() {
background("black");
// sizeChange variable to create growing/shrinking effect
if (growing) {
sizeChange += 1;
// If the size gets too large, start shrinking
if (sizeChange > 20) {
growing = false;
}
} else {
sizeChange -= 1;
// If the size gets too small, start growing again
if (sizeChange < 0) {
growing = true;
}
}
Reflection/Improvment:
Next time, I would love to have the shapes rotate, which is something I tried doing but unfortunately failed, I did watch videos on youtube but i still didn’t understand it so i decided to scratch that until i fully understand how it works. So hopefully next time!
My design:
My code:
// Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;
function setup() {
createCanvas(400, 400);
frameRate(5);
}
function draw() {
background("black");
// sizeChange variable to create growing/shrinking effect
if (growing) {
sizeChange += 1;
// If the size gets too large, start shrinking
if (sizeChange > 20) {
growing = false;
}
} else {
sizeChange -= 1;
// If the size gets too small, start growing again
if (sizeChange < 0) {
growing = true;
}
}
for (let x = 0; x <= width; x += 40) {
for (let y = 0; y <= height; y += 40) {
// Outer stroke for the shapes
strokeWeight(3);
stroke("black");
// Right half of the canvas - enlarging and shrinking squares
if (mouseX > width / 2) {
for (let size = 30 + sizeChange; size > 0; size -= 10) {
fill(random(255), random(255), random(255), 150);
// nested squares
rect(x + (30 - size) / 2, y + (30 - size) / 2, size, size);
}
} else {
// Left half of the canvas - enlarging and shrinking circles
for (let size = 30 + sizeChange; size > 0; size -= 10) {
fill(random(255), random(255), random(255), 150);
// nested circles
ellipse(x + 20, y + 20, size, size);
}
}
}
}
}
The first time watching Casey Reas speech, I had so many thoughts. But one main point I kept thinking about is how the author focuses on artists using randomness to create art that represents history, biology, or society, but none of these works seem to connect with deeper human emotions. So then I kept thinking about this, and I asked myself. Does randomness restrict personal expression?. For example, the artist said, “We used a little bit of randomness and a lot of sort of decision-making based on how we wanted things to feel.” From my point of view, this quote shows how randomness keeps art from being predictable, leading to unexpected results that might move the piece away from personal emotional expression. So, this makes me question whether relying too much on randomness prevents personal expression since the process seems more about handling the chaos of the system than about conveying intentional emotions. The reason I focused on this part of the video is because I always thought of art as a form of personal expression that reflects the artist’s emotions, thoughts, and experiences. So, when too much randomness is involved, it feels like the artist loses control over that emotional connection, letting the system or algorithm take over, which could overshadow the personal meaning and emotional depth behind the work.
However, watching the clip for the second time, I decided to think with an open mind. For example, does the unpredictability in art lead to more innovative pieces that lead to deeper stories?. Casey Reas mentioned a few artists who used randomness to create works with meaningful messages. For example, he talks about a project visualizing cancer cell communication. “Everything is structured and ordered, and randomness is used slightly to determine the position and the scale of these individual clusters.” In the example, randomness plays a role in producing a lifelike representation. The artist used randomness to decide where the protein clusters would go and how big they would be, which reflects the natural unpredictability of real biological processes. As a viewer of this artwork, I felt as though it captured the chaotic nature of cellular interactions. So, in this case, I think that the randomness added depth in the art piece, which in a way made me feel connected with the processes of life in a way that a pure structured system or algorithm might not be able to. Overall, while at first randomness may seem to get in the way of personal expression, it nevertheless lets artists make works that reveal deeper truths about nature, society, and the human experience in ways that pure intention or structured systems might not be able to just by using unpredictability in some part of the art.
REFRENCES:
Reas, C. (2012). Form+Code in Design, Art, and Architecture.
