Category: F2023 – Shiloh

Casey Reas’ exploration of chance operations in the realm of generative art provides a compelling argument for the intersection of technology and creativity.  The idea of utilizing randomness within the confines of algorithmic structures resonates deeply with the age-old debate of structure versus freedom in art. When he draws parallels between traditional art methods and computational processes, it reinforces the notion that technology is just another tool in the artist’s toolkit. However, I think that while chance operations in code provide a sense of unpredictability, they are still bounded by the parameters set by the programmer, making the ‘randomness’ a controlled one.

Reas, while advocates the cause of computational art, might inadvertently present a biased view, advocating primarily for the merger of art and code. The essential question that I’m left with is does the purity of randomness get tainted when confined within coded structures? Additionally, while the talk hasn’t changed any of my previous beliefs, it does make me think about the true essence of creativity. If an artist sets the parameters and the machine generates the art based on these, where does the artist’s influence end, and the machine’s creativity begin? The talk certainly raises questions about the authenticity of art, the boundaries of human creativity, and how technology shapes or confines our artistic expressions.

Concept: For this assignment, I decided to go with a more creative approach for the self-portrait by involving my interest in space science. I attempted to draw a female astronaut that represents the field I would like to explore and learn more about in the future, with an animated starry background and a few planets.

Code: 

I’m proud of the code snippet below because it was challenging to make it function the way I planned it to be. I initialized an array of stars with random positions at two different speeds, and the function keeps updating the position of the stars once they reach the end of the canvas, making them to start from the top again. That’s how it created the illusion of stars falling.

 Let stars = [];

Function draw() {
// Displaying the stars and updating
  for (let i = 0; i < stars.length; i++) {
    let star = stars[i];
    star. y += star. speed; //star goes downwards
    if (star. y > height) {
      star. y = 0; // This will reset the star's position if it goes off-screen
    }
    fill(255);
    ellipse(star.x, star.y, 4.5, 4.5);
 }

// Stars in the background
function drawStars(numStars) {
  //  white dots as stars
  fill(255);

  for (let i = 0; i < numStars; i++) {
    stars.push({
      x: random(width),
      y: random(height),
      speed: random(0.5, 2), //speed for every star
    });
  }
}
}

Reflection: 

In this assignment, I would say that I did a good job with what I had in mind but I could’ve done a better portrait in addition to  making the planets move in a certain motion. For future assignments and tasks, I would like to do something that is more challenging for myself through videos online and other sources. I hope to gain more experience on creating curves and lines to be able to express myself better.

Concept:

Since it was the first project for the class, I wanted to make my self portrait as realistic as possible. For this reason, the first thing I did was dive into the documentation, and find a way to load images onto the canvas – so I could use a photo of mine as reference.

Following this, while I was using simple shapes to make my image, I discovered the vertex() function and the begin/endShape() function which I proceeded to use to create the more complex shapes in my portrait such as the hair and face.

Beyond these, I tried to keep my portrait as simple as possible, except the twist at the end:

If you click on the canvas, a table tennis racket spawns. I wanted my self portrait to go beyond simply showing a photo of me and be more expressive about who I was – thus I added a bit of myself through the table tennis rackets, a passion of mine.

Highlights:

I believe the highlight of my project was adding the spawning table tennis rackets. This code while still remaining relatively simple, involved the usage of a class and a custom function beyond the simple draw and setup functions.

One question I answered while implementing this was regarding the orientation of the rackets. I initially had them oriented vertically, but I realized that this was getting monotonous. So I used the random() function to get a randomized orientation for each racket that is created!

  for (let racket of rackets) {
    drawR(racket.x, racket.y, racket.angle);
  }
  
  print(mouseX +","+mouseY);
}

function mousePressed() {
  rackets.push({
    x: mouseX,
    y: mouseY,
    angle: random(0,2*PI)
  });
}

function drawR(x, y, angle) {
  push(); 
  translate(x, y);
  rotate(angle);
  
  // Racket handle
  fill(120, 70, 40); 
  rect(-5, 0, 10, 30);

  // Rubber
  fill(200, 0, 0);  
  ellipse(0, -15, 40, 40);  
  pop(); 
}

 

Reflections:

I believe my portrait ended up looking well, given the limited nature of the time I had to work on it. However, there are several things I would change about it if I continued to work on it. Firstly, I would improve how the racket looked, and create a mechanism to remove all rackets from the screen given the press of a button. Second, I would smoothen out my character’s outfit and possibly add more details to the face to make it look more realistic!

