ChristineSeo-Project06-SectionC

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-06

var r;
var b;
var g;
var prevSec; 
var a; // set to make the text move

function setup() {
  createCanvas(480, 480);
  prevSec = second();
  r = random(130,255);
 	g = random(110,255);
 	b = random(200,250);
  a = width / 2; 
}

function draw() {
  background(197, 234, 244);
  noStroke(0);
  fill(110, 75, 3); //outer donut
  ellipse(width / 2,height / 2,430,430);
  fill(229, 155, 201);
  
  push();
  translate(width / 2, height / 2);// pink frosting shape
	ellipse(0, 0, 382, 152);
  rotate(PI / 1.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 2.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 3.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 3.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 3.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 3.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
  pop();
  
  fill(229, 155, 201);//frosting base
  ellipse(width / 2,height / 2,320,320);
  ellipse(width / 2 + 5,height / 2 + 5,320,320);
  fill(110, 75, 3);//inner donut
  ellipse(width / 2,height / 2,170,170);
  fill(197, 234, 244);
  ellipse(width / 2,height / 2,150,150);
  
  push();//sprinkles
	translate(width / 2, height / 2);
  for (var p = 0; p < minute(); p += 1){ //adds a sprinkle color every minute
    rotate(PI / 3.0); 
    fill(r,g,b); 
    rect(85,95 / 30 * p - 30,35,8,20);
}
  pop();
  
  
    fill(197, 234, 244);//bites
  for(var i = 0; i < hour(); i += 1){  
    if(i < 6){
    	ellipse(120 + i * 50,40,60,70);//40=spacing
    }
    else if(i < 12){
    	ellipse(33,i * 33,70,40);
    }
    else if(i < 18){
      ellipse(450,i * 21,70,30);
    }
    else if(i < 24){
      ellipse(i * 30 - 400,440,50,70);
      
    }
}
  push();
  strokeWeight(10); //donut highlight
  stroke(255);
  noFill(0);
  curve(380, 260, 415, 186, 360, 108, 70, 60);
  pop();
  
  fill(110, 75, 3); //text 
  textSize(32);
  textStyle(BOLD);
  a = a - 2.5;
  if (a < -width) {
  a = 150;
  }
  text('yum~', 10 - a, 40);
  fill(229, 155, 201);
  text('yum!', 10 - a, 460);
  
  fill(0);
  rect(180,240,45,12); //eyebrows
  rect(260,240,45,12);
	ellipse(210,280,45,50);//eyes base
  ellipse(270,280,45,50);
  fill(255);
  ellipse(210,283,30,40); // eye whites
  ellipse(270,283,30,40);
  fill(0);
  ellipse(270,290,15,25); //eye inside
  ellipse(210,290,15,25);
  fill(255); //eye inside inside
  ellipse(208,285,5,5);
  ellipse(268,285,5,5);
  
  if(second() != prevSec){ //sprinkles color
 		 prevSec = second();
 		r =random(130,255);
 		g =random(110,255);
 		b = random(200,250);//changes color every second every time value is different from the previous second 
  fill(0);
  ellipse(210,280,45,50);
  ellipse(270,280,45,50);
 		}
}

For this project, I wanted to portray a fun and exciting theme: a donut! Every second, the sprinkles on the donut changes color. Also, there is a visual representation of minutes through the number of sprinkles. Every hour, the number of bites on the donut increases, accordingly, through 24 hours. Additionally, the eyes blink every second! I wanted it to be playful and fun with a color palette as well. I also wanted it to have some sort of randomness incorporated within my project (which can be seen in the –limited– random colors of sprinkles).

Although this clock is not the easiest to read, I think that the creativity into this abstract clock makes the assignment really interesting. I had a difficult time figuring out what to make that can relate to the number of minutes, seconds, and hours. I also first drew the eyes but thought that there could be something more; this is the reason why the eyes blink every second! It was a very fun project to work on, especially because there was a wide range of opportunities to go about making the abstract clock.

Rough sketch of donut clock

Victoria Reiter – Project 06 – Abstract Clock

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-06-Abstract Clocks
*/

function setup() {
    createCanvas(480, 260);
    // declares variables later used for time
    var h;
    var m;
    var s;
    // declares value for opacity
    var alphaValue;
}

function draw() {
    // describes appearance of text
    textFont('Colonna MT');
    textAlign(CENTER);

    // sets background color
    background(209, 252, 235);

    // variables for time
    h = hour();
    m = minute();
    s = second();

    // sizes for the images that will represent time aspects
    var hourShapeWidth = width / 36;
    var minuteShapeWidth = width / 200;
    var secondShapeWidth = width / 170;

    // makes a loop to count the hours, drawing forks, highlighting
    // the fork that represents the current hour
    for (var i = 0; i < 24; i++) {
        if (i !== h) {
            fill(25, 125, 75);
            fork(i * (hourShapeWidth + 6) + 7, 65);
        } else {
            fill(255, 255, 0);
            fork(i * (hourShapeWidth + 6) + 7, 65);
        }
    }

    // makes a loop to count the minutes, drawing dining glasses
    // and highlighting the glass that represents the current minute
    var glassX = k * (minuteShapeWidth + 5.5) + 6
    var glassY = height / 20;
    angle = 0;
    increment = 5;
    for (var k = 0; k < 60; k++) {
        if (k !== m) {
            fill(150, 150, 255);
            glass(k * (minuteShapeWidth + 5.5) + 6, 35);
        } else {
            fill(255, 255, 0);
            glass(k * (minuteShapeWidth + 5.5) + 6, 35);
        }
    }

    // makes a loop to count the seconds, drawing spoons and highlighting
    // the spoon that represents the current minute
    for (var j = 0; j < 60; j++) {
        if (j !== s) {
            fill(150, 155, 155);
            spoon(j * (secondShapeWidth + 5) + 5, 15);
        } else {
            fill(255, 255, 0);
            spoon(j * (secondShapeWidth + 5) + 5, 15);
        }
    }

    // lines that divide the clock into representative "time zones" for meals
    stroke(203, 158, 255, 150);
    line(width / 4 + 1, 0, width / 4 + 1, height);
    line(width / 2 - 3, 0, width / 2 - 3, height);
    line(3 * width / 4 - 7, 0, 3 * width / 4 - 7, height);

    // if the time is between midnight and 6am, it is breakfast time
    if (h >= 0 & h < 6) {
        noStroke();
        alphaValue = 255;
        fill(226, 140, 59, alphaValue);
        textSize(17);
        textStyle(BOLD);
        text("Breakfast Time!", 60, 230);
        scale(.5);
        breakfast(57, 255);
    } else {
        noStroke();
        alphaValue = 110;
        fill(226, 140, 59, alphaValue);
        textSize(17);
        textStyle(NORMAL);
        text("Breakfast Time!", 60, 230);
        scale(.5);
        breakfast(57, 255);
    }

    // if the time is between 6am and noon, it is lunch time
    if (h >= 6 & h < 12) {
            alphaValue = 255;
            fill(48, 155, 24, alphaValue);
            textSize(40);
            textStyle(BOLD);
            text("Lunch Time!", 357, 462);
            scale(1.2, 1.5);
            lunch(250, 180);
        } else {
            alphaValue = 110;
            fill(48, 155, 24, alphaValue);
            textSize(40);
            textStyle(NORMAL);
            text("Lunch Time!", 357, 462);
            scale(1.2, 1.5);
            lunch(250, 180);
        }

    // if the time is between noon and 6pm, it is dinner time
    if (h >= 12 & h < 18) {
            alphaValue = 255;
            fill(204, 89, 71, alphaValue);
            textStyle(BOLD);
            textSize(30);
            text("Dinner Time!", 495, 310);
            scale(.8);
            dinner(550, 225);
        } else {
            alphaValue = 110;
            fill(204, 89, 71, alphaValue);
            textSize(30);
            textStyle(NORMAL);
            text("Dinner Time!", 495, 310);
            scale(.8);
            dinner(550, 225);
    }

        // if the time is between 6pm and midnight, it is time for dessert !!
        if (h >= 18 & h < 24) {
            alphaValue = 255;
            fill(224, 0, 160, alphaValue);
            textStyle(BOLD);
            text("Time for Dessert!!!", 870, 387);
            scale(.575, .5);
            dessert(1500, 468);
        } else {
            alphaValue = 110;
            fill(224, 0, 160, alphaValue);
            textStyle(NORMAL);
            text("Time for Dessert!!!", 870, 387);
            scale(.575, .5);
            dessert(1500, 468);
        }
}

// draws a spoon
function spoon(x, y) {
    ellipse(x, y, 6, 8);
    rect(x - 1, y, 2, 12);
}

// draws a drinking glass
function glass(x, y) {
    arc(x, y, 8, 8, - 3 * PI / 16, PI + 3 * PI / 16, CHORD);
    rect(x - 1, y, 2, 10);
    rect(x - 2, y + 10, 5, 1);
}    

// draws a fork
function fork(x, y) {
    rect(x, y, 16, 5);
    rect(x, y - 10, 2, 10);
    rect(x + 5, y - 10, 2, 10);
    rect(x + 10, y - 10, 2, 10);
    rect(x + 14, y - 10, 2, 10);
    triangle(x, y + 5, x + 16, y + 5, x + 8, y + 10);
    rect(x + 6, y + 7, 4, 15);
}

// draws breakfast foods
function breakfast(x, y) {
    eggs(x, y);
    bacon(x + 75, y - 50);
}

// draws lunch foods
function lunch(x, y) {
    sandwich(x, y);
    apple(x + 95, y);
}

// draws dinner foods
function dinner(x, y) {
    mashedPotatoes(x + 80, y + 90);
    chicken(x, y);
}
 // draws dessert
 // function iceCream is put into this function just for ease of naming,
 // since "dessert" better represents the meal of this specific time zone
 // than does simply "ice cream"
function dessert (x, y) {
    iceCream(x, y);
}

// draws two sunny-side up eggs
function eggs(x, y) {
    noStroke();
    fill(255, 255, 255, alphaValue);
    ellipse(x, y, 100);
    ellipse(x + 20, y + 75, 100);
    fill(255, 155, 0, alphaValue);
    ellipse(x + 15, y, 35);
    ellipse(x + 45, y + 85, 35);
}

// draws two strips of bacon
function bacon(x, y) {
    fill(255, 50, 50, alphaValue);
    rect(x, y, 40, 180);
    rect(x + 60, y, 40, 180);
    fill(255, 150, 150, alphaValue);
    rect(x + 25, y, 8, 180);
    rect(x + 85, y, 8, 180);
}

// draws a sammich/sammie
function sandwich(x, y) {
    fill(165, 130, 41, alphaValue);
    ellipse(x - 5, y, 50);
    ellipse(x + 35, y, 50);
    rect(x - 20, y, 65, 75, 10);
    fill(0, 255, 0, alphaValue);
    quad(x - 25, y - 25, x + 15, y - 35, x + 20, y + 10, x - 10, y + 7);
    quad(x - 20, y, x - 33, y + 25, x + 5, y + 45, x + 5, y);
    quad(x - 20, y + 30, x - 14, y + 70, x + 20, y + 55, x + 10, y)
    fill(255, 255, 0, alphaValue);
    rect(x - 6, y - 22, 60, 95);
    fill(255, 0, 0, alphaValue);
    ellipse(x + 15, y + 15, 45, 85)
    fill(165, 130, 41, alphaValue);
    ellipse(x + 20, y - 5, 50);
    ellipse(x + 55, y - 5, 50);
    rect(x + 5, y - 5, 65, 75, 10);
}

// draws an apple
function apple(x, y) {
    fill(102, 79, 22, alphaValue);
    rect(x, y, 7, 20);
    fill(230, 0, 0, alphaValue);
    ellipse(x + 2, y + 55, 80, 70);
    fill(0, 195, 0, alphaValue);
    ellipse(x + 9, y + 17, 20, 6);
}

// draws a chicken drumstick
function chicken(x, y) {
    fill(255, alphaValue);
    rect(x - 10, y, 20, 125);
    ellipse(x - 17, y + 120, 30);
    ellipse(x + 13, y + 120, 30);
    fill(165, 130, 41, alphaValue);
    ellipse(x, y, 100, 125);
    triangle(x, y + 40, x - 20, y + 75, x + 20, y + 75);
}

// draws a nice scoop of mashed potatoes with a slab of butter
function mashedPotatoes(x, y) {
    fill(0, 0, 255, alphaValue);
    ellipse(x, y, 200, 15);
    fill(255, alphaValue);
    arc(x, y, 100, 100, PI, 0);
    fill(255, 255, 0, alphaValue);
    rect(x - 15, y - 52, 50, 30, 10);
}

// draws a yummy ice cream cone
function iceCream(x, y) {
    fill(25, 255, 255, alphaValue);
    ellipse(x, y + 50, 150);
    fill(255, 25, 235, alphaValue);
    ellipse(x, y - 50, 150);
    fill(191, 158, 74, alphaValue);
    triangle(x - 80, y + 80, x + 80, y + 80, x, y + 220);
    fill(245, 0, 0, alphaValue);
    ellipse(x + 15, y - 125, 35);
    fill(185, 0, 0, alphaValue);
    rect(x + 15, y - 150, 2, 20);
    fill(0, alphaValue);
    quad(x - 20, y - 30, x - 14, y - 38, x - 12, y - 9, x - 18, y - 25);
    quad(x - 40, y - 70, x - 34, y - 60, x - 30, y - 74, x - 28, y - 65);
    quad(x + 20, y - 50, x + 29, y - 60, x + 35, y - 44, x + 28, y - 55);
    quad(x + 60, y - 20, x + 54, y - 25, x + 57, y - 14, x + 65, y - 25);
    fill(132, 25, 255, alphaValue);
    ellipse(x - 15, y + 33, 10);
    ellipse(x - 55, y + 25, 15);
    ellipse(x - 25, y + 55, 8);
    ellipse(x + 40, y + 25, 10);
    ellipse(x + 25, y + 65, 12);
}

My clock for this week reflects my own biological clock…for when to eat meals! If it were truly accurately, every time of day would be “Time for Dessert!!!,” but for the sake of the project, I’ve also included breakfast, lunch, and dinner.

At the top are spoons to count the seconds, glasses for the minutes, and forks for the hours. The opacity of the meals also change, and are fully opaque when it is time to eat them!

Initial sketch of my idea (PS I got caught in the rain the other day so the pages are now all wet and crinkly)

I assigned foods that are typical to each meal [in the US anyway], like some nice bacon and eggs, a sandwich and apple, a chicken drumstick and mashed potatoes with butter, and ice cream. If I ever feel both hungry and confused I will turn to this clock for meal suggestions!

Jenna Kim (Jeeyoon Kim)- Looking Outwards-6

“PPPP”
He kept developing his original idea (the first photo on the very top).
“PPPP”- more development
His another project called “NNN”

Manolo Gamboa Naon’s project, “PPPP”, is a generative, random digital art had been developed over a long time. Its vibrant colors and interesting geometric forms blend in beautifully. . His project is very admirable because through this project, he shows that making errors is essential to generative artists and errors are “beautiful”. He shows that as he develops more series to this project, he demonstrates growth of his style through series of errors. It is definitely fascinating to see how he develops so many styles and combination of color from one idea. The algorithms and the randomness in the work are generated from Processing, a programming tool that he learned when he started studying design. Although this simple random art seems to be simple with its geometric forms, he manifested his artistic ability in the color palette and the pattern. Although the colors are so bold and striking, the different colors interact well with each other. Also, we can see inspiration from artists and designers such as Ben Fry, Joshua David, Ivan Ivanoff, and many more.

Link: “https://www.artnome.com/news/2018/8/8/generative-art-finds-its-prodigy”

Mimi Jiao – Project 6 – Section E

sketch

/*
Mimi Jiao
wjiao@andrew.cmu.edu
Section E
Project-06
*/

function setup() {
    createCanvas(480, 480, WEBGL);
}

function draw() {
    var H = hour();
    var M = minute();
    var S = second();
    background(0, 0, 255);
    rotateZ(frameCount * .01);

    //in this for loop, as the seconds increase, 
    //the number of "fan" components within this shape increases
    for (var i = 0; i < S * 100; i++) {
        noStroke();
        fill(i * sin(i), i * cos(i), sin(i) * 200);
        beginShape();
        vertex(sin(i) * 1000, cos(i) * 1000, sin(i) * 1000);
        vertex(sin(i) * 1010, cos(i) * 1010, cos(i) * 1010);
        vertex(cos(i), sin(i), sin(i));
        endShape(CLOSE);
    }

    //size of sphere depends on the minute
    push();
    rotateX(frameCount * .005);
    rotateZ(frameCount * .01);
    for (var a = 0; a < M; a++) {
        noFill();
        strokeWeight(.4);
        //stroke color of sphere
        stroke(sin(radians(M)) * 255, sin(radians(M)) * 255, 
               sin(radians(M)) * 255);
        //Scales the size of the sphere for aesthetic purposes
        var mMap = map(M, 0, 60, 10, width);
        ellipsoid(mMap , mMap , mMap );
    }
    pop();

    push();
    //scales the hour by two for aesthetic purpose
    H *= 2;
    //rotates the shapes
    rotateX(frameCount * .05);
    rotateY(frameCount * .01);
    //loop drawing continuous geometric elements
    for (var p = 0; p < H * 50; p ++) {
        //constantly changes color of stroke based on time/sin
        stroke(200 + 25 * sin(millis() / 1000), 
             200 + 25 * sin(millis() / 1000 + HALF_PI),
             200 + 25 * sin(millis() / 1000 - HALF_PI));
        strokeWeight(.5);
        noFill();
        //changing origin so object moves across page
        translate(sin(H) * 24, sin(H) * 24, H);
        //coordinates for drawn geometric shape
        beginShape();
        vertex(p * cos(p) * .1, H * 10 * cos(p), .1 * (p - 1000));
        vertex(p* .01 * .1, p* 0.1 * .1, p*.01 * .1);
        vertex(p * sin(p) * .1, .1 * p * cos(p), 10 * H);
        vertex(p * cos(p + PI) * .1, H * 10 * cos(p + PI), .1 * (p - 1000));
        vertex(p * sin(p + PI) * .1, .1 * p * cos(p + PI), .1 * H);
        endShape(CLOSE);
    }
    pop();
}


I’ve always wanted to play around with WEBGL and seeing Jenny Hu’s clock project pushed me to use it for this assignment. I started out checking out primitive 3D functions like translate, ellipsoid and box to get a better understanding of how it works. I also wanted to explore how to make optical art, so I checked out different math functions in for loops. I played around with trig functions to see how shapes would be affected and also messed around with incorporating the mouseX function into for loops to alter the shape of the shapes I made. After experimenting, I went back into incorporating the ellipsoid to represent time because it was most fitting for my skill level. I initially wanted to do something more complex but I couldn’t quite figure out how to create it using vertex points.

My approach to the abstract clock isn’t very visually intuitive but I wanted to explore mapping time using different math functions in WEBGL.

Robert Oh- Looking Outwards- 06

Chance, Order, Change 6 (Black) 1978-9 Kenneth Martin

This painting is one of many paintings in Kenneth Martin’s “Chance and Order” series. As the name suggests, Martin was able to create this piece using pure chance events. Out of all the other paintings in the series, I liked this one the best because the black and white contrasts really well in terms of straight lines. I really appreciate this drawing, not only because it looks mysterious and complicated, but also because of the procedure Martin went through to make it.

The article states that to create the network of lines, Martin initially marked a blank drawing with points, moving clockwise around a rectangle. Lines were then generated by taking numbers, two at a time, at random out of a bag. Martin chose eight pairs of numbers for this work. He then turned the drawing by 90 degrees and repeated the process. After being repeated twice more, the drawing was then transferred to canvas.

Martin’s artistic and “random” side truly comes into play when you look at this painting. I am very excited and curious to see how other artists can incorporate randomness in their future art pieces.

https://www.tate.org.uk/art/artworks/martin-chance-order-change-6-black-t03190

 

Looking Outwards-06 Randomness-Veronica Wang

Airspace Studio – Studio M Architects, Thom Faulders

Airspace Tokyo is a multi-family residence spread over four floors, with two photographic studios located on the first and second floor. The exterior screen facade design expresses an almost non-existent distinction between interior and exterior. Designed by Thom Faulders, the screen is capable of giving the structure its own architectural identity and at the same time acting as an urban interface in a neighborhood of row houses. The façade pattern is inspired by the previous vine patterns growing over the walls, and the designer reproduced the ‘random’ pattern of the vegetation through computer programming and repetition of modules.

closeup shot at the double layered facade screen

“The result – explain the authors of the project – translates into a reticular structure that gives shape to a transitory interstitial space between public and private, where the view changes every time you move, the rain does not reach the road by capillary action, the light is refracted on the shiny metallic surface”

Vicky Zhou – Project 06 – Clock

sketch

/*Vicky Zhou
Section E
vzhou@andrew.cmu.edu
Project-06-Clock*/ 

var prevsec;
var millisrollover;

function setup() {
    createCanvas(480, 480);
    millisrollover = 0;
}

function draw() {
	background(255);

	//current time 
	var h = hour();
	var m = minute();
	var s = second();


	//changes military to standard time
	if(h > 12){
		h = h - 12; 
	}

	//making seconds beocme smoother
	if (prevsec != s){
		millisrollover = millis();
	}
	prevsec = s;
	var mills = floor(millis() - millisrollover);
	var secfraction = s + (mills / 1000);

	//map function to adjust ratio of time to canvas size
	var hourmap = map(h, 0, 12, 0, height);
	var minmap = map(m, 0, 59, 0, height);
	var secmap = map(secfraction, 0, 59, 0, height);


	// seconds that spiral outwards 
		push();
		for (i = 0; i <= 360; i ++){
			fill(secmap, 180, 190, 5);
			stroke(200, 100, 20);
			strokeWeight(0.9);
			rotate(degrees(180));
			translate(-390, -300);
			ellipse(width/2, height/2, secmap, secmap);
		}
		pop();


	//min triangle that shifts from left to right
		push();
		for (i = 0; i <= 360; i ++){
			fill(200, minmap, 190, 20);
			stroke(100, 100, 200);
			strokeWeight(1);
			triangle(i + 480, 480, 0, i + 480, minmap, i * 20);
		}
		pop();


	//hour bar that travels from top to bottom 
		push();
		for (i = 0; i <= 360; i += 20){
			fill(240, 240, 240, 0.05);
			stroke(100, 120, hourmap);
			strokeWeight(1.5);
			rectMode(CENTER);
			rect(100, hourmap, 1000, i/3);
		}
		pop();
}

After reading of the brief history of time with clocks, I was most intrigued by the idea of the “sunflower clock” and other patterns in nature that stray away from the conventional “sun and moon” diagram. Initially, I wanted to create a cock that mimicked the high and low tide of the beach, with perhaps waves being the second, sea foam being the minutes, and sand particles on the beach being hours. However, I was much more drawn to the works of Vincent Toupe, and how interesting and dynamic his abstract clocks were. Therefore, I then decided to hash out a more abstract clock with seconds represented by a growing ring, minutes represented by a triangle that shifts from left to right, and hours represented by a bar that shifts up and down. My first iteration of this abstract clock had started off with all three “hands” being represented by circles, but I wanted some other more obvious, visual representation between the seconds, minutes, and hours.

Abstract clock sketches

Alice Fang – Project 6 – Abstract Clock

sketch

/*
Alice Fang
acfang@andrew.cmu.edu
Section E
Project-06-AbstractClock
*/

function setup() {
    createCanvas(400, 400);
    noStroke();
}
function draw() {
	background(146, 211, 231);

	//current time
	var H = hour();
	var M = minute();
	var S = second();

	// sun
	var arc = 140; // radius of sun trajectory path
	var angle = H;
	push();
	translate(width/2, height/2);
	rotate(radians(7.5*H)); // rotate based on time of day, with highest point at 12:00 pm
	fill(239, 244, 214);
	ellipse(0 - arc, 0, 36, 36);
	pop();

	//static landscape
	fill(145, 168, 113); // farthest mountain
	beginShape();
	vertex(0, 166);
	vertex(67, 186);
	vertex(115, 175);
	vertex(150, 182);
	vertex(240, 152);
	vertex(270, 160);
	vertex(328, 144);
	vertex(352, 153);
	vertex(369, 150);
	vertex(400, 157);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(125, 147, 96); //third mountain
	beginShape();
	vertex(0, 226);
	vertex(40, 208);
	vertex(95, 224);
	vertex(183, 205);
	vertex(288, 218);
	vertex(400, 186);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(81, 110, 81, 80); // second mountain
	beginShape();
	vertex(0, 266);
	vertex(20, 258);
	vertex(40, 265);
	vertex(110, 244);
	vertex(200, 275);
	vertex(260, 312);
	vertex(400, 323);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(81, 110, 81, 80); // closest mountain
	beginShape();
	vertex(0, 280);
	vertex(47, 298);
	vertex(77, 289);
	vertex(119, 330);
	vertex(175, 348);
	vertex(211, 326);
	vertex(288, 337);
	vertex(325, 370);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);
 
 	// hot air balloon!
	var mapY1 = map(S, 0, 60, height, -175); // map y position of turquoise balloon to seconds
	var mapY2 = map(M, 0, 60, height * 2, -175); // map y position of magenta balloon to minutes
	var mapY3 = map(H, 0, 24, height * 2.857, -175); // map y position of orange balloon to hours
	var balX = 300; // X position of balloon
	var balY1 = mapY1;
	var balY2 = mapY2;
	var balY3 = mapY3;

	drawBalloon(balX, balY1 + 60, 120, 1, 26, 120, 142); // turquoise balloon
	drawBalloon(balX, balY2 + 60, 120, 0.5, 137, 62, 101); // magenta balloon
	drawBalloon(balX - 100, balY3 + 60, 120, 0.35, 233, 153, 95); // orange balloon

	if (H <= 11 & H >= 6) {
		fill(252, 217, 192, 75) // morning color
		rect(0, 0, width, height);
	} else if (H >= 14 & H <= 20) {
		fill(228, 77, 46, 75); // sunset color
		rect(0, 0, width, height);
	} else if (H > 20 || H < 6) {
		fill(5, 6, 90, 99); // dusk color
		rect(0, 0, width, height);
	}
}

