October 2019 – Page 51 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Sean Meng-Looking Outwards-06

Vladimir Kanic’s filmmaking artwork
“Art concept that uses chaos theory and randomness to create structured art.”
Link: https://www.youtube.com/watch?v=Krgp_QwfEJo

Transmedia filmmaking artist Vladimir Kanic used chaos theory* as a filmmaking tool and explored how a film can be made by using randomness as its principal structural language. In order to perform the process, the artist and his team have devised a concept of the Magic box, designed to serve as a model system of randomness. Twelve boxes were given to randomly chosen art directors, and each one had to put a random number of objects inside, seal the box and not disclose the contents to anyone. A group of random people set the boxes into a completely unorganized stash, and the artist had to choose one and pick it up on a random day. Since the artist didn’t know what kind of a film is going to be created, its structural language and technique were decided by observing and measuring randomness that emanated from the objects concealed in the box. The project and methodology explores how randomness can be define in multiple dimensions and how to engage people to interact with randomness and how the final work that had been generated can be unpredictable at the beginning.

Claire Lee – Looking Outwards – 06

I decided to write about Yale architecture student Aaron Tobey’s Randomness Project. It seems to have been for a coding-based architecture course, and essentially runs a program that draws a randomly-generated set of lines and shapes on 36 canvases. I found it really interesting because each of the 36 canvases were in the same format (same background and same color/weight of line) but seemed like they were generated with different programs. I admired that despite these variations, the entire piece is cohesive and comes together in an aesthetically pleasing way.

Random Video Project, Aaron Tobey, 2015.

Trying to think around the algorithms that might have created this piece was really interesting because unlike some of the previous works I’ve found, this was a student’s work. I still think that it goes a little beyond the scope of what I’ve learned to do so far, but the script used to create this visual piece uses a set of rules to overlap circles, triangles, and lines in a random but constrained space, with a defined frame per second rate. It starts out with a “base” piece–a set of randomly generated canvases containing shapes that don’t change– and then layers dynamic shapes on top of that. I’m not sure whether these bases are hard-coded (for aesthetic purposes?) or not, but they seem fairly random.

CJ Walsh – Looking Outwards 06 – Randomness

The piece that I chose to focus on for this week’s Looking Outwards is by Georg Nees. He is considered a pioneer in the world computer art and graphics. While this piece is pretty simple, I enjoyed it for a variety of reasons. I like to sketch in a lot of my notebooks, and all of the lines remind me of the things that I doodle when I’m in class. Another aspect that really stands out to me is on their own, each of the small drawings would seem insignificant. But, when combined into the large grid with all of the other generated drawings, it creates a really intriguing image. It almost feels like a diagram of some kind of language or alphabet, which is cool.

In order to create this piece, Nees set random parameters for each graphic. The rules that he set was that eight dots would be placed inside the established canvas, and then they would be connected by lines into a closed edge shape. He states that, “The program for each graphic repeats generative fundamental operations so that the mere repetitions, the aesthetic redundancy, produce the random parametric values of the aesthetic improbability of the graphic during each repetition.”

It is interesting to think about how far computer graphics and art has come since Nees first created and presented these works. Looking back at this piece now, we see it as quite simple compared to the other forms you can create using code. At the time, this work was revolutionary. This piece conveys a sense of experimentation, which reflects exactly what Nees was doing with his work. It wasnt about creating an artistically beautiful work of art. It was a part of a larger experiment into the capabilities of programming. And even if this may not be considered high art, it is a cool piece to look at and one that I admire.

Kimberlyn Cho – Looking Outwards 06

The “Random Number Multiple” series by Marius Watz and Jer Thorp attempt to encourage artists to use old school fine art strategies to hand print their computational (any computer or software-based) art. As part of the “Random Numbers” exhibit in NYC, the series takes part in a platform curated by Christina Vassallo for artists to experiment with new techniques or mediums.

Marius Watz’s “Arc” series uses a somewhat random composition of radial shapes that are distorted by a 3d surface to imitate a sense of movement while maintaining a focal point. Jer Thorp took a more systematic approach than Watz by using the newspaper as his reference. He tracked the frequency of specific words in the New York Times in a twenty-year time period, which he then graphed using a randomized group of colors based on the theme of the artwork.

