Month: March 2018

For this project I chose a piece of graphic art from recodeproject.com, the website that Pierre suggested. This is actually my third attempt at recreating a picture, as the first two times I would get about 40 lines of code in and then decide that to accurately recreate the picture would just be too difficult.

Here’s the art that I found:

and Here’s what my program creates:

 

Here’s the code:

 

void setup() {
  size(800, 800);
  noFill();
  mousePressed();
}

void draw() {
}
void mousePressed() {
  background(255);
  int[] small = {20, 5};
  int[] medium = {50, 3};
  int[] large = {100, 3};
  for (int i = 0; i<int(random(100, 300)); i++) {
    int t = millis()%11;
    if (t < 5) {
      strokeWeight(small[1]);
      rect(int(random(0, width-small[0])), int(random(0, height-small[0])), small[0], small[0],3);
    } else if(t >= 5 && t<=9) {
      strokeWeight(medium[1]);
      rect(int(random(0, width-medium[0])), int(random(0, height-medium[0])), medium[0], medium[0],3);
    } else {
      strokeWeight(large[1]);
      rect(int(random(0, width-large[0])), int(random(0, height-large[0])), large[0], large[0],3);
    }
  }
  for (int i = 0; i<height-large[0]; i+=int(random(40,60))) {
    for (int j = 0; j<width-large[0]; j++) {
      if (int(random(1, 100)) == 5) {
        strokeWeight(small[1]);
        rect(j, i, small[0], small[0], 3);
      }
      if (int(random(1, 500)) == 5) {
        strokeWeight(medium[1]);
        rect(j, i, medium[0], medium[0], 3);
      }
      if (int(random(1, 700)) == 5) {
        strokeWeight(small[1]);
        rect(j, i, large[0], large[0], 3);
      }
    }
  }
  for (int i=0; i<width-large[0]; i+=int(random(40,60))) {
    for (int j = 0; j<height-large[0]; j++) {
      if (int(random(1, 100)) == 5) {
        strokeWeight(small[1]);
        rect(i, j, small[0], small[0], 3);
      }
      if (int(random(1, 500)) == 5) {
        strokeWeight(medium[1]);
        rect(i, j, medium[0], medium[0], 3);
      }
      if (int(random(1, 700)) == 5) {
        strokeWeight(large[1]);
        rect(i, j, large[0], large[0], 3);
      }
    }
  }
  
  
  
}

 

EDIT: I just updated the post. I initially didn’t notice in the picture that a lot of the squares, while seemingly randomly placed, are actually placed in a horizontal or vertical lines. So i added some logic to place some of the squares in horizontal and vertical lines.

For this project, I decided to try to recreate this piece:

It was created in 1976 and I really liked the consistent pattern of the lines and circles, rotated slightly differently in each one.

I recreated this design, not without struggle.

This is how my piece turned out:

It’s not exactly the same, my lines are more curved, but I am happy with the overall result- my own take on the piece.

The assignment this week is to recreate an old computer art design from an issue of “Computer Graphics and Art”. So the original:

Here are a few instances of my recreation of this design:

The images here don’t seem to be particularly clear, so I uploaded a video as well:

To my understanding of the original design, a few things are controlled, there are a set number of big squares that divide up the screen; all shapes are squares; the size of the smallest square in each big square are all the same; each outer square is of equal distance to its adjacent squares.

On the other hand, there are also random elements to play with, the position of the smallest square, the number of the small squares in each big square. I also added the randomness of adding the project and creator to the first instance where there is only a small square. As a result, there is a possibility in which no project and creator name appears in the image, as in instance 3 listed above. Below is the code I used:

---

int sqrLength = 180; // the length of each big square
int x,y; // coordinates of each smaller square
int numLines; // how many small squres in big square
int counter = 0; // how many times square with only 1 squre inside appear

fullScreen();

for(int i =0; i<width; i=i+sqrLength){ //draw big squares
for(int j=0; j< height; j=j+sqrLength){
rect(i,j,sqrLength,sqrLength);
}
}

noFill();

