Category: F2023 – Aya

The video explores the idea of randomness as a key component of computer programming and generative art. It uses a variety of illustrations to emphasize how randomness has the creative capacity to turn ordered systems into chaotic but visually appealing compositions. One of the standout demonstrations in the video is the progression from an ordered grid to increasing levels of deviation. This progression clearly shows how adding randomness can disrupt a well-defined pattern and eventually result in what appears to be chaos. This exploration raises questions about the delicate balance between order and chaos in artistic creation. It makes people stop and think about how controlled randomness can be used to create aesthetically appealing and unpredictable results. Additionally, the presentation highlights the significance of symmetry in understanding random patterns. By adding symmetry to a seemingly random grid of squares, the video reveals how our brains are wired to recognize familiar shapes and patterns even within randomness. This finding emphasizes how human perception and randomness interact deeply in art and design.

Regarding bias, it’s essential to note that the presentation seems to be focused on showcasing the creative potential of randomness rather than advocating for a particular viewpoint or agenda. The author appears to be impartial in their exploration of randomness as a creative force in generative art. As for changing beliefs, this presentation reinforces the idea that randomness can be a valuable tool for creativity, challenging the notion that art and computing must always follow rigid, predefined patterns. It prompts questions about the balance between structure and randomness in artistic expression and how these concepts can be leveraged in various creative processes. Personally, I think it’s fascinating how randomness can make art more interesting and exciting. It’s a reminder that not everything has to be perfectly planned, and sometimes, a little randomness can make things better.

Concept

This project is a creative expansion of my initial experience with p5.js, where I first ventured into the world of coding shapes and sketches. In our very first week of classes, we were encouraged to explore and create a house using p5.js. Now, for this assignment, I’ve revisited that initial sketch of a house, but with a twist. I aimed to breathe life into it by adding animation and interactivity, combining the fundamentals we learned previously with new elements. Additionally, winter is my favorite season, and I wanted to capture its essence in this project. To convey the beauty of winter, I decided to add falling snow in the background that accumulates on the ground as it descends. This not only adds movement and interactivity but also creates a serene winter landscape.

Highlight of the Code

One of the standout features of my code is the dynamic snowfall. Each snowflake is generated with a random position and speed, and they fall gracefully to the ground, accumulating over time. Here’s a snippet of the code responsible for this:

// Generate 300 random snowflakes with positions and speeds.
for (let i = 0; i < 300; i++) {
  snowflakes.push(createVector(random(width), random(height), random(minSpeed, maxSpeed)));
}

