Quil — Making a Clock with Clojurescript

Hello guys, finally, we create a thing, yay! Maybe code below is not the best code to get the best performances but I try my best :D,

sorry…

I am not good at explain thing. I open for suggestion and criticism :).

*Please read comments inside the code for hint.

Requirements

1. JDK v8 (because the newer version get trouble with Clojure)
2. Leiningen

Oh yeah, time to create a new things!! (I mean project).

lein new quil-cljs clock

Or you just can do that online on http://quil.info/sketches/create

Attention!!!

To make sure things, in this project, we’re just gonna focus on one file called core.cljs , open it :D

Running empty project (It’s not actually empty)

To run the current project, just execute command below inside the project folder, as soon as the figwheel done, Wait for a while until you see Successfully compiled “resources/public/js/main.js” , open http://localhost:3449 and minimize the terminal instead of closing it.

lein figwheel

The Clock

So, the clock we are going to make is like this

I know that’s it’s not kinda beautiful :’( , but we are going to learn some of the basics such as change the background, create an Arc, line etc.

As seen on the screenshot above, the circle around is kinda jaggy, like no smooth at all, there’s an issue about it and you can follow [link].

Setup

Change the setup function and the defsketch with the below format (please read the comments and below is just one core.cljs file).

and also delete the update function because we just re-draw the elements over and over.

Draw! 🎨

Here’s the sample of on draw function, which is only draw the background color gray

Drawing Line

(q/line x-from y-from x-to y-to)

x-from : horizontal / x position where the line should start

y-from : vertical / y position where the line should start

x-to : horizontal / x position where the line should end

y-to : vertical / y position where the line should end

Making Arc

Yes, it’s called arc, it’s a pie not a circle

(q/arc pos-x pos-y width height value)

pos-x : horizontal / x position where the center point of arc should start

pos-y : vertical / y position where the center point of arc should start

width : horizontal / x diameter of the pie

height : variable / y diameter of the pie

value : how much pie part do still remains?

Now, we talk about the value, arc has value from 0 to 2π which means 0° = 0 and 360° = 2π, so how about 45°, 77°, and so on?.

Well, math will solve our problems. 🌈

Mapping Values

Mapping values is like how the step of the increment as per value

Manual Way

Actually, there’s a formula

deg° -\> deg\*π/180

and replace the deg with degree you want to calculate

90° -\> 90\*π/180 = 0.5π
360° —\> 360\*π/180 = 2π

and how we apply it, to the clock.

Clock has 0–59 seconds (right?!), so the circle is not fully 360° because 360° mapped in 60 seconds

First, We can convert 59 seconds to degree

60/59 = 360°/x
 x = 360°\*59/60
 x = 354°

Map-Range Way

(q/map-range value min-val1 max-val1 min-val2 max-val2)

value : value to calculated

min-val1 : minimum value of the range, like in seconds has 0 seconds

max-val1 : maximum value of the range, like in seconds has 59 seconds

min-val2 : minimum value of the second range (0°)

max-val2 : maximum value of the second range (354°)

That’s all we need to mapping the values.

Getting Hours, Minutes, and Seconds

(q/hour) ;; getting hour
(q/minute) ;; getting minute
(q/seconds) ;; getting seconds

You can see the result using console.log ,

(js/console.log (q/hour))

Let’s Draw

For the first we are going to draw the arcs first, then the lines

Declaring all stuffs

Drawing values (into arcs)

see this part,

;; setting the stroke thickness
(q/stroke-weight 8)

;; setting the arc with not fill inside
(q/no-fill)

;; drawing the arcs
; drawing hours
(q/stroke 255 100 150)
(q/arc 0 0 400 400 0 h-a)

; drawing minutes
(q/stroke 150 100 255)
(q/arc 0 0 360 360 0 m-a)

; drawing seconds
(q/stroke 150 255 100)
(q/arc 0 0 320 320 0 s-a)

The clock is drawn but we got wrong position, so CENTER IT!!!, with with-translation

It does success drawing the arcs actually, but it seems like we got wrong start position, because circles/arcs start in 0° and clock start 90° back from the 0° or -90°, use with-rotation to rotate specific (block of) drawings.

Done!!!

We forgot the lines,

the demo page can be accessed here and you can grab it here (Github)

ampersanda/quil-clock

and as always, thank you for taking time to read this article.

Happy Coding :)