Recreating a Graphic Design (Processing)

I knew starting this assignment that I wanted to work with squares, because I like the type of grid pattern they can create.

I considered doing Random Squares William Kolomyjec, as shown below:

but instead I did this piece that has been done by various people. Here is the link: http://recodeproject.com/artwork/v1n4untitled-1

Untitled 1 Various

Here is my version:

I think it would have looked better if I had kept my screen smaller, as in the example piece, but I wanted mine to be full screen while still keeping the same number of rows and columns.

Here is my code:

static final int cols = 11; // as the image showed 11 columns
static final int rows = 10; // as the image showed 10 rows

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

void draw() {

rectMode(CENTER); // draws from the center to make it easier. Thank goodness for this.
strokeWeight(2);
fill(255);

int squareSize= 140;
int sizeDiff = 20;
float offsetX;
float offsetY;

for (int r = 0; r<rows; r++) // runs 10 times for 10 rows
{
for (int c = 0; c<cols; c++) // runs 11 times for 11 columns
{
offsetX = random(-5, 5);// will get a new random x each time
offsetY = random(-5, 5);// will get a new random y each time
rect(c*squareSize, r*squareSize, squareSize, squareSize); //draws the outermost squares, all the same size just in different positions
for (int n=1; n<6; n++) // runs 5 times as each square has 5 squares inside
{
rect((c*squareSize)+(n*offsetX), // takes the column/x value of my square and offsets it
(r*squareSize)+(n*offsetY), // takes the row/y value of my square and offsets it
squareSize – (n*sizeDiff), //makes the square smaller and smaller
squareSize – (n*sizeDiff));
}
}
}
}

Computer Graphics

I really struggled with this project, mainly because I chose many designs which I did not know how to replicate exactly. However, after many failures, I found a relatively simple one that I could replicate.

I found it on the website and decided to use loop and filled rectangles to make this design. Here is the code:

Here is my final product:

I struggled a lot with other attempts that required more skills such as dotted lines with assigned coordinates.

But, I’m pretty happy with what I’ve got as of right now.

Recreation of a Computer Graphic

I scrolled through the recode project website and found this image that sort of resembled an oversized tic-tac-toe board. Thought it was pretty neat so I decided I to replicate it to the best of my abilities.

This is what the original image looked like:

This is what my program produces:

This is my code:

void setup(){
size(800,800);
background(255);
stroke(0);
strokeWeight(8);
noFill();

for(int i = 0; i<10; i++){
for(int x = 0; x<10; x++){
int deter = int(random(0,2));
//rect(80*j,80*i,80,80);
if(deter==0){
line(80*x+20,80*i+40,80*x+60,80*i+40);
}else{
line(80*x+25,80*i+30,80*x+61, 80*i+56);
line(80*x+25,80*i+56,80*x+61, 80*i+30);
}
}

}
}

Romeno’s Computer Graphic Replication

So I started with looking for the easiest graphic to replicate (big mistake) and chose this one:

After starting to recreate it, I realized there were some obstacles to overcome. I needed a way to use probability to place small circles in certain areas of the screen. I started by creating an array with a bunch of 1’s and 0’s and randomly selecting an item from the array and varying the probability by changing the ratio of the 1’s to 0’s in the array. As I kept going, this seemed repetitive so I thought why not make a function that does just this and returns a boolean value of true or false based on a float argument which represents the probability. I made the probability function which is in my code below. I also realized that when I did it the changes in probability were seen as clear cut lines in the graphic so I added randomly from -20 to +20 to all the y-values for some extra randomness.

 

boolean randomProbability(float prob) {
  int outOfHundred=int(prob*1000);
 int vals[]=new int[1000];
 for (int x=0;x<1000;x++) {
   if(x<outOfHundred) {
 vals[x]=1;
   } else {
   vals[x]=0;
   }
 }
 int rand=vals[int(random(vals.length))];
 if (rand==0) {
 return false;
 } else {
 return true;
 }
 
}