// Update and draw each snowflake.
for (const snowflake of snowflakes) {
  snowflake.y += snowflake.z; // Move the snowflake downwards.
  fill(255); // Set the snowflake color to white.
  rect(snowflake.x, snowflake.y, 1, 1); // Draw a small rectangle for each snowflake.

Moreover, I’ve added an interactive element where users can increase the snowfall by clicking on the canvas background. Additionally, pressing the mouse button while moving increases the snowfall, allowing users to control the intensity of the snowstorm dynamically.

Reflection/Improvements

While I’m pleased with the outcome, I recognize that there’s always room for improvement and further exploration. One possible avenue for improvement is to introduce a day-and-night cycle. By implementing this feature, the project could dynamically transition between day and night, altering the mood and atmosphere. This could involve changing the background color, adjusting the brightness of objects, and simulating the passage of time. Such a feature would not only add visual interest but also make the project more immersive and interactive. As I continue to explore creative coding, I look forward to experimenting with such dynamic elements in future projects, enriching the user experience and pushing the boundaries of what’s possible.

Edit Link

Randomness is an unexplored territory not only in the realms of mathematics and engineering but across all sectors. It’s often seen by humans as unsettling, something to be avoided, as it carries a hint of chaos. Yet, there’s a captivating dance between order and chaos that strikes a chord within us. Caser Reas’s concepts illuminate how elements of randomness and order can harmonize to create a piece that speaks to us in countless ways. Since randomness is an integral part of human existence, it finds its way into our lives no matter how meticulously we try to structure them. These subtleties find their reflection in artistic expression. It’s fascinating to see how we, as humans, translate these emotions and facets of our experiences into art, resulting in pieces that communicate on multiple levels.

What stands out to me about Casey’s showcased pieces is that regardless of how randomness is integrated into the art, they all give rise to distinct compositions teeming with points, lines, and more, each possessing its own character. Every piece imbued with randomness in its elements crafts a unique identity, capable of forging a profound connection with individuals who resonate most deeply with it. As I gazed at the various art pieces presented by Casey Reas, I couldn’t help but ponder: how does the infusion of random elements into these artworks alter our perception of reality and the future? On one hand, I felt that randomness is an inevitable force, and our best course of action is to embrace it and forge ahead, which is the sentiment these art pieces conveyed to me. However, on the flip side, could these unique art pieces, brimming with randomness, imply that randomness is an exponential force that may one day surpass our control, potentially leading to unforeseen consequences? I believe that while some art pieces effectively integrate randomness to create intriguing works, straying too far from the balance of order and chaos might convey a daunting and overwhelming impression of life. This could potentially become a psychological burden for some, as they grapple with the realization of their own insignificance in the face of nature. Thus, art’s impact can vary greatly depending on how randomness is employed.

Concept:

let d = dist(random1, random2, mouseX, mouseY);
if(d < 50) 
{
let angle = atan2(random2 - mouseY, random1 -       mouseX);
random1 += cos(angle) * 2;
random2 += sin(angle) * 2;
point(random1,random2);

Concept:

In this sketch I mostly wanted to have as much fun as I wanted to with it. From getting the face structure the way I wanted to adding neutral toned colours that could be eye pleasing. Adding the change of colours was the final step of the whole process, which I thought was the most fun part.

//clothes
fill(mouseY,193,117,135);
rect(202,306,129,24);
fill(mouseX,205,202,184);
rect(163,282,10,23);
rect(240,282,10,23);
quad(158,292,245,293,265,319,138,319);

//earring
fill(mouseY,225,125,186);
circle(156,228,5);
circle(246,228,5);

//bow
fill(mouseX,227,34,80);
circle(173,190,10);
triangle(175,190,186,180,186,196);
triangle(170,189,159,180,159,196);

A highlight of code that I’m particularly proud of:

I’m quite proud of how I put together the face and hair. I enjoy drawing and learing anatomy, so trying a different way to practice certain positions was a little challenging. However, I managed to place the shapes in the positions and areas I felt was right.

Embedded Sketch:

Reflection and ideas for future work or improvements:

Hopefully I would get to practice more on the rest of the body. Maybe work harder on trying to animate or move my sketches smoother. I also wished I worked on the size of the canvas and adjust it before starting.

This is my version of a “smiley face”, I used the elements we’ve learnt last class to implement the variables in the background and experiment with them, as you move the mouse they make an x while changing colors.

Reflection

The skills that i hope to achieve, is to maybe make a more polished portrait, and to fully understand how to create more shapes that will allow me to produce better results. I would say it is personally for me a bit difficult as i have little knowledge about coding in general, but i managed to create this portrait after practicing a couple of times, i would say i got the hang of it, nonetheless, it is fun and interesting with experimenting different types of syntax and changing the variables as i continue to code.

function setup() {
  createCanvas(800, 800);
 background(0)
;
}

function draw() {
  //background
  fill(mouseX, mouseY,50) // to fade the colors

 
  circle(mouseY,400,300,) //to move the circle with the pointer
circle(400,mouseY,300) //to move the circle with the pointer

  //face
  fill(255,255,)
  circle(400,400,600)

  //eyes
  circle(280,330,90)
  circle(490,330,90)

  //pupils
fill(0)
  circle(280,330,50)
  circle(490,330,50)
  noStroke()
  
  //mouth
   strokeWeight(20);
  stroke('#f28865');
  arc(400, 550, 150, 200, .1, PI-.1);
  noStroke();
  
  //eyebrows
  stroke('#333');
  strokeWeight(9);
  noFill();
  arc(280, 310, 80, 80, PI+.9, -.9);
  arc(490, 310, 80, 80, PI+.9, -.9);
 

  //nose
   stroke('#333');
  strokeWeight(9);
  noFill();
  arc(400, 480, 50, 80, PI+.9, -.9);
 
  
 
  
}

 
editable link: https://editor.p5js.org/mka413/sketches/dnJhX_ugh

Concept:

I’m basically using this self portrait to experiment with what I’ve learned so far (which is obviously not a lot) because let’s be honest – I’m not very artistic. I did however try to compensate for the lack of artistic accuracy by making some other aspects of the portrait interactive.

A highlight of code that I’m particularly proud of:

I thought about what it was that I could make interactive, and I settled on making my (or my sketch’s) eyes follow the mouse pointer. In the process, I  stumbled upon some other people’s sketches, and also found inspiration in Maryam’s sketch, particularly how her expression changes as you hover the mouse pointer over her face (apologies if there are multiple Maryams in our class). Without looking at the code behind it, I tried, with much initial disappointment, to do something similar, and thus finished with two interactive features: the eyes, and the facial expressions.

//interactive eyeballs
  if (mouseX<=350 && mouseY<=250) {
  fill(255)
  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)
  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)
}
  if (mouseX>350 && mouseY<=250) {
  fill(255)
  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)
  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)
}
  if (mouseX>350 && mouseY>250) {
  fill(255)
  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)
  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)
}  
  if (mouseX<=350 && mouseY>250) {
  fill(255)
  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)
  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)
}
  
  //interactive mouth + eyebrows
  if(mouseX<310 || mouseX>390) {
  fill('rgb(253,91,91)')
  stroke('#B0764A')
  strokeWeight(2)
  curve(300, 0, 310, 290, 390, 280, 300, 0);
  fill('#C7A184')
  strokeWeight(4)
  curve(310,220,305,181,330,178,328,220)
  curve(370,220,365,181,390,178,388,220)
  }
  if (mouseY<285 || mouseY>320) {
  fill('rgb(253,91,91)')
  stroke('#B0764A')
  strokeWeight(2)
  curve(300, 0, 310, 290, 390, 280, 300, 0);
  fill('#C7A184')
  strokeWeight(4)
  curve(310,220,305,181,330,178,328,220)
  curve(370,220,365,181,390,178,388,220)
  }
  if(mouseX>=310 && mouseX<=390 && mouseY>=285 && mouseY<=320) {
  stroke('#B0764A')
  strokeWeight(4)
  line(320,300,390,280)
  line(310,175,330,180)
  line(365,180,385,175)
  }