Overall, I really enjoyed working on this project and look forward to the rest of the class!

Portrait

Concept

I wanted to create a simple cartoon that is somewhat similar to me but still includes some caricature aspects to it. I tried to use the shapes we learnt in class to create this [not so] realistic caricature of myself. Since this was my first time using p5js, I managed to use the different shapes to create my self-portrait.

Code

I am proud of the entire code since this was my first time properly coding. It took me some time to coordinate the positions of different parts of the face, especially the mouth and teeth, and the eyes and glasses.

function setup() {
  createCanvas(350, 350);
  background(220,220,220);

  //Hair
  noStroke();
  fill(90, 56, 37);
  arc(150, 135, 170, 170, PI, TWO_PI);
  rect(65, 135, 170, 135);
  
  //neck
  noStroke();
  fill(229, 181, 161);
  rect(125, 220, 50, 60);
  
  // Head
  fill(232, 190, 172);
  ellipse(150, 150, 145, 165);

  // Eyes
  fill(255);
  ellipse(115, 135, 27, 15);
  ellipse(185, 135, 27, 15);
  fill(0);
  ellipse(115, 135, 10, 15);
  ellipse(185, 135, 10, 15);

  //Nose
  fill(229, 181, 161);
  triangle(150, 145, 140, 165, 160, 165);

  //Mouth
  fill(225, 160 , 164);
  arc(140, 185, 80, 40, 0, HALF_PI);
  fill(255, 255, 255);
  rect(140, 185, 40, 5);
  
  //Ears
  fill(232, 190, 172);
  ellipse(70, 150, 15, 30);
  ellipse(230, 150, 15, 30);
  
  //eyebrows
  noFill();
  stroke(0, 0, 0);
  strokeWeight(2);
  line(100, 115, 120, 110); 
  line(180, 110, 200, 115);
  
  //Glasses
  noFill();
  stroke(0, 0, 0);
  strokeWeight(2);
  circle(115, 135, 40);
  circle(185, 135, 40);
  line(136, 135, 165, 135);
  line(95, 135, 80, 140); 
  line(205, 135, 220, 140);
  
  //Body
  noStroke();
  fill(0,0,0);
  rect(75, 275, 150, 150, 30);
  fill(229, 181, 161);
  triangle(125, 275, 175, 275, 150, 290);
}

function draw() {
   print(mouseX + "," + mouseY);
}

Approach and Reflection:

I spent some time figuring out what commands/shapes I should use to make the cartoon a basic face before adding self-specific aspects. It took some trial and error for the different parts to come together as a whole. In the future, I would probably like to experiment further with my code to test moving features or other interactive aspects to make it more interesting.

 

Overview: 

In this project my main inspiration was my background and who I am since it is a self-portrait after all. I started off with the blue sky, radiating sun and moving clouds since I love summer but also because Morocco is always sunny and perfect weather. Then I added a red banner with a green circle in the middle of it as a reference to the moroccan flag in which I put my portrait that I made as similar to me as I could get it.

Highlight:

My favorite part about my portrait is the sun shining and the clouds moving it truly gives it life and dimension.  Using previous knowledge, trigonometry and loops I was able to create an endless sky feeling as the sun rays expand and retract while the clouds are moving effortlessly through the screen.

Sun animation: 

function drawSun(x, y) {
  // Sun circle
  fill(255, 204, 0); // Yellow color
  ellipse(x, y, 40, 40);

  // Animated Sun rays
  stroke(255, 204, 0); // Yellow color for rays
  strokeWeight(2);

  let rayLength = 30 + sin(frameCount * 0.1) * 15; // Creates the animation effect

  line(x - rayLength, y - rayLength, x - 60, y - 60);
  line(x, y - rayLength, x, y - 60);
  line(x + rayLength, y - rayLength, x + 60, y - 60);
  line(x - rayLength, y, x - 60, y);
  line(x + rayLength, y, x + 60, y);
  line(x - rayLength, y + rayLength, x - 60, y + 60);
  line(x, y + rayLength, x, y + 60);
  line(x + rayLength, y + rayLength, x + 60, y + 60);

  noStroke(); // Resetting the stroke for other drawings
}

Cloud animation: 

// Moving clouds
  drawCloud(cloud1X, 60); // Cloud on the right of the sun
  drawCloud(cloud2X, 100); // Cloud below the sun
  drawCloud(cloud3X, 350); // Cloud at the bottom

  //Moves the clouds
  cloud1X += 1;
  cloud2X += 1;
  cloud3X += 1; 

  // Loop the clouds once they move off screen
  if (cloud1X > width + 30) {
    cloud1X = -60;
  }
  if (cloud2X > width + 30) {
    cloud2X = -60;
  }
  if (cloud3X > width + 30) {
    cloud3X = -60;
  }

