Category: Section D

aranders-lookingoutwards-07

The 2013 project Stadtbilder by Moritz Stefaner is a representation of where cities are most bustling with activity. It is a nontraditional map that allows viewers to see various aspects of a city, such as food, nightlife, shopping, and music. I admire the innovative way that Stefaner viewed cities. It is a project that allows people to see where the fun activities of a city are and then find them with the street map overlay. The refined visual representation also adds to the appeal of the project. The algorithms that Stefaner used must have accounted for the geography of the cities, while creating the shapes and colors for the map. The project truly embodies the artist’s website name of “Truth & Beauty.” The project gives viewers information in a visually pleasing manner. link

link 2

yunzhous-LookingOutward-06

(example shown by the author)

(my work)

After some research online, I found an algorithm named “HTML5 Canvas Fractal Flame Generator” that generates random fractals. The users are free to change the type of lines, colors, scales, rotation, etc.  This algorithm is a simplified version of the “Fractal Flame algorithm” invented by Scott Draves. According to the author, “The algorithm is based on iterating a set of affine transformations to move a point around the plane a very large number of times, then rendering an image which records all of the positions the point visited.” I attached two images in the post, one is an example made by other people, another is the one I generated using this algorithm.

Since this type of “art” can be created by anyone with just a couple of simple clicks, I started to question the definition of “art”. The results are for sure visually pleasing, but is this real art? Generated with some simple operation on computer?

I chose this algorithm to write in LookingOutward because it was fun to play with it. It’s nice that people who barely know about computer science(like me) have access to simple algorithm like this, and have fun with it. Maybe this isn’t real art, but the interesting interaction is real.

You can read more about the algorithm here.

NatalieKS-LookingOutwards-07

In a project lead by Boris Müller and one/one, Studio NAND developed a map that was a visual landscape of fictional and poetic illustrations for the 14th Poetry on the Road festival in Bremen, Germany. The works of 25 different authors spanning 4 different languages created the computational basis for several generated media projects. For example, the image above: this is a visual map in which all of the works in the festival were represented in this unique form of computational media. This particular visualization was based on a “Conic Equidistant Project” so the distances were proportionally correct, as well as visual mapping, natural language processing, “Jan Rybicki’s TransVis research for detecting author finger­ prints,” and Yahoo’s geocoding service, among other distributions to establish connections between the different works.

I really admire this project for its application; this design ended up being used for the promotional poster – as a form of publications-art. It’s a unique way or representing other forms of art, while also having a practical use. It’s very cool to see how even works of literature, like poetry, can be represented through code and visual mapping.

NatalieKS-Project-06

I really wanted to do something with birds, because I have always had the association of birds with time. I thought having the necks grow would be a funny/cute way to represent time, so that’s what I set out to do. Using the time functions was relatively easy, and I thought this was a very enjoyable project. Doing Assignment-06-C definitely helped me when it came to figuring out how to execute my ideas. The only thing I wasn’t sure how to do (without messing up the picture) was how to make the head start off screen. Right now, if it was at midnight, it would show the head starting at the bottom of the canvas instead of slowly coming in.

I originally wanted to do a rooster, but I liked the simpler image of a pigeon-like bird instead.

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-06


var x;
var H;
var M;
var S;
var H2;
var M2;
var S2;

function setup() {
    createCanvas(500, 400);
    angleMode(DEGREES);
    noStroke();
    textSize(16);
    stroke(1);
}

