Author: Zharmakhan Nurkhanuly

THE INSPIRATION:

I’m terrified of Instagram’s algorithm to show me exactly what I’ve been looking for. That’s how I found this guy whose artworks are all in one fashion, blue, white, and kinetic words on top of distorted pictures. This technique has been implemented a lot for ads, campaigns thus it’s certainly a stylish way to represent any message to an audience.

THE IDEA:

Bostandyq means freedom in the Kazakh language. For my assignment, I was very much inspired by Tim and decided to use this chance to convey a message about how political prisoners rarely get their fair share of justice, although justice was what they fought for. In the artwork, it’s metaphorical how this word gets distorted whenever you try to cursor on it, it gets separated, spread out, and almost invisible at some parts, which also represent how freedom became a property of those above in government and now plays a catch-me-if-you-can game with accused of political opinions.

THE EXECUTION:

I’ve used the copy function to translate a region of pixels from one to another area of the window and it copies a region of pixels from a source image into the destination.  While the copy image does translate part of the image to the other, iterating it with sin function makes it move, well at least imitate the movement of a horizontal wave.

DIFFICULTIES:

Since the graphics were of the same dimension and had the same function, three texts were overlapping on top of each other. Before that, I only had a code where it says “copy(pg, sx, sy, sw, sh, dx, dy, dw, dh); copy(pg1, sx, sy, sw, sh, dx, dy, dw, dh);copy(pg2, sx, sy, sw, sh, dx, dy, dw, dh);”  one after the other and as a result, the last one would only show since processing reads it from top to bottom and the last one was closing the view of two previous graphics. I resolved this issue by putting it all under for loop, where each graphics gets its time to shine under if condition with the implementation of random for the condition.

THE CODE:

PGraphics pg;
PGraphics pg1;
PGraphics pg2;
PFont font;

void setup() {
  font = createFont("Courier", 600);
  size(1600, 800, P2D); //renderer should be defined
  pg = createGraphics(1600, 800, P2D);
  pg1 = createGraphics(1600, 800, P2D);
  pg2 = createGraphics(1600, 800, P2D);
}