The sketch:

Reflection and ideas for future work or improvements:

I was limited by my familiarity with JavaScript and could use only some of the various functions it is capable of executing, so I would like to revisit this assignment – just to see how far I’ve come – at the end of this course and do more stuff (or just improve on this existing stuff).

Concept:

As this is the beginning of our course my Art is simple and cool. I made a portrait of how I might look in two weeks. I love stars so I decided to add it to my art.

Highlight:

Creating the dynamic stars was hard for me as this was my first time using JavaScript. I wish I could do better though so I hope to be able to use my future knowledge to improve my work.

for(let i=0;i<50;i++){
  noStroke();
  circle(random(400),random(400),2);
}

Drawing the body was fun.

Reflection/Improvement:

I hope to be more creative next time. Hope you love my work. Cheers!

The first week of the Introduction to Interactive Media course has been a beautiful beginning to this exciting journey. We were introduced to p5.js, a platform for creative coding, and delved right into it by learning to form two-dimensional primitive shapes with the help of available functions. The assignment to create a self-portrait using these concepts allowed me to explore my creativity and translate my imagination into a coded sketch.

My main goal with this assignment was to incorporate and master all the functions introduced in class. I approached the task without any image in mind and began with a simple ellipse to form the face. The rest of the sketch evolved based on spontaneous decisions. I wanted to achieve a realistic look for the hair, and after a few adjustments, I managed to create it using a combination of ellipses and arcs.

Throughout the process, I was extremely particular with details such as the facial features and the headband and worked to find the exact coordinates to position the shape using the print(mouseX+ ‘ , ‘ +mouseY) command.

To depict a bright sunny day in the background, I have used an arc and lines to create the sun, a simple image of birds using arcs, and a green rectangle to give an impression of the ground.

I wanted to experiment with this new form of creativity by making the sketch interactive. I tried this by incorporating the built-in variables of mouseX and mouseY to make the girl raise her hand, waving with a broadened smile as the mouseX variable crosses 300. This was achieved using the if condition and is a part of the code that I am particularly proud of.