function draw() {
  background(18, 202, 255);
  H = hour() % 12;
  M = minute();
  S = second();
//map out the time so the bird necks
//move with the time
  H2 = map(H, 0, 23, 0, height - 25);
  M2 = map(M, 0, 59, 0, height - 25);
  S2 = map(S, 0, 59, 0, height - 25);
//"second" bird head
    fill(255);
//draw the neck
    rect(350, height - S2, 100, S2, 60);
    push();
    stroke(0);
    strokeWeight(1);
//draw the white part of eye
    fill(240);
    ellipse(390, height - (S2 - 25), 35, 35);
    fill(0);
//draw the black pupil
    ellipse(388, height - (S2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//draw the beak right
    triangle(420, height - (S2 - 5), 441, height - (S2 + 15),
        431, height - (S2 - 10));
//draw the beak left
    triangle(407, height - (S2), 414, height - (S2 + 20),
        419, height - (S2 - 4));
//draw the body
    fill(252, 158, 255);
    rect(320, 300, 105, 100, 60);
//add the bird's "bawk"
    fill(0);
    var bawk = random(447, 449);
    text("Bawk!", bawk, height - (S2 - 25));
// "minute" bird head
    fill(255);
//draw the neck
    rect(200, height - M2, 100, M2, 60);
    push();
    stroke(0);
    strokeWeight(1);
    fill(240);
//white part of eye
    ellipse(240, height - (M2 - 25), 35, 35);
    fill(0);
//pupil
    ellipse(238, height - (M2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//beak right
    triangle(270, height - (M2 - 5), 291, height - (M2 + 13),
        281, height - (M2 - 10));
//beak left
    triangle(257, height - (M2 - 2), 264, height - (M2 + 19),
        269, height - (M2 - 5));
//body
    fill(242, 208, 255);
    rect(165, 300, 115, 100, 60);
    fill(0);
    bawk = random(298, 300);
    text("Bawk!", bawk, height - (M2 - 30));
// "hour" bird head
    fill(255);
    stroke(1);
//neck
    rect(50, height - H2, 100, H2, 60);
    push();
    stroke(0);
    strokeWeight(1);
    fill(240);
//white part of eye
    ellipse(90, height - (H2 - 25), 35, 35);
    fill(0);
//pupil
    ellipse(87, height - (H2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//beak right
    triangle(117, height - (H2 - 4), 138, height - (H2 + 16),
        128, height - (H2 - 9));
//beak left
    triangle(104, height - (H2), 111, height - (H2 + 21),
        116, height - (H2 - 3));
//body
    fill(188, 255, 218);
    rect(0, 300, 130, 100, 60);
    fill(0);
    bawk = random(152, 154);
    text("Bawk!", bawk,height - (H2 - 44));
}

yunzhous-project-06

sketch

var eW = 30; //top of shishi odoshi
var eH = 15; //top of shishi odoshi
var yShift = 50; //mition of shishi odoshi
var SbeadD = 5;
var MbeadD = 8;
var HbeadD = 15;
var Mx = 110; //x position of minute moving bead
var Hx = 110;//x position of hour moving bead
var Sy = 5;////y position of second moving bead
var My = 100; ////y position of minute moving bead
var Hy = 260;////y position of hour moving bead


function setup() {
    createCanvas(240, 480);
    angleMode(DEGREES);
}

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    var mil = millis();

    //backgound color change from day to night
    if (h > 5 & h < 18){
        background(251, 237, 160);//yellow
    } else{
        background(70, 134, 186);//blue
    }

    //shishi odoshi pivot - second
    if (s % 2 != 0){
        shishiUP();
        plate();
        Sbead();
    } else{
        shishiDown();
        plate();
        Sbead();
    }

    //shishi odoshi pivot - minute
    if (s > 58){
        push();
        translate(0, 160);
        shishiDown();
        plate();
        Mbead();
        pop();
    } else{
        push();
        translate(0, 160);
        shishiUP();
        plate();
        Mbead();
        pop();
    }

    //shishi odoshi pivot - hour
    if (m > 58 & s > 58){
        push();
        translate(0, 320);
        shishiDown();
        plate();
        Hbead();
        pop();
    } else{
        push();
        translate(0, 320);
        shishiUP();
        plate();
        Hbead();
        pop();
    }

    //moving bead for second
    if (s % 2 != 0){
        Sy += 1;
        fill(199, 240, 245);
        ellipse(65, Sy, SbeadD, SbeadD);
    } else{
        //limit bead position
        Sy = 5;
    }
    
    //moving bead for minute
    if (s > 57 & s < 59){
        Mx -= 1.3;
        My += 3.2;
        fill(199, 240, 245);
        ellipse(Mx, My, MbeadD, MbeadD);
        //limit the bead position
        } else{
            Mx = 110;
            My = 100;
        }

    //moving bead for hour
    if (m > 58 & s > 57 && s < 59){
        Hx -= 1.3;
        Hy += 3.2;
        fill(199, 240, 245);
        ellipse(Hx, Hy, HbeadD, HbeadD);
        //limit the bead position
    } else {
        Hx = 110;
        Hy = 260;
    }

}

function shishiUP(){
    //shishi odoshi
    fill("green");
    rect(55, 45, 5, 35);//support
    quad(50, 30, 80, 30, 30, 80, 0, 80);
    arc(15, 79, eW, eH, 0, 180);
        //top
    ellipse(65, 30, eW, eH);
    fill(0);
    ellipse(65, 30, eW - 7, eH - 7);
            //support
    fill("green");
    rectMode(CORNER);
    quad(42, 55, 52, 45, 52, 50, 47, 55);
    rect(40, 50, 5, 35);
}

function shishiDown(){
    fill("green");
    rect(55, 45, 5, 35);//support
    quad(65, 30 + yShift, 95, 30 + yShift, 45, 80 - yShift, 15, 80 - yShift);
    arc(30, 81 - yShift, eW, eH, 180, 0);
    arc(80, 79, eW, eH, 0, 180);     //top
            //support
    fill("green");
    rectMode(CORNER);
    quad(42, 55, 52, 45, 52, 50, 47, 55);
    rect(40, 50, 5, 35);
}

function plate(){
    fill(255);
    //base
    ellipse(150, 110, 40, 20);
    //top
    ellipse(150, 100, 90, 30);
}

function Sbead(){ //beads accumulating according to seconds
    var s = second();
    var x = [110,115,120,125,130,135,140,145,150,155,160,165,170,175,180,185,
        115,120,125,130,135,140,145,150,155,160,165,170,175,180,
        120,125,130,135,140,145,150,155,160,165,170,175,
        125,130,135,140,145,150,155,160,165,170,
        130,135,140,145,150,155,160,165];
    var y = [100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,
        96,96,96,96,96,96,96,96,96,96,96,96,96,96,
        92,92,92,92,92,92,92,92,92,92,92,92,
        88,88,88,88,88,88,88,88,88,88,
        84,84,84,84,84,84,84,84,];
    for (i = 0; i < s; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], SbeadD, SbeadD);
    }

}

function Mbead(){//beads accumulating according to minutes
    var m = minute();
    var x = [110,115,120,125,130,135,140,145,150,155,160,165,170,175,180,185,
        115,120,125,130,135,140,145,150,155,160,165,170,175,180,
        120,125,130,135,140,145,150,155,160,165,170,175,
        125,130,135,140,145,150,155,160,165,170,
        130,135,140,145,150,155,160,165];
    var y = [100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,
        96,96,96,96,96,96,96,96,96,96,96,96,96,96,
        92,92,92,92,92,92,92,92,92,92,92,92,
        88,88,88,88,88,88,88,88,88,88,
        84,84,84,84,84,84,84,84,];
    for (i = 0; i < m; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], MbeadD, MbeadD);
    }

}

function Hbead(){//beads accumulating according to hours
    var h = hour();
    if (h > 12){
        h -= 12;  //12-hour clock
    }
    var x = [110,125,140,155,170,185,
            125,140,155,170,
            140,155,];
    var y = [100,100,100,100,100,100,
            88,88,88,88,
            76,76];
    for (i = 0; i < h; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], HbeadD, HbeadD);
    }
}

