Zee Salman-Looking Outwards-07

I was really interested in one of Stamen Designs recent data visualization projects that was set in collaboration with Victoria and Albert Museum. The project is called the Big Glass Microphone which looks at the cross or the intersection between two types of infrastructure. The machine does so by visualizing the vibrations of the structures in a five kilometer long fiber optic cable buried underneath the campus of Stanford University. The cable is mostly used for analyzing seismic waves as they pass through campus but they wanted to focus more on looking closer to activities closer them.

More of a reason I was really fascinated by this project was because it is focused on underground infrastructure. It is not visible above the basement of where they are testing at Stanford. The representation of the model shows the collected data by highlighting the pathway as well as having the pathway grow in size. I don’t really know how they came to create this code but my guess would be that they used a various amount of if statements as well as what we are learning this week, Object Oriented Programming.

This is a screenshot of the data visualization when it starts to play the stimulation.

Zee Salman- Abstract Clock-Project-06

sketch

//Zee Salman
//SECTION E
//fawziyas@andrew.cmu.edu
//SectionE
//Project 06


function setup(){
  createCanvas(460,400);
}


function draw(){ 

var s = second(); 
// controls seconds
var m = minute();
//control mintutes
var h = hour()%12;

var mappedH = map(h, 0,23, 0,width);
var mappedM = map(m, 0,59, 0,width);
var mappedS = map(s, 0,59, 0,width);
//control hours

//main backgrougnd
  background(219, 184, 255);

// outline box background
  noStroke();
  fill(246, 201, 255);
  rect(20 , 40 , 410 , 320);

//hour outline box
  rect(30 , 50 , 200 , 300);
//min outline box
  rect(250 , 50 , 100 , 300);
//sec outline box
  // strokeWeight(5);
  stroke(107, 56, 128);
  rect(370 , 50 , 50 , 300);

 
  

//seconds box
  noFill();
  stroke(107, 56, 128);
  for(i = 0; i < mappedS; i++){
      strokeWeight(2);
      rect(370 , 50 , 50 , 300 - i / 1.55);
  }
    
  //hours box
  noFill();
  stroke(84, 64, 135);
  for(i = 0; i < mappedH; i++){
    strokeWeight(5);
    rect(30 , 50 , 200 , 300 - i / 1.55 );
  }

  //minutes box
  noFill();
  stroke(227, 61, 147);
  for(i = 0; i < mappedM; i++){
    strokeWeight(4);
    rect(250 , 50 , 100 , 300 - i/ 1.55);
  }
 

  


}

For my abstract clock, I first wanted to use words to go about my design, but I felt that it would be a bit too complicated. I felt the purpose of this project was to make it easy to still tell time while making it more interesting to do so. I really enjoyed making this project because I went through a lot of trial and error models until I found something I really liked. I also like the different sized in the boxes just to make it vary a bit more. When the Hour Box is full, that represents 24 hours. When the Minute Box is full that represents 60 minutes. When the Second Box is full, that represents 60 seconds.

Zee Salman- Looking Outwards 06- Section E

This work made by Bogdan Soban really called out to me because I love how the texture is laid out across the screen. There are different levels of detail within each corner of the image. It is very abstract, and having computation to be responsible for an image like this makes it very intriguing.

This was created by the use of Random images to generate a visual way to create a whole new image. There are three different images that can be generated by what the application is itself, or imported from somewhere else to get something similar. The picture is formed from RGB color components of “points stored in the internal matrix” of the program. Once that is done, the program reads all of them at the same time and draws the fourth picture according to Bogdan. For the algorithm, I don’t know much about how a piece like this was created. Bogdan mentioned, “Calculation of the criterion for the color mixing is the core of the programming algorithm”. So I’m guessing the randomness would be for each point the algorithm or the randomness determines which pixel would be used on the new image or would be merged with another color. There is a large area to make the mixing algorithm more and more complex in order to get more interesting results. So the more contrasts the original pictures have, the complex your compiled picture is going to be.

Zee Salman Looking Outwards 05

https://www.artstation.com/artwork/k4BP6l

Hirokazu Yokohara

What I admire about this project is how hyperrealistic it looks. It also has this fantasy vibe that i get when I look at it, The skull is intruging and there are different parts of this project that makes it really intricate asw a whole. There are different vines crossing the screen and the rusty metal look is encorporated all over the skull and the body. I dont know the exact algorithms to create piece like this but it definetly tooks some for loops and some basic adrawings in the draw function of simple shapes that get more and more complicated. This piece was made by an artist named Yokohara in Tokyo, I would like to see more of his/ her pieces because they are pretty facinating and I could possibly draw inspiration

Zee Salman- Project- 05

sketch

//Zee Salman
//SECTION E

var red // horizantal
var blue  // vertical
var sz = 10;

function setup() {
    createCanvas(600, 400);
    noStroke();
}
 
