Drawing a fancy pattern for New Year's cards with Clojure + quil
Tags: clojure, quil, processing, art
Published: 2018-01-05 04:25:05

---
title: Drawing a fancy pattern for New Year's cards with Clojure + quil
published: true
description: Using clojure and quil, I drew a fancy pattern for my new year's card.
tags: Clojure, quil, processing, art
cover_image: https://thepracticaldev.s3.amazonaws.com/i/j2sfdiy4a6ykpopubbui.png
---

I like sending New Year's cards. Each year I prepare the design, buy these blank cards, and print them at home. This year I thought I'd try [quil](https://github.com/quil/quil), basically [Processing](https://processing.org/) in clojure, to draw some fancy patterns for it. Because I can't draw at all...

Edit: [syngrato](https://dev.to/syngrato) adapted this code into ClojureScript (Thanks!). You can have some fun [here](http://quil.info/sketches/show/-L2FznrshfGMRFrpuU7p). The license is MIT. 

## Design

### Motif

What kind of pattern is suitable for New Year's cards? In Japan (I'm a Japanese, by the way), things which we can wish each other's health and prosperity with have been popular --- pine trees, cranes, and turtles to name some. They are symbols of health & long lives because they live long (always green for pines). Another popular symbol is the *ume* [梅](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%83%A1), Japanese apricot, because they bloom the earliest in spiring and celebrating the New Year is all about celebrating the coming spring. 

*Ume* flowers are traditionally abstracted into design (for lack of my vocab) like this:

![梅鉢紋 from http://hakko-daiodo.com/main-0](https://thepracticaldev.s3.amazonaws.com/i/jxzsfimripb6u6flcxk5.png)

(Image taken from [this site](http://hakko-daiodo.com/main-0), which allows replication). Five circles with stamen nicely signifies the *ume* flowers. I like them and its simplicity will go well with quil.

I talked with Mom and she suggested a traditional design called [利休梅](https://www.google.co.jp/search?q=%E5%88%A9%E4%BC%91%E6%A2%85%E3%80%80%E6%A8%A1%E6%A7%98&tbm=isch) (do check out the link which is google image search), where the flower is symbolised with 5+1 circles + lines connecting the centre and the petals.

![rikyu-ume](https://thepracticaldev.s3.amazonaws.com/i/vnw6yb54zvs07t3sxhtp.JPG)

The flowers are, she says, usually scattered to form a design. Maybe I can tile them to make a pattern?

### Pattern

Tessellation is always an interesting topic. For pentagons, I found [the Cairo pentagonal tiling](https://en.wikipedia.org/wiki/Cairo_pentagonal_tiling) quite beautiful and symmetric (remember we'll be putting flowers to the pentagons)

![Cairo pentagonal tiling](https://thepracticaldev.s3.amazonaws.com/i/9825c93aw7uc1z5uakm9.png)([Image](https://commons.wikimedia.org/wiki/File:P2_dual.png) by [TED-43](https://commons.wikimedia.org/wiki/User:TED-43), licensed under the CC-BY License.)

So let's assign a flower to each of the pentagon there. From now on, I'll call the hexagon formed by 4 pentagons *Hexa*. Let the length of the squares and regular triangles *r*, which I set to 50px in the code.

## Coding

Let's look at a Hexa and name some lengths. The structure is so elegant that every length I'll need can be calculated nicely. Here's a doodle I drew while coding, which shows how the lengths `r1` - `r3`  is defined.

![lengths](https://thepracticaldev.s3.amazonaws.com/i/81fi4n68o4vm152a6940.jpg)

After these simple math, coding itself is quite straightforward. To make things easier, a Hexa is drawn in an angle where it stands straight. I defined `draw-flower` to draw a single flower; `draw-hex-pattern` for a Hexa, in which 4 `draw-flower` is called with appropriate translation and rotation; then `draw-hex-at`, which accepts the location in the form of `(structure hexa x y)`, where `x` and `y` are the hexagonal coordinates. Full code (which is probably not ideal) follows..

    ; licensed under the MIT license
    (ns nen.core
      (:require [quil.core :as q]
                [quil.middleware :as m]))
    
    
    (defstruct hexa :x :y)
    (def r 50)
    (def r1 (/ r (Math/sqrt 3)))
    (def r2 (* r (+ 1 (/ 1 (Math/sqrt 3)))))
    (def r3 (/ (* r (+ 1 (Math/sqrt 3))) 2))
    (def corolla-size 15)
    (def centre-size 12)
    (def str-w 3)
    (defn draw-corolla [x y]  (q/ellipse x y corolla-size corolla-size))
    (defn draw-corolla-r [x y]
      (let [dx (* 0.1 corolla-size (- (Math/random) 0.5))
            dy (* 0.1 corolla-size (- (Math/random) 0.5)) ]
        (draw-corolla (+ x 0) (+ y 0))
        )
      )
    
    (defn draw-flower []
      (q/fill 223 130 138)
      (doseq
        ; every corolla is located half-way for aesthetics
        [ [x y]
          [[0 0]
           [(/ r2 8) (/ r3 4)]
           [(/ r2 8) (- (/ r3 4))]
           [(/ (+ r1 r2) 4) (/ r1 4)]
           [(/ (+ r1 r2) 4) ( - (/ r1 4))] ]]
        (do
          (q/stroke 223 130 138)
          (q/stroke-weight str-w)
          (q/line (/ r1 2) 0 x y)
          (q/no-stroke)
          (draw-corolla-r x y)))
      (q/fill 248 181 0)
      (q/ellipse (/ r1 2) 0 centre-size centre-size)
      )
    
    (defn draw-hex-pattern []
      (q/fill 223 130 138)
    
      (draw-flower)
    
      (q/with-translation
        [ (/ (+ r1 r2) 2) (- (/ r1 2)) ]
        (q/with-rotation
          [(/ Math/PI -2)]
          (draw-flower)))
    
      (q/with-translation
        [ (/ (+ r1 r2) 2)  (/ r1 2) ]
        (q/with-rotation
          [(/ Math/PI 2)]
          (draw-flower)))
    
      (q/with-translation
        [ (+ r1 r2) 0 ]
        (q/with-rotation
          [Math/PI]
          (draw-flower)))
      )
    
    (defn draw-hex-at [h]
      (q/with-translation
        [
         (* (:x h) (+ r1 (/ r2 2)) )
         (+
           (* 2 r3 (:y h))
           (if (even? (:x h))
             0
             r3))]
        (draw-hex-pattern)))
    
    (defn setup []
      (q/frame-rate 30)
      (q/color-mode :rgb)
      (for [x (range 10) y (range 5)]
        (struct hexa x y)))
    
    (defn update-state [s] s)
    
    (defn draw-state [state]
      (q/background 255)
      (q/no-loop)
    
      (q/with-translation [50 100]
        (doseq [h state]
          (draw-hex-at h)))
      
      (q/save "out.png")
      )
    
    (q/defsketch nen
      :title "super-omedetai"
      :size [800 800]
      ; setup function called only once, during sketch initialization.
      :setup setup
      ; update-state is called on each iteration before draw-state.
      :update update-state
      :draw draw-state
      :features [:keep-on-top]
      :middleware [m/fun-mode])

which results in something like this:

![resulting image](https://thepracticaldev.s3.amazonaws.com/i/47vlujrkofnuj9e77xpo.png)

That looks beautiful. I love it.

After adding some texts and my hand-written messages (which is blurred in this post) and my name, here's my new year's card. I'd use the spaces in top-left to add some personal messages to each person.

![Happy new year](https://thepracticaldev.s3.amazonaws.com/i/xb1t9apxmxi0ms8piaem.jpg)

I wish you all a happy new year, and hope that 2018 will be a wonderful year for all of us.