........
function drawCloud(x, y) {
  fill(255);

  // Group of ellipses to form a cloud shape
  ellipse(x, y, 30, 30);
  ellipse(x + 20, y, 30, 30);
  ellipse(x - 20, y, 30, 30);
  ellipse(x - 20, y, 30, 30);
  ellipse(x + 10, y + 15, 30, 30);
  ellipse(x - 10, y + 15, 30, 30);
}

Reflection and ideas for future work or improvements:

The sketch successfully brings together elements of animation and interactivity, and overall bring out what I wanted to from the beginning a serene day in Morocco and who I am. While the current representation is visually appealing, there are several areas of potential enhancement:

-Day to night: I would love to create an aspect in which based on the time of day the sky and the sun changes color and position or even switches to a moon and the clouds change for stars.

-More similarity to me: I would love to be able to figure out how to add more details to the portrait since I do think it’s not as similar to me as I envisioned especially with the hair and other lack of characteristics that were due to not knowing how to manipulate the shapes in my favor.

After joining the Intro to Interactive Media course on the second lecture, I already felt as though I had fallen behind and missed out on the most important basics that we needed to know for our first assignment. Nevertheless, I took this as an opportunity to try and discover the basic features of p5.js on my own.

Our first assignment is to create a self-portrait in p5.js. As I began brainstorming what I wanted to create, I looked outside my window, viewing the Abu Dhabi city skyline, and an idea struck me. I reflected on the past two years of my life and realized that I have traveled to over 15 different cities and towns after having to leave my home in Ukraine. This idea inspired me to create a self-portrait of myself behind various city skylines.

Initially, I began by creating numerous rectangles of varying shapes and colors; however, once my code reached over 70 lines for just the background, I realized that there had to be a different way to implement my idea into the code. I remembered from my time trying to self-study Python the concept of loops. Though unknown to me in the p5.js environment, I looked through the reference section and learned more about the “for” loop. After numerous failed attempts, including an infinite loop that crashed the website, I was able to create a look that generated a random city skyline upon running the code.

Nevertheless, my exploration did not stop there, and after getting closer to the final code, I realized that the randomly generated city skyline would go unnoticed if my self-portrait wasn’t interactive. Specifically, I wanted the skyline to regenerate upon each mouse press. This pushed me to look further into how this would be possible and I realized that I have to create a separate function to generate the skyline, which I could then connect with the mouse pressing functionality.

Despite many efforts to create a separate function to do what I wanted it to, I couldn’t get it to work. Nevertheless, as I was experimenting with my code, I got it to create an interesting and fast-paced loop that would regenerate the city skyline extremely fast. This inspired me to modify my concept for the self-portrait. Since I left Ukraine, I haven’t felt completely at home anywhere, thus I decided to transform my first assignment for the Interactive Media into a reflection on how I currently perceive home.

Though I am sure my code could be written in a much better way, I am still proud for being able to create an interactive self-portrait which also reflects upon certain aspects of my life. This text of code was the hardest for me to figure out:

//randomly generated city skyline upon mouse pressed
if (mouseIsPressed) {
  background(246, 235, 144);
  for (X = 0; X < 600; X++) {
    X = X + 30;
    fill(random(BC));
    noStroke();
    rect(X, Y, random(width), random(height));
  }
}

Final Self-Portrait “HOME?” in p5.js:

Overall, despite the challenges I faced whilst learning JavaScript from complete zero, I am well satisfied with my result and I enjoyed this project a lot. I am looking forward to learning more about how to improve my code, as well as increase its complexity, and work with interactive and animation elements.

– Concept:

In this assignment, since I am not someone used to making portraits and descriptions of real objects/people, I wanted to make a simple, cartoon-style approach to how I perceive myself.
With basic shapes, I intended to rely on the noStroke() function to give a feeling similar to the characters seen in the art style of the “South Park” series. In the portrait, I tried to highlight subtly characteristics of my face that most people recognize from me: A middle part hairstyle, glasses, slightly closed eyes, and a thick lower lip side.

– Highlights of my code:

In my code, I wanted to experiment with the moving animations we could produce with the draw() function. To do so, instead of making an element of my face move, I decided to add a cloud to try and move it around the portrait.