I found the combinative nature of the design process of these artworks to be most interesting. Most artists seem to go about one specific way of producing their art, whether it be by hand or with a certain software. I found it innovative how Watz and Thorp use a software to produce the computational image they want and then incorporate a factor of randomness with either the colors or array of the shapes to portray the work with traditional techniques. The timeless incorporation of a variety of strategies leaves room for results that might’ve not been expected or accidental new elements to the creation that creates work that the artist can then learn from.

Sarah Choi – Looking Outwards – 06

Norimichi Hirakawa , 16 unknowns and the irreversible (2013) from norimichi hirakawa on Vimeo.

Norimichi Hrakawa’s The Irreversible is a sequence of a thousand and twenty-four randomized two-second digital videos depicting the art of time. This recorded reversed time ticks forward in real-time on the minds of his audience. He explains he wanted to convey the idea of the past and present. He plays with the idea of realizing how the now is perceived to be different from what happened to people individually in the past as recent as a couple of seconds ago.

The algorithms in which he was able to create his piece was completely through digital manipulation of his code. He focused on using inverse operations and generating a random method to create a moving illusion for two seconds. After each two-second video, he made his code restart, similar to the i = 0 functions we’ve been learning in class.

In its final form, Hrakawa’s work brings out abstract and randomly produced generative art produced solely through digital manipulation. His creativity and play on time were intriguing to read about. He believes technological tools and computation develop innovative ideas for his art. From the beginning, Hrakawa relied on computation to explore more areas for themes to his art. He applied theorems of math and physics as parameters, and further advanced his art through playing with plotted pixels based on two-dimensional paintings. In terms of color, he explored R, G, and B color formats and created equations to randomize specific colors to his work.

http://counteraktiv.com/#wrk

Xiaoyu Kang – Looking Outwards – 06

This projected is first presented at the exhibition at the Louchard Gallery in December, 2017. It consist of a series of small to medium sized drawings that are in relations to chaos and order. They all focuses on the idea of “directed randomness”. The drawings are all done on rice paper and watercolor. Gold refers are also used in reference to traditonal Inian art as a sacred art elements.

The project is started first by applying watercolor pigments randomly to the canvas. After the application, the author alters the rythem of the watercolor with an iron as a drawing tool. So as a result, the final drawing is presented with a combination of conscious and unbconscious act, which in the end creates a new form of order. The pigment application process is uncontrolled but the water drying process is controlled.

Steven Fei-Looking Outwards-06

Randomness has brought artists with a more natural composition of artworks. However, randomness in artistic expressions is still under intentional control to maintain a better big picture.

The artist, Tyler Hobbs, who takes advantage of random numbers, combines his intention of relating randomness to graphical proximity, transparency, brightness of the specific elements to create amazing compositions. The Continuity No. 8 impresses me the most with its “random” intention to create the architectural space. By generating semi-random quadrilateral shapes, the artist carefully controls the sizes of the elements and allows the intersections of the shapes to become negative spaces. By randomly choosing focal points, the artist succeeds in creating a collage painting with multiple perspectives and transparencies. The overlapping areas are randomly distributed in adjustment with the transparency and brightness to give a visual depth and hierarchy. Meanwhile, contents from different layers are thus connected to give a pseudo-realistic effect.

Such an interesting painting of randomness me inspires me that by combining the random numbers and sizes with specific parameters such as transparency and brightness, we are able to depict an architecture or even a scenary. I have never thought of random images or polygons can “have” such intentions to collaborate under these manipulations. What’s more, such a process will never produce two same compositions, meaning that the infinite graphical collages and abstract paintings can be created even under one same template.

The Artist’s Portfolio

Click here to see the thought process of the artist

The Continuity No 8 created by random polygons to produce a collage of architectural atmosphere

Steven Fei-06-Abstract Clock

sketch

