mango – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-06 Abstract Clock

function setup() {
    createCanvas(480, 480); 
    background(240, 213, 214);
}

function draw() {
	background(240, 213, 214);
	noStroke();

	push();
	rectMode(CENTER); 
	//dark pink shadow
	fill(208, 186, 187);    
	ellipse(240, 435, 165, 30);

	//plant pot 
	fill(186, 107, 60); 
	rect(240, 405, 75, 65);
	rect(240, 360, 88, 20);
	
	//plant pot shading 
	fill(165, 95, 52);
	rect(240, 372, 75, 4);

	pop();

	//soil filling up represents seconds
	fill(146, 85, 46);
	var s = second();
	rect(205, 435, 70, -s);

	//ombre of pink tracking 10 minute intervals 
	//0 - 10 minute mark
	fill(243, 209, 210);
	rect(0, 245, 480, -20); 
	
	//10 - 20 minute mark
	fill(238, 206, 208);
	rect(0, 225, 480, -20); 
	
	//20 - 30 minute mark
	fill(234, 202, 204);
	rect(0, 205, 480, -20);
	
	//30 - 40 minute mark
	fill(230, 198, 201);
	rect(0, 185, 480, -20);
	
	//40 - 50 minute mark
	fill(224, 194, 196);
	rect(0, 165, 480, -20); 
	
	//50 - 60 minute mark
	fill(220, 190, 195);
	rect(0, 145, 480, -20); 

	//resetting the background past the 60 minute mark
	fill(216, 187, 190);
	rect(0, 125, 480, -150);

	//plant stem growing represents minutes
	fill(30, 71, 42);
	var m = minute();
	rect(237, 350, 5, -50-m*3);

	//plant leaves
	push();
	fill(30, 71, 42);
	translate(224, 320);
	rotate(radians(-60));
	ellipse(0, 0, 18, 43);
	pop();

	push();
	fill(30, 71, 42);
	translate(256, 320);
	rotate(radians(60));
	ellipse(0, 0, 18, 43);
	pop();

	//flower petals represents hours
	var h = hour();
	var hours = map(m, 0, 60, 260, 390);

    if (h < 24 & h > 12){
        h -= 12;
    }
    if (h == 0){
        h = 12;
    }

    for (var i = 0; i < h; i++){
        push();

        translate(240, height - 0.9*hours);
        rotate(radians(30*i));
        //flower petals
        fill(233, 160, 167);
        ellipse(0, 30, 20, 55);
        
        //flower center 
        fill(249, 213, 139);
        ellipse(0, 0, 30, 30);

        pop();
    }
	
}

Screenshots of clock at 1:00, 3:30, 9:20, and 12:59

I wanted to create an abstract clock based on a plant growing over time. The pot filling up with soil represents seconds, the plant stem growing represents minutes, and the number of petals represents hours. The ombre of pink rectangles in the background track the minutes based on the position of the yellow center in 10 minute intervals. I had to make a few changes to the design based on where the center landed, which was challenging but once I figured out the map function it was fun to create!

LO-06 Randomness

Martin Krzywinski created this piece, Faces of Randomness on Circos in 2013. Krzywinski created this piece based on the digits of 𝜋 and drawing lines between sixteen random numbers with 1000 digits each represented by their digit transition paths and frequencies.

I admire the intricacy of this piece. The placement of the lines and use of colors make each of the 16 circles look like mini galaxies. I also admire how the artist is able to visually portray the impact of changing just one number to create a whole new image. It is also interesting to see how each of the 16 circles look similar despite the random inputs used to create the piece.

Krzywinski’s background as a scientist influences his artistic sensibilities which is seen in the way he uses data to inform his art. Krzywinski uses data and facts to create his artwork and enhances it with bright color choices. He balances the use of randomness by organizing the piece in a neat grid structure.

Project-05 Wallpaper

wallpaper

//Rishi Karthikeyan 
//rkarthik
//section B 
//HW 5 Project Floral Wallpaper  

var y = 0;
var x = 0;

function setup() {
    createCanvas(600, 600); 
    background(16, 18, 43);
    text("", 10, 15);

    rectMode(CENTER);

}

function draw() {
	background(16, 18, 43);
	
	push(); 

	translate(60,60);
	for (y = 0; y < 500; y += 120) {
		for (x = 0; x < 500; x +=120) {
			drawPattern(y);
			drawFlower(x, y);
		}
	}

	pop();
}

