jiaxinw-Project 06-Abstract Clock


//original x,y position for second leaves
var sy = -180;
var sx = 0;
//original x,y position for minute leaves
var my = -150;
var mx = 0
//original x,y position for hour petals
var hy = -70;
var hx = 0

//mark the initial frame as 0
var frameInSec = 0;
var frameInMin = 0;
var frameInHr = 0;

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

function draw() { 

    //translate the center to the center of the canvas
    translate(width/2, height/2);

    //base leaves-seconds
    var numS = 60-second();//the number of second leaves on the canvas

    if (frameInSec != second()) {
        frameInSec = second(); // to see if the frame enter a new second
        sy = -180;//if it is a new second then reset the last leaf x,y to original position
        sx = 0;

    //draw a leave rotate every 6 degrees 
    for (var i = 0; i <= numS; i++) {
        fill(100, 176, 96);
        //if i smaller than the number then draw static leaves
        if(i < numS){
        } else {
        //if i is the number then the leave flies away
            sy -= 3;  
            sx -= random(-10,3)

    //middle layer leaves-minutes
    var numM = 60-minute();//the number of minute leaves on the canvas

    if (frameInMin != minute()) {
        frameInMin = minute(); // to see if the frame enter a new minute
        my = -150;//if it is a new minute then reset the last leaf x,y to original position
        mx = 0;

    //draw a leave rotate every 6 degrees 
    for (var j = 0; j <= numM; j++) {
        fill(76, 132, 73);
        //if i smaller than the number then draw static leaves
        if(j < numM){
        } else {
        //if i is the number then the leave flies away
            my -= 3;  
            mx -= random(-10,3)

    var numH = 24-hour();//the number of hour petals on the canvas

    if (frameInHr != hour()) {
        frameInHr = hour(); // to see if the frame enter a new hour
        hy = -70;//if it is a new hour then reset the petal x,y to original position
        hx = 0;

    //draw a leave rotate every 6 degrees 
    for (var g = 0; g <= numH; g++) {
        fill(219, 181, 122);
        //if i smaller than the number then draw static leaves
        if(g < numH){
        } else {
        //if i is the number then the petal flies away
            hy -= 5;  
            hx -= random(-5,15)

    //the heart of flower


I had a thought about creating a flower and letting people watch it disappearing to learn how time passes away. Therefore, I started a sketch like below:

The outer ring leaves represent seconds, and as one second is gone, the leave is also gone. The same as the middle ring of “minute” leaves and the flower which represents the hour. After I successfully made the leaves and petals disappear according to the time, I started to think, maybe adding the animation of how the leaves and petals “fly” away can be interesting. To achieve this, I came up with an idea of drawing a new leaf or petal at the last position and adding a random number to its changing position.

I am very happy that I finally made my flower clock come true!


The Shapes Project by Allan McCollum made in 2005-2006 is a project in which McCollum generates millions of unique shapes in order to mimic the breadth of the population when it hits its peak during the middle of the current century around 2050. McCollum created enough images so that every person on earth could have one. I admire this project because of the consideration it gives to every human in existence and the fact that none of the shapes are replications of each other. It is a thoughtful and interesting project. The random shapes are made using the system that he created and does not specify on. The prints can be made from different materials using Adobe Illustrator “vector” files.  The artist’s sensibilities are seen in the work from the magnitude and profundity of the project.


jiaxinw-LookingOutwards-06- Randomness

Irrational Geometrics, 2005-2015,by PASCAL DOMBIS

Pascal Dombis is a French visual artist. He has an art style of whose unpredictable and dynamic visual forms, and he uses the technology a lot, like programs to generate repetitive shapes, lines, patterns and so on for his works. Irrational Geometrics is one of the works with the classic unpredictable generated art style. This piece of arts explored the relationship and development of straight lines and curves, as it was described “When you take a line fragment and give it a stretch, as you do with the string of a bow, the first result is a curve, then a circle and in case you go for it, endlessly, the ultimate artefact is a line again.” The best part of this art installation was the interaction between the audience and the projection. Once the rope was pulled, the whole wall started to change. Thousands of millions of carves were moving, rotating and changing on the wall as you controlled.  Pascal Dombis used the algorithm to generate all the lines and curves as well as their movements.

For more information, please go to: http://dombis.com/works/irrational-geo/


Project 6-Abstract Clock

Dave AbClock

function setup() {
angleMode(DEGREES); //set angles to be degree
createCanvas(480, 480);


function draw() {
     //set back ground to be white
    var sec = second(); //return seconds
    var min = minute(); //return minutes
    var hr = hour(); //return hours
    seccount = map(sec,0,60,0,360)+90; //convert the second value to the angle usable for clock
    mincount = map(min,0,60,0,360)+90; // convert the minute value to the angle usable for clock
    hourcount = map(hr,0,12,0,360)+90; //convert the hour value to the angle usable for clock
    //adding 90 degree to begin the clock at 12 O clock direction

    movement(); //initiate movement
function movement(){ //same as above except radius changed and color 
    var centerx = width/2; //center of x 
    var centery = height/2; //center of y
    var radius = 150; //set radius to 150
    var x1 = -cos(seccount) *radius; //x1 coordinate for seconds
    var y1 = sin(seccount) * radius; //y1 coordinate for seconds
    var x2 = -cos(mincount) *radius; //x coordinate for minute
    var y2 = sin(mincount) * radius; //y coordinate for minute
    var x3 = -cos(hourcount) *radius; // x coordinate for hour
    var y3 = sin(hourcount) * radius; // y coordinate for minute
    var drad = dist(centerx+x2,centery-y2,centerx+x1,centery-y1); //distance of seconds to minute
    var drad2 = dist(centerx+x1,centery-y1,centerx+x3,centery-y3); //distance of seconds to hour
    fill(y3*12,y1*6,y2*3,120); //color of triangle to be based on second, minute, and hours
    triangle(centerx+x1,centery-y1,centerx+x2,centery-y2,centerx+x3,centery-y3); //create triangle on x,y coordinate of time
    fill(0,0,255,200);// color of seconds to be blue 
    ellipse(centerx+x1,centery-y1,x1,x1); //second hand circle
    fill(50,50,50,dist(centerx+x2,centery-y2,centerx+x1,centery-y1)); //minute hand size and opacity change
    ellipse(centerx+x2,centery-y2,drad/2,drad/2); // minute hand circle
    fill(0,255,0,dist(centerx+x1,centery-y1,centerx+x3,centery-y3)); //hour hand size and opacity change
    ellipse(centerx+x3,centery-y3,drad2/2,drad2/2); //hour hand circle

    //indication of actual points



I first started by looking at the http://procyonic.org/clocks/. this website gave me idea that I could create some sort of orbit system just like planetary system. In stead of making them orbit, I wanted to create some sort of relationship among three points that are representing time. I connected them into triangle and overlap of the triangles created interesting form.

After creating a clock code program , I connected three points with triangle p5 function. That was not enough to give abstraction to generated form. I decided to move further and place ellipse on each of the points to make is legible, but at the same time establishing another layer of relationship. I made size the ellipse to be different based on distance of points from the seconds hand location and color to change based on the clock time.

As a result, I have a generative clock that is interesting to stare and keep record to see what kind of forms generate as time passes.

Looking outwards-06 randomness


This is a generative art that consist of the genetic Algorithms.

This works by using the genetic algorithm to model a population of individuals, each containing a string of DNA which can be visualized in the form of an image. It starts with a population consisting randomly generated gene pool, then each is compared against the reference image. Each individuals are ranked by their likeness to it and display the fittest image for generative process. DNA with most accurate representation of the reference image is selected over previous generation and constantly generating best candidate. I appreciate this project not only because it is randomly generated but it is combining the field of coding into biology. He released the code of this algorithm on his github website.


This is a video created by Jonathan McCabe, a generative artist and designer from Canberra, Australia. He creates these pieces by giving random values to pixels, usually between -1 and 1, and defines sets of rules that dictate how the pixels will respond to those around them and therefore morph to create these life-like, biological patterns.

OB_tile_0501 from McCabe’s Flickr

McCabe’s art touches on British mathematician Alan Turing who proposed that “naturally occurring patterns — things like the spots and stripes on animal fur — could arise from a random state of cells.” In addition, the states of these cells would also affect the neighboring cells, and create a domino effect, just as the pixels in McCabe’s work are part of a much bigger network and affect one another. Art like this fits into the realm of aleatoricism, which is “the incorporation of chance into the process of creation, especially the creation of art or media.”

I am really fascinated by the idea of letting art define itself and leaving things up to chance rather than controlling something to the point that it suffers and creativity is suffocated. In my own experience, I’ve sometimes felt the need to make my art “perfect.” However, I soon realized that the mistakes I made in the process of art-making were very interesting, and it became more enjoyable to embrace the imperfections than force the work to be something it’s not.


Holger Lippmann

After looking on Google and Pinterest, I found an artist whose work I really enjoy. This week I will be doing my Looking Outwards Report on Holger Lippmann. His latest work can be found here.

Lippmann started with focused study in visual arts as a teenage. He went to his first computer graphics internship at the Institute of Technology in New York. He worked more closely with computers when he moved back to Germany, his fascination of working with software and internet based media grew. His work includes vector files ranging from sizes 80 centemetres to 180 metres wide.


One of the pieces I most admire is the Noise Scape 4 Series.

this is a rework of some ongoing scripts and one of Lippmann’s most recent works. I really enjoy this work because it is a romantic landscape painting that has been created with simple 2d geometries. Lippmann has programed a script that can run and produce many of these “paintings” and he then chooses the best to print.

dchikows – Section C – Looking Outward – 06

Automatic Drawing

André Masson was a French artist who lived from January 4, 1896 to October 28, 1987. He started with cubism then moved to surrealism. It was this stage of his career that he employed automatic drawing. A practice in which he let his pen randomly move across his paper without having a conceived notion of an image he wanted to create. Once he felt he was done Masson would occasionally make revisions or additions to his work. We can not say that his work is completely random because his pen is not evenly distributed along the canvas which would make it random, but it is very distributed at least to the eye. The randomness is all based on how he subconsciously moved his hand to draw. I enjoy Masson’s work because it allows for the viewer to prescribe his or her own image within the abstract, which Masson lays the foundation of.

Automatic Drawing

Masson’s Work

ashleyc1-Section C-Looking Outwards-06

DRAWING, 147-137#2B, APRIL 14, 1964
DRAWING, STUDY 152-137A-B, FEBRUARY 24, 1966

John De Cesare was an American sculptor turned graphic illustrator. He is most famous for his colored pencil drawings of music where he created a complex and new language to visualize famous pieces of music. Heavily inspired by Art Deco ornamentation, De Cesare’s 250 drawings are a visual language with vibrant but flat color and distinct, geometric shapes. While these drawings are subjective to how De Cesare would interpret and visualize these scores, he studied music theory heavily before creating a complex algorithmic language.

In a Cooper Hewitt analysis of De Cesare’s work, De Cesare mathematically determined that:

Music has two geometric elements within its structure. A horizontal and a vertical reciprocally related. The horizontal movement from left to right indicates the duration (or time value) of a note and the vertical, or up and down movement, indicates the pitch (or position on the staff). Since a musical note contains both duration and pitch, it forms a geometric unit in the form of an angle. This angle can be considered the space form.
Using an angular geometric shape to symbolize a standard musical note, he varied its width to suggest the length in time, and its position on the staff to indicate the pitch. The direction of the angle up or down indicated the bass or treble clef. He created forms of entirely different shapes to symbolize vocal parts. He used color to clarify visually each line of music (for instance, in a simple score, violet “notes” might indicate notes in the treble clef and red “notes” those in the bass clef).

Unlike other artists who have created abstract musical notations, De Cesare stands out because the rendering of the music is still referential to the Art Deco art movement: his own personal background. I appreciate that this large series isn’t just an abstraction of music but also keeps to the artist’s own personal identity and can stand alone as a piece within the Art Deco movement.




alchan-Looking Outwards 06

John Pound’s Ran Dum LOOP (1999) is a collection of code that randomly generates comic- and cartoon-style art. (An example of one of the randomly-generated pieces is shown below).

Pound wrote the code entirely in PostScript. The program does have some elements that are not randomly determined, but I wasn’t able to find out what those were or what type of randomness Pound was using.

I chose this project because I was drawn to the idea of randomly generating something that doesn’t seem like it would work well as a randomly generated piece. The viewer has to try to make sense of the generated panels and images, and I like the idea of being able to “see” an overarching narrative in a random sequence of images.