The assignment prompted us to create a work of art using loops and other concepts we have learned so far. Looking at the examples provided for the project, I saw many instances of graphical artworks that were created by arranging small objects and shapes into a bigger artwork iteratively, so I focused on creating some custom shape and iterating it smoothly on the whole canvas. I tried to come up with a similar concept from real life and what struck me as a typical example of small shapes iterating to create an artwork was a kaleidoscope. Hence, the idea for this project was to create a custom, colorful shape and reflect it 360 degrees around the canvas, just like the kaleidoscope does. That reflection part is shown in the following code snippet.
The shape is drawn by hand in the upper-left corner of the canvas and gets reflected and rotated all throughout the space. The shape is drawn by hand to resemble the chaotic but appealing visuals of the kaleidoscope.
What I would like to work on in the future is more uniform construction of reflections using the appropriate angles instead of arbitrary ones. In addition to that, I would want to enable the user to draw on all of the surface of the canvas, but this might saturate the picture too much, so I yet have to find a solution for it.
In the realm of art, I’ve always held the belief that meaning and visuals represent distinct aspects when appreciating art. My beliefs on the future of art invariably swerved towards visions of lights and interactivity, sidelining the pursuit of deeper meaning, and that is admitted, as I was ignorant of that aspect. However, my perspective was broadened during Casey Reas’s presentation. He introduced various artworks generated through algorithms, a concept that initially aligned with my thought process. Yet, it was his showcase of “Signals” that actually took me back. This piece, illustrating the interaction of protein cells within a cancer cell, not only expanded my appreciation of the intersection between technology and art but also underscored the profound potential for meaning in such intersections, bridging my gap in understanding and igniting a newfound appreciation for the depth of art’s potential.
Throughout the presentation, the only question that came to mind was whether any of these pieces of art match old artifacts regarding their value in terms of history. If, hypothetically, our civilization were to vanish overnight, leaving these modern creations as remnants for future generations to discover, how would they interpret them? Would they perceive these pieces as remnants of an extinct religion, or would they recognize them as artistic expressions? This question only comes to me because I wouldn’t personally understand any of it without reading the description or having someone explain what the artist meant by it.
Casey Reas’ presentation changed my view of art. I used to think art had to be orderly and follow strict rules. But Reas showed me, through various examples and works that chaos and randomness can be beautiful too. In a world where everything seems structured, whether in music industry, gaming industries etc, adding a bit of randomness to art brings a special kind of beauty. It’s like finding magic in unexpected places.
I liked how Casey Reas said that randomness and chance can be used as a jumping-off point for art, as I believe that such randomness can be used as a catalyst for sparking our imaginations and used for brainstorming new and innovative ideas. As a musician myself, now that I think about it, when I play around with different chords and vocals, I start to explore new ways of singing and playing music. So through this presentation, I see imperfections as part of the charm, and I’m more open to embracing the unpredictable side of creativity.
Concept: The concept of this code is to create an interactive animation of concentric polygons using P5.js. The animation features a series of concentric polygons that rotate around a central point, creating a visually engaging effect. Additionally, the animation can be paused and resumed by clicking anywhere on the canvas, providing interactivity for the user.
Inspiration: My primary motivation for this project stems from my deep passion for cars. As a child, I spent countless hours playing with remote control cars, and one aspect that always fascinated me was the motion of the wheels. I found it incredibly satisfying to watch the wheel rims rotate in a clockwise direction as the speed increased. This experience inspired me to recreate a mesmerizing wheel animation using for and while loops. Additionally, I added an interactive element to the animation, allowing users to pause the concentric polygons by tapping anywhere on the canvas and vice versa to resume the effect. Here’s a simple video on rotatory motion of the toy car’s wheels.
Areas of Code I’m proud: Apart from creating a realistic rotatory motion, I aimed to add an interactive feature similar to the simple buttons used to control the pausing and driving of car wheels. Initially, I encountered difficulty in adding but later I successfully achieved this feature through the implementation of one particular function: mouseClicked(). So I can say one noteworthy section of my code:is the implementation of the mouseClicked() function. This function toggles the isPaused variable, which controls the pause state of the animation. By toggling this variable based on mouse clicks, the code effectively enables the user to interact with the animation, pausing and resuming it at will. If this feature or option wouldn’t exist, the process of making the art interactive would be so difficult.
P5.js code:
// Define global variables
let angle = 0; // Initialize rotation angle
let rotationSpeed = 0.01; // Rotation speed for the spinning illusion
let isPaused = false; // Variable to track animation pause state
function setup() {
// Create canvas
createCanvas(600, 600);
// Set background color
background(255);
// Set drawing properties
noFill();
strokeWeight(2);
stroke(0);
// Define parameters for concentric polygons using a for loop
let numCircles = 20;
let radius = width / 2;
// Loop to draw concentric polygons using a for loop
for (let i = 0; i < numCircles; i++) {
// Calculate radius for current circle
let currentRadius = map(i, 0, numCircles, 0, radius);
// Generate random number of points for current polygon
let numPoints = int(random(5, 15));
let angleIncrement = TWO_PI / numPoints;
beginShape();
// Loop to draw vertices for current polygon using a while loop
let j = 0;
while (j < numPoints) {
// Calculate vertex coordinates with rotation applied
let x = width / 2 + currentRadius * cos(j * angleIncrement + angle);
let y = height / 2 + currentRadius * sin(j * angleIncrement + angle);
vertex(x, y);
j++; // Increment counter
}
endShape(CLOSE);
}
// Add a central circle to create illusion of a spinning wheel
fill(255);
ellipse(width / 2, height / 2, 50, 50); // Draw central circle
}
function draw() {
// Check if animation is not paused
if (!isPaused) {
// Set background color
background(255);
// Update rotation angle
angle += rotationSpeed;
// Redraw the artwork with updated rotation using the setup function
setup();
}
}
function mouseClicked() {
// Toggle animation pause state when mouse is clicked
isPaused = !isPaused;
}
Final Output: Here’s how it looks, click anywhere on the canvas to pause/ resume the wheel.
Reflection and Ideas for Future Work or Improvements: I believe this code successfully achieves the goal of creating an interactive animation of concentric polygons. However, I feel there are few areas for potential improvement and future work:
1) Optimization: The code could be optimized to improve performance, especially when handling a large number of polygons. So instead of 20, I tried of giving number of circles as 50 and the webpage stopped working.
2) User Interface: I feel like there should be more interactive part with many features. Like it would be better if I leave the user few options for adding controls or adding adjusting rotation speed.
3) Additional Features: Incorporating additional features such as color transitions, different polygon shapes, or customizable patterns could add depth and complexity to the animation.
Overall, this assignment was a great opportunity to experiment with loops and conditional statements. Moving forward, I’m willing to learn more and plan to incorporate and fix the above discussed areas to enhance this coding animation in future.
Casey Reas’s talk got me thinking about the relationship between order and chaos that exists all around us . I also thought about the difference between pure randomness and controlled randomness . Reas’s simulations are an example of controlled chaos – where chaos is used along with some sort of constraints to ensure that there is both an element of order and randomness .
On the other hand, there is ‘natural randomness’ – such as the sounds of a waterfall or the pattern of scattered autumn leaves on the ground . I think both of these forms of randomness can lead to beauty and profoundness in unexpected ways .
Reas’s ideas embrace the notion of chaos leading to authenticity and beauty . Chaos is a way to break free from the Structured order . One quote that I really liked was ” I am often astonished to find how much better chance is than myself ” .
His discussion at the end of how new systems open up new possibilities for art is very exciting . His demonstration of how simple algorithms can be tweaked to create different art was very fascinating .Overall, the idea of art that stems from Randomness is very interesting to me and I am excited to explore it further .
Casey Reas’s video about computer-generated art blew me away. I never knew algorithms could create such detailed portraits and buildings. It got me thinking about how these algorithms could be used in lots of real-world stuff like computer games, designing buildings, and making interactive charts. Reas talked about how everything in his art is super precise and carefully calculated using geometry.
The part that really got me was when he showed how a string moved across a surface (Element 5) and how elements orient themselves based on what they’re touching (B6). It reminded me of what we talked about in wednesday’s class (loops: using for and while & making a bouncing ball animation), moreover the illustration resembles just like how atoms behave in sub atomic matter. Also, when he showed the artwork that looked like bacteria under a microscope (Process 18th), I was amazed by how creative algorithms can be. Before this, I only thought of algorithms as powerful tools, but now I see they can also be really creative. Reas used a framework called Processing for his art, and now I really want to learn more about it.
Watching Reas’s video made me realize that algorithms aren’t just for solving problems—they can also make beautiful art. It changed the way I see algorithms. Now, I’m curious about how we can use algorithms to create not just useful things, but also things that are interesting and fun to look at. I’m starting to think about how computer science and art can come together in cool and diverse ways. In conclusion, Reas’s video opened my eyes to a whole new world of possibilities, and now I’m eager to explore more about algorithmic art and how it all works.
For this assignment, I am not sure I drew my inspiration from the right place; I ended up being inspired by the Club Penguin dance floor. For some reason, while playing around with different-sized squares in p5js, that was all I remembered when I aligned them.
For reference:
The sketch:
While it isn’t the same proportions as the Club Penguin dance floor, It was because I wanted it to be more visually appealing with the size. After all, this is supposed to be an art piece…
let numTiles = 10; // Number of tiles across and down
let tileWidth;
let tileHeight;
let colors = [];
function setup() {
createCanvas(600, 600);
tileWidth = width / numTiles;
tileHeight = height / numTiles;
// Initialize colors array with bright colors
for (let y = 0; y < numTiles; y++) {
colors[y] = []; // Create a nested array for each row
for (let x = 0; x < numTiles; x++) {
colors[y][x] = color(random(255), random(255), random(255), 255);
}
}
frameRate(10);
}
function draw() {
for (let y = 0; y < numTiles; y++) {
for (let x = 0; x < numTiles; x++) {
// Randomly change the color of each tile to mimic the dance floor lighting effect
if (random() < 0.1) { // 10% chance to change color each frame
colors[y][x] = color(random(255), random(255), random(255), 255);
}
fill(colors[y][x]);
rect(x * tileWidth, y * tileHeight, tileWidth, tileHeight);
}
}
}
I would say the effect function confused me so often when it came to understanding it because I didn’t want the colors to change so frequently. Still, also the issue that came up was the sketches I had taken down in class did not fully explain how things worked when it came to the randomness part and how quickly it would change, so hopefully, in the upcoming classes, I will get better at note taking so that when it comes to coding, I get to understand it better when I go back and take a look at it.
I was trying to apply what I have learnt in class into 1 project. However, since I am not particularly good with art, I decided to do an interactive project. This was when I remember of a game that I played a lot with my friends before: Tic Tac Toe.
I used a nested for loop to create a 2D array so that all the steps can be stored and correctly outputted. Since I want the game to be 2 players, as the way it is in Tic Tac Toe, I used different colors (black and white) to signify for the difference in players.
In this assignment, I aims to make everything as flexible as possible. Therefore, I made the dimensions of the board environment editable. In other words, the user can change the dimension before starting the game. Below is the code for displaying the moves with any initialized dimensions:
I part that I am proud of is doing the checking condition. I used the nested for loops to loop through every single piece and 4 cases (horizontal, vertical, diagonal left, and diagonal right). However, I also think that it is not the most efficient way to write this the program need to loop through every element in the array for every draw loop.
function checking_win(player){
//horizontal
for (let i = 0; i < boardSizeX; i++){
for (let j=0; j < boardSizeY-4; j++){
if (moves_lst[i][j] == player && moves_lst[i][j+1] == player && moves_lst[i][j+2] == player && moves_lst[i][j+3] == player && moves_lst[i][j+4] == player){
return true;
}
}
}
//vertical
for (let i = 0; i < boardSizeX-4; i++){
for (let j=0; j < boardSizeY; j++){
if (moves_lst[i][j] == player && moves_lst[i+1][j] == player && moves_lst[i+2][j] == player && moves_lst[i+3][j] == player && moves_lst[i+4][j] == player){
return true;
}
}
}
//diagonal right
for (let i = 0; i < boardSizeX-4; i++){
for (let j=0; j < boardSizeY-4; j++){
if (moves_lst[i][j] == player && moves_lst[i+1][j+1] == player && moves_lst[i+2][j+2] == player && moves_lst[i+3][j+3] == player && moves_lst[i+4][j+4] == player){
return true;
}
}
}
//diagonal left
for (let i = 3; i < boardSizeX; i++){
for (let j=0; j < boardSizeY-4; j++){
if (moves_lst[i][j] == player && moves_lst[i-1][j+1] == player && moves_lst[i-2][j+2] == player && moves_lst[i-3][j+3] == player && moves_lst[i-4][j+4] == player){
return true;
}
}
}
}
Reflection:
In general, I want to improve the algorithm for the checking function. Also, the current codes only allow modification directly on the codes. I want to make it more user friendly by allowing to make changes on the displaying screen.
Casey Reas’s insights into the dance between randomness and order in art have really got me thinking. It’s like he’s saying, “Hey, the world is way more unpredictable than we like to admit, and that’s okay.” This whole spiel about embracing chaos instead of always trying to keep things neat and tidy in our art—it’s pretty revolutionary. Historically, we’ve been obsessed with making everything orderly, but Reas is challenging us to break free from that. He’s suggesting that maybe, just maybe, there’s beauty and authenticity in letting randomness take the wheel now and then.
And that’s got me pondering why we’re so hung up on order in the first place. Is it because it feels safer and more comfortable? Reas throws out this idea of creating your reality, which hits home. It’s like he’s saying we cling to order because it’s familiar, but what if we stepped out of our comfort zones? Imagine the wild, unpredictable art we could create if we were willing to get a little uncomfortable, to embrace the chaos instead of running from it. It’s a bit scary to think about but also thrilling. It makes me wonder what kind of art we’re missing out on by sticking to the same old patterns. Maybe it’s time to shake things up, to see where a little randomness can take us.
I created a dynamic grid of squares that continuously change in color and size, creating a mesmerizing animation effect. Perlin noise, sine, and cosine functions influence the grid’s behavior, which modulates the color and the size of each square in the grid based on the frame count variable. This results in a fluid, ever-changing pattern that is both visually appealing and technically intriguing.
Highlight of the Code
What stands out in the code is the use of mathematical functions to drive the animation’s dynamics. Specifically, the combination of Perlin noise, sin, and cos functions with the frameCount variable to alter the color and size of the squares over time showcases a sophisticated understanding of how to create complex visual effects with relatively simple code.
// Calculate noise-based angle and size variations using Perlin noise
let noiseFactor = noise(i * animationSpeed, j * animationSpeed, frameCount * animationSpeed);
let angle = noiseFactor * 360;
//more color and size variations using Sine Cosine
//https://p5js.org/examples/math-sine-cosine.html
let colorShift = (sin(angle) + 1) * 128;
let sizeShift = (cos(angle) + 1) * (gridSize / 0.1);
Embedded Sketch
let gridSize = 20;
let animationSpeed = 0.01;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
noStroke();
}
function draw() {
background(220);
//nested for loop to go through each grid position
for (let i = 0; i < width; i += gridSize) {
for (let j = 0; j < height; j += gridSize) {
push();
// Calculate noise-based angle and size variations using Perlin noise
let noiseFactor = noise(i * animationSpeed, j * animationSpeed, frameCount * animationSpeed);
let angle = noiseFactor * 360;
//more color and size variations using Sine Cosine
//https://p5js.org/examples/math-sine-cosine.html
let colorShift = (sin(angle) + 1) * 128;
let sizeShift = (cos(angle) + 1) * (gridSize / 0.1);
// Apply transformations
translate(i + gridSize / 2, j + gridSize / 0.5);
rotate(angle);
fill(colorShift, 100, 150, 200);
rect(-sizeShift / 2, -sizeShift / 2, sizeShift, sizeShift);
pop();
}
}
}
Reflection
The integration of Perlin noise into the animation brings a significant enhancement in terms of visual and organic dynamics. Moving away from the predictable cycles of sine and cosine functions, Perlin noise introduces a natural, fluid variability to the movement and transformation of the grid. It showcases the power of combining mathematical concepts with computer graphics to simulate natural phenomena.
Future Work
Develop an interactive landscape where users can influence the flow and form of the animation through mouse movements, clicks, or keyboard inputs, simulating natural elements like wind or water currents.