function draw() {
    background(0);
    drawGrid();
     
}
function drawGrid() {
  for (var y = 5; y < height + 50; y += 100) {
  		var red = map(y,0,height,0,255);
        for (var x = 5; x < width + 50; x += 100) {
            //color gradient needs to be implemented
            var blue = map(x,0,width,0,255);
            noStroke();
            fill(red,0,blue);
            ellipse(x, y,20, 100);

            stroke("white");
            line(x /2, y /2, width / 2, height / 2);
            line(x *2, y *2, width / 2, height / 2);

            
        }
    }
}

I wanted to go for something a bit playful, I really enjoy gradients and I wanted to add them to this wallpaper along with lines that sprouted in different directions, I feel like it has a good contrast especially with the black background. I would like to further expand on this idea and see where I can rreally take the design, and even complicate the shapes a bit more in further explorations.

Zee Salman- Project 04 String Art

Click on the art to take away night mode.

sketch

//Zee Salman
//SECTION E


function setup() {
createCanvas(600,300);   

    
	
}

function draw(){

    
    
    if (mouseIsPressed) {
    	background('pink')
	    for (i = 0; i <= 2000; i+=30){
	    //blue horizantal lines
	    stroke(0,0,255);
	    line(i,mouseY, i/2 ,height);
	}
	    for (i = width/2; i <= 2000; i +=20){
	    stroke(177,89,139);
	    // bottom right 
	    line(mouseX, 500 - i, i / 2, height/ 2);
	    // bottom left 
	    line(5 - i, i * .2, 1000-i, mouseY);
	    

	}

		for (i = 0; i <= 60; i++){
    	//red vertical lines
    	stroke(255,0,0);
	    line(mouseX, i * mouseY,width / 2 ,height/2);
	    }
    }

    //night mode
  	else {
  		background('black')
  		for (i = 0; i <= 2000; i+=30){
	    //white horizantal lines
	    stroke('white');
	    line(i,mouseY, i/2 ,height);
	}
	    for (i = width/2; i < 2000; i +=20){
	    stroke(177,189,100);
	    // bottom right 
	    line(mouseX, 500 - i, i / 2, height/ 2);
	    strokeWeight(0.75);
	    // bottom left 
	    line(5 - i, i * .2, 1000-i, mouseY);
	    

	}

		for (i = 0; i <= 60; i++){
    	//green vertical lines
    	stroke(55,187,10);
	    line(mouseX, i * mouseY,width / 2 ,height/2);
	    }
    	
  }
	
    

}

*Grace Day*

While doing this project, I definitely went for random and exploratory lines, it was really fun also I wanted to experiment with movement in many ways so when you hold the mouse it changes color as well as movement from the drag of the mouse.

Zee Salman -Looking Outwards – 05

*Grace Day*

I really find this kind of art very interesting, It really gives us a look into HCI and like intereaction design. I also like the different colors that presents itself during the activity. I like the different strokes also that appeares in the picture itself. It kind of acts like a mouse move or hover with some sort of drag. Also, it seems like the pitch it generates is based on the location of the hand. Similar to a piano almost and I find that pretty cool. There are definetly some for loop statements.

Zee Salman- Project- 03

sketch

//Zee Salman
//SECTION E
//fawziyas@andrew.cmu.edu
//PROJECT-03



function setup() {
    createCanvas(600, 400);
//     rectMode(CENTER);
}

function draw() {
    background("pink");

//head
	fill("black")
	ellipse(width/2, height * .67, 100, 150);
//body	
	ellipse(width/2, height * .5, 80, 100);
//tummy	
	fill("white")
	ellipse(width/2, height * .68, 82, 96);
//beak
	fill("orange")
	ellipse(width/2, height * .5, 10,14);
//eyes
	
	fill("white")
	ellipse(320, height * .47, 20,20);
	ellipse(290, height * .47, 20,20);
//pupils
	fill("red")
	ellipse(320, height * .47, 10,10);
	ellipse(290, height * .47, 10,10);
	
//goes up

	if (mouseX < 300) {
	
	
		width = width + 2


	}
	if(mouseX > 299){

		width = width - 2
	}
//goes down
	if (mouseY < 200){
		height = height +2
	}
	if (mouseY > 199){
		height = height - 2
	}



}

For this project I combined the two mouse feature to make the eyes move on way and the body move another so that when the mouse is positioned just right, it creats a pengiun.

Looking Outwards 02

One artist I’m inspired by is Joan Truckenbrod. Their work is really simplistic and is mostly line drawings that usually has no color. I really enjoy it because it seems like something that would be created in illustrator and may be duplicated in photoshop but it’s just algorithmic lines and im very intrigued by their work. I also like that it doesn’t seem complicated at all but the bridge or foundation of the art could be really complex. The output is beautiful but I wouldn’t really know how to replicate something like that and I find it inspiring.

Zee Salman-Project-02-Various Faces

sketch

//Zee Salman
//SECTION E
//fawziyas@andrew.cmu.edu
//Project-02-Variable-Face

// Simple beginning template for variable face.

//color for backgroung and earrings
var color1 = 100;
var color2 = 10;
var color3 = 30;
var eyeSize = 20;