for(int i =0; i<height/sqrLength; i++){ //draw vertically
for(int j=0; j<width/sqrLength; j++){ //draw horizontally

numLines = int(random(0,13));
x = int(random(30+180*j,120+180*j));
y = int(random(30+180*i,120+180*i));

if(numLines == 0){
counter++;
if(counter==1){
textSize(20);
fill(0, 102, 153);
text(“RANDOM”, x, y);
pushMatrix();
translate(x,y);
rotate(HALF_PI);
text(“SQUARES”,0,-33);
rotate(HALF_PI);
text(“ROSS”,-30,-33);
rotate(HALF_PI);
text(“JIANG”,-30,-5);
popMatrix();

noFill();
}
}

float xIncre = float(x-180*j)/(numLines+1); //the increment value of each small square
float yIncre = float(y-180*i)/(numLines+1);

for (int k = 0; k<numLines+1; k++){ //draw small squres
float lengthIncre = (float((150-(x-180*j)))/(numLines+1))*k+xIncre*k+30;
rect(x-xIncre*k,y-yIncre*k,lengthIncre,lengthIncre);
}
}
}

 

I found reading about the history of the media, new and old, quite interesting. It is also fun to learn about different aspects that define a so-called “new media” and “interactivity”. The Analytical Engine has helped Jacquard loom to achieve universality. Everything( photo, video, text etc. ) is turned into just another set of data that can be easily manipulated due to new media’s modularity.

I found the concept of variability in the reading particularly interesting. Even though now we have greater power than ever to modify what we want to see since everything is programmable. However,a lot of times someone else decides what we see based on our customs and internet history. New media now have the power ranging from selling you stuff you didn’t realize you needed to swing the major elections. That’s why it is imperative to understand new media and not to be manipulated by it.

         

void setup()
{
size(600, 700);
}

void draw()
{
background(0, 0, 0);

//hair
noStroke();
fill(85, 40, 40);
arc(300, 300, 370, 420, radians(180), radians(360));
strokeWeight(30);
stroke(85, 40, 40);
line(129, 300, 119, 650);
line(162, 300, 152, 650);
line(195, 300, 188, 650);
line(230, 300, 224, 650);
line(370, 300, 378, 650);
line(404, 300, 412, 650);
line(437, 300, 446, 650);
line(470, 300, 480, 650);

//body
noStroke();
fill(229, 204, 255);
arc(300, 700, 500, 400, radians(-180), radians(0));
fill(178, 102, 255);
arc(300, 500, 130, 130, radians(5), radians(175));

//neck
noStroke();
fill(255, 225, 190);
rect(250, 300, 100, 200);
ellipse(300, 500, 100, 100);

//ears
noStroke();
fill(255, 225, 190);
ellipse(150, 300, 50, 50);
ellipse(450, 300, 50, 50);
fill(245, 170, 150);
arc(150, 300, 35, 30, radians(90), radians(270));
fill(255, 225, 190);
arc(150, 300, 30, 25, radians(90), radians(270));
fill(255, 170, 150);
arc(450, 300, 35, 30, radians(-90), radians(90));
fill(255, 225, 190);
arc(450, 300, 30, 25, radians(-90), radians(90));

//face
noStroke();
fill(255, 225, 190);
ellipse(300, 300, 300, 350);

//mouth
strokeWeight(5);
stroke(205, 115, 115);
line(250, 400, 350, 400);
stroke(205, 115, 115);

//mouth open
if (mouseX > 245 && mouseX < 355)
{
if (mouseY > 395 && mouseY < 405)
{
fill(205, 115, 115);
ellipse(300, 400, 100, 100);
noStroke();
fill(255, 255, 255);
arc(300, 450, 100, 100, radians(210),radians(330));
arc(300, 400, 105, 105, radians(30), radians(150));
}
}

//eyebrows
strokeWeight(8);
stroke(85, 40, 40);
line(200, 230, 255, 230);
line(345, 230, 400, 230);

//eyes
noStroke();
fill(255, 255, 255);
ellipse(230, 280, 60, 60);
ellipse(370, 280, 60, 60);
fill(85, 40, 40);
ellipse(230, 280, 40, 40);
ellipse(370, 280, 40, 40);
noStroke();
fill(0, 0, 0);
ellipse(230, 280, 20, 20);
ellipse(370, 280, 20, 20);
fill(255, 255, 255);
ellipse(225, 272, 10, 10);
ellipse(365, 272, 10, 10);
}