I got the idea from shishi odoshi, a Japanese devices that’s made to frighten away animals. The weight of running water makes the bamboo pivot. I feel like water could be a metaphor for time, so I made three shishi odoshis, each representing second, minute, and hour, respectively. Beads that represent water, fall into the shishi odoshis, and the weight of the beads make the bamboo pivot and fall down to a plate nearby. The beads are passed down like time flows. The number of beads in the plate indicate the second/minute/hour. The background color indicate day/night.

I had problem making the bamboo to pivot according to time at first. Then I break the motion down to two parts: one with the bamboo up, one with bamboo down, and wrote conditions according to time to control motion. I also had trouble matching the motion of the bamboo with that of the moving beads. After hours of test/adjustments they finally match.

 

rkondrup-looking-outwards-06

cool
Mark Wilson’s computational art is a combination of randomly generated images and geometric relationships. He has been a trailblazer in the field of computational art since the 80s, presenting his work at exhibitions all over the world. By layering complex geometrical patterns Wilson is able to produce an image with many layers of colors, shapes, sizes, textures, and visual effects. I was drawn to this project because it appeared to be a very intricate type of computational design which is endlessly interesting. I am curious to see how random image generation from basic geometrical shapes has developed since the early days of computational design, and whether this sort of drawing has entirely gone out of fashion as a result of the development of more sophisticated algorithms which can produce more visually appealing products. I am also curious to see how designers of computational design have responded to the psychological side of random image generation, maybe tweaking algorithms to still produce images that can be called random, but which contain certain constraints that result in more refined visual or emotional effects.

enwandu-Looking Outwards-06-Randomness

Victor Adan, Jeff Synder and Daniel Iglesia – The Draftsmasters

A still of the pen plotter and 3D computation