void draw() {
  background(0);
  
  pg.beginDraw();
  pg.background(#2103a8);
  pg.fill(255);
  pg2.fill(#F9F9F9);
  pg.textSize(300);
  pg.pushMatrix();
  pg.translate(width/2, height/2-300);
  pg.textAlign(CENTER, CENTER);
  pg.text("bos", 0, 0);
  // text 1
  
  pg.popMatrix();
  pg.endDraw();
  
  pg1.beginDraw();
  pg.background(#2103a8);
  pg2.fill(#F9F9F9);
  pg.textFont(font);
  pg1.textSize(300);
  pg1.pushMatrix();
  pg1.translate(width/2, height/2-100);
  pg1.textAlign(CENTER, CENTER);
  pg1.text("tan", 0, 0);
  //text 2
  
  pg1.popMatrix();
  pg1.endDraw();
  
  pg2.beginDraw();
  pg.background(#2103a8);
  pg2.fill(#F9F9F9);
  pg.textFont(font);
  pg2.textSize(300);
  pg2.pushMatrix();
  pg2.translate(width/2, height/2+150);
  pg2.textAlign(CENTER, CENTER);
  pg2.text("dyq", 0, 0);
  pg2.popMatrix();
  pg2.endDraw();
  //text3


  int tilesX = 12;
  int tilesY = 12;

  int tileW = int(width/tilesX);
  int tileH = int(height/tilesY);

  for (int y = 0; y < tilesY; y++) {
    for (int x = 0; x < tilesX; x++) {
      //creating a table

      // WAVE
      int wave = int(sin((frameCount + ( x*y )) * 0.05) * 200);

      // SOURCE
      int sx = x*tileW + wave;
      int sy = y*tileH;
      int sw = mouseX;
      int sh = mouseY;


      // DESTINATION
      int dx = x*tileW;
      int dy = y*tileH;
      int dw = tileW;
      int dh = tileH;
      
      
      for (int i=0; i<random(0,4); i++){
        if (i==0){
          copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);
        }
        if (i==1){
          copy(pg1, sx, sy, sw, sh, dx, dy, dw, dh);
        }
        if (i==2){
          copy(pg2, sx, sy, sw, sh, dx, dy, dw, dh);
        }
        //to show three different text one after the other using random
      }
    }
  }
}

 

This time around I was feeling very inspired to improve on my previous week’s forest animation work. Although it did work, it didn’t work as it was intended with a background. Only after the class, I realized that I should have added for class and put all the curve inside the for loop and give a variable that would constantly instantiate on itself.

Laser show animation inspired by Art NOW. It’s mesmerizing to look at a laser show, just like fire you could stare at it endlessly. I tried to recreate the laser show by using multiple rectangles that will rotate from the center and clash between each other from different angles that would give the abstract laser-like feel.

This time, however, I tried to implement waves using sin as it reminds me of soundwaves, rotating them and doing it for rectangles would have created a unique look.

The difficulty was in aligning to the center, from the very first tries it would only be rotating over the top left corner until I remembered about the translate function to place all the rotations to happen right in the center of the screen.

Randomizing the angle for the rotate function creates a new pattern each and every time and that’s the beauty of generative art. strokeWeight(map(laser, -1, 1, 0.5,weight )); makes the lines fade out and look smooth. By putting mouseX now it is also interactive to speed up and have control over the rotating rectangles. The only backlash is it’s really difficult to control speed, I specifically don’t get why is it fast in the beginning.

float angles= random(0.1,30);// to randomize angles
float colorstroke=random(0,255); //to randomize colors
float weight=random(0.25,3); //fadeaway effect

void setup() {
  size(940,680);
  smooth();
  
}

void draw() {
  background(0);
  
  center(); //shifts 0,0 coordinates to the center
  
  float laser= sin(radians(frameCount));
  float l= laser*map(mouseX,0,height,2000,0); //rectangle waves
  
  for (int i=0; i<300; i++){
    rotate(angles);
    noFill();
    stroke(255);
    strokeWeight(map(laser, -1, 1, 0.5,weight ));
    rect(550,i+l,-550, i++ );
    
    noFill();
    stroke(colorstroke,0,colorstroke);
    strokeWeight(map(laser, -1, 1, 0.5,weight ));
    rect(550,i-l,-550, i++ );
    
    noFill();
    stroke(0,colorstroke,colorstroke);
    strokeWeight(map(laser, -1, 1, 0.5,weight ));
    rect(550,i-l/2,-550, i++ );
  }
}

void center(){
  translate(width/2,height/2);
}

 

For this assignment of the week, I had an inspiration to recreate Bob Ross’s paintings of the forest. So it’s a great mixture of tall creepy, out-of-nowhere trees and mesmerizing mountains drawn at the back with the reflection of this all being translated on the surface of the water.

Even though it’s not that tidy, I love how the shape of the tree is chaotic and saved from both up and down when you have no background set.

 

float rotate=0;
float r=0;
color forest= color(128,128,0);

void setup() {
  size(1020,640);
  colorMode(HSB,255);
  
}

void draw(){

  stroke(forest);
  
  for (float x=0; x<width; x+=1){
    point(x,height*noise(x/100, rotate));
  }
  //stroke(forest);
  //for (float x=0; x<width; x+=3){
  //  point(x,height*noise(x/200, rotate),50);
  //}
  //stroke(forest);
  //for (float x=0; x<width; x+=5){
  //  point(x,height*noise(x/300, rotate),10);
  //}
  
  rotate+=0.01;
}

 

but once you put the background to any color, it doesnt save the previous drawings of that line, which is not smth i’m looking for.

next thing i wanted to draw a river by the forest, for that i drew line instead of points and gave stroke color with 4 arguments in it, 4th one being the alpha that gives the transparance from 0 to 255.

when you have no background line of water overwrites itself and covers the previous forest lines, so it’s a clash of two.

However, when I tried to add the background it reminded me of the waves by the seashore, so lovely, soothing, and relaxing.

IMG_3625 

That’s when I decided to go with this idea of imitating sea waves on a sunny day.

float rotate=0;
float r=0;
color forest= color(128,128,0);
color water= color(100,149,237);
void setup() {
  size(1020,640);
  
  
}

void draw(){
  
  background(255,238,161); 
 

  for (float x=0; x<width; x+=1){ 
    stroke(255);
    line(x,height/2+150*noise(x/500, rotate), x, height);
  } //layer1 of wave
  for (float x=0; x<width; x+=1){  
    stroke(water);
    line(x,height/2+200*noise(x/500, rotate), x, height);
  }//layer2 of wave
 
  
  rotate+=0.01;
}

 

Before starting to code and draw geometrical shapes for my portrait I had so many crazy ideas to make the portrait abstract and artsy. I literally spent an hour trying to find some ideas from artists like Matisse, Picasso, Paul Klee. But once I started searching about many ways how to do curves and went to processing reference, I gave up my hopes on pursuing my initial idea. Not gonna lie, I’m deep down disappointed that I played safe and went with the conventional style of writing a self-portrait.

I started off coding the head shape which could potentially resemble mine. To do that, I used a combination of ellipse and rectangle with rounded angles. To escape those two figures overlapping, I got rid of the stroke line and filled them with one color.

The thing that took most of my time and effort was the eyebrows. It was a complex process of trials and errors where I used different vertexes to recreate the eyebrows. I had to use beginShape() and endShape() functions to make the vertex complete, and by putting CLOSE inside the endShape i wrapped the whole figure and connected the points together

To make a nose shape I had to use a bezier curve and learn the logistics behind creating one. Basically what I did to learn how to do it was to put random numbers as arguments first and then change the arguments to mouseX and mouseY respectively and wherever my cursor landed, I imagined the scape in mind and put it according to coordinates.

int faceCenterX= width/2;
int faceCenterY= height/2;
int faceSize= 100; //global variables

void setup() { //for smth static, initiliazing global variables 

  size(640, 460);
  faceCenterX= width/2;
  faceCenterY= height/2;
  faceSize= 150; //global variables
}
void draw() { //looping many times drawing over and over
  background(153,204,255);
  stroke(102,51,0);

  
  fill(255,229,204);
  circle(390,220,30);
  circle(390,220,18);//left ear
  circle(250,220,30);
  circle(250,220,18);//right ear
  
  noStroke();
  rect(295,310,50,50);
  rect(222,325,200,300,150);//body
  
  noStroke();
  ellipse(faceCenterX, faceCenterY, faceSize/1.07, faceSize*1.13);
  rect(faceCenterX-70, faceCenterY-95, faceSize/1.07, faceSize,100);//last argument gives round corners
   //head structure
  
  noStroke();
  fill(212,113,113);
  circle(280,400,15);
  circle(360,400,15);//breast
  fill(255,204,153);
  circle(280,400,5);
  circle(360,400,5);//breast inner circles
  
  stroke(255,204,153);
  strokeWeight(5);
  
  line(250,380,250,460);
  line(390,380,390,460);//armpits
  
  fill(212,113,113);
  strokeWeight(3);
  stroke(51,25,0);
  ellipse(faceCenterX, faceCenterY+50, 40,20);
  stroke(51,25,0);
  line(faceCenterX-20, faceCenterY+50, faceCenterX+20, faceCenterY+50);//lips
 
  noStroke();
  fill(51,25,0);
  beginShape();
  vertex(300, 200);
  vertex(300,195);
  vertex(280,195);
  vertex(270,200);
  vertex(280,198);
  endShape(CLOSE); //eyebrow left
  
  noStroke();
  fill(51,25,0);
  beginShape();
  vertex(340, 200);
  vertex(340,195);
  vertex(360,195);
  vertex(370,200);
  vertex(360,198);
  endShape(CLOSE); //eyebrow right
  
  fill(255);
  ellipse(285,210, 30,10);
  fill(0,51,51);
  circle(285,210,10);
  fill(255);
  circle(285,210,3);//eye left

  fill(255);
  ellipse(355,210, 30,10);
  fill(0,51,51);
  circle(355,210,10);
  fill(255);
  circle(355,210,3);//eye right
  fill(255,229,204);
  stroke(0,25,51);
  bezier(faceCenterX,250,340,260,285,270,faceCenterX,220);//nose
  
 
  fill(0,51,102);
  circle(270,148,25);
  circle(280,146,25);
  circle(290,144,25);
  circle(300,142,25);
  circle(310,140,25);
  circle(320,138,25);
  circle(330,136,25);
  circle(340,134,25);
  circle(350,132,25);
  circle(360,130,25);//hair structure
  
  
  bezier(faceCenterX-60,180,400,150,204,184,faceCenterX-40,140);
  bezier(faceCenterX-40,180,400,150,204,184,faceCenterX-20,140);
  bezier(faceCenterX-20,180,400,150,204,184,faceCenterX,140);
  bezier(faceCenterX,180,400,150,204,184,faceCenterX+20,140);
  bezier(faceCenterX+20,178,400,150,204,184,faceCenterX+40,140); //hair waves
  
  
  
  
}

I know that it’s our very first project in a making, so I’m very excited to learn more on how to make my 2D portrait more interactive and dynamic. I might try doing portrait and update the post once I’m done!!!💖