Reading reflection

The part of interactivity that I really agree with is that it is a scale and not a binary. I believe interactivity is a huge aspect of how technology is perceived, and I am really interested in how it shapes the relationship between the user and the technology.  I believe interactivity doesn’t needs to be physical in its nature where a user has to press a button or a widget, but it is really about how involved they feel with the technology/or any other medium of interaction. The author then speaks about how they feel that reading is not interactive. I disagree with this part, and I believe that reading is highly interactive. In an era where there is so much online material/posts/apps/games to interact with I find reading to be highly interactive and not rushed. The author also speaks about how opening a fridge door is interactive, which is an interesting approach. I believe small everyday tasks have an interesting nuance to them and how their design matters I think it is in these tasks that we actually slow down. I don’t want to be philosophical about this, but I genuinely resonate with how interaction is people based like when communicating and dancing. As a sustained dialogue ambassador, I really agree with Crawford’s stance on how communication is interactive. Like as an ambassador, I have been trained to like communicate with participants and co-facilitators without the need of speaking, and letting silence set in and genuinely listening to everyone, including listening on different levels like their body language. This is also what interactivity looks like to me, so I think it does have different aspects to it, but it all comes down to how seen the user/person feels whether it is technical or not.

Coding Exercise

My inspiration for this code was the Ikigai concept in Japanese, where it means what you pursue in life has to be at the intersection of what you like and what you the world will need. I also really like the translucent aspect of this as well, and to me it appears to be like tainted glass.

My Program

My code

I build this through the ikigai class I defined. The part of the code, I am proud of is how I integrated the translucency.

class IkigaiCircle {
  //it runs when a new circle is made
  constructor(x, y, col, appearAt) {
    //The centre of the circle
    this.x = x;
    this.y = y;
    //Colour name into a p5 colour
    this.col = color(col);
    //  a crucial part in helping us set the color to translucent
    this.col.setAlpha(100);
    // count value when this circle appears
    this.appearAt = appearAt;
  }

From the introduction, I had the following thoughts. Reas mentions of how chaos in major events in history like prevalence of quantum mechanics and world war 1  led to shifts in art. This made me question of whether chaos around AI will lead to shifts on how art is formed and viewed. Reas then continues talking about how software art is effected by noise while I understand what noise he is referring to; I think about how noise doesn’t allow me to focus while making art and how the same word could have such different impacts and meanings.

He then mentions Valentino Braitenberg as a neuro-atomist and his work about an imaginary robot to study about cognition. I really liked the crossover between art, math, and science. I read more into these robots and found how one robot’s motion was effected by temperature actually akined to the brownian motion. I really agree with the analogy here since the motion seemed so random when Reas modeled it; it links all back to nature even the randomness.

In the Order of Art, he also talks about making art of your own and I think that is what gives art life: individualism. I really found Mondrian’s evolution in artwork very humane too since we think about life or careers in something very linear or restricted, but seeing how his style emerged along with music in NewYork is a helpful in supporting that we can change paths, decisions, and expression and that is okay.

When Reas explores Computer Graphics, he varies the randomness which changes the art pattern and then shows examples of graphics which vary with different factors. For me, I worked with noise() particularly which brings in slight order in comparison to random(). If we were to talk quantitively, I still would lean into less randomness and more structure since an increased amount of disorder takes away what I want to communicate through artwork. I don’t really think there is an optimum balance as that would keep changing from project to project, here I really resonate with Mondrian’s view of art.

OVERVIEW

I was taking my makeup off with a cotton ball and found the strands of cotton to be the inspiration for the compute graphic. I went over the magazines as well but nothing in particular resonated, so I browsed more examples of computer graphics. This is when I came across Perlin noise which was a technique invented by Ken Perlin while working on his film: Tron. I was also very inspired by textures and blur, and how they add such personality. Ideally I was supposed to create a similar graphic.

sourced at https://genekogan.com/code/p5js-perlin-noise/

CODE HIGHLIGHT

The major part with the code was adjusting variables, I had a similar experience with drawing eyelashes for my self-portrait.

This is the main for loop that takes the noise field and the loop reads the noise field at the current position, converts that value to an angle, then uses cos and sin to turn the angle into a step of fixed length. It draws that segment, moves to its end, and repeats.