The Draftmasters is a very interesting project. It is a video/ geek/ music collaboration between Victor Adan, and Jeff Synder on the performance side, and Daniel Iglesia on the visuals side. The way it worked was, Victor and Jeff made physical gestures, which directed the hacked pen-plotter printers. The printers were equipped with pickups, which make the sound. Then, Daniel analyzes the visuals and creates 3D graphics in real time.

The combination of motion and sound, being captured by the hacked pen plotters is an intriguing one. It simultaneously allows for control, and unrestricted randomness. The combination of the two undoubtable results in some very dynamic forms. You could control your movements, or have them be completely random, but the pen plotter will interpret these how it wants too. Same could be said for the sound involved. Watching the video, the 3D form generate by the moving pen plotter really shows the dynamism, and randomness of the project.

I really admire the project because of the intersection of computation and music. I’m truly fascinated by this area and would love to learn more. Projects like this are truly inspiring. Each of the members of the group seemed to have a specialty with Synder and Adan being musicians, and Iglesia being the visual person. The projects seems to embody a synthesized ideal that could have come from all three.

enwandu-Project-06-Abstract Clock

sketch

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section
// Project-06- Abstract Clock

var bgColmin = (0, 255, 255);
var bgColmax = (92, 26, 102);

// X and Y positions of the lights controlled by the minutes
var xarray = [62, 73, 98, 86, 150, 170, 175, 102, 95, 62, 293, 298, 287, 367, 31, 70, 177, 203, 265, 278, 82, 55, 85, 94, 142, 151, 176, 83, 59, 60, 147, 177,
     93, 80, 68, 64, 373, 320, 296, 270, 315, 309, 267, 200, 98, 84, 40, 98, 108, 293, 301, 377, 354, 257, 197, 169, 205, 292, 232, 173];
var yarray = [47, 78, 116, 50, 202, 217, 191, 104, 88, 280, 195, 252, 155, 253, 320,303, 235, 270, 296, 312, 132, 110, 75, 97, 289, 251, 319, 149, 150, 176, 230, 261,
    172, 192, 248, 194, 230, 261, 324, 310, 174, 184, 217, 216, 235, 211, 312, 287, 293, 324, 292, 280, 298, 317,267, 260, 283, 290, 313, 329, 318];

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

function draw() {
var milli = map(millis(), 0, 999, -35, width + 35);
var sec = map(second(), 0, 59, -35, width + 35);
var min = map(minute(), 0, 58, 0, 255);
var hrND = map(hour(), 0, 11, bgColmax, bgColmin);
var hrDN = map(hour(), 12, 23, bgColmin, bgColmax);
// var hrMoon = map(hour(), 0, 11, 250, Sun);
// var hrSun = map(hour(), 12, 23, Sun, 250);


var timeND = {r:min, g:sec, b:hrND};
var timeDN = {r:min, g:sec, b:hrDN};
// var timeSun = {r:min, g:sec, b:hrSun};
// var timeMoon = {r:min, g:sec, b:hrMoon};

var hrNDColor = color(0, 0, timeND.b);
var hrDNColor = color(0, 0, timeDN.b);
// var hrSunColor = color(timeSun.b, timeSun.b, 0);
// var hrMoonColor = color(timeMoon.b, timeMoon.b, 0);

var gray = color(240);

// Maps the sky/background color to the hours of the day
// Simulating dark to light, and light to dark depending on the time of day
for(var c = 0; c <= height; c+=5){
    var amt = map(c, 0, height, 0, 1);
    var background = lerpColor(hrNDColor, gray, amt);
    fill(background);
    rect(0, c, width, 5);
    if(int(hour()) >= 12){
        hrNDColor = hrDNColor;
    }
}
// Draws Sun/Moon
    fill(200, 170, 0);
    ellipse(width, 0, 175, 175);

// Calls blimp function; Blimp movement contolled by seconds
    blimp(sec, height/10);

// Draws Skyline
    fill(0);
    noStroke();
    strokeJoin(MITER);
    beginShape();
    vertex(0, 400); vertex(0, 306); vertex(4, 306);
    vertex(4, 292); vertex(31, 292); vertex(31, 282);
    vertex(50, 282); vertex(50, 30); vertex(60, 30);
    vertex(60, 20); vertex(103, 20); vertex(103, 30);
    vertex(116, 30); vertex(116, 282); vertex(128, 282);
    vertex(128, 304); vertex(132, 304); vertex(132, 268);
    vertex(140, 268); vertex(140, 190); vertex(169, 190);
    vertex(169, 185); vertex(189, 185); vertex(189, 226);
    vertex(202, 226); vertex(206, 185); vertex(208, 226);
    vertex(216, 226); vertex(216, 216); vertex(226, 216);
    vertex(226, 226); vertex(232, 226); vertex(232, 306);
    vertex(244, 306); vertex(244, 199); vertex(252, 199);
    vertex(252, 139); vertex(260, 139); vertex(260, 127);
    vertex(295, 127); vertex(295, 139); vertex(305, 139);
    vertex(305, 170); vertex(330, 170); vertex(330, 306);
    vertex(365, 306); vertex(365, 250); vertex(390, 250);
    vertex(390, 306); vertex(400, 306); vertex(400, 400);
    endShape();

// Draw a new light every minute
    for(var i = 0; i < int(minute()); i++){
        fill(200, 200, 0);
        rect(xarray[i], yarray[i], 7, 7);
    }
}