//Cloud
  fill(255);
  ellipse(x, 40, size, size);
  ellipse(x+10,50,size,size);
  ellipse(x+30,50,size,size);
  ellipse(x+30,30,size,size);
  ellipse(x+15,30,size,size);
  ellipse(x+40,40,size,size);
  
  //Movement of cloud
  x = x += 0.2 ;
  if(x >= width){
    x = 0;
  }

Here, I used various circles with a modifiable size to make a cloud that would move thanks to sharing a common x-axis that I would change dynamically. At the end, I also added a condition that returns the cloud to the start if it reaches the max width.

As a personal preference, I am also proud of how I managed to utilize the arc() function to generate the mouth. Having experimented (and failed) with ellipses before the use of this, I am happy that I found a way to improve the drawing of my mouth.

//Mouth
  //Half a circle painted red.
  fill(170,51,0);
  arc(250, 450, 75, 40, 0, 180);

 

– Sketch:

– Reflection and ideas for future work or improvements:

In future projects, I would like to experiment and explore a more realistic art style, a style that could reward the use of more specific shapes and figures. In addition to that, having tried the movement of the cloud, I would like to generate more varied movement (other than just lateral movement) all around my drawings and possibly include interactive components. However, I am aware now of the time it takes to animate even easy movements like the cloud just going from side to side.

In addition to all this, I would plan my code in a different way next time. I would possibly create functions that can improve the legibility and reusability of the code (maybe creating the eyes, the glasses, and the hair, being such symmetric drawings, would have been easier with a proper structure of the code).

Concept:

Quirky, aesthetic and simple but efficient with a light cartoonish aspect was everything I was looking for concerning this very first assignment. I tried as much as possible to utilize the functions and shapes we studied in our first class, to generate a self portrait that has at least one of my actual features. So here is Goof-aya, my goofy portrait with her round glasses, pink cheeks and moon-shaped pupils. I really wanted to have an interactive element in my portrait, so if you click and grab the mouth, it will widen up as if it is saying: “WOW!” (my favorite expression!). I feel like it adds an expressive touch to the portrait which is exactly what I intended.

Code Highlight: 

//widen the mouth
function mouseDragged() {
  mouthSize = constrain(dist(mouseX, mouseY, xPos, yPos), 20, 70);
}

It was very exciting to see something actually moving in my portrait. Hence, I love the mouth widening part of this code. I figured out a part of it watching a Youtube tutorial (here).

Reflection and Ideas:

Overall, I am satisfied with the outcome of my portrait given the limited coding knowledge that I started with. However, I definitely think that there are many areas to improve. Starting off with some parts of the portrait itself missing (neck and ears). Also, I find the pink background a bit dull. My initial idea was to actually have an interactive background that changes images based on the user’s input, but couldn’t figure out that part. Hence, I am excited to learn more in this class in order to incorporate such elements in upcoming assignments. For now, this first homework was definitely a fun task!

References:

P5JS references page: https://p5js.org/reference/

Mouse Interaction with Objects: https://youtu.be/TaN5At5RWH8?si=nZXGcyDdp9Hd6eOY

 

Concept

In this sketch, I wanted to use only basic shapes such as circles, ellipses, and rectangles. I found it intriguing to see if I could capture the essence of a person’s face and features with these simple forms.

While the resulting portrait may not exactly resemble me, I made an effort to incorporate some of my distinctive characteristics, like the curly hair, into the design. The curly hair is represented using a series of circles, creating a unique and visually interesting hairline.

Code highlight:

// Check if the mouse is over the left eye
let d = dist(mouseX, mouseY, 170, 180);
if (d < 15) {
  leftEyeWink = true;
} else {
  leftEyeWink = false;
}

// Check if the mouse is over the right eye
let distance = dist(mouseX, mouseY, 230, 180);
if (distance < 15) {
  rightEyeWink = true;
} else {
  rightEyeWink = false;
}

My favorite part of the code is the section where I check if the mouse is over the eyes and make the portrait wink accordingly. It adds an interactive and dynamic element to the artwork, giving the portrait a sense of life and engagement.

In this code snippet, I calculate the distance between the mouse pointer and the position of each eye using the dist function. If the mouse is within a certain range (less than 15 pixels) of either eye, it triggers a “wink” effect by setting a boolean variable (leftEyeWink or rightEyeWink) to true.

Sketch

Reflection and Ideas

In reflecting on my project, I find myself generally satisfied with the final product. However, there are a couple of aspects that I believe could have been improved. One area where I feel I could have done better is in making the portrait resemble me more closely. While the artwork captures some of my distinct features, such as the curly hair, there is room for improvement in achieving a stronger likeness.

