ghou-Project-06-AbstractClock

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 06

//background colours
var br = 245;
var bg = 250;
var bb = 255;
//bubbles
var bol = [];
var xarray = [];
var yarray = [];

function setup(){
    createCanvas(300,300);
    angleMode(DEGREES);
    //setting up the pink bubbles
    for (var i=0;i<150;i++){
        bol.push(new moving());
    }
}
function mousePressed(){
        this.x = 150;
        this.y = 150;
}
function draw (){
    background(br,bg,bb);
    var h = hour();
    var m = minute();
    var s = second();    

    //the pink bubbles moving
    for (var i=0;i<bol.length; i++){
        bol[i].move();
        bol[i].display();
    }
    // the bubbles created from dragging the mouse
    for (var a = 0; a < xarray.length; a++){
        fill(250,200,230,200);
        ellipse(xarray[a],yarray[a],20);
        yarray[a] += 1;
    }
    
    //thte clock bubbles
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(s*(360/60));
    rotate(-90);
    ellipse(110,0,55);
    pop();
    
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(m*(360/60));
    rotate(-90);
    ellipse(60,0,40);
    pop();
    
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(h*(360/12));
    rotate(-90);
    ellipse(30,0,25);
    pop();
}


//having new bubbles follow mouse when mouse dragged
function mouseDragged(){
    xarray.push(mouseX);
    yarray.push(mouseY);
}
//moving bubbles and how they move 
function moving(){
    this.x = 150;
    this.y = 150;
    this.diameter = (20);
    this.speedx = random(-1.3,1.3);
    this.speedy = random(-1.3,1.3);
    
    this.move = function() {
        this.x += this.speedx;
        this.y += this.speedy;
        if (this.x >= width-5 || this.x <= 5){
            this.speedx = -this.speedx;
        }
        if (this.y >= height-5 || this.y <= 5){
            this.speedy = -this.speedy;
        }
    };
    
    this.display = function(){
        fill(250,200,230,200);
        noStroke();
        ellipse(this.x,this.y,this.diameter,this.diameter);
    };
    
}

For this project I first looked up some abstract clocks in our project references for some inspiration. I wanted to make the “clock hands” as subtle as possible but still visible if one looked long enough at this project.

here are some sketches I did to plan for this project. I decided to make the clock hands “melt” into the background and invisible without the background distraction bubbles.