function drawBalloon(balX, balY, balSize, balScale, R, G, B) {
	push();
	scale(balScale);
	fill(R, G, B);
	ellipse(balX, balY, balSize, balSize); // balloon shape
	quad(balX - 44, balY + 40, balX + 44, balY + 40, balX + 14, balY + 77, balX - 13, balY + 77);
	
	stroke(0); // basket lines
	line(balX - 12, balY + 77, balX - 12, balY + 90);
	line(balX + 12, balY + 77, balX + 12, balY + 90);
	noStroke();
	
	fill(104, 81, 32); // basket
	rect(balX - 12, balY + 90, 25, 25);
	pop();
}

Concept sketch
Illustrator concept; morning
Illustrator concept; evening
Illustrator concept; dusk

I was inspired by some photographs that I saw of hot air balloons, and I really wanted to play with the different colors of sky at different times of day. The trickiest parts for me were setting up the function drawBalloon() to create the balloons, because once I scaled them, I forgot what variables would be affected in terms of animation.

The largest, turquoise balloon represents seconds, with the magenta balloon as minutes and the orange balloon as hours. The sun also rises and sets based on the hour, with the highest point at noon.

Vera Molnar’s Generative Art

Vera Molnar is widely known as a pioneering woman of computer generated graphics, but her works actually exist between the computer and the hand drawn. She primarily designs algorithms and computes these drawings based on a grid that corresponds to a computed set of variables. In the drawing below, Molnar has already defined the possibilities for each output, but uses an algorithm to offset the repetition and order of these outputs.