// Draws Blimp
function blimp(x, y){
    fill(200, 75, 175);
    quad(x - 20, y, x + 15, y, x + 7, y + 23, x -17, y + 23);
    fill(75)
    ellipse(x, y, 70, 35);
    triangle(x - 45, y -15, x - 25, y, x - 45, y + 15);
    fill(200, 75, 175);
    ellipse(x, y, 68, 15);
}

For this project I was aiming for something seemingly realistic. The background/sky color is controlled by the hours, moving from dark to light and vice versa as you move throughout the day. Every minute a light switches on in the building, and a blimp moves across the screen a certain distance every second.

It was somewhat challenging, but I learnt a lot from the experience.

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section
// Project-06- Abstract Clock

var bgColmin = (0, 255, 255);
var bgColmax = (92, 26, 102);

var xarray = [55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70,
    100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305];
var yarray = [306, 306, 306, 285, 285, 285, 285, 285, 270, 270, 285, 285, 285, 270, 265, 275, 250, 250, 250, 270, 190, 190, 190, 200, 200, 215, 235, 235, 180, 180, 50, 50,
    50, 265, 300, 290, 255, 285, 175, 175, 100, 100, 110, 255, 235, 240, 295, 260, 160, 160, 145, 132, 149, 240, 272, 300, 306, 210, 150, 150];

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

function draw() {
var milli = map(millis(), 0, 999, -35, width + 35);
var sec = map(second(), 0, 59, -35, width + 35);
var min = map(minute(), 0, 58, 0, 255);
var hrND = map(hour(), 0, 11, bgColmax, bgColmin);
var hrDN = map(hour(), 12, 23, bgColmin, bgColmax);
// var hrMoon = map(hour(), 0, 11, 250, Sun);
// var hrSun = map(hour(), 12, 23, Sun, 250);


var timeND = {r:min, g:sec, b:hrND};
var timeDN = {r:min, g:sec, b:hrDN};
// var timeSun = {r:min, g:sec, b:hrSun};
// var timeMoon = {r:min, g:sec, b:hrMoon};

var hrNDColor = color(0, 0, timeND.b);
var hrDNColor = color(0, 0, timeDN.b);
// var hrSunColor = color(timeSun.b, timeSun.b, 0);
// var hrMoonColor = color(timeMoon.b, timeMoon.b, 0);

var gray = color(240);

// Maps the sky/background color to the hours of the day
// Simulating dark to light, and light to dark depending on the time of day
for(var c = 0; c <= height; c+=5){
    var amt = map(c, 0, height, 0, 1);
    var background = lerpColor(hrNDColor, gray, amt);
    fill(background);
    rect(0, c, width, 5);
    if(int(hour()) >= 12){
        hrNDColor = hrDNColor;
    }
}
// Draws Sun/Moon
    fill(200, 170, 0);
    ellipse(width, 0, 175, 175);

// Calls blimp function; Blimp movement contolled by seconds
    blimp(sec, height/10);

// Draws Skyline
    fill(0);
    noStroke();
    strokeJoin(MITER);
    beginShape();
    vertex(0, 400); vertex(0, 306); vertex(4, 306);
    vertex(4, 292); vertex(31, 292); vertex(31, 282);
    vertex(50, 282); vertex(50, 30); vertex(60, 30);
    vertex(60, 20); vertex(103, 20); vertex(103, 30);
    vertex(116, 30); vertex(116, 282); vertex(128, 282);
    vertex(128, 304); vertex(132, 304); vertex(132, 268);
    vertex(140, 268); vertex(140, 190); vertex(169, 190);
    vertex(169, 185); vertex(189, 185); vertex(189, 226);
    vertex(202, 226); vertex(206, 185); vertex(208, 226);
    vertex(216, 226); vertex(216, 216); vertex(226, 216);
    vertex(226, 226); vertex(232, 226); vertex(232, 306);
    vertex(244, 306); vertex(244, 199); vertex(252, 199);
    vertex(252, 139); vertex(260, 139); vertex(260, 127);
    vertex(295, 127); vertex(295, 139); vertex(305, 139);
    vertex(305, 170); vertex(330, 170); vertex(330, 306);
    vertex(365, 306); vertex(365, 250); vertex(390, 250);
    vertex(390, 306); vertex(400, 306); vertex(400, 400);
    endShape();

    for(var i = 0; i < int(minute()); i++){
        fill(200, 200, 0);
        rect(xarray[i], yarray[i], 7, 7);
    }
}

