For the concept I was inspired by jellyfish and their movement in the wild. I tried to recreate their look with glowing circles to make the piece more aesthetic. Their movement is random, yet smooth, simulating real life movement but they also leave marks behind their movement for the overall look of the project.
Process
I started by just creating a class for the “creatures”, this included their initial positioning and their size. I then started implementing the movement, which was not that hard with the use of object oriented programming. For the movement, I wanted it to be random and smooth also so I used the noise function of p5js to achieve this. I then created a glowing feel to the creatures and also wanted to make them change colors smoothly and randomly similar to the movement. This proved to be a little bit difficult as noise function only returns 0 and 1 and I kept getting just the black color. To overcome this I had to use sin and cos functions which would keep the values between -1 and 1 and with some math achieve the wanted effect.
//useing the sin and cos which only return 1 or -1 to keep the values under 255
let r = 100 + 155 * sin(frameCount * 0.01 + this.noiseOffset);
let g = 50 + 150 * cos(frameCount * 0.01 + this.noiseOffset);
let b = 150 + 105 * sin(frameCount * 0.02 + this.noiseOffset);
//create a glowing effect
noStroke();
fill(r, g, b, 30);
ellipse(0, 0, this.size * 1.5, this.size * 1.5);
Reflection and future improvements
It was fun to use object oriented programming in p5js. It proved to not be that difficult and made the overall project making experience easier. After some time the creatures leave the screen which could be interpreted as a feature and not a bug as they are being scared away from us looking at them. In the future I would maybe like to implement some interaction with the mouse, maybe they either group around the mouse or stay away from it. Overall a great learning experience!
Reading Crawford’s thoughts on interactivity made me realize how often we misuse or misunderstand the term. He argues that true interaction is more than just clicking buttons or watching something respond—it’s a continuous cycle of listening, thinking, and speaking. This made me question a lot of things I previously considered interactive, like video games or even websites. Are they really interactive, or am I just reacting to what they already decided for me? Crawford’s example of a refrigerator light turning on when you open the door really stuck with me. We say it “responds,” but does it actually interact? Probably not. It makes me wonder—how many things in digital media are truly interactive, and how many just give an illusion of interactivity? I’m also curious if we, as users, even want true interactivity all the time. If everything required deep engagement, wouldn’t that be exhausting?
His perspective also makes me rethink my approach to designing p5.js sketches. If interactivity isn’t just about reacting, but about engaging in a meaningful back-and-forth, then my sketches should create that kind of loop. Right now, they mostly rely on simple user inputs like clicks or movement, but how can I make them listen better? Maybe adding more adaptive responses or making the program “think” before reacting could help. A strongly interactive system, in my view, would be one where the user feels like they are having a conversation with the system, rather than just pressing buttons to see what happens. Overall, Crawford’s ideas push me to design experiences that aren’t just visually engaging but intellectually engaging too.
In the spirit of valentine’s week, I made this interactive scene to celebrate rose day with my boyfriend. It’s inspired by our favorite trip to japan, where we fell in love with the beauty of cherry blossom trees and the iconic torii gate. The scene aims to capture those sweet memories by blending gentle falling flowers, a warm sunset, and a romantic gesture of offering roses. It’s meant to feel cozy, nostalgic, and filled with the magic of our shared experiences. Since we are in a long distance relationship, I gave this as a gift.
Highlight:
The highlight of this scene is definitely the cherry blossom trees. I spent a lot of time studying pictures of real sakura trees to capture their delicate look and subtle branching. I wanted them to appear natural, so I used a fractal-like approach: starting with a trunk and randomly growing multiple smaller branches at slightly varied angles and lengths. Each branch has clusters of blossoms added at the tips, mimicking the way real cherry blossoms bloom in bunches. striking a balance was tricky—too few blossoms made them look sparse, but too many quickly made them look overly dense. Eventually, layering different pink tones and carefully adjusting the random growth patterns helped create a softer, more realistic effect.
// add a random cluster of flowers at a branch tip
addFlowerCluster(xcenter, ycenter) {
let numflowers = floor(random(4, 8));
for (let i = 0; i < numflowers; i++) {
let offsetx = random(-20, 20);
let offsety = random(-20, 20);
let size = random(6, 10);
let rot = random(TWO_PI);
this.flowers.push(new flower(xcenter + offsetx, ycenter + offsety, size, rot));
}
}
// display all branches and flowers
display() {
push();
translate(this.x, this.y);
scale(this.scalefactor);
// draw branches
for (let b of this.branches) {
b.display();
}
// draw flowers
noStroke();
for (let f of this.flowers) {
f.display();
}
pop();
}
}
Improvements:
I could add more details to the roses, like multiple petals or soft shading, to make them look richer and more lifelike. Similarly, refining the branching pattern and blossom clusters of the cherry trees could bring even more realism by adding subtle color variations and layered petals. Another improvement could be animating the actual gesture of handing out the rose, so the flower doesn’t just glide through the air. Seeing a little motion in the characters’ arms or a gentle pass of the rose would make the scene feel more personal and sweet.
What do you consider to be the characteristics of a strongly interactive system? What ideas do you have for improving the degree of user interaction in your p5 sketches?
A strongly interactive system is one that feels alive in the sense that it responds to the user and isn’t just like a one way conversation. It listens to what the user is doing, understands those actions, and adapts in a way that makes the experience feel more personal and engaging. In the reading Crawford talks about interactivity being a kind of conversation between the system and the user, with three essential elements, listening, thinking, and speaking. This means the system is not just reacting, but actively participating and if any of those elements falter, the interaction falls flat.
Thinking about how I can bring this to my p5 sketches, I realize there’s a lot I could do to make the interaction feel more alive. Specifically I think there’s room to play with how the system “speaks” back to my users. Before this reading my idea of interaction was just having visual feedback when a user clicks or drags, but now I think there’s more potential to make those responses more dynamic and meaningful. For example, instead of the same visual change with every interaction, I could have the system react differently based on how the user engages. If a user clicks quickly or drags slowly, the feedback could reflect that, so essentially just subtle changes in how elements behave could help keep the user invested. By treating user interaction as this ongoing exchange, I think I can create sketches that feel more responsive, intuitive, and engaging. The goal is for the user to feel like the system is learning and adapting, making each interaction unique. That’s what really makes it feel like the system has a personality of its own, and the user is an active part of shaping the experience.
One key takeaway of the reading is that degrees of interactivity can be determined by examining how much the three necessary elements of conversation (namely, listening, thinking and speaking) are incorporated in a cyclic, alternative manner between two actors. Let’s take this definition further. Here is my expanded definition of a strongly interactive system – it scores well on the following three aspects:
the amount of information it receives (eg. taking in the position of the user’s feet v.s. taking in the position of the user’s whole body over time, their voice and their facial expressions)
the extent to which it understands the data (eg. not understanding due to lack of knowledge vs understanding due to having knowledge on the subject area) and intellectually engages with it in a manner that fulfills its intention. It is measured by the amount of influence it gives to the other actor (eg. an action that causes a subtle change in the user’s view of a topic vs. an action that causes a total shift in the same user’s view of the same topic).
how well the data it processed is expressed, considering form (eg. showing important information in small text vs large text), measured by how well a user understands the intention.
Let’s break it down. Firstly, I posit that the test for interactivity must consider all users whom the system is intended for. In the refrigerator example, not only one actor, but different types of actors are considered here: adult and child. Since different kinds of users can use one system, and the system may not be intended for every single person who exists (eg. babies who wouldn’t open refrigerator doors), the test for interactivity must consider all users whom the system is intended for. Second, a strongly interactive system is the opposite of the weakly interactive system: it has a great extent to which it listens, thinks and speaks in response to all users whom the system is intended for. Third, since interaction is not one-way, but two-way, a strongly interactive system must indicates both: (1) a great extent to which that system (a) receives information, (b) qualitatively processes it according to intention, and (c) clearly expresses that data which it had made sense of – in response to all users, as well as (2) a great extent to which intended users can (a) listen, (b) think and (3) speak in response to the system, in an alternating and repeatable manner. Fourth, a strongly interactive system’s quality of processing its data received can be measured by the how well it intellectually engages with it in a manner that fulfills its intention. By intention, I mean intention within a spectrum of full transparency and some ambiguity (total ambiguity is excluded because that does not allow proper communication and consequently, does not allow proper interaction). Sometimes, we need ambiguity – some things hidden, not everything revealed. Think of a teacher teaching a student – a good teacher could give some information on a topic, then raise difficult questions to the student in order to engage the student more deeply and intellectually, find nuances and dive into greater complexity. Ambiguity can provoke further curiosity and interaction, thus, intention matters and is necessary. Fifth, processing of information must be done in a way that intention must be made clear to the user (eg. the user actually notices that some information is hidden and others emphasized). In the teacher-student example, the student recognized that the teacher is hiding certain information. Engagement sparks with this recognition, so helping the other user understand intention is crucial. See the appendix below for my proposed expanded definition of a highly interactive system.
Ideas for improving degree of user interaction in p5 sketches
There are so many ways to improve the degrees of user interaction. The system can perform some response to user’s actions: eg. mouse clicks, mouse moves left, mouse moves right, mouse moves upwards, mouse moves downwards, key pressed, and key released. Let’s take some examples. If the mouse is clicked, some text that’s associated with an object (eg. cat) can be displayed. If the mouse moves left, spacing between dots may decrease, and if the mouse moves right, spacing between dots may increase. If the left key is pressed, an object can move left and if the right key is pressed, an object can move right. If the ‘a’ key is pressed, the canvas could have a background the colour of an apple. And if the ‘b’ key is pressed, the canvas could have a black background. As an interactivity designer, it will be important to consider the purpose of the artwork, and as the reading puts it, consider both form and function in creating a unified design.
Patterns have always captivated me. From the fractals in the Mandelbrot set to the Gallifreyan language in Doctor Who, they evoke a sense of wonder. Yet, as mesmerizing as these patterns are, they often stem from predictable rules. Casey Reas’ work, however, introduces a twist: his patterns emerge from chaos and randomness. This unpredictability is what sets his art apart—it’s not just about following rules but about embracing the unexpected. Reas’ exploration of emergence– the phenomenon where individual elements combine to create something entirely new- resonates deeply with me. It reminds me of Craig Reynolds’ Boids algorithm or Conway’s Game of Life, where simple rules lead to complex behaviors. Reas takes this concept further by marrying randomness with intention, creating art that evolves organically. His work feels like a precursor to today’s AI-driven generative tools, which similarly harness randomness to produce stunning results.
One aspect of Reas’ process that intrigues me is his use of “planned randomness.” By defining simple rules like “move in a straight line” or “deviate from direction,” he creates intricate abstract pieces that feel alive. It’s a method I’m tempted to replicate in my own work- building arbitrary rules like LEGO blocks and letting them unfold into something unexpected. But this raises an interesting question: is it truly random if there are rules? Even with pseudo-random number generators, outcomes can be replicated if the same seed is used. What would pure randomness look like in art? Could we create rule-free generative systems where even the rules themselves are randomly determined? The thought of such an experiment excites me- it could push the boundaries of what we consider “random” and challenge our understanding of originality.
Reas’ work also makes me reflect on a topic I care deeply about: AI art. As an avid artist, I sometimes worry about how far AI has come in replicating creativity. When randomness plays such a significant role in art, it blurs the line between human and machine-made creations. If an artwork relies heavily on chance, does that make it less human? Or does the artist’s intention still shine through? Personally, I believe there’s value in balancing control and randomness. While randomness can add an element of surprise, too much of it risks losing the personal touch that makes art meaningful. In my own projects, I prefer to use randomness sparingly- for example, in selecting colors or text- while maintaining overall control. This balance keeps my work grounded in human expression.
Casey Reas’ work has deepened my understanding of the interplay between chaos and order in art, prompting me to reconsider traditional creative boundaries and explore the fusion of technology and human expression. Inspired by his ability to reveal patterns within randomness, I aim to incorporate both structure and spontaneity into my future projects, setting objectives while remaining open to new discoveries. My goal is to find a balance between control and chaos, mirroring Reas’ skillful approach to art.
One of my goals for this week’s project was to incorporate live movement as my previous sketches were all static. I also found Tuesday’s in-class exercise on bouncing balls and collisions interesting, so I wanted to incorporate collision into my sketch as well.
I got inspiration from Casey Reas’ CENTURY piece to work with lines– specifically exploring randomness in lines in terms of coordinates, speed and strokes.
CENTURY, Casey Reas
When I think of lines in classical art, Piet Mondrian’s artworks are the first that come to my mind. I decided to take ideas from both of these artworks, each representing the digital and physical world, to create my generative artwork piece.
Piet Mondrian
Process
This sketch consists of a class for drawing a moving line across the canvas. Each line is randomly sized (length & stroke weight), located and colored; it can either move towards the top or the bottom of the screen and at randomly selected speeds. Each line moves across the canvas and when it goes out of the canvas bounds, it wraps around and appears again from where it originally started. When two lines intersect, the color of both temporarily changes to white. The colors used in the sketch are inspired by Mondrian’s color palette and a black border is drawn around the canvas to give the sketch a more traditional art feeling.
Most of the line attributes (speed, stroke weight, line count etc) are chosen randomly within two sets of boundaries and I plugged in various different values for each bound before settling on certain values to ensure that the movements are not too quick and pleasant to the eyes.
Challenges
Detecting the intersection between two lines was the trickiest part of this project and had to get mathematical. I referred to a StackOverflow comment to write the function to check for intersection between two lines, which I later found was based on Cramer’s rule.
intersects(other) {
// function to detect line-line intersection
// reference: https://stackoverflow.com/a/55598451
let det = (this.x2 - this.x1) * (other.y2 - other.y1) - (this.y2 - this.y1) * (other.x2 - other.x1);
// lines are parallel so will never intersect
if (det === 0) return false;
let s = ((other.x1 - this.x1) * (other.y2 - other.y1) - (other.y1 - this.y1) * (other.x2 - other.x1)) / det;
let t = ((other.x1 - this.x1) * (this.y2 - this.y1) - (other.y1 - this.y1) * (this.x2 - this.x1)) / det;
// intersection occurs if both s and t are in the range (0, 1)
return s >= 0 && s <= 1 && t >= 0 && t <= 1;
}
The update function for moving the lines according to their gradients and wrapping them around the canvas was also a bit time-consuming as the code had to change depending on which direction the lines were going. When it got confusing, I did lots of testing with slowed up line speeds to debug and figure out why things were drawing incorrectly.
update() {
this.x1 += this.speed;
this.x2 += this.speed;
this.y1 = this.computeY(this.x1, this.initial_x1, this.initial_y1);
this.y2 = this.computeY(this.x2, this.initial_x2, this.initial_y2);
if (this.go_up) {
// check if the line has went beyond the top or left boundary
if (this.x2 <= 0 || this.y2 <= 0) {
// reset the line so that it appears from the bottom
this.x1 = width;
this.y1 = this.computeY(this.x1, this.initial_x1, this.initial_y1);
this.x2 = this.x1 + this.delta_x;
this.y2 = this.y2 + this.delta_y;
}
} else {
// check if the line has went beyond the bottom or right boundary
if (this.x1 >= width || this.y1 >= height) {
// reset the line so that it appears from the top
this.x2 = 0;
this.y2 = this.computeY(this.x2, this.initial_x2, this.initial_y2);
this.x1 = this.x2 - this.delta_x;
this.y1 = this.y2 - this.delta_y;
}
}
}
Reflections & Improvements for Future Work
I spent a considerable amount of time deciding on this week’s project and struggled to settle on one, but once I found an artwork I liked, I was able to seek and find more sources of inspiration. The actual implementation process, though with some challenges, went considerably smoothly once the idea was set, thanks to StackOverflow and repeated slow testing. In the next assignments, I hope to continue seeking inspiration from not only the digital world, but also from the physical world and from what I see with my eyes everyday.
First and foremost, this was one very interesting read.
One of the biggest challenges I ever faced since university started is probably explaining my major to my family. “Interactive Media.”… “But what is interactive?”… “How is media interactive?”… “Aren’t all medias interactive?”, till it lead me to wonder myself, “What is interactivity really?”
To see Chris Crawford’s take on this subject was very entertaining; his arguments and engaging form of writing made me think deep about interactivity. In this chapter, he describes it as “a cyclic process in which two actors alternatively listen, think and speak”. Initially, I was a bit taken aback by this definition, and his arguments on how certain things like reading or film weren’t really interactive, just engaging or participative. But after reading the whole chapter, I began to understand this take on interactivity more.
A strongly interactive system should definitely have these three characteristics. It should be able to receive our input, to process our reaction, and produce meaningful engaging output, stimulating a conversation between the two actors. I also think there should be a concept of control in the hands of both actors; something which can continue the interaction meaningfully, influencing the outcome. I also think that the interactions itself should be quick; one could argue that reading and film are interactions between the writer/producer and the viewer, just an extremely slow one. I also think that it should be adaptive to the user’s preferences and behaviours over time.
To increase the degree of user interaction in my p5js sketches, I think I can utilise the skills we learned in class, like mouse events and user defined functions. I can add more interactive elements like responsive animations, maybe try implementing hovering effects. The world of interaction is open to explore, experiment and implement.
This project is a twinkling night sky, where stars pulse and change brightness naturally. Clicking (or pressing a key) creates constellations by connecting nearby stars, randomly forming unique patterns each time. The background is a real sky image that i uploaded beforehand.
Code Highlight
It took me a while to figure out the way to form constellations between stars. So first, I try to find stars near the mouse (within a distance of 100). Then, I enhance the twinkling effect by making closer stars (within a distance of 50) brighter. Also, my constellations sometimes looked messy with too many connections so i had to limit those to only nearby stars (within a distance of 70) for cleaner constellations.
function createConstellation(x, y) {
let constellationStars = [];
for (let star of stars) {
let d = dist(x, y, star.xPos, star.yPos);
if (d < 100) {
constellationStars.push(star);
if (d < 50) {
star.setSizeAndAlpha(d);
}
}
}
connections = [];
for (let i = 0; i < constellationStars.length; i++) {
for (let otherIndex = i + 1; otherIndex < constellationStars.length; otherIndex++) {
let d = dist(
constellationStars[i].xPos, constellationStars[i].yPos,
constellationStars[otherIndex].xPos, constellationStars[otherIndex].yPos
);
if (d < 70) {
connections.push([constellationStars[i], constellationStars[otherIndex]]);
}
}
}
for (let star of constellationStars) {
star.setBrightness(255);
}
}
Reflections
The vision i had when creating this was the power of connection, resembling “the butterfly effect” — the idea that everything is interconnected and happens for a reason. At first, the stars exist independently, scattered across the sky like people and events in the world. But through interaction (user clicks), certain stars come together to form constellations: patterns that weren’t visible before. This could represent how separate people, situations, or choices can align to reveal meaning in what once appeared random.
Looking back, if I had to do this project again, I would likely try to refine the performance, especially if the number of stars increases. I would also improve the design part by adding more visually engaging elements. Overall, I’m satisfied with the result.
For this week’s assignment, we were tasked with creating a piece of generative artwork. Fortunately, I was hit with inspiration pretty soon after leaving class. This week was candidate weekend for new potential students, and I got to watch them crowd up around volunteers. This inspired me to create this artwork, which has a grid of blocks, with an interactive feature of all the blocks pointing towards the mouse.
We were asked to use Object-Oriented Programming for this assignment, so I started by first programming first block to see whether I could actually get the triangle to follow the mouse around or not. In my previous assignment, I had learnt how to use the rotate() and translate() functions, but this time, I needed to have it rotate according to angle of my mouse. This proved to be the most challenging part of this task. I struggled with calculating the angle (research eventually led me to the atan2() function), and then actually having the triangle rotate about its center. I did end having to hardcode some values into the function, but its functionality felt satisfying to achieve.
A different part of the code that I am especially proud of is the random rotation of the blocks towards the bottom half of the artwork. I used the map() function we had discussed in class to adjust for the intensity of the rotation depending on the row the blocks were in. I think it turned out quite organic-looking!
//rotating the rows at the bottom half
if (this.row >= rows - 4) {
//making the level of rotation more intense as the grid goes on using map() function
let intensity = map(this.row, rows - 4, rows - 1, 5, 25); //increasign rotation for lower rows
//converting to radians for the rotate() function
this.fixedRotation = radians(random(-intensity, intensity));
} else {
this.fixedRotation = 0; //no rotation for the top rows
}
Overall, I am quite glad with the end result of my piece. Though in the future, I would like play a bit more with the colors. Currently, it is black and white, as I couldn’t quite get a colored gradient without it looking odd. I want to also figure out how to fix the center of rotation without hardcoding it. Regardless, I am still very happy with the interactive feature of the piece.