Structure de Quadrilateres (Square Structures), 1987, computer drawing with white ink on salmon-colored paper

Interruptions, 1968/1969, Ink plotter on paper

When Molnar worked with computers, there was a different richness to the drawing. Between this shift, from “machine imaginaire” to a “machine réelle,” (https://www.surfacemag.com/articles/vera-molnar-in-thinking-machines-at-moma/) Molnar was able to add more variation to her projects without the limitation of herself as the processor. Molnar’s randomness lies in the output of a logical algorithm. While the series of outputs is usually defined, the order, repetition, pattern of those outputs is randomly sorted based on the algorithm.

Interruptions à recouvrements (Disturbances through overlappings), 1969, Ink plotter on paper

After the drawing, Interruptions, was completed, Molnar then began Interruptions a recouvrements, which used the original drawing to compute the algorithm for the larger layering of drawings which includes variation in the scale, shape, and line thickness.

Molnar believes one power of the computer is that the random can create an aesthetic shock that ruptures the systematic and symmetrical. The rigor and meticulousness which she applies to her logics, is the human bias that computation and randomness cannot create alone. The work is so powerful because the “randomness” exists within Molnar’s bias.

See more projects from Vera Molnar: http://www.veramolnar.com/

 

Looking Outwards 06-Jaclyn Saik

As soon as I saw the theme for this week’s Looking Outwards, I immediately knew what I wanted to talk about. There is an art installation between gates 22 and 23 in the San Jose International Airport that I have been walking under and marveling at for about seven years now, but I’ve never looked into how it was actually made or the details of what it represents. This assignment was a great opportunity to do just that.

eCLOUD, from down below.It is suspended beneath a window and reflects real time weather patterns from all around the world.
this is eCLOUD’s information kiosk, which provides information about the weather pattern currently being displayed.

“eCLOUD” is a dynamic, generative sculpture created to simulate the actual behavior and physical make of a natural cloud. The piece, which stretches 120 feet and hangs suspended from the ceiling, is composed of these specialized polycarbonate tiles that transition between different states of transparency. The degree of opacity is determines by weather patterns from around the world, collected and transmitted in real time to create a cloud that appears the same way one would in that particular time zone.

The random element in this piece is the weather, and I think this is an example of biased but true randomness, since rather than it being a “pseudo-random” quantity generated by a computer, it relied complexity on data from the natural world. And because the algorithm pulls data from around the world and a bunch of different climates, some of the weather bias is avoided because multiple regions are covered.

I love this art piece because of the aesthetics: I think a lot of generative computer art can get wildly technical to the point of losing that “easy beauty” that more traditional fine art has, but their piece is so simplistic yet so complex in build that is satisfies both aesthetic appeal and the technical intrigue of a stand-out installation.