Digital Clock Redesign: Finished and Creepy

With the help of Professor Bryan I got the Alien to breathe in and out every two seconds and his eye to blink every minute. Also, I changed the background from second() to hour(), which simply just makes it change every hour instead of second. I would like to add creepy breathing sounds and maybe more animations to happen but that is for the future!
The code is below if you are interested!

import gifAnimation.*;

int hours;

String period;

int r = 0;
int b = 0;
int g = 0;
float rchanger;
float gchanger;
float bchanger;
float rchanger2;
float gchanger2;
float bchanger2;
PImage head;
//Gif allFrames2;
Gif allFrames2;
PImage[] allFrames;

int f2 = 0;
int f = 0;

int msCheck1 = 250;

int minCheck;

void setup(){
  size(800,800);
  rchanger = 0;
  gchanger = 0;
  bchanger = 0;
  rchanger2 = 0;
  gchanger2 = 0;
  bchanger2 = 0;
    
    
    //head = loadImage ("head.png");
   allFrames2 = new Gif (this, "AlienBlink.gif");

   // allFrames2 = Gif.getPImages(this, "head.png");
   
    allFrames = Gif.getPImages(this, "AlienBreathe.gif");
   
}


void draw(){
  rchanger = map(hour(), 1, 12, 205, 0);
  gchanger = map(hour(), 1, 12, 201, 0);
  bchanger = map(hour(), 1, 12, 255, 0);
  rchanger2 = map(hour(), 12, 23, 0, 205);
  gchanger2 = map(hour(), 12, 23, 0, 201);
  bchanger2 = map(hour(), 12, 23, 0, 255);
  background(255);

  hours= hour();


  

  



  if (hour() > 12){
    
    hours = hour() - 12;
    period = "PM";
  
}else{
    hours = hour();
    period = "AM";
}
{

//println(hour() + ":" + minute() + ":" + second() + period);

background (255, 255, 230);

  textAlign(CENTER);
  fill (0);
  text(hours + ":" + minute() + ":" + second() + " " + period, width/2, height/2);
 // jump1();
 // jump2();
 // jump3();
   dimmer();
  //create variable for hour minuetes and seconds
  }


  
  
  if(millis() > msCheck1){
    msCheck1 += 500;
    f++;
  }

  
  if(f > 7){
    f = 0;
  }
  
  
   image(allFrames[f], 330,530);
   

    
   image(allFrames2, 40,120);

   
   
   
   if(minCheck != minute()){
     println("A minute has passed.");
      
     allFrames2.play();
   }
   if(f2 > 7){
     f2 = 0;
   }
   minCheck = minute();

  
   
   
   //image(allFrames2[f], 100,300);
   
   /*
   
   if(minute() >= 31){
   image(allFrames2,50, 100);
   }
   else if (minute() <= 31){
     image(head, 100, 105);
   }
   
   */
   

}

//END OF TAB ONE


void dimmer(){
  
  

  

  
  
  
  
  
  
  fill(rchanger, gchanger, bchanger);
  
  if(hour() >= 1){
 strokeWeight(0); stroke(0,0,0,0);
fill(rchanger, gchanger, bchanger);
rect(0,0,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,66.7,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,133.4,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,200.1,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,266.8,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,333.5,width,150);
     fill(rchanger, gchanger, bchanger);
    rect(0,400.2,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,466.9,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,466.9,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,533.6,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,600.3,width,150);
   fill(rchanger, gchanger, bchanger);
    rect(0,677,width,150);
    fill(rchanger, gchanger, bchanger);
    rect(0,733.7,width,150);
  }else if (hour() >= 12){
     
     strokeWeight(0); stroke(0,0,0,0);
fill(rchanger2, gchanger2, bchanger2);
rect(0,0,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,66.7,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,133.4,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,200.1,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,266.8,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,333.5,width,150);
     fill(rchanger2, gchanger2, bchanger2);
    rect(0,400.2,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,466.9,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,466.9,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,533.6,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,600.3,width,150);
   fill(rchanger2, gchanger2, bchanger2);
    rect(0,677,width,150);
    fill(rchanger2, gchanger2, bchanger2);
    rect(0,733.7,width,150);
  }
}
   /*  fill(mouseY-70,mouseY-50,mouseY);
     
     
     /stroke(0,0,0,0); strokeWeight(0);
      fill(#03A9FF,120);
    // rect(0,0,width,500);
    fill (255,255,240); ellipse (250, 250, 5,5);
          ellipse (470, 200, 5,5);
          ellipse (780, 60, 5,5);
          ellipse (100, 30, 5,5);
          ellipse (600, 380, 5,5);
          ellipse (360, 300, 5,5);
          ellipse (400, 20, 5,5);
          ellipse (550, 150, 10,10);
          ellipse (500, 100, 10,10);
          ellipse (300, 20, 10,10);
          ellipse (660, 370, 10,10);
          ellipse (750, 260, 10,10);
          ellipse (10, 240, 10,10);
          ellipse (490, 320, 10,10);
          ellipse (170, 280, 10,10);
          ellipse (90, 250,10,10);
      */   