For this project, I tried to create an interstellar-style clock with arcs and circles cycle in different rates. The bluish ink-like path represents the current pace of the second. The two horizontal bars represent the current minute and the amount and length of diagonal bars represent the current hour. As I gained the inspiration from an hourglass, I realized that the cycle period didn’t have to be exactly a minute, or an hour. Then I created a web-like form in the center that revolves with a period of 20 seconds and the red arc with a period of 5 minutes.


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

var xarray =[]; // array for ink graphics according to seconds
var x1; //variables for central web form
var stepX1 = 10;// steps of the spacing of the central web form
var circleMove = 0;//blue circles movement

function draw() {
    background("black");
    
    //diagonal bars to represent the growth of every hour and the exact hour of the current time(only look at one side)
    var h = hour();
    var hLength = map(h,0,24,50,440);
    var hColor = map(h,0,24,40,160);
    
    circleMove +=1;
    for (var hz = 0; hz<h; hz++){
        stroke(133,62,hColor);//changing color of the bar
        strokeWeight(8);
        line(0+15*hz,480,0.5*hLength+15*hz-20,480-0.7*hLength+5*hz);//amount of the purple bar to represent time
        stroke(133,62,hColor);//changing color of the bar
        strokeWeight(8);
        line(480-15*hz,0,480-0.5*hLength-15*hz+20,0.7*hLength-5*hz);//amount of the purple bar to represent time
        noStroke();
        fill("blue");//moving blue circles as fun animation
        circle(0.5*hLength+15*hz+circleMove-20,480-0.7*hLength+5*hz-circleMove,5);
        if (circleMove>50){
            circleMove = 0;
        }
    }

    
    //two horizontal bars to represent the grouth of minute overtime
    var m = minute();
    var mAdjusted = map(m,0,60,30,480); //fullfill a full length when one hour passed
    var mColor = map(m,0,60,26,150);
    noStroke();
    fill(180,58,mColor);
    rect(0,50,mAdjusted,8);
    noStroke();
    fill(180,mColor,40);
    rect(480,480-8-50,-mAdjusted,8);
    //second
    if (xarray.length>=6){
        xarray.shift();
    }
    var s = second();
    //create ink-like path to represent the path of seconds
    for (var i = s-8; i<=s; i++){
        xarray.push(i);
        var colorOfCircle = map(i,s-8,s,90,255);
        var sizeOfCircle = map(i,s-8,s,5,30);//define the size of the circle
        push();
        translate(240,240);
        rotate(-PI/2);
        stroke(0);
        fill(colorOfCircle, colorOfCircle, 255);
        noStroke();
        strokeWeight(1);
        rotate(radians(6*i));//the ink like traces will move every second and fullfill a full cycle after 60s
        var px = 180 + random(-5,5);
        var py = 0 + random(-3,3);
        frameRate(9);
        circle(px,py,sizeOfCircle);
        pop();   
    }
    //changing color of the purple circle to represent the growth of a minute
    var colorOfRing0 = map(s,0,60,145,200);
    var colorOfRing1 = map(s,0,60,0,122);
    var colorOfRing2 = map(s,0,60,90,150);
    noFill();
    strokeWeight(20);
    stroke(colorOfRing0, colorOfRing1,colorOfRing2);
    circle(240,240,230);
    //slowly growing red circle
    var mil = millis();
    push();
    translate(240,240);
    frameRate(30);
    noFill();
    stroke("red");
    strokeWeight(15);
    rotate(-PI/2);
    arc(0,0,100,100,0,mil*PI/150000,OPEN); //revolving a circle every 5 min
    pop();
    
    // central rotating web-form
    //    Central White Lines
    push();
    translate(240,240);
    rotate(radians(mil*18/1000));//the web form fulfills a cycle every 20 seconds
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke("white");
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
    //     Central blue lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke(109,129,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
//    central light purple lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke(152,109,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
    pop();
    
    
}

Paul Greenway – 06 – Abstract Clock

pgreenwa_06

/*Paul Greenway
Section 1A
pgreenwa@andrew.cmu.edu
Project-06-Abstract Clock
*/


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

