P5.JS Clock

Clock

Like the screensaver assignment, I found the clock assignment to be very hard simply because I wanted to create really complex things that were far outside of my skill level with the coding language. This assignment was created using P5.JS, and the only experience I had using that coding language was with the screensaver. And just because I managed to make that work, does not mean I was confident in my abilities to create a clock in the same coding language.

My very first idea was something so complex that once I discovered the basic how-to, I was woefully unprepared and underqualified to even attempt it. I wanted to create a sketch that displayed the sun and moon relative to the location given, so the University of Mary Washington. I was even going to attempt to recreated the university bell tower and have the sun and moon rotate throughout the day. In order to make that work I would have to import an entire JavaScript library and mess with all kinds of parameters I cannot begin to even describe in this blog post. It was simply too complex for me, so I gave up that idea in favor of something else.

As the clock assignment came close to being due, I decided to do something that was within my skill range: a line clock. I had seen Dr. Whalen assign time variables ellipses in class, so I figured doing the same to a line would be easy. From there I used ellipses to display the current hour, minute, and second on their own individual lines.

Simple_Line_Clock.p5js / code

// Defined Variables
var backgd;
var hourLine;
var minuteLine;
var secondLine;
var begin;
var end;

// Canvas Setup
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	
	
	// Setup for Time Line Colors
	hourLine = color('hsl(270, 65%, 40%, 0.5)');
	minuteLine = color('hsl(270, 65%, 40%, 0.5)');
	secondLine = color('hsl(270, 65%, 40%, 0.5)');
	
	
	//Line Width
	begin = width/20;
	end = (width/20)*19;
}

function draw() {
	// Background
	backgd = color('hsba(270, 65%, 40%, 0.5)')
	background(backgd)
	strokeWeight(20)
	
	// Hour Line
	stroke(hourLine);
	line(end,height/4,begin,height/4);
	fill('hsba(270, 65%, 40%, 0.5)')
	ellipse(begin + (hour()/23 * (end - begin)), height/4, 30, 30);
	
	// Minute Line
	stroke(minuteLine);
	line(end,(height/4) * 2,begin,(height/4) * 2);
	fill('hsba(270, 65%, 40%, 0.5)');
	ellipse(begin + (minute()/59 * (end - begin)), (height/4) * 2, 30, 30);
	
	// Second Line
	stroke(secondLine);
	line(end,(height/4) * 3,begin,(height/4) * 3);
	fill('hsba(270, 65%, 40%, 0.5)');
	ellipse(begin + (second()/59 * (end - begin)), (height/4) * 3, 30, 30);
}

To update this assignment, I wanted to do something with the color. I originally intended to make the background change colors every minute. I’ve left the code I was trying to do this with in version two, but I accidentally created a fading effect along the time bars that I thought was really cool. I managed to make it change color slightly, but not in the way I originally intended. This version is a little unstable though. For some reason the effect breaks if you click off of the page displaying the clock, so I would recommend refreshing the sketch to see the updates I’ve made. You can do this by clicking the circular icon with a rounded arrow in the top of the sketch display. I know the reason behind this effect is due to the background not redrawing itself every minute, which is part of the reason is breaks. However, I think this version of it looks so much cooler than the original. Even though this is not a complete update of this project, I hope to continue working on it so I can make the colors change in the way I want. For now, I’m really happy with this result.

Simple Line Clock V2 / code

// Defined Variables
var backgd;
var hourLine;
var minuteLine;
var secondLine;
var begin;
var end;

// Canvas Setup
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	colorMode(HSL);
	
	nextSecond = second() + 1;
	
	
	// Setup for Time Line Colors
	hourLine = color(255,255,255);
  minuteLine = color(255,255,255);
  secondLine = color(255,255,255);
	
	
	//Line Width
	begin = width/20;
	end = (width/20)*19;
}

function draw() {
    // Background
	
		// Changes color based on frame count; commented out because it generates an effect that needs an epilepsy warning
    // if(frameCount%500 == 0){
    //     bkgColor = color(random(255),random(255),random(255));
    // } else if (frameCount == 1){
    //     bkgColor = color(270,65,40);
    // }
	
	// Background; starts off light before regulating to a normal color
	// generates an interesting lingering effect on the hour, minute, and second ellipses
	console.log(second());
	
	if(second() == nextSecond) {
		console.log(nextSecond);
		nextSecond = second() + 1;
		background(random(HSL), random(HSL), random(HSL));
}
	if (second() == 59) {
		nextSecond = 0;
	}
    //background(bkgColor);
    strokeWeight(20)
	
	// Hour Line
	stroke(hourLine);
	strokeWeight(15);
	line(end,height/4,begin,height/4);
	fill('hsba(270, 65%, 40%, 0.5)')
	ellipse(begin + (hour()/23 * (end - begin)), height/4, 30, 30);
	
	// Minute Line
	stroke(minuteLine);
	strokeWeight(15);
	line(end,(height/4) * 2,begin,(height/4) * 2);
	fill('hsba(270, 65%, 40%, 0.5)');
	ellipse(begin + (minute()/59 * (end - begin)), (height/4) * 2, 30, 30);
	
	// Second Line
	stroke(secondLine);
	strokeWeight(15);
	line(end,(height/4) * 3,begin,(height/4) * 3);
	fill('hsba(270, 65%, 40%, 0.5)');
	ellipse(begin + (second()/59 * (end - begin)), (height/4) * 3, 30, 30);
}

Project Reflection

Even though I was not able to update this project in the way I imagined, I’m still rather satisfied with what I did manage to do. P5.js is a fairly easy yet complex coding language that I am still trying to understand. I cannot quite wrap my head around all the math involved in this coding language, which makes it hard for me to create anything really amazing. Out of all of the assignments I updated for this project, I think this one is the one that mostly falls short of expectations. However, I never did feel like the clock was my best work to begin with. This project was the one I struggled with the most, simply because I could not pick up the coding language like I was able with Python. That makes me a little sad. Despite the hard time I had with them, the clock and screensaver were two of my favorite assignments. However, that has just made me even more determined to create new things with p5.js. I think this is a coding language I will be revisiting in the future, outside of class. I’m rather sad the updated version is unstable unless you stay directly on the page, so I want to look more into that. If anything, I plan to look at this assignment some more to complete what I started by making it change colors, preferable in a way that does not blur out the lines or threaten to give someone an epileptic seizure.

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php