// Draws Blimp
function blimp(x, y){
    fill(200, 75, 175);
    quad(x - 20, y, x + 15, y, x + 7, y + 23, x -17, y + 23);
    fill(75)
    ellipse(x, y, 70, 35);
    triangle(x - 45, y -15, x - 25, y, x - 45, y + 15);
    fill(200, 75, 175);
    ellipse(x, y, 68, 15);
}

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section
// Project-06- Abstract Clock

var bgColmin = (0, 255, 255);
var bgColmax = (92, 26, 102);

var xarray = [55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70,
    100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305];
var yarray = [306, 306, 306, 285, 285, 285, 285, 285, 270, 270, 285, 285, 285, 270, 265, 275, 250, 250, 250, 270, 190, 190, 190, 200, 200, 215, 235, 235, 180, 180, 50, 50,
    50, 265, 300, 290, 255, 285, 175, 175, 100, 100, 110, 255, 235, 240, 295, 260, 160, 160, 145, 132, 149, 240, 272, 300, 306, 210, 150, 150];

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

function draw() {
var milli = map(millis(), 0, 999, -35, width + 35);
var sec = map(second(), 0, 59, -35, width + 35);
var min = map(minute(), 0, 58, 0, 255);
var hrND = map(hour(), 0, 11, bgColmax, bgColmin);
var hrDN = map(hour(), 12, 23, bgColmin, bgColmax);
// var hrMoon = map(hour(), 0, 11, 250, Sun);
// var hrSun = map(hour(), 12, 23, Sun, 250);


var timeND = {r:min, g:sec, b:hrND};
var timeDN = {r:min, g:sec, b:hrDN};
// var timeSun = {r:min, g:sec, b:hrSun};
// var timeMoon = {r:min, g:sec, b:hrMoon};

var hrNDColor = color(0, 0, timeND.b);
var hrDNColor = color(0, 0, timeDN.b);
// var hrSunColor = color(timeSun.b, timeSun.b, 0);
// var hrMoonColor = color(timeMoon.b, timeMoon.b, 0);

var gray = color(240);

// Maps the sky/background color to the hours of the day
// Simulating dark to light, and light to dark depending on the time of day
for(var c = 0; c <= height; c+=5){
    var amt = map(c, 0, height, 0, 1);
    var background = lerpColor(hrNDColor, gray, amt);
    fill(background);
    rect(0, c, width, 5);
    if(int(hour()) >= 12){
        hrNDColor = hrDNColor;
    }
}
// Draws Sun/Moon
    fill(200, 170, 0);
    ellipse(width, 0, 175, 175);

// Calls blimp function; Blimp movement contolled by seconds
    blimp(sec, height/10);

// Draws Skyline
    fill(0);
    noStroke();
    strokeJoin(MITER);
    beginShape();
    vertex(0, 400); vertex(0, 306); vertex(4, 306);
    vertex(4, 292); vertex(31, 292); vertex(31, 282);
    vertex(50, 282); vertex(50, 30); vertex(60, 30);
    vertex(60, 20); vertex(103, 20); vertex(103, 30);
    vertex(116, 30); vertex(116, 282); vertex(128, 282);
    vertex(128, 304); vertex(132, 304); vertex(132, 268);
    vertex(140, 268); vertex(140, 190); vertex(169, 190);
    vertex(169, 185); vertex(189, 185); vertex(189, 226);
    vertex(202, 226); vertex(206, 185); vertex(208, 226);
    vertex(216, 226); vertex(216, 216); vertex(226, 216);
    vertex(226, 226); vertex(232, 226); vertex(232, 306);
    vertex(244, 306); vertex(244, 199); vertex(252, 199);
    vertex(252, 139); vertex(260, 139); vertex(260, 127);
    vertex(295, 127); vertex(295, 139); vertex(305, 139);
    vertex(305, 170); vertex(330, 170); vertex(330, 306);
    vertex(365, 306); vertex(365, 250); vertex(390, 250);
    vertex(390, 306); vertex(400, 306); vertex(400, 400);
    endShape();

    for(var i = 0; i < int(minute()); i++){
        fill(200, 200, 0);
        rect(xarray[i], yarray[i], 7, 7);
    }
}