function draw() {
  
  background(255,90,90);
  
  var S = second();
  var M = minute();
  var H = hour();
  var a = (0,0);
  var b = (480,480);
  
  var colorS = map(S,0,60,0,255);
  
  stroke(255);
  strokeWeight(0.3);
  line(0,0,480,480);
  strokeWeight(2);
  circle(234,234,10,10);
  circle(70,70,10,10);
  circle(480,480,10,10);
  
  stroke(255);
  strokeWeight(0.5);
  noFill();
   
  //hour rings
  for (i = 0; i < 25; i++) {
    
    circle(480, 480, i*24, i*24);
  }
  
  //minute rings
  for (i = 0; i < 13; i++) {
    
    circle(234, 234, i*24, i*24);
  }
      
  //second rings
  circle(70, 70, 200, 200);
  
  
  //fill circles color style
  noStroke();
  fill(0,colorS,90,90);
  
  //hour circle
  circle(480, 480, H*24, H*24);
  
  //second circle
  circle(70, 70, S*3.33, S*3.33);
  
  //minute circle
  circle(234, 234, M*4.8, M*4.8);
  
  
}

For this project, I wanted to create a clock that used various rings to indicate the time. As time passes, the inner circles begin to fill the 3 different sets of outer rings each representing a different measurement of time. I arranged the sets in a diagonal line so that the viewer is able to see each unit of contribute to the next.

Taisei Manheim – 06 – Abstract Clock

sketch

For this project I show time by having multiple objects to rotate around the Earth, with the sun/moon representing the hour, clouds representing the minute and satellite representing the seconds. As seen in the sketch below the numerical values are represented in a semicircle around the Earth with the left side representing 9am/pm and the right side representing 9pm/am. For the minutes and seconds the left side represents 15/45 and the right side represents 45/15. In addition the sky is darkest at 3am and lightest at 3pm with a gradient between those times. I wanted to have a clock that was abstract but could still be used to read time if you understood how it worked.

At first I thought the rotation around the Earth would be fairly simple and be used simply by translating and rotating, but I realized that wouldn’t work how I wanted it to using the hour(), minutes(), and seconds() commands so I had to figure it out more mathematically. I couldn’t get each object to move from the right to the left once it finished its rotation from the left side to the right side so I had two of each object (only one is visible on the screen at any given time).

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-06

var prevSec;
var millisRolloverTime;

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