function drawPattern(y) {
	
	//lighter blue pattern outline 
	noFill();
	fill(16, 18, 43);
	strokeWeight(5);
	stroke(65, 68, 144);
	
	circle(x+26, y, 30);
	circle(x-26, y, 30);
	circle(x, y-26, 30);
	circle(x, y+26, 30);
	rect(x, y, 52, 52);
	circle(x+50, y, 18);
	circle(x-50, y, 18);
	circle(x, y+50, 18);
	circle(x, y-50, 18);

	//dark blue boxes 
	stroke(16, 18, 43);
	strokeWeight(5);
	rect(x, y, 20, 52);
	rect(x, y, 52, 20);

	//white ellipses for background
	fill(255);
	noStroke();

	//ellipses top left 
	circle(x-50, y-50, 9);
	circle(x-25, y-35, 7);
	circle(x-18, y-42, 7);
	circle(x-30, y-45, 9);
	circle(x-40, y-48, 6);
	circle(x-32, y-53, 6);
	circle(x-48, y-34, 6);
	circle(x-52, y-41, 6);
	circle(x-36, y-24, 10);
	ellipse(x-38, y-38, 8, 10);
	ellipse(x-50, y-20, 8, 14);
	ellipse(x-20, y-52, 12, 8);

	//ellipses top right 
	circle(x+50, y-50, 9);
	circle(x+25, y-35, 7);
	circle(x+18, y-42, 7);
	circle(x+30, y-45, 9);
	circle(x+40, y-48, 6);
	circle(x+32, y-53, 6);
	circle(x+48, y-34, 6);
	circle(x+52, y-41, 6);
	circle(x+36, y-24, 10);
	ellipse(x+38, y-38, 8, 10);
	ellipse(x+50, y-20, 8, 14);
	ellipse(x+20, y-52, 12, 8);

	//ellipses bottom left 
	circle(x-50, y+50, 9);
	circle(x-25, y+35, 7);
	circle(x-18, y+42, 7);
	circle(x-30, y+45, 9);
	circle(x-40, y+48, 6);
	circle(x-32, y+53, 6);
	circle(x-48, y+34, 6);
	circle(x-52, y+41, 6);
	circle(x-36, y+24, 10);
	ellipse(x-38, y+38, 8, 10);
	ellipse(x-50, y+20, 8, 14);
	ellipse(x-20, y+52, 12, 8);

	//ellipses bottom right 
	circle(x+50, y+50, 9);
	circle(x+25, y+35, 7);
	circle(x+18, y+42, 7);
	circle(x+30, y+45, 9);
	circle(x+40, y+48, 6);
	circle(x+32, y+53, 6);
	circle(x+48, y+34, 6);
	circle(x+52, y+41, 6);
	circle(x+36, y+24, 10);
	ellipse(x+38, y+38, 8, 10);
	ellipse(x+50, y+20, 8, 14);
	ellipse(x+20, y+52, 12, 8);

}

function drawFlower(x, y) {
	
	//green leaves
	fill(108, 117, 86);
	noStroke();
	ellipse(x, y+10, 10, 30);
	ellipse(x, y-10, 10, 30);
	ellipse(x+10, y, 30, 10);
	ellipse(x-10, y, 30, 10);
	
	//pink flowers 	
	fill(204, 153, 153);
	ellipse(x, y+10, 15, 20);
	ellipse(x, y-10, 15, 20);
	ellipse(x+10, y, 20, 15);
	ellipse(x-10, y, 20, 15);
	
	//blue center 
	fill(65, 68, 144);
	circle(x, y, 10);

}

For this project I was inspired by the style of kitchen tiles; I love the way the designs on these create so many different points of visual interest. I wanted to create my own version of it with a darker color scheme. This project was really fun and helped me better understand how to use loops.

*Initial sketch as a pattern on Illustrator*

LO-05 3D Computer Graphic

In 2016, Johnathan Zawada created “Skin” for Flume’s Grammy-winning album of the same name. Zawada created this 3D computer graphic with node structures and algorithms to generate different variations of the flower petals and patterns/textures on the petals. He also used Adobe programs in editing.

I admire the level of detail in this piece. Zawanda created intricate patterns on each petal creating a really interesting composition in contrast to the simplicity of the background. I also admire how his use of color evokes the same emotion as the music from the album. This sync between the imagery and the sound enhances the experience of the song.