“It means that each performance of such music piece is unique, as interesting to its composer as to others listening”  — John Cage

I enjoyed his talk primarily because I got the chance to see so many different projects using the same concept of balancing chaos and order in coding. The biggest takeaway I had was how certain controlled randomness can make a project predictably unpredictable. I will certainly use this concept in my own project this coming weekend.

I was particularly intrigued by the grid project, in which each dot on the grid is off by an arbitrary amount of pixels. But at what point does the grid stop being a grid? At what point does the randomness outweighs the order and render the whole thing complete chaos and useless? All of this are very subjective and even the randomness can tell a lot about the designer him/herself

Here is the self-portrait:

code:

fill (#F5D8B2);
rect (150, 100, 300, 200);

stroke (#F5D8B2);
ellipse (300, 300, 310, 400);

stroke(0, 0, 0);
fill(#FFFEFC);
ellipse(230, 250, 75, 25);
ellipse(375, 250, 75, 25);

stroke(0, 0, 0);
fill(0, 0, 0);
ellipse(230, 250, 25, 25);
ellipse(375, 250, 25, 25);

line(300, 325, 300, 300);
line (300, 325, 320, 330);

stroke (0,0,0);
fill (#FCE3FA);
ellipse(300, 400, 75, 50);
stroke(#C90003);
fill(#C90003);
ellipse( 300, 415, 50,25);

stroke(#3B2512);
fill(#3B2512);
rect(190, 200, 90, 20);
rect(330, 200, 90, 20);

stroke (#BC2427);
fill(#BC2427);
ellipse (250,100,400,100);

stroke (#7C1517);
line (100, 150, 100, 600);
line (400, 500, 400, 600);
line (530, 100, 530, 400);
stroke(#E54346);
line(500, 150, 500, 500);
line (130,100, 130, 600);
line (230, 500, 230, 600);

I did a lot of layering on simple shapes and tried to make the overall shape of each element slightly more complex, for example my face is a square followed by an ellipse to form the slightly awkward cheeks. One of the bigger struggles I had was with the eyebrows and nose as I found it hard to figure out the angles of each line. Other than that it was just time consuming, but relatively fun, work.

For my selfportrait, I wanted to go a bit more abstract in my design. It is truly, Picasso inspired.

This was a lot of fun to make, as I went really colorful and used a lot of abstract shapes.

Here is a photo that inspired me.

 

And so, my picture looks like this:

Here is my code:

void setup(){
fullScreen();
}
void draw(){

//peach color of skin with full opacity
//fill(240,220,200,255);
//yellow color face
fill(255, 204, 0, 20);

//draw the face outline
ellipse(660,425, 560, 620);

//forhead color
fill(255, 92, 51, 20);
//draw forehead
rect(397, 110, 528, 200);

//get rid of the color
noFill();

//top outline eye
bezier(488, 348, 518, 318, 548, 298, 600, 373);
//bottom outline eye
bezier(490, 352, 522, 387, 552, 377, 602, 377);

//get rid of the lines
//——————————–EVERYTHING PAST THIS WILL HAVE NO OUTLINE——————————————————
noStroke();

//idk what color this is
// fill(0,220,200,20);

//white color for eyes with full opacity
fill(255,255,255,255);

//inner eyeball that is now white; top part
bezier(490, 350, 520, 320, 550, 300, 600, 375);
//inner eyeball that is now white; bottom part
bezier(490, 350, 520, 385, 550, 375, 600, 375);

//color for the iris as dark purple
fill(102,0,102,220);

//draw the iris
ellipse(543, 350, 52, 48);

//(for the eyeball/pupil) black with full transparency
fill(0,0,0,255);

//draw the pupil
ellipse(543, 348, 20, 20);

//——————————–OUTLINE——————————————————
//sets the stroke to black /line for the iris details and iris outline
stroke(0);
noFill();

//outline for the iris
ellipse(543, 350, 53.5, 48);

noStroke();
//——————————–EVERYTHING PAST THIS WILL HAVE NO OUTLINE——————————————————

//sets the color to white for glare
fill(255,255,255,255);

//draw glare
ellipse(551, 342, 14, 11);

//sets color for eyebrows
fill(77, 25, 51);

//draws the left eyebrow
bezier(445,290, 490, 275, 570, 265, 625, 310);

//sets the red ellipse shadow for eye under brow
fill(204, 0 ,0, 50);

//draws the ellipse under the eye
ellipse(518, 352, 245, 150);

//sets the color for the nose
fill(255, 102, 102, 255);

//draws the triangle for the nose
//rect(635, 395, 55, 80, 3, 6, 12, 18);
triangle(600, 500, 720, 500, 665, 340);

//nose tip color
fill(255, 179, 128, 200);

//draw the nose tip
ellipse(663,485, 60,60);

//left nostril color
fill(230, 92, 0, 50);

//draw left nostril
ellipse(630, 500, 60,60);

//draw right nostril
ellipse(690, 500, 60, 60);

//nose hole
fill(0,0,0, 100);

//draw the holes
ellipse(630, 502, 20,18);
ellipse(690, 502, 20,18);

//lip color
fill(153, 0, 153, 100);

//draw the top lip
bezier(662, 570, 700, 545, 710, 545, 740, 570);
bezier(585, 570, 615, 545, 625, 545, 662, 570);

//draw the bottom of the lip
bezier(585, 570, 640, 630, 690,630, 740, 570);

//——————————–OUTLINE——————————————————
stroke(0);

//part of the mouth
line(585, 570, 740, 570);

noFill();

noStroke();
//——————————–EVERYTHING PAST THIS WILL HAVE NO OUTLINE——————————————————

//color for the hair
fill(102, 0, 41, 120);

//begin the hair
bezier(670, 150, 740, 250, 950, 380, 810, 470);

bezier(770, 150, 840, 250, 1050, 380, 910, 470);

//contrast color hair
fill(204, 0, 204, 90);

//hair multistrand1
bezier(670, 150, 700, 350, 1050, 380, 910, 470);

//hair multistrand2
bezier(700, 150, 770, 250, 980, 380, 840, 470);

//color for the hair (again)
fill(102, 0, 41, 120);

bezier(720, 150, 790, 250, 1000, 380, 860, 470);

//contrast color hair
fill(204, 0, 204, 90);

bezier(740, 150, 910, 350, 1000, 380, 860, 470);

//color for the hair
fill(102, 0, 41, 120);

//begin the hair
bezier(420, 250, 500, 80, 800, 70, 900, 250);

//contrast color hair
fill(204, 0, 204, 90);
bezier(440, 250, 500, 100, 800, 120, 900, 250);

//color for the hair
fill(102, 0, 41, 120);

//hair multistrand3
bezier(700, 150, 780, 350, 800, 380, 910, 470);

ellipse(880, 270, 50,50);
ellipse(880, 270, 50,50);

//background fill
fill(255, 255, 204, 5);
ellipse(1,1,500,500);
rect(100, 100, 500,500);
ellipse(900,900, 700, 400);
rect(40, 550, 400,300);

fill(255, 153, 255, 5);
ellipse(800,800,700,500);
rect(900, 100, 500,500);
rect(5, 550, 800,800);

fill(153, 153, 255,5);
ellipse(660,20, 700, 600);
rect(300,50, 100, 300);
rect(3, 300, 200, 400);
ellipse(1250, 450, 600, 700);

fill(153, 255, 204, 5);
rect(1000,3,700, 300);
ellipse(120, 80, 400, 600);
ellipse(1300, 800, 500, 500);

fill(204, 255, 153, 5);
rect(50, 1000, 500, 500);
}

My artistic abilities are, let’s just say extremely lacking. So I drew the best cartoon-looking me and decided to add some interactivity to make up for it.

To make the eyes track the cursor, I used the arctan example from processing. It uses the arctan function to calculate the angle for each eye and rotates it accordingly. And in continuation of the trend of my previous projects, there’s a scream incorporated into it when you click on the face.

code:

import ddf.minim.*;

Minim minim;
AudioPlayer player;
Eye left, right;

void setup() {
  size(400, 400);
  noStroke();
  left = new Eye(135, 150, 40);
  right = new Eye(265, 150, 40);
  minim = new Minim(this);
  player = minim.loadFile("screaming.mp3");
}

void draw() {
  background(100, 100, 100);
  fill(206, 150, 124);
  strokeWeight(1);

  ellipse(200, 200, 280, 350);

  //Hair
  line(200, 10, 200, 30);
  line(190, 10, 200, 30);
  line(180, 10, 200, 30);
  line(170, 10, 200, 30);

  //nose:
  ellipse(200, 210, 30, 30);

  // smile/frown
  if (player.isPlaying()) {
    fill(0, 0, 0);
    ellipse(200, 290, 80, 80);
    fill(204, 71, 71);
    ellipse(200, 305, 40, 40);
  } else {
    arc(200, 270, 80, 80, 0, PI);
  }
  noFill();
  //arc(200, 290, 80, 80, PI, TWO_PI);


  //glasses:
  stroke(0, 0, 0);
  strokeWeight(4);
  rect(100, 115, 70, 70);
  rect(230, 115, 70, 70);
  line(170, 150, 230, 150);
  line(100, 150, 73, 130);
  line(300, 150, 327, 130);

  //new eyes:
  left.update(mouseX, mouseY);
  right.update(mouseX, mouseY);
  left.display();
  right.display();
}

void mousePressed() {
  float x = sqrt(sq(mouseX-200)+sq(mouseY-200));
  if (x<=173) {
    player.rewind();
    player.play();
  }
}

class Eye {
  int x, y;
  int size;
  float angle = 0.0;

  Eye(int tx, int ty, int ts) {
    x = tx;
    y = ty;
    size = ts;
  }

  void update(int mx, int my) {
    angle = atan2(my-y, mx-x);
  }

  void display() {
    pushMatrix();
    translate(x, y);
    fill(255);
    ellipse(0, 0, size, size);
    rotate(angle);
    fill(0);
    ellipse(size/4, 0, size/2, size/2);
    popMatrix();
  }
}

and the screaming file:

For this project I was rather unexcited by the idea of drawing a very low resolution image poorly, and to produce something actually interesting would require a lot of tedious measuring, or so I thought …

import java.io.File;
import java.io.IOException;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
PImage img;
BufferedImage bimage;
File f;
int[][] data= new int[1367][1367];
int[][] rdata= new int[1367][1367];
int[][] gdata= new int[1367][1367];
int[][] bdata= new int[1367][1367];
void setup(){
  size(456,456);
  img= loadImage("img.jpg");
  bimage= null;
  f= null;
  convertImage();
  noStroke();
}
void convertImage(){
  try{
    
    f = new File("img.jpg");
    System.out.println(f);
    bimage = new BufferedImage(img.width, img.height, BufferedImage.TYPE_INT_ARGB);
    bimage = ImageIO.read(f);
    for(int x= 0; x< img.width; x++){
      for(int y= 0; y< img.height; y++){
        int rgb= bimage.getRGB(x,y);
        int red = (rgb >> 16) & 0xFF;
        int green = (rgb >> 8) & 0xFF;
        int blue = rgb & 0xFF;
        data[x][y]=rgb;
        rdata[x][y]=red;
        gdata[x][y]=green;
        bdata[x][y]=blue;
      }
    }
  }
  catch(IOException e){
  }
}
void draw(){
  int param= 18;//for best results this is a multiple of 3
  for(int x= 0; x<img.width; x+=param){
    for(int y=0; y<img.height; y+=param){
      int red= 0;
      int green= 0;
      int blue= 0;
      for(int xacc= x; xacc<img.width&&xacc<(param+x); xacc++){
        for(int yacc= y; yacc<img.height&&yacc<(param+y); yacc++){
          red+=rdata[xacc][yacc];
          green+=gdata[xacc][yacc];
          blue+=bdata[xacc][yacc];
        }
      }
      fill(red/(param*param),green/(param*param),blue/(param*param));
      rect(x/3,y/3,(x+param)/3,(y+param)/3);
    }
  }
      
        
}

What I did instead was read in my profile picture from facebook, convert it into arrays of the rgb values, and draw squares with the average value of certain blocks. I can manipulate the block sizes to change the level of pixilation …(side lengths of 3,6,and 10)

And make even more fun changes, like negative and swapping colors(blue and green in this case)