// Draws Blimp
function blimp(x, y){
    fill(200, 75, 175);
    quad(x - 20, y, x + 15, y, x + 7, y + 23, x -17, y + 23);
    fill(75)
    ellipse(x, y, 70, 35);
    triangle(x - 45, y -15, x - 25, y, x - 45, y + 15);
    fill(200, 75, 175);
    ellipse(x, y, 68, 15);
}

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section
// Project-06- Abstract Clock

var bgColmin = (0, 255, 255);
var bgColmax = (92, 26, 102);

var xarray = [55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70,
    100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305];
var yarray = [306, 306, 306, 285, 285, 285, 285, 285, 270, 270, 285, 285, 285, 270, 265, 275, 250, 250, 250, 270, 190, 190, 190, 200, 200, 215, 235, 235, 180, 180, 50, 50,
    50, 265, 300, 290, 255, 285, 175, 175, 100, 100, 110, 255, 235, 240, 295, 260, 160, 160, 145, 132, 149, 240, 272, 300, 306, 210, 150, 150];

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

function draw() {
var milli = map(millis(), 0, 999, -35, width + 35);
var sec = map(second(), 0, 59, -35, width + 35);
var min = map(minute(), 0, 58, 0, 255);
var hrND = map(hour(), 0, 11, bgColmax, bgColmin);
var hrDN = map(hour(), 12, 23, bgColmin, bgColmax);
// var hrMoon = map(hour(), 0, 11, 250, Sun);
// var hrSun = map(hour(), 12, 23, Sun, 250);


var timeND = {r:min, g:sec, b:hrND};
var timeDN = {r:min, g:sec, b:hrDN};
// var timeSun = {r:min, g:sec, b:hrSun};
// var timeMoon = {r:min, g:sec, b:hrMoon};

var hrNDColor = color(0, 0, timeND.b);
var hrDNColor = color(0, 0, timeDN.b);
// var hrSunColor = color(timeSun.b, timeSun.b, 0);
// var hrMoonColor = color(timeMoon.b, timeMoon.b, 0);

var gray = color(240);

// Maps the sky/background color to the hours of the day
// Simulating dark to light, and light to dark depending on the time of day
for(var c = 0; c <= height; c+=5){
    var amt = map(c, 0, height, 0, 1);
    var background = lerpColor(hrNDColor, gray, amt);
    fill(background);
    rect(0, c, width, 5);
    if(int(hour()) >= 12){
        hrNDColor = hrDNColor;
    }
}
// Draws Sun/Moon
    fill(200, 170, 0);
    ellipse(width, 0, 175, 175);

// Calls blimp function; Blimp movement contolled by seconds
    blimp(sec, height/10);

// Draws Skyline
    fill(0);
    noStroke();
    strokeJoin(MITER);
    beginShape();
    vertex(0, 400); vertex(0, 306); vertex(4, 306);
    vertex(4, 292); vertex(31, 292); vertex(31, 282);
    vertex(50, 282); vertex(50, 30); vertex(60, 30);
    vertex(60, 20); vertex(103, 20); vertex(103, 30);
    vertex(116, 30); vertex(116, 282); vertex(128, 282);
    vertex(128, 304); vertex(132, 304); vertex(132, 268);
    vertex(140, 268); vertex(140, 190); vertex(169, 190);
    vertex(169, 185); vertex(189, 185); vertex(189, 226);
    vertex(202, 226); vertex(206, 185); vertex(208, 226);
    vertex(216, 226); vertex(216, 216); vertex(226, 216);
    vertex(226, 226); vertex(232, 226); vertex(232, 306);
    vertex(244, 306); vertex(244, 199); vertex(252, 199);
    vertex(252, 139); vertex(260, 139); vertex(260, 127);
    vertex(295, 127); vertex(295, 139); vertex(305, 139);
    vertex(305, 170); vertex(330, 170); vertex(330, 306);
    vertex(365, 306); vertex(365, 250); vertex(390, 250);
    vertex(390, 306); vertex(400, 306); vertex(400, 400);
    endShape();

    for(var i = 0; i < int(minute()); i++){
        fill(200, 200, 0);
        rect(xarray[i], yarray[i], 7, 7);
    }
}