Zawada’s artistic sensibilities are seen in this piece through the balance of “light and feathery” like the flowers and “concrete” elements like the silver bells. Zawada states he wanted to “explore ways of making the digital become organic and find tension points between comfort and discomfort.” Zawada went on to create more audiovisuals for Flume’s live shows and future albums.

The Creator’s Project interview with Zawada, 2:08-3:05 discusses “Skin”

Project-04 String Art

string art

var angle = 0;

function setup() {
    createCanvas(400, 300);
    background(200);
}

function draw() {
   background(89, 190, 209);

  var waveLx1 = 0;
  var waveLx2 = 0;
  var waveLy = height/40;

  var dy1 = height/40;
  var dx1 = width/30;
  var dx2 = height/150;
  var i = 0;

  stroke(43, 58, 140);
  line(0, 300, 101, 55);    //for second wave
  stroke(27, 85, 145);
  line(125, 300, 200, 105);    //for third wave

  //first wave
  for (i = 0; i < 400; i += 1) {
    stroke(37, 36, 94);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  push();

  //second wave
  translate(100, 50);

  waveLx1 = 0;
  waveLx2 = 0;
  waveLy = height/40;
  dy1 = height/40;
  dx1 = width/10;
  dx2 = height/100;
  i = 0;

  for (i = 0; i < 400; i += 1) {
    stroke(43, 58, 140);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  pop();

  push();

  //third wave
  translate(200, 100);

  waveLx1 = 0;
  waveLx2 = 0;
  waveLy = height/40;
  dy1 = height/40;
  dx1 = width/5;
  dx2 = height/100;
  i = 0;

  for (i = 0; i < 400; i += 1) {
    stroke(27, 85, 145);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  pop();

  push();

  //rotating sun 
  translate(335, 70);
  noStroke();
  fill(240, 180, 87);
  ellipse(0, 0, 40, 40);

   for (var i = 0 ; i <360; i+=10) {
    rotate(radians(angle));
    stroke(240, 180, 87);
    strokeWeight(2);
    line(0, 0, 50, 0);
    line(0, 0, 50*cos(radians(i)), 50*sin(radians(i)));
    angle = angle + 1;
  }

  pop();

  //clouds
  noStroke();
  ellipse(265, 100, 35, 35);
  ellipse(245, 105, 25, 25);
  ellipse(285, 105, 25, 25);

  ellipse(345, 135, 35, 35);
  ellipse(360, 140, 35, 35);
  ellipse(375, 140, 25, 25);
  ellipse(330, 140, 25, 25);

  
}

I was inspired by the string art image of a beach below. I drew out the basic shapes on illustrator which helped determine the points of the initial lines. The most challenging part was figuring out how to keep the sun rotating.

Initial basic sketch of shapes illustrator

LO-04 Sound Art

Swarm Study in action

Swarm Studies was created by Random International, a collaborative studio run by Hannes Koch and Florian Ortkrass. Swarm Study I is one of the first installations. It is made with LEDs and custom electronics. Each light source sensor is “imbued with a collective behaviour” that respond to sound. When a person starts talking or clapping the light sources swarm in the direction of the sound creating a mini-animated light show.

I admire this piece because of amount of iterations it creates. Every sound produces a different reaction. The piece is unique to each person; two people can create vastly different effects on the lights. I admire the commentary on the dynamic between people and their instincts. When people approach the piece, they are unsure of what it is and how it works. It is intriguing to see how long it takes them to understand and how they react once they do.

The creators’ artistic sensibilities are rooted in the piece’s simplicity. The straight-forward nature of the piece invites interactivity. The artists’ wanted to force their audience to understand their own consciousness. With Swarm Study 1 they’re able to highlight human instincts based on their initial interactions with the piece.

Source, 2010:
https://www.random-international.com/swarm-study-i-2010

Project-03 Dynamic Drawing

dynamic

function setup() {
    createCanvas(600, 450); 
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() { 
	background(0);
	noStroke();
	//boxes coming in from the right 
	fill(mouseY, 0, mouseX);
    rect(0, 0, mouseX, 50);
    fill(0, mouseY/2, mouseX/2);
    rect(0, 100, mouseX, 50);
    fill(mouseY/3, 0, mouseX/3);
    rect(0, 200, mouseX, 50);
    fill(0, mouseY, mouseX);
    rect(0, 300, mouseX, 50);
    fill(mouseY/2, 0, mouseX/2);
    rect(0, 400, mouseX, 50);

    //boxes coming in from the left 
    fill(255-mouseY, 0, 255-mouseX);
    rect(600, 50, -mouseX, 50);
    fill(0, 255-mouseY/2, 255-mouseX/2);
    rect(600, 150, -mouseX, 50);
    fill(255-mouseY/3, 0, 255-mouseX/3);
    rect(600, 250, -mouseX, 50);
    fill(0, 255-mouseY, 255-mouseX);
    rect(600, 350, -mouseX, 50);

    //boxes coming in from the top 
    fill(255-mouseY, 0, 255-mouseX);
    rect(0, 0, 50, mouseY);   
    fill(0, 255-mouseY/2, 255-mouseX/2);
    rect(120, 0, 50, mouseY); 
    fill(255-mouseY/3, 0, 255-mouseX/3);
    rect(240, 0, 50, mouseY);   
    fill(0, 255-mouseY, 255-mouseX);
    rect(360, 0, 50, mouseY);
    fill(255-mouseY/2, 0, 255-mouseX/2);
    rect(480, 0, 50, mouseY);

    //boxes coming in from the bottom 
    fill(mouseY, 0, mouseX);
    rect(60, 600, 50, -mouseY);  
    fill(0, mouseY/2, mouseX/2);
    rect(180, 600, 50, -mouseY);   
    fill(mouseY/3, 0, mouseX/3);
    rect(300, 600, 50, -mouseY);   
    fill(0, mouseY, mouseX);
    rect(420, 600, 50, -mouseY);
    fill(mouseY/2, 0, mouseX/2);
    rect(540, 600, 50, -mouseY);

    //moving origin point to the center 
    translate(300, 225);

    //rect & all ellipses rotate based on mouse 
    rectMode(CENTER);
    rotate(radians(mouseX));
    rect(0, 0, 100, 100);

    //ellipses change position based on mouse 
    ellipse(-100, mouseX, 30, 30);
    ellipse(mouseX, -100, 30, 30);

    //ellipses get bigger based on mouse 
    stroke(255);
    strokeWeight(3);
    noFill();
    ellipse(0, 0, mouseX, mouseY);
    stroke(100);
    ellipse(0, 0, -mouseX, mouseY);
    //rotated ellipses  
    rotate(radians(45));
    stroke(255);
    ellipse(0, 0, mouseX+20, mouseY);
    stroke(100);
    ellipse(0, 0, -mouseX+20, mouseY);

    rotate(radians(45));
    stroke(255);
    ellipse(0, 0, mouseX+50, mouseY);
    stroke(100);
    ellipse(0, 0, -mouseX+50, mouseY);

    rotate(radians(45));
    stroke(255);
    ellipse(0, 0, mouseX+90, mouseY);
    stroke(100);
    ellipse(0, 0, -mouseX+90, mouseY);
}

I was inspired by the shape of atoms. For the background, I was partly inspired by the way a tv looks when it glitches.

LO-03 Computational Fabrication

Process of creating “Digital Grotesque”

Benjamin Dillenburger and Michael Hansmeyer and their team created “Digital Grotesque” in 2013. They used algorithmically generated geometry and additive manufacturing to create 260 million individually specified surfaces. The final product was 3.2 meters tall and used 11 tons of printed sandstone.

I admire the depth and form of this piece. From a distance the piece looks closed off but the closer you get to it the more details are revealed. Their effective use of perspective draws the viewers in. The artists are able to create an immersive experience of computational art by allowing viewers to walk through the piece itself. I also admire how ornate and aesthetically pleasing the piece is.

Dillenburger and Hansmeyer’s artistic sensibilities are seen in the intricacy of their design. They wanted to highlight how there can be chaos in order which they successfully do by using symmetry and hierarchy to create balance in their detailed design.

Sources
http://benjamin-dillenburger.com/grotto/
https://vimeo.com/74350367

Project 2 – Variable Face

VariableFaces

var faceWidth = 60;
var faceHeight = 60;
var mouthWidth = 50;
var mouthHeight = 30;
var eyeWidth = 70;
var eyeHeight = 70; 
var browHeight = 60;

let ecolor = 255;
let bcolor = 10;

function setup() {
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(bcolor)

    var x = width/2;
    var y = height/2;

    //hair
    fill(29, 22, 16);
    noStroke();
    ellipse(x, y - (1.5 * faceHeight), 6*faceWidth, 6*faceHeight);
    rect(x - (3*faceWidth), y - (1.5 * faceHeight), 6*faceWidth, 5*faceHeight);

    //ears 
    fill(171, 113, 88);
    ellipse(x - (1.5 * faceWidth), y, 2*faceWidth, 2*faceHeight);
    ellipse(x + (1.5 * faceWidth), y, 2*faceWidth, 2*faceHeight);

    //earrings
    noFill();
    stroke(ecolor);
    strokeWeight(8);
    circle(x - (1.5 * faceWidth), y + faceHeight, 95);
    circle(x + (1.5 * faceWidth), y + faceHeight, 95);

    //face
    fill(171, 113, 88);
    noStroke();
    ellipse(x, y - (1.5 * faceHeight), 4*faceWidth, 4*faceHeight);
    rect(x - 2*faceWidth, y - 1.5*faceHeight, 4*faceWidth, 2*faceHeight);
    ellipse(x, y + 0.5*faceHeight, 4*faceWidth, 4*faceHeight);

    //nose
    noStroke();
    fill(0, 0, 0);
    ellipse(x - 10, y, 8, 4);
    ellipse(x + 10, y, 8, 4);

    //mouth
    strokeWeight(5);
    stroke(235, 76, 61);
    fill(0, 0, 0);
    ellipse(x , y + 50, mouthWidth, mouthHeight);

    //eyes
    strokeWeight(5);
    stroke(0, 0, 0);
    fill(255, 255, 255);
    ellipse(x - faceWidth, y - faceHeight, eyeWidth, eyeHeight);
    ellipse(x + faceWidth, y - faceHeight, eyeWidth, eyeHeight);

    //pupils
    fill(0, 0, 0);
    var a = constrain(mouseX, (x + faceWidth) - (eyeWidth/2) + 20, (x + faceWidth) + (eyeWidth/2) - 20);
    var b = constrain(mouseY, (y - faceHeight) - (eyeHeight/2) + 20, (y - faceHeight) + (eyeHeight/2) - 20);
    ellipse(a, b, 30, 30);
    var a = constrain(mouseX, (x - faceWidth) - (eyeWidth/2) + 20, (x - faceWidth) + (eyeWidth/2) - 20);
    var b = constrain(mouseY, (y - faceHeight) - (eyeHeight/2) + 20, (y- faceHeight) + (eyeHeight/2) - 20);
    ellipse(a, b, 30, 30);

    //bindi
    noStroke();
    fill(ecolor);
    circle(x, y - (2*faceHeight), 25, 25);

    //eyebrows
    strokeWeight(9);
    stroke(0);
    line(x-(faceWidth*1.5), y-(2*faceHeight), x-(faceWidth*0.5), y-(2*browHeight));
    line(x-(faceWidth*1.5), y-(2*faceHeight), x-(faceWidth*0.5), y-(2*browHeight));
    line(x+(faceWidth*1.5), y-(2*faceHeight), x+(faceWidth*0.5), y-(2*browHeight));
    line(x+(faceWidth*1.5), y-(2*faceHeight), x+(faceWidth*0.5), y-(2*browHeight));

}

function mousePressed() {
    clear(0);
    faceWidth = random(40,75);
    faceHeight = random(35,70);
    mouthHeight = random(20,80);
    mouthWidth = random(30,90);
    eyeWidth = random(60,80);
    eyeHeight = random(60,80);
    browHeight = random(45,65);

    bcolor = color(random(255), random(255), random(255));
    ecolor = color(random(255), random(255), random(255));

}

For this project I started by drawing it on Illustrator. I wanted to continue to iterate on what I created for project one. I decided to keep the face color and nose size consistent and everything else variable. I also added earrings and a bindi for some more personalization.

LO-02 Generative Art

Glenn Marshall created this generative art piece as a visual rendering for the song Codex by Radiohead, in 2015. Marshall created this piece using Python programming language inside Cinema 4D. It is a combination of three of his previous pieces, Particle Man, Star Girl, and Universe Hand. I admire the power this piece has to captivate viewers. Once you see the first few seconds you are drawn in by the movement of each element and compelled to continue watching. Each shot starts off as a chaos of dots and lines that draw the viewer’s eyes to follow along until the main image is created.

I am also inspired by his attention to detail to tell a story. For example, the Universe Hand, Marshall sets the “particles” to expand and contract in sync with the Indian breathing technique “Pranayama” to parallel the “scientific model of an infinitely expanding and contracting cycle of the universe.” This also helps achieve his goal is to create meditative and philosophical narratives. He manifests this into the algorithm by syncing audios and visuals to create a calming effect to spark that meditative state.