Quil — Making a Clock with Clojurescript
Tags: quil, clojurescript, quilcljs, javascript
Published: 2019-09-04 05:16:31

---
title: Quil — Making a Clock with Clojurescript
published: true
tags: quil,clojurescript,quil-cljs,javascript
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*S7xuoiPXmss8XWU2dxNaIQ.jpeg)

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](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) (because the newer version get trouble with Clojure)
2. [Leiningen](https://leiningen.org)

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](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](http://localhost:3449,) and minimize the terminal instead of closing it.

![](https://cdn-images-1.medium.com/max/697/1*e8A9ur9fBqSCbFs5jyUBDg.png)

```
lein figwheel
```

### **The Clock**

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

![](https://cdn-images-1.medium.com/max/634/1*siHbR99NhErHH9Cp51ZgRQ.png)

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].](https://github.com/quil/quil/issues/229)

### 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.

{% gist https://gist.github.com/ampersanda/78b7b5d7b6fed57c4731692451442f0c %}

### Draw! 🎨

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

{% gist https://gist.github.com/ampersanda/2eae81cdb2f978032003260e08331337 %}

### 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?

![](https://cdn-images-1.medium.com/max/1024/1*ZtjBskxFICoy20Gm2ZseXA.jpeg)

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))
```

![](https://cdn-images-1.medium.com/max/1024/1*PxgvqSz_6zR_8Zt8cy9Amg.png)

### Let’s Draw

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

#### Declaring all stuffs

{% gist https://gist.github.com/ampersanda/733fd8c6f59304a013fc267c19a94741 %}

#### Drawing values (into arcs)

{% gist https://gist.github.com/ampersanda/34d1029fed822867c25d674c55d9d1a6 %}

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)
```

![](https://cdn-images-1.medium.com/max/524/1*ZbJ_WVWkD98kk1oAegx8bA.png)

The clock is drawn but we got wrong position, so **_CENTER IT_**!!!, with **_with-translation_**

{% gist https://gist.github.com/ampersanda/665fbfb0fe7b0b3eb87fa693b570ffd3 %}

![](https://cdn-images-1.medium.com/max/529/1*Rga1B0LRqTfBVh_1MaRw_Q.png)

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.

{% gist https://gist.github.com/ampersanda/5b36f8d8e90eed1d5d546b47f53e7e20 %}

![](https://cdn-images-1.medium.com/max/522/1*wDtrNTG14zA9ee40buyecg.png)

Done!!!

We forgot the lines,

{% gist https://gist.github.com/ampersanda/b76868e9f5bbe462aa190f73e69179ee %}

![](https://cdn-images-1.medium.com/max/523/1*zzEM84xZ_dXAQNCb4kJbQw.png)

the [demo page can be accessed here](https://ampersanda-demo-quil-clock.netlify.com/) and you can grab it [here (Github)](https://github.com/ampersanda/quil-clock)

[ampersanda/quil-clock](https://github.com/ampersanda/quil-clock)

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

Happy Coding :)

* * *