Author: Stefan Kalanoski

Assignment 2 – Artwork

Concept:

For this assignment, I did some research on generative artworks in p5js. After browsing some of the published work on the blogs found here, I got inspired to create an artwork which will pay homage to old computers, or, more specifically the green letters on black background found in retro devices. This way I was able to connect two different levels of the computer evolution which itself is evidence of our progress.

Code and realization: 

As a person with little experience in coding, this assignment was a great challenge, especially trying to avoid getting stuck into infinite loops as in my case I used an if loop inside of the for loop. The past classes on loops and basic shapes helped me create the grid of lines which are then altered as the mouse cursor moves over them.

Here’s a segment of the code I am especially proud of as it took me several trials and a lot of debugging to get it working:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
for (let y = spacing/2; y < height; y += spacing) {
let offset = map(mouseY, 0, height, -spacing/4, spacing/4);
if (abs(y - mouseY) < spacing/2) {
offset = offset * 2;
}
for (let y = spacing/2; y < height; y += spacing) { let offset = map(mouseY, 0, height, -spacing/4, spacing/4); if (abs(y - mouseY) < spacing/2) { offset = offset * 2; }
for (let y = spacing/2; y < height; y += spacing) {
    let offset = map(mouseY, 0, height, -spacing/4, spacing/4);
    if (abs(y - mouseY) < spacing/2) {
      offset = offset * 2;
    }

This part of my program controls how the lines react to the mouse movement, especially if the y coordinate of the line is less than the y coordinate of the mouse.

Final Product: 

Reflection: 

This assignment was a great way to express our creativity and thought process. While I managed to get the program to work and be interactive, I feel like I can improve its interactivity and add more elements in the future.

Assignment 1 – Self Portrait

As I started the assignment, I had a bunch of trouble with the parameters of shapes that I used as well as the coordinate system. Thankfully, I was able to overcome this obstacle by consulting with the p5js Reference. I also used Owen Roberts’ grid code to help me position the shapes properly.

Initially, my idea was to recreate my passport photography in a minimalistic manner. I used a variety of shape primitives in p5 to make this happen and I also explored using RGB and Hex codes for color. Additionally, I wanted a piece of the portrait to represent NYU so I researched the RGB values of the NYU purple and used it as the background.

The following code was used to get the desired result:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function setup() {
createCanvas(400, 400);
background(87, 6, 140);
}
function draw() {
//ears
fill(232, 190, 172);
stroke(0);
ellipse(110, 200, 30, 60);
ellipse(290, 200, 30, 60);
//neck
fill(232, 190, 172);
stroke(0);
rect(170, 290, 60, 80);
//body
fill("#5A5A5A");
rect(75, 320, 250, 200, 40);
fill(232, 190, 172);
stroke(0);
arc(200, 320, 80, 40, 0, PI, CHORD);
fill(232, 190, 172);
noStroke(0);
arc(200, 320, 60, 40, 0, PI);
//face
fill(232, 190, 172);
stroke(0);
ellipse(200, 200, 180, 200);
//eyes
fill(255);
ellipse(160, 180, 50, 30);
ellipse(240, 180, 50, 30);
fill("#1569C7");
ellipse(160, 180, 20, 20);
ellipse(240, 180, 20, 20);
fill(0);
ellipse(160, 180, 8, 8);
ellipse(240, 180, 8, 8);
//eye shine
fill(255);
ellipse(165, 175, 5, 5);
ellipse(245, 175, 5, 5);
// nose
fill("#9F7967");
noStroke(0);
quad(190, 215, 210, 215, 220, 225, 180, 225);
fill(0);
ellipse(194, 220, 7, 7);
ellipse(205, 220, 7, 7);
stroke(0);
line(210, 164, 210, 215);
//hair
fill("#c89f73");
noStroke(0);
ellipse(200, 108, 173, 65);
triangle(110, 180, 115, 100, 150, 110);
triangle(290, 180, 285, 100, 250, 110);
//mouth
fill(231, 106, 106);
stroke(0);
arc(200, 260, 60, 13, 0, PI);
arc(200, 260, 60, 8, PI, 0);
fill(0);
stroke(0);
line(170, 260, 230, 260);
}
function setup() { createCanvas(400, 400); background(87, 6, 140); } function draw() { //ears fill(232, 190, 172); stroke(0); ellipse(110, 200, 30, 60); ellipse(290, 200, 30, 60); //neck fill(232, 190, 172); stroke(0); rect(170, 290, 60, 80); //body fill("#5A5A5A"); rect(75, 320, 250, 200, 40); fill(232, 190, 172); stroke(0); arc(200, 320, 80, 40, 0, PI, CHORD); fill(232, 190, 172); noStroke(0); arc(200, 320, 60, 40, 0, PI); //face fill(232, 190, 172); stroke(0); ellipse(200, 200, 180, 200); //eyes fill(255); ellipse(160, 180, 50, 30); ellipse(240, 180, 50, 30); fill("#1569C7"); ellipse(160, 180, 20, 20); ellipse(240, 180, 20, 20); fill(0); ellipse(160, 180, 8, 8); ellipse(240, 180, 8, 8); //eye shine fill(255); ellipse(165, 175, 5, 5); ellipse(245, 175, 5, 5); // nose fill("#9F7967"); noStroke(0); quad(190, 215, 210, 215, 220, 225, 180, 225); fill(0); ellipse(194, 220, 7, 7); ellipse(205, 220, 7, 7); stroke(0); line(210, 164, 210, 215); //hair fill("#c89f73"); noStroke(0); ellipse(200, 108, 173, 65); triangle(110, 180, 115, 100, 150, 110); triangle(290, 180, 285, 100, 250, 110); //mouth fill(231, 106, 106); stroke(0); arc(200, 260, 60, 13, 0, PI); arc(200, 260, 60, 8, PI, 0); fill(0); stroke(0); line(170, 260, 230, 260); }
function setup() {
  createCanvas(400, 400);
  background(87, 6, 140);
}

function draw() {
  //ears
  fill(232, 190, 172);
  stroke(0);
  ellipse(110, 200, 30, 60);
  ellipse(290, 200, 30, 60);

  //neck
  fill(232, 190, 172);
  stroke(0);
  rect(170, 290, 60, 80);

  //body
  fill("#5A5A5A");
  rect(75, 320, 250, 200, 40);
  fill(232, 190, 172);
  stroke(0);
  arc(200, 320, 80, 40, 0, PI, CHORD);
  fill(232, 190, 172);
  noStroke(0);
  arc(200, 320, 60, 40, 0, PI);

  //face
  fill(232, 190, 172);
  stroke(0);
  ellipse(200, 200, 180, 200);
  //eyes
  fill(255);
  ellipse(160, 180, 50, 30);
  ellipse(240, 180, 50, 30);
  fill("#1569C7");
  ellipse(160, 180, 20, 20);
  ellipse(240, 180, 20, 20);
  fill(0);
  ellipse(160, 180, 8, 8);
  ellipse(240, 180, 8, 8);
  //eye shine
  fill(255);
  ellipse(165, 175, 5, 5);
  ellipse(245, 175, 5, 5);
  // nose
  fill("#9F7967");
  noStroke(0);
  quad(190, 215, 210, 215, 220, 225, 180, 225);
  fill(0);
  ellipse(194, 220, 7, 7);
  ellipse(205, 220, 7, 7);
  stroke(0);
  line(210, 164, 210, 215);
  //hair
  fill("#c89f73");
  noStroke(0);
  ellipse(200, 108, 173, 65);
  triangle(110, 180, 115, 100, 150, 110);
  triangle(290, 180, 285, 100, 250, 110);
  //mouth
  fill(231, 106, 106);
  stroke(0);
  arc(200, 260, 60, 13, 0, PI);
  arc(200, 260, 60, 8, PI, 0);
  fill(0);
  stroke(0);
  line(170, 260, 230, 260);
}

As visible from the code I also played around with the outline of the used shapes.

Following is the final version of the self portrait.

In retrospect, this was a great assignment as an introduction to p5 and I really enjoyed doing it! In the future, I would like to focus more on making artwork interactive as I have a few ideas I would like to explore such as psychedelic art.