// Draws Blimp
function blimp(x, y){
    fill(200, 75, 175);
    quad(x - 20, y, x + 15, y, x + 7, y + 23, x -17, y + 23);
    fill(75)
    ellipse(x, y, 70, 35);
    triangle(x - 45, y -15, x - 25, y, x - 45, y + 15);
    fill(200, 75, 175);
    ellipse(x, y, 68, 15);
}

 

rkondrup-06-project-abstract-clock

sketch

// ryu kondrup
// rkondrup@andrew.cmu.edu
// section D
// project-06-abstract-clock

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

function draw() {
  background(255);

    var centerPt = width/2;
    var sWidth = 100;
    var mWidth = 60;
    var hWidth = 30;
    var s = second();
    var m = minute();
    var h = hour();
    var sAngle = radians(s*6)-PI/2;
    var mAngle = radians(m*6)-PI/2;
    var hAngle = radians(h*30)-PI/2;

    //sin cos positioning of each circle


    //big center circle
    fill(120, 210, 200);
    stroke(255, 245, 210);
    strokeWeight(3);
    ellipse(centerPt, centerPt, width);

//to make 60 lines
for (var i = 0; i < 60; i++) {

    //seconds
    var sPositionX = cos(sAngle)*150+centerPt;
    var sPositionY = sin(sAngle)*150+centerPt;
    //minutes
    var mPositionX = cos(mAngle)*100+centerPt;
    var mPositionY = sin(mAngle)*100+centerPt;
    //hours
    var hPositionX = cos(hAngle)*60+centerPt;
    var hPositionY = sin(hAngle)*60+centerPt;
    //main background circle
    var xPerimeter = cos(radians(6*i))*240+240;
    var yPerimeter = sin(radians(6*i))*240+240;
    //new perimeter circle
    var x2Perimeter = cos(radians(i*s))*240+240;
    var y2Perimeter = sin(radians(i*s))*240+240;


//LINES!!!!!!!!!!!!!!!!!!!!
    stroke(245, 255, 210);
    strokeWeight(1);
    noFill();
        beginShape();
        //center reference point
        curveVertex(centerPt, centerPt);
        //fixed perimeter
        curveVertex(xPerimeter, yPerimeter);
        //second hand
        curveVertex(sPositionX, sPositionY);
        //minute hand
        curveVertex(mPositionX, mPositionY);
        //hour hand
        curveVertex(hPositionX, hPositionY);
        //fixed perimeter
        curveVertex(x2Perimeter, y2Perimeter);
        //back to center reference point
        curveVertex(centerPt, centerPt);
        endShape();
    }

// //CIRCLES!!!!!!!! HIDDEN
// fill(230, 230, 230);
// //seconds
// ellipse(sPositionX, sPositionY, sWidth)
// //minutes
// ellipse(mPositionX, mPositionY, mWidth)
// //hours
// ellipse(hPositionX, hPositionY, hWidth)


}

In this assignment I originally wanted to make circles which rotate inside of other rotating circles in the way that the moon orbits the earth as the earth orbits the sun, but because of time constraints and because I was not able to come up with a way to do it by friday morning, I had to settle on a different design concept. Instead I chose to depict time as a collection of curving lines which share three common points representing the second, minute, and hour. I then attached the lines to the perimeter of the bounding circle. The way that the line density changes each second was an accident but because it made the image more dynamic I decided to leave it.

aboyle-Looking Outwards-06

Picture credit:https://creators.vice.com/en_uk/article/vvzxkb/random-numbers-screen-printed-generative-art-nyc-event

For this post, I decided to look at the work of Marius Watz, specifically his contribution to the “Random Number Multiples” series. All contributors create prints that engage with new techniques, and Marius Watz decided to experiment with computational randomness. Watz created two prints, both part of an “arc” series, that are described as “pseudo-random compositions of radial shapes, subtly distorted by a 3D surface that lends the image a strong focal point and sense of movement.”

First of all, I simply like the aesthetics of this project; I think that the final prints are very interesting to look at. Secondly, I think it’s interesting how the art was generated on a computer and then transferred onto a physical print. In a time where everything’s digitized, it can be tempting to just leave digital art on the computer, but I think that there’s a benefit to bringing that art into the physical world. Finally, while I can tell that aspects of the art were random, the piece is nonetheless cohesive, something that I find intriguing.

The artist describes the composition as “pseudo-random”, so the randomness was heavily biased and deterministic—not “truly random”, perhaps, but interesting nonetheless. From the final product, I can tell that Watz has an appreciation for both color and form.