 for (i = 0; i < 20; i++) {
        n3 = noise(oldX * resolution, oldY * resolution) + 0.045;
        angle = map(n3, 0.3, 0.7, 0, PI * 4);

        newX = cos(angle) * len + oldX;
        newY = sin(angle) * len + oldY;
        line(oldX, oldY, newX, newY);
        oldX = newX;
        oldY = newY;
}

EMBEDDED SKETCH

HOW THIS WAS MADE

I divided this in 3 main sections with defining the canvas first, and then the variables which I will need to vary, and then the seed grid and reading the noise field. I also used different resources for the main algorithm like https://www.youtube.com/watch?v=Qf4dIN99e2w

by coding train and a walk through by Steve’s Masterclass. I read about the noise() function on GeekforGeeks and the p5j. website. The looping logic was learnt through youtube.

Initially, 2 nested loops help to walk a path of starting positions, and then saving the grid positions. A third nested loop works by reading the noise field at current position, turning that value into an angle, converting the angle into a step of length len via cos and sin, drawing the segment, and moving to the end of it and repeat. This loop runs for 20 times which gives it a wriggling tail, and the paths curve because the noise value is re-read at every step.

Reflection and Ideas for future work

I do still find the main idea of perlin noise to be complicated. However, I am very intrigued by how many intersections this sits at right now like how it is a noise field which means it includes bunch of vectors, but at the same time they are directed in terms of direction. I think I would like to take it as close as possible to the image I have shared and maybe an animated version.

Concept

For this assignment, I wanted to create something that moves and looks alive using the programming concepts and techniques that I know and have learned so far. The idea that came to me was to create a weather scene showing a house during rainy weather. This idea was inspired by the difference between the weather in my home country, Fiji, where it is currently the rainy season, and Abu Dhabi, where the weather is generally very sunny. I decided to represent these two different environments in the same artwork. I used concepts like arrays, loops, Boolean variables, functions, conditionals, randomness, and animation to create a lively artwork.

Click on it!

Code I am Proud of

function draw() {
  // To draw and move the raindrops
  if (raining == true) {

    // Goes through all 100 raindrops 
    for (let i = 0; i < 100; i++) {
      // To draw the current raindrop 
      drawRainDrop(i);

      // To move the current raindrop
      moveRainDrop(i);
    }
}
// Function for drawing individual raindrop
function drawRainDrop(i) {
  fill(50, 100, 255);
  noStroke();

  // For making each raindrop
  ellipse(rainDropX[i], rainDropY[i], 5, 10);
}

// Function for moving an individual raindrop
function moveRainDrop(i) {
  rainDropY[i] += 5;

  /* If the raindrop reaches the ground, Its moved back randomly to the top with a random x position also */
  if (rainDropY[i] > 500) {
    rainDropY[i] = random(-50,0);
    rainDropX[i] = random(0, width);
  }
}

The part of the code I am most proud of is the falling rain effect. It took me several attempts and a lot of thinking to figure out how I wanted the raindrops to behave. At first, I was thinking about how I could continuously generate new raindrops while older ones were still falling. I eventually realized that I did not actually need to create completely new raindrops every time. Instead, I could create 100 raindrops and continuously reuse them by changing their positions after they reached the ground.

The arrays were important for this because they allow the program to store the position of every raindrop. The for loop then goes through all 100 raindrops and updates each one. I particularly like this approach because there are only 100 raindrops being managed, but they can continue falling and respawning throughout the entire animation. This creates the impression of continuous rain without needing to continuously create more and more objects. I am also proud of use of randomness when the raindrops respawn. If every raindrop started at exactly the same x and y position, the rain would look artificial and repetitive. Randomizing the positions makes the scene look more natural. I was able to connect this programming technique to Casey Reas’ idea of Chance Operation. Rather than using randomness just because it was useful for the animation, I was able to think about randomness as part of the artistic design of the project.

Implementation

I created arrays called rainDropX and rainDropY to store the x and y positions of the 100 raindrops. These arrays allow the program to keep track of every raindrop individually. In the setup() function, I used a for loop to create 100 raindrops and give each one a random starting position. The x-position is randomly generated across the width of the canvas, while the y-position is randomly generated across the canvas. This means that when the program starts, the raindrops are already distributed throughout the scene.

The main animation happens inside the draw() function. I used a Boolean variable called raining to determine which weather condition should be displayed. When the program starts, it shows a rainy scene, and when the mouse is clicked, the rain stops and the scene changes to a sunny one. Clicking again brings the rain back. I used a for loop to go through all 100 raindrops every frame. For each raindrop, the program calls drawRainDrop(i) to draw it and moveRainDrop(i) to move it downward. The movement of each raindrop is relatively simple. Every frame, its y-position increases by 5.

Reflection

The most challenging part was creating the falling rain, but working through it helped me better understand how arrays and loops can be used to manage multiple objects at the same time. In the future, I would like to improve the project by making the transition between rainy and sunny weather smoother, perhaps adding moving clouds and lightning, and possibly adding sound effects. I would also like to experiment more with randomness and explore how I can use programming to create more interactive and visually interesting artwork. Overall, I am happy with the project because I was able to use the programming concepts I have learned to create something animated, interactive and personal.

During my time of creating the self-portrait, I had to use the code practice from last class for reference; the reason being that the code would allow me to remember certain commands that I ended up using to make my portrait. For example, the commands from the practice code, “// Body fill(‘orange’) rect (etc.)” allowed me to get an idea of how I can create a body for my portrait which is then followed by creating said-rectangular body. This proved to be very helpful for me because what I was aiming for within my portrait was a kind of modern look; by modern look, I mean by how in most social media platforms, some people choose to have a blank profile picture that only depicts an almost rectangular body and circular head. It may sound boring, but I personally like to think of it as a reminder of how times around the world are so drastically different than how one can imagine. Speaking of circular head, i was originally going to use the “circle()” command to create my head, until I found out that the command best suitable for the requirement is the “ellipse” command since it had proven to me that it can create a far more accurate shape of the head for me. This wasn’t the only time I replaced a shape during the whole process, because when I was creating the nose, I almost went with an oval circular shaped nose. However, some part of me felt as if it were “too clownish” to say the least; hence why i decided to go with the triangle since it just felt more respectful with the nonchalant tone that i have been trying to keep up rather than a tone similar to that of an off-brand circus. As for eyes, my original goal was to create 2 big white circles and then create 2 smaller black circles that would be placed on top of the white ones in the middle; yet I remembered the “ellipse” command and how it would prove to be a more beneficial tool if it slipped horizontally, shrinked by eye-size, and then be placed in their respective spots all while the idea of 2 smaller black circles being centralized within the 2 white sclera of the eyes remained. Lastly, with the hair, this the most difficult for me, since I could not figure out which series of commands to use in order to replicate my hair as need be. Since I am not the most experienced artist in the room, I had no choice but to go forward with the decision to create those lines of hair that perhaps would at least resemble my short bangs.

Despite the headache from all the creation of shapes after shapes, a code series that I can’t help but feel happy about is the creation of the smiling mouth that you may see in the portrait. Before the mouth was even formed, I nearly went with the idea of using the “line()” command to form my mouth and perhaps stretch upwards. But of course, I would come to realize that the lines are meant to be nothing more than straight, thus enabling as incapable of being bent/altered further. When hope seemed lost, that is when I stumbled upon the command of “arc()” from the coding’s list of references. There, I would discover how certain arcs of line in this different command can be altered just in the way I desired! Thus, that is how I was able to get the smiling mouth as you would see here in the portrait!

Despite the work being done, I do want to mention that not only did I use the code practice and the coding site’s references as my guide, but I also had ai (one that I paid for), check my work to see if I must either change a coordinate or correct a common usually wrongly. This is because I saw that through my time working, my weakness has been second-guessing certain coordinates for certain shapes for too many unnecessary times. I just could not tell which coordinate was the right way to write in order to set the shape and/or color as I wanted. Therefore, that is why for each coordinate of each part of the portrait that I write, I would share it with the AI and simply hear its advice of what I can keep and what I must modify. Even though it has helped me recognize my mistakes, it still serve as a signal for me that what I should be working on for this class is a better understanding of how shapes must be correctly positioned/modified as for each project I work on. After all, this idea of improvement should help prepare me for possibly more complex projects that require more shapes somewhere in the future.

function setup() {
  createCanvas(640, 580);
}

function draw() {
  // background set-up
  background(135, 206, 235);
  // sun at the top right corner
  noStroke();
  fill("yellow")
  circle(40,40,180);

  // Head
  fill("tan");
  ellipse(300, 300, 250, 300);

  // Body
  noStroke();
  fill("green");
  rect(210, 430, 180, 220);
  
  // Hair 
  stroke("Black");
  strokeWeight(5);

  line(260, 190, 250, 150);
  line(280, 180, 275, 140);
  line(300, 175, 300, 135);
  line(320, 175, 320, 135);
  line(340, 180, 345, 140);
  line(360, 190, 370, 150);

  // Sclera of eyes
  fill("white");
  ellipse(250, 300, 65, 38);
  ellipse(350, 300, 65, 38);

  // Pupils of the eyes
  fill("black");
  circle(250, 300, 14);
  circle(350, 300, 14);

  // Nose
  fill("brown");
  triangle(300, 320, 285, 335, 315, 355);

  // Smiling mouth
  noFill();
  stroke("black");
  strokeWeight(5);
  arc(300, 370, 90, 60, 0, PI);
}