function draw() {
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    //Reckon the current millisecond, 
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    //sky color lightest at 3pm and darkest 3am with color changing between
    var skyColor = 22 * abs(15 - H);
    background(135 - skyColor, 206 - skyColor, 235 - skyColor);
    
    //Earth
    noStroke();
    fill(0,0,255);
    ellipse(width / 2, height, width / 4, width / 4);
    
    //North America
    fill(127,255,0);
    beginShape();
    vertex(width / 2 + 6, height - 51.5);
    vertex(width / 2 + 5, height - 52);
    vertex(width / 2 + 5, height - 52.7);
    vertex(width / 2 + 6, height - 54.5);
    vertex(width / 2 + 8, height - 56.3);
    vertex(width / 2 + 10, height - 57.5);
    vertex(width / 2 + 12, height - 58.5);
    vertex(width / 2 + 7, height - 59.5);
    vertex(width / 2, height - width / 8);
    vertex(width / 2 - 7, height - 59.5);
    vertex(width / 2 - 12, height - 58.5);
    vertex(width / 2 - 17, height - 57.5);
    vertex(width / 2 - 22, height - 55.5);
    vertex(width / 2 - 27, height - 53);
    vertex(width / 2 - 32, height - 50.5);
    vertex(width / 2 - 37, height - 47);
    vertex(width / 2 - 42, height - 42.5);
    vertex(width / 2 - 42 + 8, height - 42  + 4);
    vertex(width / 2 - 42 + 12, height - 42  + 9);
    vertex(width / 2 - 42 + 25, height - 42  + 35);
    vertex(width / 2 - 42 + 27, height - 42  + 38);
    vertex(width / 2 - 42 + 30, height - 42  + 40);
    vertex(width / 2 - 42 + 35, height);
    vertex(width / 2 + 5, height);
    vertex(width / 2 + 2, height - 2);
    vertex(width / 2 + 1, height - 3);
    vertex(width / 2 - 0.5, height - 5);
    vertex(width / 2 - 2, height - 8);
    vertex(width / 2 - 4, height - 12);
    vertex(width / 2 - 4, height - 14);
    vertex(width / 2 - 3, height - 15);
    vertex(width / 2 - 1, height - 16.5);
    vertex(width / 2 + 1, height - 17.3);
    vertex(width / 2 + 3, height - 18);
    vertex(width / 2 + 5, height - 18.5);
    vertex(width / 2 + 7, height - 18.5);
    vertex(width / 2 + 9, height - 18.2);
    vertex(width / 2 + 11, height - 17.7);
    vertex(width / 2 + 13, height - 17.2);
    vertex(width / 2 + 15, height - 16.5);
    vertex(width / 2 + 17, height - 15.7);
    vertex(width / 2 + 19, height - 15.4);
    vertex(width / 2 + 21, height - 15.4);
    vertex(width / 2 + 21.5, height - 15.7);
    vertex(width / 2 + 21.7, height - 16.3);
    vertex(width / 2 + 21.7, height - 17);
    vertex(width / 2 + 21.4, height - 17.5);
    vertex(width / 2 + 21, height - 18.5);
    vertex(width / 2 + 19.5, height - 19.8);
    vertex(width / 2 + 18.5, height - 20.5);
    vertex(width / 2 + 18, height - 21.5);
    vertex(width / 2 + 18, height - 23);
    vertex(width / 2 + 19.5, height - 28);
    vertex(width / 2 + 22.5, height - 33);
    vertex(width / 2 + 25.5, height - 36);
    vertex(width / 2 + 28.5, height - 40);
    vertex(width / 2 + 29.5, height - 42);
    vertex(width / 2 + 29.5, height - 44);
    vertex(width / 2 + 28.5, height - 45);
    vertex(width / 2 + 27, height - 46);
    endShape();

    //text
    fill(255);
    textSize(24);
    text(H + ":" + M + ":" + S, width / 2 - 30, 100);
    
    //remapping hour, second, minute values to use with cos and sin for circular motion
    var sec = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
    var min = map(minute() + map(second(), 0, 60, 0, 1), 0, 60, 0, TWO_PI) - HALF_PI;
    var hr = map(hour() + map(minute(), 0, 60, 0, 1), 0, 24, 0, TWO_PI * 2) - HALF_PI;

    //seconds
    //sattelite 1
    //wing 1
    fill(150);
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, (height + sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, height + sin(sec) * width / 2 * 0.75);
    //wing 2
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, (height + sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, height + sin(sec) * width / 2 * 0.75);
    fill(255);
    //body
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 20, (height + sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 20, height + sin(sec) * width / 2 * 0.75);

    //sattelite 2
    //wing 1
    fill(150);
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, (height - sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, height - sin(sec) * width / 2 * 0.75);
    //wing 2
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, (height - sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, height - sin(sec) * width / 2 * 0.75);
    fill(255);
    //body
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 20, (height - sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 20, height - sin(sec) * width / 2 * 0.75);
    
    //minutes
    //cloud1
    fill(255);
    ellipse(width / 2 + cos(min) * width / 2 * 0.5, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 10, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 10, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 5, (height + sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 5, (height + sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 5, (height + sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 5, (height + sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ///cloud2
    ellipse(width / 2 - cos(min) * width / 2 * 0.5, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 10, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 10, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 5, (height - sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 5, (height - sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 5, (height - sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 5, (height - sin(min) * width / 2 * 0.5) - 7, 15, 15);
    
    //hours
    //moon & sun 1
    fill(255,255,0);
    ellipse(width / 2 + cos(hr) * width / 2, height + sin(hr) * width / 2, 50, 50);
    //moon & sun 2
    fill(255,255,0);
    ellipse(width / 2 - cos(hr) * width / 2, height - sin(hr) * width / 2, 50, 50);
}