//starter face
var faceWidth = 280;
var faceHeight = 340;
var eyecolor1 = 150;
var eyecolor2= 200;
var eyecolor3= 20;
var faceColor1 = 168
var faceColor2 = 84
var faceColor3 = 29
var nose = 30

//skin color variation
var skin1 = [141, 85, 36];
var skin2 = [198, 134, 66];
var skin3 = [224, 172, 105];
var skin4 = [241, 194, 125];
var skin5 = [255, 219, 172];
var skin6 = [255, 237, 209];
let skinPicks = [skin1, skin2, skin3, skin4,skin5, skin6]

//nose color 

var noseColor1 = [92, 44, 22];
var noseColor2 = [173, 122, 83];
var noseColor3 = [196, 152, 84];
let noseColorPicks = [noseColor1, noseColor2, noseColor3]
var skinColor = skin3
var noseColor = noseColor1

//neck shadow color
var neckShadow1 = [87, 47, 21];
var neckShadow2 = [92, 44, 22];
var neckShadowPicks = [neckShadow1, neckShadow2]
var neckShadowColor = neckShadow1

//smile variation
var smile1 = faceWidth/2.1 
var smile2 = faceWidth/2.8 
var smile3 = faceWidth/3.2 
var smilePick = smile3
let smiles = [smile1, smile2, smile3]
var smileColor1 = [140,25,69];
var smileColor2 = [201,125,154];
let smileColorPicks = [smileColor1, smileColor2]
var smileColor = smileColor1
var eyebrowsize = 7


function setup() {
    createCanvas(600, 600);
    
}
 
function draw() {
    

    background(color1, color2, color3)
   
//Hair
    
    fill('black')
    ellipse(width / 2.6, height / 2, faceWidth, faceHeight / 1);
    ellipse(width / 1.6, height / 2, faceWidth, faceHeight / 1);


//Neck
    fill(skinColor)
    noStroke()
    rect(width / 2.6, height / 2, faceWidth / 2, faceHeight / 1.6);

//Neck Shadow
    
    fill(neckShadowColor)
    ellipse(width / 2, height * .65, faceWidth / 1.7, faceHeight / 1.6);
//head
    fill(skinColor)
    strokeWeight(2)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
 
//Ball on top of the Head   
    fill('black')
    arc(width/2, height/4.5, faceWidth / 2,faceHeight/4,180, PI, OPEN);
    
//eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill('white')

    var earLX = width / 2 - faceWidth * 0.5;
    var earRX = width / 2 + faceWidth * 0.5;

//Iris
    ellipse(eyeLX, height / 2, eyeSize * 2, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize * 2, eyeSize);

    fill(eyecolor1,eyecolor2,eyecolor3)
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

//Pupil
    fill('black')
    ellipse(eyeLX, height / 2, eyeSize * .35, eyeSize * .35);
    ellipse(eyeRX, height / 2, eyeSize * .35, eyeSize * .35);


//EYEBROWS

    stroke('black');
    strokeWeight(eyebrowsize);
    noFill();
    beginShape();
    curveVertex(190, 350);
    curveVertex(200,265);
    curveVertex(260, 266);
    curveVertex(210, 296);
    endShape();
    
    stroke('black');
    strokeWeight(eyebrowsize);
    noFill();
    beginShape();
    curveVertex(330, 350);
    curveVertex(340,265);
    curveVertex(400, 266);
    curveVertex(350, 296);
    endShape();


 //Ears
    stroke(color2, color3, color1)
    noFill()
    ellipse(earLX, height / 1.7, eyeSize * .5, eyeSize * 1.3);
    ellipse(earRX, height / 1.7, eyeSize * .5, eyeSize * 1.3);
    
    noStroke()   
    fill(skinColor)
    ellipse(earLX, height / 1.9, eyeSize * .75, eyeSize * .9);
    ellipse(earRX, height / 1.9, eyeSize * .75, eyeSize * .9);


//nose
    noStroke()
    fill(noseColor)
    ellipse(295,340,nose,19)
    
//mouth

    fill(smileColor)
    arc(width/2, height/1.6, smilePick,faceHeight/5,0, PI, CHORD);
    
}
 
function mousePressed() {

	faceWidth = random(260, 300);
	faceHeight = random(320, 400);
	eyeSize = random(20, 50);
	eyecolor1 = random(100,200);
    eyecolor2 = random(90,150);
    eyecolor3 = random(10,50);
    nose= random(10,60)
    skinColor = random(skinPicks);
    neckShadowColor = random(neckShadowPicks);

    noseColor = random(noseColorPicks);
    smilePick = random(smiles);
    smileColor = random(smileColorPicks);
    
//background/earring color
    color1 = random(1,200);
    color2 = random(1,150);
    color3 = random(1, 200);
    eyebrowsize = random(3,8);
   
    
}

In doing this project, I wanted to make the faces look sort of like mt self portrait but with more details. It took a while to get what I wanted but Im really happy with what came out. I also got really comfortable with using lists and Im really excited to advance it even more.