## Week 2 — Reading Reflection

I thought Casey’s talk on chance operation was really cool! I feel like when people talk about computers/ tech, they think about how the systems are built from am extremely rigid structure. When in reality, computer system (especially now with AI) have the capability to produce series of random results beyond what humans can think of and learn/ fix their own programming. Although there is structure in the way computer programs are given sets of parameters (position of the pivot points, color of the objects, movement of the shapes, etc.), the way which the program takes the information and returns a result may not always be what humans expect to happen.

Throughout Casey’s talk, I kept thinking if he could have imagined how far generative art has come. Since Casey’s talk 12 years ago, we have applications such as OpenAI and ChatGPT that have the capabilities to generate some artwork based off user prompts. User do not even need to have technical skills in order to tell the computer what to do; whereas compared to 12 years ago, users likely had to understand the computer manual and/or operating system in order to create some digital art.

With that said, my favorite part of his talk was his demonstration from 30:52 to 34:14 of the commodore 64. Whenever I see technology from the ’80s to early 2000 I am just absolutely fantastically with how far the digital and physical world of technology has come. The commodore 64 is a simple 8-bit home computer in the ’80s, and knowing something so simple was able to produce something complex humans consider as art, is the coolest thing to me. Now as programs and technology continue to advance, I wonder what the future would bring for not only the art community, but how else technology can influence our society.

## Week 2 — Generative Art with Loops

##### SHORT DESCRIPTION:

In week 2 of intro to IM we were introduced to the concept of for and while loops in class and was asked to create a small project using these concepts. For my project, I decided to create a simple generative art program that selects a random shape and fits them onto the screen based off a given coordinate point. In order to achieve randomness in my project, I had used the Math.random() * n + 1 to generate number between 0 to n inclusively.

##### Design Concept

Initially, I had wanted my design to be static, pure black and white piece with square grids that are filled with semi-circles rotated to different degrees, but I felt li

ke this concept has been used or seen before, so I decided to try something new. When I started the project, I knew I wanted to keep it simple, yet complex at the same time. My goal was to create a portrait that resembles modern contemporary art with color, where someone can make their own subjective opinions about the piece.

In the end, I created a dynamic and colored piece that changes what the individual sees on the screen every 2-seconds, and when the users press their mouse, the piece turns black and white. While I diverted from my original concept, I am still extremely happy with my final result and was still able to incorporate the black and white feature into my project.

##### Coding Processes

To achieve a structured, yet random pattern, I started by designing a grid pattern, where each square is 50 x 50 pixels. Then, in each square, there would be a randomly selected shape in the center of that grid. For the program to select a random shape, I created a function (getRandomShape) that would return a type:string from a shapes array (type: string).

The function that I wrote to select a random shape is as follows:

function getRandomShape() {
const shapes = ['circle', 'triangle', 'square', 'ellipse', 'rect'];
let randShape = shapes[Math.floor(Math.random() * shapes.length)]
// console.log(randShape)
return randShape

In the code, I had taken advantage of the Math library function .floor() and .random() in order to generate an integer that is within the length of the shapes array. Later I could also use the same functions to randomly assign the size of the shape. After which, running the code created a simple static design.

Some examples of the shapes bound within each 50 x 50 grid :

While I could have stopped there, I decided to play around more with the Math library and decided to shift the shape’s center, so it wasn’t restricted within each 50 x 50 square grid. As a result, it led to complex and unpredictable placements of the shape size and centers.

Some example of the randomized shape center

##### The Hardships

On top of the unpredictable pieces, I wanted to go further and implement an interactive “water ripple” effect that would emerge from where the user clicked on the screen. Unfortunately, I didn’t realize how complicated that process was because I had used the noLoop() in the draw() function to only produce one image at a time. Therefore, I couldn’t have the shapes stay static which the background continues to refresh (or at least I couldn’t figure how…). I spent a couple frustrating hours trying to get my idea to work before realizing the noLoop() was the issue. To future me and anyone else, understand the affect noLoop() will have your project and background, especially when working with for and while loops.

Eventually, I did get rid of the noLoop() in my draw() function and reduce the framerate to 2 fps because I didn’t want to give up on making my project interactive. [Another pro tip: the default framerate (60 fps) will make a project like this incomprehensible because the canvas is changing constantly.]

##### Achievements

After dropping the ripple effect idea, I went back to my original idea of a black and white canvas. Using the mouseClicked() function, I set a variable “colorChange” to true if the mouse is pressed and make the canvas black and white, otherwise it would return to its default state of false and make the canvas colored. I really enjoyed this process because it exposed me more to p5’s library and allowed me to incorporate another idea I originally wanted to do.  I also felt like it added more depth and cool composition to my project.

let colorChange = false
...

function mouseClicked(){
return mouseIsPressed
}
...

function drawShape(x, y){

colorChange = mouseClicked()

if (colorChange){
circleColor = '#FFFFFF'
rectColor = '#FFFFFF'
circleColor = '#FFFFFF'
squareColor = '#FFFFFF'
triangleColor = '#FFFFFF'
rectColor = '#FFFFFF'
ellipseColor = '#FFFFFF'
}
}
##### Final Design

Below is my final design. I am happy with how it turned out and made me appreciate the process behind generative art and randomness. In the future, I hope to figure out how to implement a ripple effect and ability to create more generative projects.

[Press anywhere to make it black & white!]

## Short Description

For the first assignment of my intro to IM class, we had to design a self-portrait of yourself. I have been wanting to take an IM/ IMA class for the past two years at NYU, so I was really excited to get started and work on this project. I wanted my portrait to portray some of my favorite characteristics of who I am as a person. As such, portrait is a small reflection of the character that I am.

## Character Design Concept

For my character, I took inspiration from the appearance of Duolingo character. Now before you judge, I often feel the need to add contrast and extensive detail to a design, so I have trouble simplifying my ideal design into primary shapes and colors. Therefore, specifically referencing Violet (my favorite) from Duolingo, I was able to simplify how the human anatomy is suppose to look and add details accordingly to my needs.

The Outfit

My next I asked myself, “what did I want my character to wear?” And so, I decided to dress her up in one of my to-go outfits in a black tank top, green cargo pants, and pair of off-white sneakers.  In addition, I have a cartilage piercing and two lobe piercing on one of my ears, so I added silver jewelry that I typically wear on my character’s ear. I could have added my other ear, but I thought my character looked good as it was. I also can’t forget my pair of silver/blue glasses, so my character can look even more like me.

The Background

After I had completed my character design, I moved onto the background and added some little detail of things I liked. At first, I wanted a cool animated background, but then I realized I wasn’t that comfort/ knowledge on p5 and decided on a plain background of my favorite color – burgundy red. Then, in the corner of the screen is my pet cat (Mio), who I love very much. Lastly, I added “Hello!” to the background to greet anyone that may come across my character.

## The Coding Process

Given this was my first time working in p5, I am really happy with the outcome of my design. I had some issue with simplicity and wanting to do more than I was currently able to do. However, after experimenting and testing the p5 reference functions, I was able to work a lot more comfortably.

The Hardships

THE HAIR. I believe the thing I work on the longest out of everything on my character was the hair. I could not find a shape that fit exactly what I wanted, and the math functions for the shapes were initially all so confusing to me. Eventually I searched up ‘character designs in p5’ on Google to see if hair was just supposed to look bad with the simple shapes, but I came across a post by Erika Noma who used the bezier() function and life was good again. I wouldn’t say my hair is how I imagined it to look, but it works. Although understanding the parameters was a little confusing to me, I do recommend anyone wanting to do a simple curvy/ waving shape to use this function because you’re able to insert 4 different points.

// hair front (on face)

fill('#927242');
bezier(200, 85, 245, 80, 280, 143, 257, 160) // left hair
bezier(200, 85, 135, 80, 120, 140, 135, 160) // right hair

The Brightside/ Greatest Achievement

After working through several shapes and functions to find the perfect hair shape, I felt like I became an expert on the math components of p5. For some functions such as arc() and rotate(), I didn’t realize at first the angles were measured radians, not degrees. You can imagine my confusion when errors were blowing up on the console and the shapes started flying across my screen. Through this project, the unit circle became my best friend and biggest support :’).

As such, through this experience, I was able to encode a simple waving action to my character. With the help of ChatGBT to understand the push(), pop(), and translate() functions that were outside of the p5 reference page, I was able to tweak my project to move based on the x-position of the mouse. The code below is the function for the waving action of my character. I am super proud I was able to make my character come to life and turn my difficulties into something positive.

/* right arm
-- translate the center to where the arm would pivot
-- push() & pop() so it doesn't affect the rest of the drawing
-- let angle which the arm will wave based on the x-position of the mouse
*/

fill("rgb(242,222,203)") // filled at the top for the arms
push()
translate(245, 230)
let angle = map(mouseX, 0, width, PI/ 10 , PI / 4)
rotate(angle)
ellipse(0, -40, 15, 100)   // right arm
fill('rgb(233,200,170)')
circle(0, -113, 20) // right tiny circle hand :3
pop()

## My Final Self-Portrait Reflection

Overall, I am pretty satisfied with the outcome of my final design. I was able to incorporate different aspects of myself onto my character and show who I am as a person. Given I was hesitant and unsure if I could implement something that moves in my project, I feel I have learned a lot through my experience with p5 and overcoming technical difficulties. Going forward, I hope to learn more about the potentials of p5 (frames, rendering, input/output, etc) and continue to design fun projects.  I advise anyone starting out with p5 to not give up and continue to learn through trial and error!