Additionally, I recognize that incorporating shadows and shading could have significantly enhanced the depth and realism of the portrait. By strategically adding shadows to various parts of the face and body, I could have created a more three-dimensional and lifelike appearance.

I am content with the final product though and working on this assignment was super fun!

Concept

Through the journey of discovering myself in code, I had a lot of grappling in figuring out many things. When I thought of a self-portrait, I thought of creating a cartoonish self that reflects what I like to do. I was so nervous to start coding, as a result, I spent a lot of time watching random videos, and reading through the resources of the P5js library to get inspired and a better understanding of coding. I never properly learned how to code, but I tried before way back.  I am honestly happy with the result I have done because I learned a lot in the process. I was enjoying every step even when I was struggling because I knew with time, I would figure it out.

 Code that I am  proud of:

I am honestly proud of the whole project. Nevertheless, I was so proud of the background I did because it took a considerable amount of time.

function setup() {
  createCanvas(400, 400);

  //declare and initiali   variablnameeI i for the stars in the background - it is in the setup because I only want it toncece create ata e condition to check, if true, run code in curlbracketske,ts and increment the variable

  for (let i = 0; i < numStars; i++) {
    stars[create vectorector(random(width), random(height), random(1, 2)); // gdimensionntion to the background makes the stars feel far away
  }
}

let stars = []; //global variable (array)

let numStars = 400; //variable to control number of stars

function draw() {
  background(0, 0, 60);

  rectMode(CENTER);

  //stars
  fill(255);
  for (let i = 0; i < numStars; i++) {
    ellipse(stars[i].x, stars[i].y, stars[i].z, stars[i].z);
  }
  //inspred by https://editor.p5js.org/jesse_harding/sketches/0szF7gcAx

  //things I like
  textSize(30);
  text("🪐", 45, 80);
  text("🐶", 310, 80);
  text("✈️", 325, 180);
  text("🎹", 40, 180);
  text("☃️", 50, 290);
  text("🧘🏻", 325, 290);
  text("🎨", 190, 45);
  //inspired by https://www.youtube.com/watch?v=ZfFtXzzTwP8

<iframe src=”https://editor.p5js.org/shn202/full/H8OVFkhj9″></iframe>

width=”400″ height=”400″

Reflection and ideas for future work or improvements:

After watching a lot of basic videos on P5JS I started a simple sketch of how I want my Portrait to be. I tried to make it basic so I could use 2D functions from the library. I think organization is key to making every coder’s life easier. If I had planned in more detail, I think my code would have been simpler. During the process of creating my self-portrait, I encountered many challenges because I was challenging myself to do something a little extra.

There are a couple of things that I should have employed from the start. which could have made the process easier. One such approach delves into variables for all the colors I wanted to use. Rather than repeatedly going back and forth to copy and paste the color codes from one place to the other. I should have adopted a more efficient technique by creating variables for the colors I intended to use extensively. This would have entailed employing the following method:

var Skin = color(255, 229, 204); //beige

var hair +color(140, 60, 0);  //brawn

During my color selection phase, I came across a valuable website that gives RGB parameters of many colors. yhttps://www.rapidtables.com/web/color/RGB_Color.html

Further, I had a hard time debugging the code. I kept getting an error saying that there was a function that was duplicated. This took me almost a day to figure out, but it turned out to be a common error that people get when the sound in the accessibility feature in the P5js web is turned on. Once I turned it off the error was gone.

I think I was successful in making my sketch a reality using P5JS. I have learned many things along the way. Among these things was creating the logic behind the stars in the background. After a lot of research, I came across a YouTube video explaining how to do it, even though I followed the video, I had to change little things to make it work for my image.

Additionally, drawing the hair was another struggle because I had to figure out how I would rotate the bangs to make them look the way I imagined them to be. I had to do a considerable amount of experimentation and reading on the rotate function in P5js. Figuring out the Pixels parameter was so hard through the whole process and even though there was some logic behind it, visualizing the image and using my eyes to tweak some things was a little experimental.

I am aware that there are easier ways to do my code. However, I tried to adhere to simplicity and my basic knowledge of coding.

 

Resources:

https://vimeo.com/619224012

https://editor.p5js.org/jesse_harding/sketches/0szF7gcAx

https://www.youtube.com/watch?v=ZfFtXzzTwP8

https://www.rapidtables.com/web/color/RGB_Color.html