Time functions and text (Clock)

This is how to use time functions (you also have day(), month(), year()). They simply read your operating system’s clock.

This sketch prints 3 bars proportional to seconds minutes and hours.

int s;
int m;
int h;
 
void setup()
{
  size(250, 250);
}
 
//this function is called 60 times per second
void draw()
{
  background(0);
 
  //update variables with time and date
  s = second();
  m = minute();
  h = hour();
 
  //change fill
  fill(255, 0, 0);
  //map the lenght of my bar according to my seconds
  float sWidth = map(s, 0, 60, 0, 200);
  //draw a rectangle
  rect(0, 0, sWidth, 50);
 
  //do the same for minutes and hours
  fill(0, 255, 0);
  float mWidth = map(m, 0, 60, 0, 200);
  rect(0,100, mWidth, 50);
 
  fill(0, 0, 255);
  float hWidth = map(h, 0, 23, 0, 200);
  rect(0,200, hWidth, 50);
 
}

How to make something happen every second (once).

int s;
int lastSecond;
 
void setup()
{
  size(200, 200);
}
 
//this function is called 60 times per second
void draw()
{
  s = second();
 
  //if the second was updated then do something once
  if (s != lastSecond)
  {
    println("A second elapsed");
    //update the last second
    lastSecond = s;
    //this variables will be the same until
    //the next second change in the clock
  }
}

Text Formatting

Formatting Text

You can change text color, it’s the same as the fill.

size(300,300);
background(0);
 
//text positioning
text("word", 15, 30);
//custom color
fill(0, 102, 153);
text("word", 15, 60);
//with alpha
fill(255, 255, 255, 100);
text("word", 15, 90);

You can use any font as long as you create a processing-friendly version.

Loading a font created with Processing -> tools -> Create font…

PFont font;
// The font must be located in the sketch's 
// "data" directory to load successfully
font = loadFont("CenturyGothic-32.vlw"); 
textFont(font, 32); 
text("word", 15, 50);

Alignment:

size(400, 200);
background(255);
fill(0);
textAlign(CENTER);
text("This text is centered.", width/2, 60); 
textAlign(LEFT);
text("This text is left aligned.", width/2, 100); 
textAlign(RIGHT);
text("This text is right aligned.", width/2, 140);

More advanced stuff

Common problem: second() is related to the system clock but millis() count starts as you run the applet.
Sometimes you need them to be in sync, for example if you want an analog clock with a second arm moving smoothly:

 
int millisRolloverTime;
int prevSec;
 
void setup()
{
  size(100, 100);
  millisRolloverTime = 0;
}
 
void draw()
{
  background(0);
 
  int H= hour ();
  int M= minute ();
  int S= second ();
 
  if (prevSec != S) {
    millisRolloverTime = millis();
  }
 
  prevSec = S;
  int mils = millis() - millisRolloverTime;
  text(second() + " " + mils, 10, 20);
 
}

Here’s a classic analog clock:

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
void setup() {
  size(200, 200);
  stroke(255);
  smooth();
}
void draw() {
  background(0);
  fill(80);
  noStroke();
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  ellipse(100, 100, 160, 160);
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
  float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
  stroke(255);
  strokeWeight(1);
  line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
  strokeWeight(2);
  line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
  strokeWeight(4);
  line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);
}

Sounds

We didn’t cover this in class but playing sound files in processing is very easy:

import ddf.minim.*;
 
Minim minim;
AudioPlayer song;
 
void setup()
{
  size(100, 100);
 
  minim = new Minim(this);
 
  // this loads mysong.wav from the data folder
  song = minim.loadFile("mysong.wav");
  song.play();
}
 
void draw()
{
  background(0);
}
 
void stop()
{
  song.close();
  minim.stop();
 
  super.stop();
}

More info here:
http://code.compartmental.net/tools/minim/quickstart/

Like when using external images, to submit on processing you have to export as applet and include all the external files in the zip.

Posted in

Post a comment