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
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)
and as always, thank you for taking time to read this article.
Happy Coding :)
Top comments (0)