Crawford underscores that effective interactive design does not entail imposing the creator’s vision onto the user but, instead, involves crafting experiences that cater to the user’s unique needs, desires, and motivations. This shift prompts designers to step into the user’s shoes, to anticipate their actions and responses, and to create an experience that is not only engaging but also profoundly meaningful.
Crawford’s metaphor of interactivity as a conversation is profoundly illuminating. He likens interactive systems to an ongoing dialogue between the user and the system, where each action and response shapes the trajectory of this dialogue. This perspective reimagines interactivity as a dynamic exchange—a two-way thoroughfare in which the user’s input carries as much weight as the system’s output. Grasping this metaphor is fundamental to designing interactive experiences that are not only captivating but also highly responsive and adaptive.
Crawford introduces the concept of the “cybernetic loop,” a representation of the iterative nature of user interaction. The cybernetic loop encompasses the user’s action, the system’s response, the user’s perception of that response, and the subsequent action triggered by that perception. This construct underscores the ever-evolving, dynamic nature of interactive design, where each user interaction contributes to an ongoing and continually evolving discourse.
While this chapter highlights a significant shift in perspective, some phrases came across as more provocative than humorous, particularly concerning the subjectivity topic. Nevertheless, Chris Crawford’s fervor for the subject matter imbues his writing, inspiring readers to deeply reflect on their approach to interactive design.
This assignment was more exciting for me to create than the first one. At first, I couldn’t think of a specific idea I wanted to implement, so I just went in blindly. I started coding random stuff using for loops until it hit me what I actually wanted to do.
As I mentioned before in my previous blog post, I love colorful things, so I decided to create a color wheel that has some element of randomness in it. I wanted to make it messy, but also in a way organized. I designed it in a way that it changes size and arrangement according to where the mouse is. At first, it’s a rather small organized color wheel of lines centered in the canvas, but as you move the mouse to the right (along the x-axis), it increases in size, taking up the whole canvas but maintaining its organization, giving a visual of a train going through a tunnel at full speed, kind of. As you move the mouse downwards (along the y-axis), the lines become uncentered and spaced out giving a more chaotic visual.
I wanted to add a dynamic background to my canvas because it looked too dull in my opinion. A very random thought was to make it somewhat resembling a fingerprint, But the curves were too much with the color wheel, so I decided to make it more low-key by replacing the curves with lines. The following picture was in a way what I had imagined the background to look like in the beginning.
A highlight I’m proud of:
I am proud of the way I got the background to look. I did not have that much high expectations for it but it worked out perfectly. At first, I couldn’t figure out how to make parts of the diagonal lines change stroke weight without changing the whole line, but then I changed it to be various small lines instead of one long line.
Reflection and ideas for future work or improvements:
For now, I am glad with the outcome, but I would like to practice creating more advanced sketches with more interactivity. Additionally, I would like to work on using other functions and techniques as well, because I tend to stick to the ones I already know.
On another note, for this assignment I tried my best to make my code as brief as possible while delivering a cool piece of artwork.
In Casey Rea’s talk of chance operation in digital art, a central theme that stood out was the delicate balance between structure and randomness. What caught my attention was a specific example he shared. He took simple visualizations of hypothetical neuron vehicle movements within the animal kingdom and used them to create unique patterns in his artwork. This approach fascinated me because it transformed scientific data into art, making complex information visually appealing.
I also appreciated Rea’s insight that even in complete chaos, there’s an underlying structure and delicate geometry. This idea adds depth and intrigue to digital art.
Rea’s talk challenged traditional artistic norms and encouraged breaking free from conventional constraints. His emphasis on embracing randomness as a creative catalyst raised questions about finding the right balance between chaos and order in art. I found myself wondering if there are specific techniques or guidelines for achieving this balance in the creative process.
In conclusion, Casey Rea’s exploration of chance operation in digital art has inspired me to push my creative boundaries. I believe that incorporating elements of chance into my own art could lead to exciting breakthroughs and help me move beyond my artistic understanding.
This generative artwork, inspired by Wassily Kandinsky’s “Circles in Circles,” showcases a vibrant and dynamic composition. The canvas size is set to 600×600 pixels with a beige background and a black-bordered transparent circle at the center. Colorful animated circles, each with random positions, sizes, colors, and movement patterns, create an ever-changing visual experience. Additionally, eight animated lines move horizontally, resetting when they go off-screen. The viewer can interact with the artwork by clicking on different areas, and changing the background color dynamically. This code combines randomness and structure to produce a captivating, abstract artwork reminiscent of Kandinsky’s geometric abstractions.
Who is Wassily Kandinsky?
Wassily Kandinsky (1866-1944) was a pioneering Russian painter and art theorist, often hailed as one of the founders of abstract art. He believed that art should evoke emotions and spiritual experiences through non-representational forms and colors. Kandinsky’s “Circles in Circles” is a seminal artwork created in 1923, during his Bauhaus period. It is a prime example of his abstract style, featuring geometric shapes and vibrant colors. In this work, a large red circle dominates the canvas, encompassing smaller circles in various hues, with each circle seemingly floating or orbiting within the composition. “Circles in Circles” embodies Kandinsky’s fascination with the spiritual and emotional power of abstract forms and color harmonies.
Figure 1: “Circles in Circles” by Wassily Kandinsky (1923)
Code Details; Highlights of the code that I am particularly proud of
To precisely replicate the colors found within the painting, I first extracted its color palette. Subsequently, I meticulously identified and stored the exact hexadecimal color codes in an array. These hex codes were then used to randomly assign colors to the circles in my artwork, ensuring an accurate representation of the original painting’s color scheme
// Array of hex colors for the circles
let circleColors = ["#c7999b", "#b8bbaf", "#8e4040", "#82a596", "#e4c95b", "#585e3a", "#364664", "#694350", "#282927"];
The original painting featured precisely 21 circles, and through the utilization of loops, I successfully replicated this exact count within my artwork. and just like the original painting the circles had random stroke weight and the circles have a certain sense of transperacy just as the original painting
for (let i = 0; i < 21; i++) {
let x = random(width); // Random x-coordinate within canvas width
let y = random(height); // Random y-coordinate within canvas height
let radius = random(10, 80); // Random radius between 10 and 80 pixels
// Randomly select a color from the circleColors array
let fillColor = color(random(circleColors));
// Generate a random stroke weight for the circle (border thickness)
let strokeWeightValue = random(1, 5);
let xspeed = random(-2, 2); // Random horizontal speed
let yspeed = random(-2, 2); // Random vertical speed
embedded sketch
problems I ran into:
While the code initially employed a reversal of direction (multiplying by -1) when circles encountered the canvas edges, it became apparent that certain circles exhibited shaky behavior. To mitigate this issue, a damping effect was introduced. Initially, there were reservations about this approach, as it seemed to halt the circles’ motion. However, upon further consideration, it was realized that the damping effect, while tempering the motion, also contributed to a smoother and less overwhelming overall movement.
After applying the damping effect
code (commented with the use of loops and classes as requested) :
// Batool AL Tameemi, Intro to IM Week 3 homework
// Generative art work
let circles = [];
let backgroundColors = [];
let lines = [];
function setup() {
createCanvas(600, 600); // Create a canvas with a size of 600x600 pixels
noStroke(); // Disable stroke (borders) for shapes
frameRate(60); // Set the frame rate to 30 frames per second
// Add the RGB values of the colors from the painting to the backgroundColors array
backgroundColors.push(color(226, 216, 203)); // Light beige
backgroundColors.push(color(146, 125, 75)); // Dark beige
backgroundColors.push(color(130, 165, 150)); // Greenish gray
// Add more background colors as needed
// Array of hex colors for the circles
let circleColors = ["#c7999b", "#b8bbaf", "#8e4040", "#82a596", "#e4c95b", "#585e3a", "#364664", "#694350", "#282927"];
for (let i = 0; i < 21; i++) {
let x = random(width); // Random x-coordinate within canvas width
let y = random(height); // Random y-coordinate within canvas height
let radius = random(10, 80); // Random radius between 10 and 80 pixels
// Randomly select a color from the circleColors array
let fillColor = color(random(circleColors));
// Generate a random stroke weight for the circle (border thickness)
let strokeWeightValue = random(1, 5);
let xspeed = random(-2, 2); // Random horizontal speed
let yspeed = random(-2, 2); // Random vertical speed
// Create an instance of AnimatedCircle and add it to the circles array
circles.push(new AnimatedCircle(x, y, radius, fillColor, strokeWeightValue, xspeed, yspeed));
}
// Create animated lines
for (let i = 0; i < 8; i++) {
let x1 = random(width); // Random x-coordinate for the starting point of the line
let y1 = random(height); // Random y-coordinate for the starting point of the line
let x2 = random(width); // Random x-coordinate for the ending point of the line
let y2 = random(height); // Random y-coordinate for the ending point of the line
let lineColor = color(0, 0, 0); // Black color for lines
let lineWeight = random(1, 5); // Random stroke weight for lines
// Create an instance of AnimatedLine and add it to the lines array
lines.push(new AnimatedLine(x1, y1, x2, y2, lineColor, lineWeight));
}
}
function draw() {
for (let i = 0; i < backgroundColors.length; i++) {
fill(backgroundColors[i]); // Fill the background with one of the background colors
noStroke();
rect(0, i * (height / backgroundColors.length), width, height / backgroundColors.length);
// Draw a colored rectangle for each background color
}
for (let circle of circles) {
circle.move(); // Move each animated circle
circle.display(); // Display each animated circle
}
for (let line of lines) {
line.move(); // Move each animated line
line.display(); // Display each animated line
}
// Draw a single black-bordered transparent circle inside
strokeWeight(8); // Set the stroke weight (border thickness) for the ellipse
stroke(0); // Set the stroke color to black
noFill(); // Don't fill the ellipse with color
ellipse(width / 2, height / 2, 400, 400); // Draw the ellipse at the center of the canvas
}
function mousePressed() {
// Calculate the index of the background color based on the mouse click position
let index = int(mouseY / (height / backgroundColors.length));
fill(backgroundColors[index]); // Fill with the selected background color
rect(0, index * (height / backgroundColors.length), width, height / backgroundColors.length);
// Draw a colored rectangle based on the mouse click position
}
// AnimatedCircle class definition
class AnimatedCircle {
constructor(x, y, radius, fillColor, strokeWeightValue, xspeed, yspeed) {
this.x = x;
this.y = y;
this.radius = radius;
this.fillColor = fillColor;
this.strokeWeightValue = strokeWeightValue; // Store stroke weight
this.xspeed = xspeed;
this.yspeed = yspeed;
this.fillColor = color(red(fillColor), green(fillColor), blue(fillColor), 200); // Set the alpha value to 150 for transparency
}
move() {
// Define a damping factor (adjust as needed)
let damping = 0.95;
// Update the x-coordinate based on speed
this.x += this.xspeed;
// Apply damping to reduce shaking near the edges
this.xspeed *= damping;
// Update the y-coordinate based on speed
this.y += this.yspeed;
// Apply damping to reduce shaking near the edges
this.yspeed *= damping;
if (this.x > width - this.radius || this.x < this.radius) {
this.xspeed *= -1; // Reverse horizontal speed if the circle hits canvas edge
}
if (this.y > height - this.radius || this.y < this.radius) {
this.yspeed *= -1; // Reverse vertical speed if the circle hits canvas edge
}
}
display() {
strokeWeight(this.strokeWeightValue); // Set the stroke weight
stroke(0); // Set the stroke color to black
fill(this.fillColor); // Fill with the specified color
ellipse(this.x, this.y, this.radius * 2, this.radius * 2); // Draw the circle
}
}
// AnimatedLine class definition
class AnimatedLine {
constructor(x1, y1, x2, y2, lineColor, lineWeight) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.lineColor = lineColor;
this.lineWeight = lineWeight;
this.speed = random(0.5, 2); // Random line animation speed
}
move() {
// Move the lines horizontally
this.x1 += this.speed;
this.x2 += this.speed;
// Reset lines when they go off-screen
if (this.x1 > width) {
this.x1 = 0;
this.x2 = random(width);
this.y1 = random(height);
this.y2 = random(height);
}
}
display() {
strokeWeight(this.lineWeight); // Set the stroke weight
stroke(this.lineColor); // Set the stroke color
line(this.x1, this.y1, this.x2, this.y2); // Draw the line
}
}
As a Computer Science major, watching Casey Reas’s presentation on “Chance Operations” was truly enlightening. I had always perceived code as a rigid and entirely controllable entity, firmly rooted in rational decisions and binary logic. However, Reas’s perspective on blending randomness and algorithmic control to yield surprising results challenged this notion.
A particularly captivating idea he presented was “Fractal Invaders,” where artist intentionally incorporate controlled randomness into their work, much like the unpredictable outcomes of a coin toss or a roll of the dice. This controlled randomness made each version of the artwork unique and unpredictable.
Moreover, he emphasized upon the power of symmetry in his creative process. He highlighted that even in compositions that initially arose from randomness, the introduction of symmetry could instill a sense of order and familiarity. It struck me that as humans, we possess an inherent tendency to seek patterns and meaning within chaos. Our brains are wired to identify recognizable shapes and forms, and this inclination even extends to our perception of generative art.
All in all, the process of merging randomness with symmetry in generative art is fascinating because it explores how our minds work creatively. It shows that complexity can come from simplicity and that order and chaos can coexist. This artistic process invites us to contemplate the human mind’s innate desire to discover patterns and meaning in the world, ultimately pushing the boundaries of creative expression.
Concept:
For this assignment I looked for many works of computational repetitive art and found really interesting works. However, the one I liked the most is this one I saw in the art center (shown in the figure below). I don’t know why I liked this one so much but maybe because I saw it in real life. I decided to work on a similar idea but with introducing more colors and different pattern. While working some things didn’t go the way I wanted but it resulted in some really cool stuff.
Code Highlights:
The part of code I am proud of is drawing the spiral arm and especially figuring out how to utilize sin and cos functions for my work. Sketch:
Reflection and ideas for future work or improvements:
I am proud of the final output of my sketch. However, I think of implementing different modes where every mode would have a bit similar color combinations to make it more visually coherent. For example, one mode can contain the shades of blue.
Being an avid lover for randomness, Casey Reas’s talk was very interesting for me. The way he presented how chaos can be applied to visual art to bring out masterpieces answered a question that I always ask myself whenever I face this kind of art, “how was the artist able to think of such art.” What makes the art really awesome is that there is no specific correct way to create it. So, what if a bit of chaos is added to this open-source artisitc world? Indeed, the idea of randomness in art is very interesting.
Although I enjoyed his beautiful art works, another thing really intrigued is the way he approaches his work. As Casey Reas demonstrated in his talk, he artfully describes the elements within his work through a series of simple commands (shown in the figure below), eloquently narrating the shapes and movements that give life to his compositions. This method of breaking down the artistic process into its fundamental building blocks not only demystifies the creation of complex artworks but also provides a unique insight into the mind of the artist. It’s a testament to the power of code as a medium for artistic expression, where algorithms become brushes, and pixels become paint on the digital canvas.
I was introduced to the phenomenon of Perlin noise from one of the readings in class. I looked deeper into it, and I kind of fell into a rabbit-hole where I was googling the sort of things one could generate using this property. Always a fan of vaguely spherical shapes, I used the noise to make distorted spheres. While playing around, I noticed that from above it it almost looked like a flower. I decided to make multiple of them, and increase the density so that they look thicker. I randomized the locations, so that slowly the screen fills up and once it’s finished, it should somewhat resemble roses (as if you’re looking down at them). This is what it looked like initially:
But after messing around with some parameters and adding a seed the end product becomes something like this:
Code Highlights
Because most of this is randomized and is one shape over and over again, the code isn’t the most technically impressive. I do like the use of Perlin noise to make radial shapes, and the randomization of the locations.
for (let j = 0; j < 2; j++){
stroke(roseColors[currentColor]);
push();
translate(startX, startY);
beginShape();
for (let i = 0; i < 130; i++) {
let angle = map(i, 0, 130, 0, TWO_PI);
let radius = 150 * noise(i * 0.5, d * 0.005);
let x = radius * cos(angle);
let y = radius * sin(angle);
curveVertex(x, y);
}
endShape(CLOSE);
beginShape();
for (let k = 0; k < 70; k++) {
stroke(color(142, 128, 106, 15))
fill(color(142, 128, 106, 15))
let seedAngle = map(k, 0, 70, 0, TWO_PI);
let seedRadius = 15 * noise(k * 0.03, d * 0.005);
let x = seedRadius * cos(seedAngle);
let y = seedRadius * sin(seedAngle);
curveVertex(x, y);
}
endShape(CLOSE);
pop();
d += 0.5;
}
Here is the final product. Improvements
I’m a very impatient person, so the amount of time it takes to fill up the screen frustrates me a little bit. In the future, I’d like to find a way to speed up the process a bit. In addition, I’d love to find the way to control the randomness a bit. Some spaces on the canvas get oversaturated with flowers too quickly while others remain blank for a long period of time. I’d love to add some control or measure that makes sure every space on the canvas is populated with one flower at least (as soon as possible).
Casey Reas’ presentation gave me several insights about the role of chaos in computing visual art. I never stopped to think about these concepts, but the more examples I saw, the more I understood their importance. As Reas was showing some of his work throughout the presentation, I quickly realized how superior the works he was not in “control” were in comparison to his highly fixed ones, which were just simple shapes as opposed to aesthetically pleasing and complex pieces generated by chaotic code. This dynamic interaction between human intent and machine generated randomness not only can produce captivating art but it can also deepen our understanding of mathematics. The generated outputs were so interesting that Reas even ended up using them in clothing, showing the power of computing when it comes to art. The examples from other authors also gave me inspiration for the loops assignment.
Additionally, something that caught my attention was the process behind coming up with these codes. Reas mentioned that one of his projects took a year of planning before he actually started to code, he also mentioned at some point how he went through hundreds of different generated outputs for the same project, which makes me wonder how long on average it takes to come up with these designs, and how much of it is simple trial and error or hours and hours of analyzing and writing algorithms to come up with something idealized. Perhaps it is a mix of both, as mentioned in the quote: “It’s never a blind chance, it’s a chance that is always planned, but also always surprising”
In short, although I am more interested in the presented visual aspects as opposed to mathematical ones, these are still beautiful concepts to take a look at and appreciate the hard work and complexity that goes behind the scenes.
For this assignment, I drew inspiration from Casey Reas, who delved into the realm of randomness in his artistic endeavors. What has always fascinated me about art is that there’s no single “correct” way to perceive it. So, I set out to create something that generates different results based on user interaction. I designed squares with circles inside them, and these circles change in size as the user hovers their mouse over the squares. This introduces an element of unpredictability and variability into the creative process, echoing Casey Reas’s exploration of randomness.
The part of code that I like is this:
In this section, when the mouse hovers over a square, it dynamically adjusts the size of the associated circle according to specific conditions. This results in a captivating pulsating effect for the circles when users interact with the squares. What makes this fascinating is that each person’s experience will yield a different pattern based on where and how long they hover their mouse.
I found this assignment to be a delightful exploration. It prompted me to view art and generative art from a fresh perspective, highlighting that even within randomness, there exists an underlying sense of pattern. It’s as if the elements of chance and algorithms are working together to create a structured yet ever-evolving composition.
Sketch:
