Category: Fall 2020

float angle;
float grid= 400;
float i=0; 
void setup() {
  size(1080, 900,P3D);
};

void draw() {
 
  for(int x=0;x<=width;x+=grid){
    for(int y=0;y<=height;y+=grid){
  translate(mouseX,mouseY);
rotateX(radians(angle));
rotateY(radians(angle));
i=0; 
  while(i<width){
    i=i+20;
  beginShape();
vertex(i+100,100);
vertex(i+175,50);
vertex(i+250,100);
vertex(i+250,200);
vertex(i+175,250);
vertex(i+100,200);
vertex(i+100,100);
vertex(i+100,200);

endShape();
  };
  
  };
  };
//rotateX(radians(angle));
angle+=1; //does a full rotation
};

For this assignment,

I went through A LOT of experimentation,

at first, I wanted to recreate this pattern:

I almost got there:

Then, I didn’t really know what to do with it in terms of animation….

I  discovered the built in P3D  and started different experiments, but  I didn’t know how to integrate more effects while using the While loop, so I experimented further and created the animation at the top of the post.

The inspiration of this post for me was to experiment as much as possible, since it’s been helping me understand the mechanics of the code. And to save different blocks of code on GitHub if I find something interesting I could integrate in a different art piece later.

My inspiration for this assignment came from two sources:

• A quote that “success isn’t linear”,
• Casey Reas’ talk on Chance.

Now, let me explain what I mean.

Human brains are wired in a way to notice only up’s of certain experiences (Kahneman, “Thinking, Fast and Slow”). When looking at success stories of other people, it is oftentimes tempting to simplify their path into a mere collection of linear dots and draw a straight line connecting all. This is why I wanted to challenge this notion through my Processing code, but most importantly, to make a kind reminder to myself, too 🙂

So I took out my iPad and started drawing the image that I was bearing in my head. After looking at some of the examples from the syllabus, I started off with simple, straight lines that were forming a rectangular pattern all throughout the setup window. Then, I decided to add random red lines throughout the screen to perform in a noise-like pattern. All these straight lines serve as a metaphor to a “linear path”.

While I was implementing my sketch into code, I was listening to the Casey Reas’ talk on Chance which made me think a lot about random chances and possibilities in the meanwhile. I started playing around with my Processing code, challenging this “chance” to finally show in my work. Aaand…it did!

While I was taking this chance, one of my functions stopped working the way I expected it to work, and started to make a blinking effect on the screen instead. I took this as an opportunity to explore my options and made a slight shift to the initial idea.

It took me a while and a lot of web browsing to figure out how to place the red lines on the screen – however, all to turn the intended lines into rectangles and visit the class-example with the noise function and implement a similar one in my code.

So, in the very end, I got the following interpretation: in a black-and-white world where everything seems so linear, sometimes you have to be a red rectangle and take a step back to build your own, non-conventional path.

float x_width, y_height;
float x_coordinate, y_coordinate;
float x_center, y_center;
float lineX, lineY;

void setup(){
  size(640, 480);
  x_width = 10;
  y_height = 10;
  x_coordinate = 10;
  y_coordinate = 10;
  x_center = width/2;
  y_center = height/2;
}

void redNoise(){
  float freq;
  float angle;
  push();
    fill(255, 0, 0);
    noStroke();
    for (int x = 0; x<width; x+=50){
      freq = frameCount*.01 + x*.001;
      angle = noise(freq);
      rotate(angle);
      //rect(x_center, y_center, x_width + 40, y_height + 60);
      rect(mouseX, mouseY, x_width + 40, y_height + 60);
    }
  pop();
}

void drawLines() {
  
  // Section with rectangles
    for (int i = 0; i < width; i++){
      rect(i, y_coordinate, x_width, y_height);
      rect(width-i, i, x_width, y_height+15);
     }
    for (int j = 0; j < height; j++) {
      rect(x_coordinate + 80, j, x_width, y_height);
    }
  
  // Section with horizontal lines/rectangles 
    int numTotal = 10;    
    for (int rowNum = 0; rowNum < numTotal; rowNum++) {
      for (int d_width = 0; d_width < numTotal*6; d_width+=5) {
        rect(3*width/4 + d_width, y_coordinate + 50, 0.5, y_height + 140);
        rect(width/4 + d_width, y_coordinate + 120, 1, y_height+30);
        rect(width/2 + d_width, y_coordinate + 320, 1.5, y_height+75);
      }
    }
    
  // Section with vertical lines/rectangles 
    for (int colNum = 0; colNum < numTotal; colNum++) {
      for (int d_height = 0; d_height < numTotal*4; d_height+=3) {
        rect(3*width/4-50, y_coordinate + 30 + d_height, x_width + 100, 0.5);
        rect(width/8, y_coordinate + 300 + d_height, x_width + 70, 0.3);
      }
    }
  
}

// Blinking function that worked accidentally
  void blink(){
    for(int i = 0; i < width; i++) {
        stroke(random(255), 100);
        line(random(0, width), height/8, i, height/8);
    }
  }

void draw() {
  background(255);
  drawLines();
  redNoise();
  blink();
}

 

https://youtu.be/lKP8C1pRbiw

In this work I wanted to display how networks of people are created. The program starts off by creating several dots (people), and then randomly joins them together (relations). That is supposed to symbolize how humans form relations. Note that some of the lines change their color with time, as the relationship status changes as well. Even though people are connected randomly, they are capable of creating dense networks. I used the for loop to create the animation of two dots “coming” to each other.

var points = [];
var lines = [];

function setup() {
  createCanvas(800, 800);
  background(220);
  strokeWeight(5);
}

function draw() {
  if(frameCount%100==0){
    addPoint(floor(random(width)), floor(random(height)));
  }
  if(frameCount%50==0){
    addLine();
  }  
  drawLines();
}

function drawLines(){
  for(i=0;i<lines.length;i++){
    l=lines[i];
    initA=l.p1;
    initB=l.p2;
    vx=abs(initA.x-initB.x)/400;
    vy=abs(initA.y-initB.y)/400;
    tmpA=l.tmpA;
    tmpB=l.tmpB;
    
    if(((abs(initA.x-initB.x)/2)-(abs(initA.x-tmpA.x)))>0){
      if(initA.x>initB.x){
        tmpA.x-=vx;
        tmpB.x+=vx;
      }
      else {
        tmpA.x+=vx;
        tmpB.x-=vx;
      }
      if(initA.y>initB.y){
        tmpA.y-=vy;
        tmpB.y+=vy;
      }
      else {
        tmpA.y+=vy;
        tmpB.y-=vy;
      }
      
    stroke(l.c);
    point(tmpA.x, tmpA.y);
    point(tmpB.x, tmpB.y);
    }  
  }
}

function addPoint(x, y){
  p=new Point(x, y);
  points.push(p);
  stroke(p.c);
  point(p.x, p.y);
}

function addLine(){
  if(points.length>2){
    r1=floor(random(points.length-1));
    r2=floor(random(points.length-1));
    while(r1==r2){
      r2=floor(random(points.length-1));
    }
    p1=points[r1];
    p2=points[r2];
    
    l=new Line(p1, p2);
    lines.push(l);
  }
}

function Point(x, y) {
  this.x=x;
  this.y=y;
  this.c="#".concat((floor(random()*16777215)).toString(16));
}

function Line(p1, p2){
  this.p1=p1;
  this.p2=p2;
  this.tmpA= new Point(p1.x, p1.y);
  this.tmpB= new Point(p2.x, p2.y);
  this.c="#".concat((floor(random()*16777215)).toString(16));
}

 

For my first assignment using java, my main goal was to get used to the language. I just finished studying python in the previous semester, so I found that there are some useful similarities while I was coding this project. In general, doing this small exercise proved to be a good introduction to java, helping me develop important coding habits that relate to java.

Project wise, we were asked to draw a not-so-accurate self-portrait of ourselves, so I took that requirement to somewhat of an extreme. I never really excelled at detailed intricate art anyways, so I decided to go a bit crazy and draw a demon version of myself. I have one red eye, red hair, and I knew demons can be scary for some people so I threw in some dad styles to cheer the picture up.

A big drawback to this week’s project is that I didn’t try to avoid hard coding that much, I felt like I wanted to start off just getting to know the language. In next week’s project, I want to design my code better and make it much more aesthetically pleasing.

void setup() {
  size(700, 900);
  background(128,128,128);
}

void draw() {

  ground();
  hair();
  face();
  eyes();
  body();
  Nathan();
  Gotmilk();
}

void Nathan() {
  textSize(32);
  fill(255, 102, 178);
  text("Friendly Demon Nathan", 10, 30); 

}

void Gotmilk() {
  textSize(30);
  fill(255, 255, 255);
  text(" Got \nMilk?\n  :)", 310, 370);
}

void face() {
  //skin
  fill(255, 255, 51);
  ellipse(350, 200, 100, 140);
  noStroke();
  
  //mouth
  fill(0, 0, 0);
  noStroke();
  arc(350, 230, 50, 40, 0, PI, PIE);
  
}

void hair() {
  fill(255, 0, 0);
  noStroke();
  arc(350, 140, 130, 180, 0, PI, PIE);
}

void eyes() {
//sclera
  fill(255, 255, 255);  
  stroke(0, 0, 0);
  strokeWeight(0.5);
  ellipse(350, 180, 40, 50);
  
//pupil
  fill(255, 0, 0);  
  noStroke();
  ellipse(350, 190, 20, 20);
  
}

void body() {
  
  //arms
  stroke(255, 255, 51);
  strokeWeight(30);
  line(280, 320, 220, 400);
  stroke(255, 255, 51);
  strokeWeight(30);
  line(220, 400, 200, 530);
  
  stroke(255, 255, 51);
  strokeWeight(30);
  line(420, 330, 470, 400);
  stroke(255, 255, 51);
  strokeWeight(30);
  line(470, 400, 490, 530);
  
  //neck
  stroke(255, 255, 51);
  strokeWeight(9);
  line(350, 270, 350, 290);
  
  //T-shirt
  fill(0,0,0);
  noStroke();
  rect(275, 290, 150, 250, 15);
  
  //pants
  
  fill(0,76,153);
  quad(275, 515, 270, 820, 340, 820, 350, 515);
  fill(0,76,153);
  quad(350, 515, 355, 820, 425, 820, 425, 515);
  
  fill(102,51,0);
  rect(270, 515, 160, 20);
  
  stroke(255, 255, 51);
  strokeWeight(30);
  line(290, 835, 320, 835);
  line(375, 835, 405, 835);


  

  //sleeves
  noStroke();
  fill(0,0,0);
  triangle(285, 290, 240, 330, 275, 360);
  fill(0,0,0);
  triangle(415, 290, 410, 370, 460, 330);
}

void ground() {
  noStroke();
  fill(0, 0, 0);
  rect(0, 700, 700, 900);
}

Within the process of creating my self portrait , I struggled with a lot of different things ranging from simple writings  and ordering of codes to changing various colors, shapes and sizes of different figures, and many more. I have absolutely zero experience with coding, therefore I was only able to create this five-year-old-like-drawing of mine. However, I hope to be able to get better at coding in the future and it would be really appreciated if any of you guys could give me tips or recommendations for websites that could help me with my coding skills so  I wouldn’t  have  to  look  like  a snowman.

int backgroundColor = 255;
int x=200; 
int y=200;
float a= 100;
float b=100;
float start=180;

void setup(){
  size(500,600);
  x=width/2;
  y=height/2;}

void draw() {
  background(backgroundColor);
 //face shape 
ellipse(250, 320, 400, 400);

//nose
triangle(250,380,200,380,250,330);
//spectacles
rect(100,275,100,60);
rect(300,275,100,60);
line(100, 300,50,300);
line (400, 300, 450, 300);
 // Lips 
 pushStyle();
  fill(210, 153, 133);
  arc(250, 400, 80,80,0, PI, PIE);  
  popStyle();
  
// Eye shape 
ellipse(150, 300, 60, 30);
ellipse (350, 300, 60, 30);



//eye color
pushStyle();
fill(0);
ellipse(150, 300, 20, 20);
ellipse (350, 300, 20, 20);
popStyle();
//eyebrow
pushStyle();
fill(0);
rect(100,250,70,20,7);
rect(320,250,70,20,7);
popStyle();


}

 

For the first assignment in this course, we each had to make a self-portrait using Processing. The way I see it, self-portrait shows the way you want yourself to be presented to other people rather than how you precisely look on the exterior. Having grown in numerous different places I call home as a third-culture kid, I have always perceived myself as someone who has a spectrum of colors. Adapting was something that I grew accustomed to almost as if I became a chameleon. So even in this project I have incorporated an effect where my cartoon-like self-portrait is bouncing around the screen and, at the same time, changing colors (when a mouse is pressed). The change in color does not only happen in one area of the frame but rather everywhere in different variations. So when the background color changes, the color of my face, the color of my pupils, and the color of my name all change asynchronously. All of these animations were put into place so that I could illustrate how I adapt to the capricious environment. The following are the video of my animated self-portrait and code:

//David's self portrait

float x;
float y;
int xspeed = 2;
int yspeed = 2;
float c1 = random(255);
float c2 = random(255);
float c3 = random(255);

void setup(){
  size(500, 300);
  x = width/2;
  y = height/2;
}

void draw(){
  background(c1, c2, c3);
  stroke(10);
  noFill();
  if (x >= width-80 || x<=50) {
    xspeed *= -1;
  }
  if (y >= height-80 || y<=50) {
    yspeed *= -1;
  }
  x += xspeed;
  y += yspeed;
  
  face(x,y);
}

void face(float x, float y){
  //face
  fill(c3,c2,c1);
  ellipse(x+15, y+15, 130, 150);
  
  //eyes
  fill(255);
  ellipse(x-10, y, 30, 20);
  ellipse(x+40, y, 30, 20);
  
  //pupils
  fill(c1,c2,c3);
  ellipse(x-10, y, 10, 10);
  ellipse(x+40, y, 10, 10);
  
  //mouth
  fill(c3,c1,c2);
  arc(x+15, y+40, 80, 50, 0, 3.14);
  line(x-25, y+40, x+55, y+40);
  
  //eyebrows
  noFill();
  arc(x+40, y-10, 30, 20, 3.14+0.3, TWO_PI-0.3);
  arc(x-10, y-10, 30, 20, 3.14+0.3, TWO_PI-0.3);
  
  //ears
  fill(c3,c2,c1);
  arc(x-50, y+10, 30, 20, HALF_PI, PI+2*QUARTER_PI);
  arc(x+80, y+10, 30, 20, PI+2*QUARTER_PI,TWO_PI+2*QUARTER_PI); 
  
  //nose
  arc(x+15, y+20, 30, 15, HALF_PI, PI+2*QUARTER_PI);
  
  //NYU Cap
  fill(101, 101, 252);
  arc(x+15, y-25, 110, 100, 3.14, TWO_PI);
  fill(101, 101, 252);
  line(x+70, y-25, x+100, y-25);
  
  //text
  textSize(25);
  fill(c2,c1,c3);
  text("NYU", x-10, y-40);
  fill(c1,c3,c2);
  text("David", x-16, y+120);
}

void mousePressed () {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    c1 = random(255);
    c2 = random(255);
    c3 = random(255);
  }
}

 

I struggled at first to actually start doing anything that is meaningful because I like to plan things ahead and foreseeing how the coding will go is quite difficult. I took inspiration from my Snapchat Bitmoji, knowing it’s just for ideas not copying.

I made some quick research on Processing’s Reference pages and decided that the beginShape() might be a very suitable method for drawing the face, hair, and eyes (basically figures I thought would require complex drawing to be perfected).

I tried out the function and this is what I was able to do before realizing that the shape of the face can just be an ellipse for the sake of simplicity and because beginshape() will take a very long time to draw a curved shape.

 

 

 

 

 

 

 

I then started to master the small operations that I code for each part of the portrait, and I drew a very detailed eye which contains the eye itself, the brown iris, the white sclera, the pupil, and dark brown eyebrows.

Even though the eye was on point, I realized that making the portrait realistic will just make it weird and ugly so the rest of the face should just be more cartoon-like.

I drew a simple nose with just one outline from the right and some detail at the bottom, and I made a very simplistic but appropriate slightly-smiling mouth. The main function used was the “arc” function and I also struggled at first to understand how the radian angles calculations were carried out but I got things right simply by very long trial and error.

After completing most of the face, I decided to draw the hair using the beginShape() function which I struggled with earlier, and it turned it to be extremely useful for irregular shapes. By now, I was almost blindly typing numbers and automatically making calculations of dimensions and distances.

I made the ears using another arc function, and I decided to make the background a still photo of something that represents me; squash. I played squash for 5 years and even though I stopped playing years ago, I adore the sport and still play for fun until today.

Lastly, I decided to make use of the clicking of mouse function in a simple creative way where if you click the mouse the colors of the eyes and the clothing randomly change simultaneously.

 

//Assignment 1 Yahia Beethoven Tayel self portrait

//Initializing the variables before any function
//In case the image doesn't load
int backgroundColor = 255;
//dimesnions of the portrait
float x;
float y;

//randomized variables for the color of the clothes when mouseclicked
float r = 0;
float g = 0;
float b = 0;

float r1 = 96;
float g1 = 49;
float b1 = 1;

//setting up the plane on which the portrait is drawn
void setup() {
  size(500, 640);
  x = width/2;
  y = height/2;
  PImage img;
  img = loadImage("squash_background.PNG");
  img.resize(500, 640);
  background(backgroundColor);
  background(img); 
}  