void setup() { size(1200,600);background(255);fill(0);int xSize=1200; int ySize=600;
for(int x=0;x<xSize;x++){
  for(int y=0;y<ySize;y++) {
    float percent=((float(y)/float(ySize)))*100.0;
    int xN=x+int(random(5));
    int yN=y+int(random(-20,20));
    if((percent<3) && (randomProbability(0.003))) {
      ellipse(xN,yN,3,3);
    } 
    if((percent<15)&&(percent>3)&& (randomProbability(0.025))) {
      ellipse(xN,yN,3,3);
    }
        if((percent<25)&&(percent>15)&& (randomProbability(0.045))) {
      ellipse(xN,yN,3,3);
    }
        if((percent<65)&&(percent>25)&& (randomProbability(0.08))) {
      ellipse(xN,yN,3,3);
    }
    if((percent<68)&&(percent>65)&& (randomProbability(0.045))) {
      ellipse(xN,yN,3,3);
    }
    if((percent<75)&&(percent>68)&& (randomProbability(0.01))) {
      ellipse(xN,yN,3,3);
    }
        if((percent<80)&&(percent>75)&& (randomProbability(0.005))) {
      ellipse(xN,yN,3,3);
    }
      if((percent<83)&&(percent>80)&& (randomProbability(0.002))) {
      ellipse(xN,yN,3,3);
    }
  } 
}

rect(0,580,1200,600);
}

void draw() {

}

 

Recreation of a Computer Graphic

Unlike many others perhaps, I didn’t start off with a particular image that I wanted to recreate. I first resorted to doing some research on the potential functions that I could use that I could incorporate into my recreation that we may not have learned in class yet.

I found a website (http://zenbullets.com/book.php) which is basically a webpage for a book called “GENERATIVE ART: A PRACTICAL GUIDE”. I realised that many of the example projects that the author had created used the noise() function, lots of +=s and drawPoint() functions. I, therefore, started out my project by researching what these pieces of language meant.

I then chose this image to try and recreate.

I decided that it was easier for me to start with the random lines and work them out first and then layer the rectangle and lines on top, which would be the easier part. To do the background lines part, I used one of the examples that I followed in the book, but altered it so that it fit what I wanted to do.

I thought that it would be cool if I inverted the colours. The following picture is a side by side comparison of the graphic vs what I recreated.

Though I realise that the lines that I have created still look different to the image, I am happy with the results!

As a development to this recreation though I could work on making those random white splotches that don’t really have any shape to them (as seen in the original graphic). I’m assuming that they’re actually splotches because they look too thick to be the overlaps of the lines.

 

Here is the code that I used:

float xstart, xnoise;
float ystart, ynoise;
float xstartNoise, ystartNoise;

void setup() {
size(300,300);
smooth();
background(255);
noLoop();

xstart = random(10);
ystart = random(10);
}

void draw () {
background(255);

for (int y = 0; y <= height; y+=5) {
ynoise += 0.5;
xnoise = xstart;
for (int x = 0; x <= width; x+=5) {
xnoise += 0.5;
drawPoint(x, y, noise(xnoise, ynoise));
}
}

fill(0);
rect (95, 165, 10, 30);
rect (65, 165, 10, 30);
rect (95, 135, 10, 30);
rect (20, 105, 10, 30);
rect (8, 60, 15, 28);
rect (150, 135, 10, 25);
rect (40, 0, 13, 13);

stroke (255);
strokeWeight(1);
fill (255);
rect (0, 195, 300, 195);
strokeWeight(3.25);
line (0, 165, 300, 165);
line (0, 105, 300, 105);
line (0, 60, 300, 60);
line (0, 33, 300, 33);

}

void drawPoint(float x, float y, float noiseFactor) {
pushMatrix();
translate(x,y);
rotate(noiseFactor * radians(360));
stroke(0, 150);
strokeWeight(1.25);
line(0,0,8,0);
popMatrix();
}

Random Squares!

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.

Recreating a Design

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.

Random Squares

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

The original design by Bill Kolomyjec

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

instance 1
instance 2
instance 3 with no creator name

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);
}
}
}

 

Lev Manovich – Response

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.

Assignment 5 – Portrait

         

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);
}