Digital Clock Redesign : Dark to Light then Dark again

With a TON and I mean A TONN of help from LeRon (http://leronb.blogspot.com/) I made the background of my "clock" to dim and lighten! Here is the code for it. All that is left is to make it do that over the span of the whole day (rather than a minute here. But having it be a minute allowed us to see if it was working without having to wait for the hour to change). 

int hours;

String period;

int r = 0;

int b = 0;

int g = 0;

float rchanger;

float gchanger;

float bchanger;

float rchanger2;

float gchanger2;

float bchanger2;

void setup(){

  size(800,800);

  rchanger = 0;

  gchanger = 0;

  bchanger = 0;

  rchanger2 = 0;

  gchanger2 = 0;

  bchanger2 = 0;

  

}

void draw(){

  rchanger = map(second(), 0, 30, 205, 0);

  gchanger = map(second(), 0, 30, 201, 0);

  bchanger = map(second(), 0, 30, 255, 0);

  rchanger2 = map(second(), 30, 60, 0, 205);

  gchanger2 = map(second(), 30, 60, 0, 201);

  bchanger2 = map(second(), 30, 60, 0, 255);

  background(255);

 

  hours= hour();

  if (hour() > 12){

    

    hours = hour() - 12;

    period = "PM";

  

}else{

    hours = hour();

    period = "AM";

}

{

println(hours + ":" + minute() + ":" + second() + period);

background (255, 255, 230);

  textAlign(CENTER);

  fill (0);

  text(hours + ":" + minute() + ":" + second() + " " + period, width/2, height/2);

 // jump1();

 // jump2();

 // jump3();

   dimmer();

  //create variable for hour minuetes and seconds

  }

}

void dimmer(){

  

  

 

  

  

  

  

  

  

  

  fill(rchanger, gchanger, bchanger);

  

  if(second() <= 30){

 strokeWeight(0); stroke(0,0,0,0);

fill(rchanger, gchanger, bchanger);

rect(0,0,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,66.7,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,133.4,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,200.1,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,266.8,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,333.5,width,150);

     fill(rchanger, gchanger, bchanger);

    rect(0,400.2,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,466.9,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,466.9,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,533.6,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,600.3,width,150);

   fill(rchanger, gchanger, bchanger);

    rect(0,677,width,150);

    fill(rchanger, gchanger, bchanger);

    rect(0,733.7,width,150);

  }else if (second() <= 60){

     

     strokeWeight(0); stroke(0,0,0,0);

fill(rchanger2, gchanger2, bchanger2);

rect(0,0,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,66.7,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,133.4,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,200.1,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,266.8,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,333.5,width,150);

     fill(rchanger2, gchanger2, bchanger2);

    rect(0,400.2,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,466.9,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,466.9,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,533.6,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,600.3,width,150);

   fill(rchanger2, gchanger2, bchanger2);

    rect(0,677,width,150);

    fill(rchanger2, gchanger2, bchanger2);

    rect(0,733.7,width,150);

  }

}

   /*  fill(mouseY-70,mouseY-50,mouseY);

     

     

     /stroke(0,0,0,0); strokeWeight(0);

      fill(#03A9FF,120);

    // rect(0,0,width,500);

    fill (255,255,240); ellipse (250, 250, 5,5);

          ellipse (470, 200, 5,5);

          ellipse (780, 60, 5,5);

          ellipse (100, 30, 5,5);

          ellipse (600, 380, 5,5);

          ellipse (360, 300, 5,5);

          ellipse (400, 20, 5,5);

          ellipse (550, 150, 10,10);

          ellipse (500, 100, 10,10);

          ellipse (300, 20, 10,10);

          ellipse (660, 370, 10,10);

          ellipse (750, 260, 10,10);

          ellipse (10, 240, 10,10);

          ellipse (490, 320, 10,10);

          ellipse (170, 280, 10,10);

          ellipse (90, 250,10,10);

      */   

Digital Clock Redesign: Drawn

I drew out the cyclops guy in Photoshop and traced and colored him in Illustrator. Who turned into a swanky alien. The plan is to make him blink every minute and his chest should move up and down to show breathing every second. Up one second, down two. Or... at least something like that.

Digital Clock Redesign: Sketches

These are my initial ideas for the clock project! I like the idea of changing colors/objects over time. So many of my ideas revolve around that. I am going to go for the one in the middle(the cyclopes type thing blinking). It is always helpful to physically sketch out ideas first before you start working (no matter how sloppy and quickly they are done).

Custom Functions. Easy Breezy Cover Sail

I used for statements to make the ship and made that a function. Then I made the birds and clouds their own function and repeated them, randomizing their size and color.
I wanted to make a bunch of ships, fish, and maybe rocks at the bottom of the ocean but I was having trouble getting the fish and ship (especially the ship... shudder shudder..) to work in the  for statement.
It looks good in my opinion otherwise! A good start!

As always, here is the code!

//MAIN BIT

void setup() {

 size(1200, 700);

 smooth();

}

void draw() {

  

 background(200,240,255);

 randomSeed(0);

  noStroke();

fill(140,200,250);

rect(0,500,width,400);

for (int i = 35; i <width +40; i += 40) { //this is randomizing color and size

  int gray = int (random (220, 255));

  float scalar = random (.025, 1.0);

  cloud(i, 110, gray, scalar);

}

for (int i = 35; i <width +40; i += 40) {

  int gray = int (random (0, 255));

  

  float scalar = random (.025, 1.0);

  bird(i,500, gray, scalar);

}

ship(500,420);

}

//THE BIRD

void bird(int x, int y, int g, float s){

  pushMatrix();

  scale (s); //set size

  stroke(g); // set the gray value

  

   translate(x,y);

  fill(g);  stroke(g);

  

  line(0,0,10,-10);

  line(10,-10,20,0);

  line (20,0, 30, -10);

  line (30, -10, 40, 0);

  popMatrix();

}

//THE CLOUD

void cloud(int x, int y, int g, float s){

  

  pushMatrix();

  scale (s); //set size

  stroke(g); // set the gray value

  

  translate(x,y);

  fill(g);  stroke(g);

  

ellipse(0,0,100, 100);

ellipse(0-40,0+10,50, 50);

ellipse(0+20,0-55,50, 50);

ellipse(0+140,0-55,50, 50);

ellipse(0+50,0+10,80,80);

ellipse(0+100,0-10,130,130);

ellipse(0+150,0-10,100,100);

ellipse(0+55,0-60,50,50);

ellipse(0+110,0-70,60,60);

 popMatrix();

}

//THE (non existent) FISH

void fish(int x, int y, int g , float s){

  pushMatrix();

 //fill (r,0,0);

 //fill (0,gr,0);

 //fill (0,0,b);

translate(x, y);

//fill(r,gr,b);

ellipse (0,0,10,5);

}

//for some reason I was having trouble with getting

//the fish and the ship to randomize.

//THE SHIP

void ship(int x, int y){ // the ship is made with a bunch of for

                            //statements like in the class before.

  

pushMatrix();

translate(x,y);

fill(0);

stroke(#482103);

//bow

for (int i=0; i <100; i += 4){

   line(i,0,i,100-i);

}

//middle

for (int i=-300; i <0; i += 4){

   line(i,0,i,100);

}

//poop deck

for (int i=-360; i <-200; i += 5){

   line(i-25,-40,i/2,50);

}

stroke(#482103);

//cap. quarters

for (int i=-350; i <-280; i += 5){

   line(i,-30,i,50-i/20);

   

}

stroke(#B79E8B);

//middle sail

for (int i=-200; i <100; i +=10){

   line(-120, -100 +i/2,-50, -150+ i);

}

//back sail

for (int i=-150; i <80; i +=10){

   line(-210, -100 +i/2,-150, -150+ i);

}

//front sail

for (int i=-70; i <120; i +=10){

   line(-40, -100 +i/2,20, -150+ i);

}

//triangle sail

for (int i=30; i <100; i += 10){

   line(i,-30,i,-120+i);

}

//poop deck sail

for (int i=-350; i <-220; i += 10){

   line(i,-70,i,-180-i/5);

}

//cannon holes

strokeWeight(2);

for (int i=-240; i <-10; i += 25){

   rect(i, 40, 10, 15);

}

//cap. quart. windows

strokeWeight(2);

for (int i=-350; i <-260; i += 25){

   rect(i, -20, 20, 40);

}

//masts (front, back, middle)

strokeWeight(4);

stroke(#482103);

line(-30,0,-30,-130);

line(-190,0,-190,-200);

line(-100,0,-100,-265);

stroke(#B79E8B);

//poop deck railing

for (int i=-380; i <-220; i += 10){

   line(i,-50,i,-50);

}

//railing

for (int i=-170; i <100; i += 10){

   line(i,-10,i,-10);

}

popMatrix();

}

A lil' Randomizing

This is a sketch I did for another class that I added a little randomizing for. I made the size of the ripple's at the end of the fishing line change. The code (which is HIGHLY optimized... jk) is below!

void setup(){

size(800,800);

background(0,30,50);

smooth();

//stars

ellipse (650,120,140,140);

stroke(0,0,0,0);

fill(#8397FF,10);

rect(0,595,width,500);

    

rect(615,595,70,220);

rect(630,595,40,220);

//Name

stroke(0,70,130); strokeWeight(30);

line(100,215,width/4+10,450);

fill(0,0,0);

strokeWeight(0);

rect(width/4,410,30,190);

rect(20,200,400,30);

rect(0,200,60,30);

strokeWeight(0);

rect(120,240,110,20);

rect(130,270,100,15);

rect(150,300,80,10);

rect(160,330,70,5);

rect(170,360,60,5);

rect(180,390,50,5);

stroke(0,0,0,240); strokeWeight(15);

fill(#460000,40);

arc(270,280,90,90,radians(45),radians(325));

arc(270,370,90,90,radians(45),radians(325));

arc(270,460,90,90,radians(45),radians(325));

arc(270,550,90,90,radians(45),radians(325));

pushMatrix();

translate(140,48); scale(.7);

//stick guy

fill(255,255,255); stroke(255,255,255);

ellipse(400,155,10,10);

//line(400,160,400,200);

noFill(); stroke(255,255,255);

arc(435,200,100,100,radians(170),radians(210));

strokeWeight(9);

arc(340,230,100,100,radians(-20),radians(50));

strokeWeight(8);

arc(338,240,150,80,radians(-40),radians(20));

strokeWeight(9);

arc(400,140,100,100,radians(80),radians(100));

strokeWeight(7);

arc(400,135,100,100,radians(70),radians(100));

arc(400,135,100,100,radians(70),radians(100));

//fishing rod

strokeWeight(3);

arc(526,215,230,200,radians(190),radians(290));

ellipse(425,178,6,6);

//fishing line

strokeWeight(1);

arc(430,127,100,100, radians(0), radians(100));

arc(510,117,55,55, radians(5), radians(160));

arc(552,120,21,21, radians(20), radians(185));

line(565,122,565,800);

popMatrix();

}

void draw(){

  

//Ripples

fill(#0D254B,10);

rect(0,595,width,300);

fill(0,0); 

stroke(255,255,255,50);

ellipse(535,610,random(24,36),10);

ellipse(535,613,random(44,56),15);

ellipse(535,616,random(64,100),20);

//x=535

pushMatrix();

//stars

noStroke();

fill (250, 265, 265, random(0,255)); ellipse (250, 250, 5,5);

ellipse (470, 200, 5,5);

ellipse (780, 60, 5,5);

ellipse (100, 30, 5,5);

ellipse (600, 380, 5,5);

ellipse (360, 300, 5,5);

ellipse (400, 20, 5,5);

ellipse (550, 150, 10,10);

ellipse (500, 100, 10,10);

ellipse (300, 20, 10,10);

ellipse (660, 370, 10,10);

ellipse (750, 260, 10,10);

ellipse (10, 240, 10,10);

ellipse (490, 320, 10,10);

ellipse (170, 280, 10,10);

translate(800,600);

rotate(radians(180));

fill (250, 265, 265); ellipse (250, 250, 5,5);

ellipse (470, 200, 5,5);

ellipse (780, 60, 5,5);

ellipse (100, 30, 5,5);

ellipse (600, 380, 5,5);

ellipse (360, 300, 5,5);

ellipse (400, 20, 5,5);

ellipse (550, 150, 10,10);

ellipse (500, 100, 10,10);

ellipse (300, 20, 10,10);

ellipse (660, 370, 10,10);

ellipse (750, 260, 10,10);

ellipse (10, 240, 10,10);

ellipse (490, 320, 10,10);

ellipse (170, 280, 10,10);

popMatrix();

 //reflection

pushMatrix();

translate(0,600);

fill (250, 265, 265, 10); ellipse (250, 250, 5,5);

ellipse (470, 200, 5,5);

ellipse (780, 60, 5,5);

ellipse (100, 30, 5,5);

ellipse (600, 380, 5,5);

ellipse (360, 300, 5,5);

ellipse (400, 20, 5,5);

ellipse (550, 150, 10,10);

ellipse (500, 100, 10,10);

ellipse (300, 20, 10,10);

ellipse (660, 370, 10,10);

ellipse (750, 260, 10,10);

ellipse (10, 240, 10,10);

ellipse (490, 320, 10,10);

ellipse (170, 280, 10,10);

popMatrix();

fill (250, 265, 265, 10);

rect(615,595,70,220);

rect(630,595,40,220);

fill(255);

line(565,122,565,800);

}

Variables and Functions

If you move your mouse to the right of the screen the car moves forward at increasing speeds depending on how far right you are. Move to the left side you stop. Up and down with mouse will change the color of the sky. I wanted to make the buildings in the background move in the opposite direction and couldn't figure it out, but once I do (with help) I will update it!

The code is down below.

//declare variables

int locX;

int speedX;

void setup(){

   size(800,800);

   background(#96F0DD);

  

   

   speedX=0;

}

void draw(){

  

      //I wanted to make the buildings move the opposite direction

            //but I can't figure out how to add another direction

                 // with mouseX on the right side of the screen.

            //float background=map(mouseX,0,width,0,7);

              //locX-=background;

  float shifter=map(mouseX,0,width,0,10);

   locX+=shifter;

   background(255);

   stroke(0);

   fill(#099824);

   rect(0,500,width,height);

   fill(#04791A);

   rect(0,400,width,300);

   fill(#005F12);

   rect(0,400,width,200);

    //sky and stars

   

    strokeWeight(0); stroke(0,0,0,0);

    fill(mouseY-220,mouseY-200,mouseY);

    rect(0,0,width,500);

    fill(mouseY-180,mouseY-150,mouseY);

    rect(0,0,width,300);

    fill(mouseY-130,mouseY-100,mouseY);

    rect(0,0,width,150);

    fill(mouseY-70,mouseY-50,mouseY);

    rect(0,0,width,50);

      stroke(0,0,0,0); strokeWeight(0);

      fill(#03A9FF,120);

     rect(0,0,width,500);

    fill (255,255,240); ellipse (250, 250, 5,5);

          ellipse (470, 200, 5,5);

          ellipse (780, 60, 5,5);

          ellipse (100, 30, 5,5);

          ellipse (600, 380, 5,5);

          ellipse (360, 300, 5,5);

          ellipse (400, 20, 5,5);

          ellipse (550, 150, 10,10);

          ellipse (500, 100, 10,10);

          ellipse (300, 20, 10,10);

          ellipse (660, 370, 10,10);

          ellipse (750, 260, 10,10);

          ellipse (10, 240, 10,10);

          ellipse (490, 320, 10,10);

          ellipse (170, 280, 10,10);

          ellipse (90, 250,10,10);

    //city

  

    fill(0);

    strokeWeight(1); stroke(#FDFF98);

    rect(width/2-35,height/3-300,10,550);

    rect(width/2,height/3,100,200);

    rect(width/2+100,height/3-100,200,300);

    rect(width/2-50,height/3-150,50,400);

    rect(width/2-250,height/3-100,200,350);

    rect(width/2-325,height/3+50,100,100);

    rect(width/2-550,height/3-50,200,250);

    

    

    

   strokeWeight(0);

     fill(#01460E);

     rect(0,height/2+5,width,10);

     fill(#D8D8D8);

     rect(0,height/2+15,width, 125);

     fill(#B4B4B4);

     rect(0,height/2+15,width, 50);

     strokeWeight(1);

     fill(#939393); stroke(0); strokeWeight(0);

     rect(0,height/2+15,width, 20);

   

   //car

   stroke(0,0,0); strokeWeight(1);

   fill(#BCC6C6);

   ellipse(locX-3,height/2,25,25);

   fill(#FFFFFF);

   rect(locX+15,height/2-4,5,10);

   rect(locX+20,height/2-4,5,10);

   fill(#ED3E3E);

   rect(locX-20,height/2,60,20);

   //wheels

   fill(#343434);

   ellipse(locX+25,height/2+15,20,20);

   fill(#F0F0F0);

   ellipse(locX+25,height/2+15,5,5);

   fill(#343434);

   ellipse(locX-20,height/2+13,25,25);

   fill(#F0F0F0);

   ellipse(locX-20,height/2+13,5,5);

   strokeWeight(2); stroke(255,255,255);

   line(locX-20,height/2,locX-25,height/2-7);

   line(locX-30,height/2-7,locX-20,height/2-7);

   strokeWeight(1);

   fill(0,0,0);

   

   //arc(locX,height/2-40,100,100);

if(locX > 800){

    locX= 0;

}

}