//the main draw function that makes the face
void draw() {

 
//draws neck
fill(241, 194, 125);
stroke(205, 133, 63);
rect(x - 43, y+180, 90, 60);

//draws the face
strokeWeight(3);
fill(241, 194, 125);
stroke(205, 133, 63);
ellipse(x, y, 6.5*x/5, 7*y/6);

//draws the hair
strokeWeight(3);
fill(45, 23, 13);
stroke(0);

beginShape();
vertex(x/4 + 24, y - 25);
vertex(3*x/8, 2*y/3);
vertex(x/2, y/2.3);
vertex(5*x/8, y/3);
vertex(3*x/4, y/3.75);
vertex(7*x/8, y/4.45);
vertex(x, y/4.5);
vertex(x+10, y/4.7);
vertex(9*x/8, y/4.45);
vertex(5*x/4, y/4);
vertex(11*x/8, y/3);
vertex(3*x/2, y/2.3);
vertex(13*x/8, 2*y/3.2);
vertex(x+3*x/4 - 24, y - 25);
vertex(13*x/8 - 20, 2*y/3 +20);
vertex(3*x/2 - 30, y/2.3 +55);
vertex(11*x/8 - 5, y/3 +60);
vertex(5*x/4 +15, y/2.3 +55);
vertex(11*x/8 - 10, y/3 +50);
vertex(9*x/8 +15, y/2.3 +25);
vertex(9*x/8 - 15, y/2.3 +35);
vertex(x- 15, y/2.3 +33);
vertex(7*x/8, y/2.3 +30);
vertex(5*x/8 +30, y/2.3 +25);
vertex(5*x/8 +15, y/2.3 +20);

vertex(x/2, 2*y/3);
endShape(CLOSE); 


//draws the eyes
strokeWeight(4);
fill(255);
stroke(0);

ellipse(3*x/4, 4*y/5, x/3.5, y/8);
ellipse(5*x/4, 4*y/5, x/3.5, y/8);

//draws the iris
strokeWeight(3);
fill(r1, g1, b1);
stroke(0);

ellipse(3*x/4, 4*y/5, x/7, y/9);
ellipse(5*x/4, 4*y/5, x/7, y/9);

//draws the pupil

fill(0);
stroke(0);

ellipse(3*x/4, 4*y/5, x/13, y/15);
ellipse(5*x/4, 4*y/5, x/13, y/15);

//draws the white spot
strokeWeight(1);
fill(255);
stroke(255);

ellipse(3*x/4 + x/38, 4*y/5 - y/25, x/25, y/40);
ellipse(5*x/4 + x/38, 4*y/5 - y/25, x/25, y/40);

//draws the eyebrows
strokeWeight(1);
fill(43, 29, 14);
stroke(43, 29, 14);
arc(3*x/4 - 3, 4*y/5-y/10, x/3, 13, HALF_PI+QUARTER_PI + 0.4, TWO_PI+QUARTER_PI/2 +0.4);
arc(5*x/4 -3 , 4*y/5-y/10, x/3, 13, HALF_PI+QUARTER_PI, TWO_PI+QUARTER_PI/2 - 0.4);

//draws the nose
noFill();
stroke(205, 133, 63);
strokeWeight(4);

//arc(x+12, 5*y/6 + 10, 7, y/2.5, 0, HALF_PI);
arc(x-18, 5*y/6 + 75, 7, y/2.5, PI, PI+QUARTER_PI+0.5);
//took the two nostrils idea from aysha of this class
arc(x - 23, y+30, 21, 21, HALF_PI-QUARTER_PI/3, PI+2*QUARTER_PI);
arc(x+16, y+30, 21, 21,  -HALF_PI, HALF_PI+QUARTER_PI/2);
arc(x-3, y+40, 30, 21,  0, PI);

//draws the mouth
noFill();
stroke(0);
arc(x, y+95, 95, 21,  0, PI);
strokeWeight(7);
point(x+47.5, y+95);
point(x-47.5, y+95);

//draws the ears 
strokeWeight(3);
fill(241, 194, 125);
stroke(205, 133, 63);

arc(x/4 + 26, y - 10, x/4, y/3.5, HALF_PI, PI+HALF_PI );
arc(x+3*x/4 - 26, y - 10, x/4, y/3.5, -HALF_PI, PI-HALF_PI);


//draws shoulders
fill(r, g, b);
stroke(0);
beginShape();
vertex(0, 2*y);
vertex(x/4, y+240);
vertex(x+3*x/4, y+240);
vertex(2*x, 2*y);
endShape();

} 
//functions that are called when the mouse is clicked to randomly change the colors of both the eyes and the clothes simultaneously
void mousePressed() {
   r = random(255);
   g = random(255);
   b = random(255);
   
   r1 = random(255);
   g1 = random(255);
   b1 = random(255);
}

 

I learned a lot through this simple assignment and I look forward to future assignments which will help develop my skills in programming much more.

 

 

size(800, 800);
background(0,25,0);

//hair
fill(25,2,0);
square(150, 150, 500);
//fringe

//head
fill(245,245,220);
circle(400,400,400);
noFill();

//neck
stroke(245,245,220);
fill(245,245,220);
rect(340,590, 110, 150, 7);

//fringe
stroke(25,2,0);
fill(25,2,0);
triangle(150,350,450,200,500,230);
triangle(150,350,300,200,450,200);
noFill();
noStroke();

// outer eye
stroke(0);
fill(255);
ellipse(325,350,60,40);
ellipse(470,350,60,40);
noFill();
noStroke();

// green part of eye
stroke(0);
fill(0,60,70);
circle(325,350,25);
circle(470,350,25);
noFill();
noStroke();

// puipl
stroke(0);
fill(0,0,0);
circle(325,350,5);
circle(470,350,5);
noFill();
noStroke();

//mouth
stroke(255,192,203);
fill(255,192,203);
triangle(360,510,380,500,400,510);
triangle(400,510,420,500,440,510);
triangle(360,510,400,530,440,510);
noFill();
noStroke();

//nose
stroke(217,179,130);
fill(217,179,130);
circle(390,436,14);
circle(420,436,14);
noFill();
noStroke();

//shirt or shoulders
fill(100,0,50);
rect(150,680,510, 200);
noFill();