Before reading Crawford’s The Art of Interactive Design, I already thought of interaction as some form of two-way communication, where both sides depend on each other for the interaction to continue. Because of this, his idea of interaction as a process of listening, thinking and speaking felt somewhat self-explanatory to me rather than completely changing how I understood it. However, I agree with his argument that interaction can exist at different degrees. Two systems might both respond to a user, but one can offer much more interaction depending on how it processes and responds to what the user does. I don’t think every interaction has to necessarily be meaningful either. Some interactions can feel pointless, even if they technically involve communication. What interests me more is whether the interaction actually contributes to what the creator is trying to achieve.
This made me think differently about the sketches I have created so far in this class. I haven’t really designed them around the people interacting with them. Most of my decisions have been based on my own interests and what I wanted the sketch to show. For future sketches, I would like to experiment more with interactions that can produce unexpected results rather than having every user action lead to the exact same response. For example, the program could respond differently depending on what the user does or how they interact with it. If I’m creating something specifically for another person to interact with, I think I would want their actions to lead to something that encourages them to continue experimenting with the sketch or even makes them think about what is happening. This makes me question whether an interaction can be considered successful even if it works, but fails to get further response from the user.
For this assignment, I wanted to create a generative night sky using objects and arrays. My main inspiration was Rosalina’s Storybook from Super Mario Galaxy. I liked the soft, hand-drawn look of the scenes, especially the textured blue backgrounds and glowing stars. I was not trying to recreate the image itself, but I wanted my sketch to have a similar storybook feeling. The bigger stars are created using a Star class. Each star has its own position, size, color, glistening speed, and texture. I also added smaller stars and small colored points in the background so the sky would not feel too flat or empty.
Every 10 seconds, the main stars move to new random positions, so the composition keeps changing while the sketch is running.
glisten() {
// Move through the glistening animation at this star's own speed
this.sparkleTime += this.sparkleSpeed;
// Turn the sine value into a transparency value from 80 to 255
this.brightness = map(sin(this.sparkleTime), -1, 1, 80, 255);
}
How Was This Made?
For the main part of the assignment, I created a Star class that acts as a blueprint for the stars. Each object stores information such as its position, size, color, and glistening speed. I then created 30 different Star objects and stored them inside an array:
let stars = [];
for (let i = 0; i < 30; i++) {
let star = new Star( random(20, width - 20),
random(20, 350),
random(6, 28),
random(starColors) );
stars.push(star);
This array lets me go through all of the objects using one loop:
for (let i = 0; i < stars.length; i++) {
stars[i].glisten();
stars[i].display();
}
This made it easier to control many stars without writing separate code for each one.
Functions I Used
I used a few functions that we have not really covered in class yet.
I used sin() together with map() to create the glistening effect. sin() gives a value that smoothly moves back and forth, while map() converts that into the transparency range I wanted.
I used color() and setAlpha() so I could keep the original color of each star while changing its transparency.
To make the custom four-point star, I used beginShape(), vertex(), and endShape(CLOSE). These let me create my own shape by choosing where each point should be.
I also used push(), pop(), and translate(). I had used .push() and .pop() before with arrays, but these versions are different. push() saves the current drawing settings and transformations, while pop() restores them. I used them with translate() so each star could be moved to its own position without affecting the other stars.
For the glow, I reused:
drawingContext.shadowColor
drawingContext.shadowBlur
I had used these before in my previous assignment. shadowColor controls the color of the glow, while shadowBlur controls how soft and spread out it is.
For the background, I used randomSeed(). The background uses random points for texture, but without randomSeed() they would move every frame. Using randomSeed(5) makes the same random pattern repeat, so the texture stays still.
I later used randomSeed(millis()) when changing the star positions. Since millis() keeps changing, this gives the stars a new random arrangement instead of repeating the same one.
I also reused millis() from a previous assignment. This time I used it to check when 10 seconds had passed, and then I called a function that gives all of the stars new random positions.
Reflection
The visual side of this assignment changed quite a bit while I was working on it.
At first, I tried using lines and many small marks to make the background look more like crayon, but some versions looked more like digital scanlines or like I had scribbled over the whole background.
I eventually changed the texture to smaller points and reduced how many there were. This kept some texture without making it too distracting.
I also made a simple mistake at one point where I forgot to redraw the background inside draw(). Since the stars were animated, their old frames stayed on the screen and created trails.
After fixing that, I had another problem where the randomly generated texture changed every frame. I solved this using randomSeed() so the same random texture would be redrawn each time.
Later, I noticed that the stars changed position after the first 10 seconds but then seemed to keep returning to the same arrangement. This happened because the fixed randomSeed() used for the background was also affecting later uses of random(). I fixed this by using randomSeed(millis()) before generating new star positions, which gives it a different seed each time.
The sky also felt too empty at first. I increased the number of main stars from 20 to 30, gave them a wider range of sizes, and added smaller stars in the background instead of filling the screen with even more large stars.
For future improvements, I would probably try to make the stars themselves look even more hand-drawn so they match the Storybook inspiration more closely. I also think sound or some kind of interaction could be interesting, but I wanted to keep this version focused on the visual side.
Even before watching Casey Reas’ talk, I tried using randomness in my previous assignment without thinking deeply about the balance between randomness and control. I programmed the “YOU DIED” screen to have a chance of appearing after a random amount of time between 15 and 20 seconds. The program could decide when the change happened and whether it happened, but still the outcome was controlled, albeit slightly, by me. Looking back at it, it was not completely random. I created the rules first then allowed the computer to make smaller decisions within them. I liked that because the unexpected change made my work feel more alive and a bit more personal, since it was a game reference I enjoyed including.
I’m planning to develop this further with week two’s production assignment, in which I’ll create a glitched screen using loops. I could randomize the positions, lengths, colors or timing of the glitches so the screen does not produce exactly the same image each time. However, I would still control the color range and general layout. For me, the optimum balance is when I can recognize my original idea in every result, but I still can’t predict what the result would be. Complete control might make the work feel too repetitive, while total randomness could make the glitches look meaningless. What I’m interested in is something in the middle where I design the system, but the system can still surprise me. It also makes me wonder whether deciding what the computer is allowed to change is more important than deciding exactly where everything appears.
For this assignment, I wanted to create something that looked like a glitched screen using simple shapes and randomness. I started with the idea of having a grid of shapes that would constantly change, with their colors, sizes and the speed of the screen changing randomly.
At first, the colors were completely random, but I felt like the result was too chaotic and wasn’t very visually appealing, at least to me. I decided to limit the colors to a smaller palette inspired by two images I liked. I mainly took inspiration from the deep blues in one image and the warm yellow and gold colors in the other.
color reference 1: Illustration from Yuvi’s Longing. I liked the warm gold and yellow lighting in this image.
//move down the screen
for (let y = 25; y < height; y += 50) {
//move across the screen
for (let x = 25; x < width; x += 50) {
if (random() < 0.5) {
rect(x, y, ShapeWidth, ShapeHeight);
} else {
ellipse(x, y, ShapeWidth, ShapeHeight);
}
}
}
The part I like most is this one, where I used two loops, mainly for how simple it is. The first loop moves down the canvas while the second moves across.
What I liked more was what I could do inside those loops. I was able to randomly decide what shape appears, and both its color and size. Even though the code itself is quite short and simple, it creates something that constantly changes and looks different every time.
How Was This Made?
I started by making a simple grid using two for() loops and then placed a shape at each position. I used an if statement with random() to give each position a 50% chance of being a rectangle or ellipse.
After getting the basic grid working, I started adding randomness to different parts of it. The width and height of each shape are randomized. I also randomized frame rate so the screen changes at an inconsistent speed, which helped give it the glitched feeling I wanted.
Originally, I used completely random RGB values for the colors, but I wasn’t happy with how it looked. I created two arrays containing a smaller selection of colors instead, one for the shapes and another for the dark background. The program still chooses the colors randomly, but only from the colors I selected.
Towards the end, I removed the outlines, made the shapes slightly transparent and allowed them to overlap. I also used drawingContext.shadowColor and drawingContext.shadowBlur to add a warm glow around the shapes. I kept the glow color the same but randomized the amount of blur so that some shapes glow more than others.
Reflection
For this assignment, I liked seeing how much could be done with something as simple as loops and basic shapes. The first version worked, but it mostly looked like random colorful shapes changing on the screen. I wasn’t completely happy with it even though it technically did what I wanted.
Most of the changes I made afterwards were actually quite small. Limiting the colors, increasing the size of the shapes, removing their outlines, adding transparency and eventually adding the glow changed the way it looked without making the code much more complicated.
I also liked having some control over the randomness this time. Instead of allowing the program to choose any possible color, I gave it a smaller palette and let it choose randomly from that. The final result is still unpredictable and changes constantly, but I have more control over what those random results can look like.
Some improvements or changes I could do are adding more shapes and have different patterns instead of only two. I could also have different kinds of effects such as having only certain parts of the screen change while others don’t. I feel like doing that would make the work feel more glitched compared to how it is at the moment.
For this assignment, I created a self-portrait inspired by video game character select screens. Instead of trying to make it realistic, I represented myself as a simple character with stats such as energy, luck and focus. For the character itself, I took some inspiration from Nintendo Mii’s characters.
I also wanted to add some sort of twist, so every 15-20 seconds there is a chance for the screen to switch to a different one.
Code I like
The part I’m probably most proud of is the hair. At first, I thought it would be simple to make, but it ended up taking a lot of experimenting to get it to look the way I wanted.
I started with an ellipse behind the head to make the main shape of the hair. I then used several triangles for the strands at the front and the spikes on the side. A lot of it was just changing coordinates, seeing how it looked, and adjusting them again until I was happy with it.
I made the portrait using basic shapes like rectangles, ellipses, triangles, arcs, and lines. I built the character piece by piece, starting with the head and body before adding the hair, face, and character information.
After finishing the normal character screen, I made a second version for the “YOU DIED” screen. I used a variable called isdead to decide which one should be shown. I then used the built-in functions, millis() to keep track of time and random() to give the sketch a chance to change between the two screens every 15–20 seconds. Most of the process was experimenting with values and coordinates and then looking at the result. If something looked wrong, I would change the numbers and try again.
Reflection
I enjoyed this assignment because I could make the self-portrait about something I like instead of just trying to recreate my actual appearance. Turning myself into a character-select screen made it feel more personal, and I liked adding the random “YOU DIED” screen as a small unexpected part of it.
The hair was probably the most annoying part to get right, but it also ended up being the part I was happiest with. If I were to improve the project, I would spend more time on the character itself by adding more details and making the body and face look better. I would also add more possible causes of death instead of always showing “Missed Deadline,” so that the death screen could be different each time. Another thing I would change is to make the text feel more “alive,” by making them blink instead of staying static.
edit: added image reference, sources for functions used, and made some minor improvements to text.