//Waving hand
  if (mouseX>300) {
    quad(315,350,337,350,345,391,325,388);
    quad(337,373,377,315,396,318,348,392);
    circle(337,389,24);
    ellipse(385,312,25,28);
    ellipse(372,307,8,15);
    ellipse(375,295,7,20);
    ellipse(382,295,7,20);
    ellipse(389,295,7,20);
    ellipse(396,301,7,20);
  }
  else {
    rect(318,349,18,52);
  }

In addition, the geometric design on the t-shirt has a fill function with mouseX and mouseY as arguments, making the color change with the movement of the mouse. I have also used these variables to depict the movement of birds. Finally, I have used an if condition to make the girl blink when the mouse is pressed.

//Birds
  if (mouseX) {
    noFill();
    arc(153+(mouseX/5),56-(mouseY/5),47,40,0-HALF_PI,0);
    arc(200+(mouseX/5),56-(mouseY/5),47,40,PI,PI+HALF_PI);
    arc(125+(mouseX/10),85-(mouseY/10),47,40,0-HALF_PI,0);
    arc(172+(mouseX/10),85-(mouseY/10),47,40,PI,PI+HALF_PI);
  }

//Blinking eyes
  if (mouseIsPressed){
    fill('#EDD29C');
    ellipse(227,210,14,15);
    ellipse(275,210,14,15);
  }
  else {
    fill(255);
    ellipse(227,210,14,15);
    ellipse(275,210,14,15);
  
    fill(0);
    circle(227,212,9);
    circle(275,212,9);
    
    noFill();
    arc(278,203,10,10,0,QUARTER_PI);
    arc(279,207,11,10,0,QUARTER_PI);
    arc(224,203,10,10,PI-QUARTER_PI,PI);
    arc(223,207,11,10,PI-QUARTER_PI,PI);
    
    fill(255);
    circle(228,212,4);
    circle(276,212,4); 
  }

The assignment turned out to be a wonderful learning experience. I now find myself more confident with the topic. Reflecting on the process, I feel I would have to work on creating variables, which is something I did not include in this sketch. I would also like to explore the concept of loops as I felt the need to have repeated movement in a few places to enhance my sketch.

Concept:

My p5.js project is a playful and interactive portrait of a cat that combines art and code to engage the viewer. The core concept was to create a charming digital feline character that responds dynamically to user interactions. The cat’s eyes are the focal point, where the pupils expand as you move closer to them, creating a lifelike and engaging effect. To enhance the overall aesthetic, the cat’s whiskers sway gently against a serene blue background, with white clouds drifting by, adding a touch of whimsy and serenity to the scene.

<

Highlight of Code:

One of the key highlights of my code is the way I achieved the dynamic expansion of the cat’s pupils. By utilizing the following code snippet, I was able to create a natural and responsive behavior for the pupils:

// Change pupil size based on mouse distance
 // Adjust the mapping so that the pupils start increasing from a smaller initial distance
 let maxPupilSize = 50; // Maximum pupil size
 let minDistanceForMaxSize = 450; // Adjust this distance for when the pupil reaches its maximum size
 let pupilSize = map(min(min(distanceToLeftEye, distanceToRightEye), minDistanceForMaxSize), 0, minDistanceForMaxSize, maxPupilSize, 20);
 pupilSize = constrain(pupilSize, 20, maxPupilSize); // Ensure pupilSize stays within a range

This code calculates the pupil size based on the mouse’s distance from the cat’s eyes, ensuring that the pupils expand realistically as the viewer approaches.

Reflection:

Creating this interactive cat portrait was a delightful experience that allowed me to blend creativity with coding. It’s fascinating how technology can be used to imbue digital art with lifelike qualities. I’m pleased with the outcome, as it achieved the intended engagement and charm I aimed for. However, I recognize that there’s always room for improvement and expansion in such projects.

Ideas for Future Work or Improvements:

In future iterations of this project, I plan to explore several avenues for improvement. One potential enhancement is to introduce more interactivity, such as allowing users to change the cat’s expression or even interact with other elements in the scene, like the cat’s tail or ears. Additionally, I could refine the animation of the whiskers and clouds to make them more fluid and realistic. Another exciting prospect is experimenting with different backgrounds and atmospheric effects to create diverse moods within the artwork, adding depth and variety to the overall experience. Overall, I aim to continue refining my coding skills and artistic creativity to create even more captivating and immersive digital art pieces.