# Generating Wallpaper

Some fun generating wallpapers with the HTML Canvas & Clojurescript

``````(defn draw-pixel! [canvas x y color]
(let [ctx (.getContext canvas "2d")
scale 2]
(set! (.-fillStyle ctx) color)
(.fillRect ctx (* scale x) (* scale y) scale scale)))
``````

When we want to erase the canvas

``````(defn reset-canvas! [canvas]
(let [ctx (.getContext canvas "2d")]
(set! (.-fillStyle ctx) "white")
(.fillRect ctx 0 0 (.-width canvas) (.-height canvas))))
``````

The algorithm is controlled by the geometry of a square:

its x-position named a its y-position named b the side of the square named side

```
(defn draw-bw-wallpaper! [canvas a b side]
(let [points 200]
(dotimes [i points]
(dotimes [j points]
(let [x (+ a (* i (/ side points)))
y (+ b (* j (/ side points)))
c (int (+ (* x x) (* y y)))]
(when (even? c)
(draw-pixel! canvas i j "black")))))))

(draw-bw-wallpaper! canvas 5 5 9)
```

The cool thing about this algorithm is that when we modify the side of the square, we get a completely different pattern:

``````

(draw-bw-wallpaper! canvas 5 5 100)
``````

``````

(defn draw-color-wallpaper! [canvas a b side]
(let [points 200]
(dotimes [i points]
(dotimes [j points]
(let [x (+ a (* i (/ side points)))
y (+ b (* j (/ side points)))
c (int (+ (* x x) (* y y)))
color  (case (mod c 4)
0 "red"
1 "green"
2 "blue"
"white")]
(draw-pixel! canvas i j color))))))

(draw-color-wallpaper! canvas 5 7 101)
``````

Again, when we modify the side of the square, we get a completely different pattern:

``````
(draw-color-wallpaper! canvas 5 7 57)
``````

## Grand Finale

Someone in reddit suggested looping over the value of `side` in order to watch all the generated wallpapers like a movie.

Here is the result:

``````
(defonce interval (atom nil))
(defonce side (atom 0))

(def delta 0.5)
(defn step [canvas container]
(set! (.-innerHTML container) (str "side: " @side) )
(reset-canvas! canvas)
(draw-color-wallpaper! canvas 5 5 (swap! side + delta)))

(.clearInterval js/window @interval)
(reset! side 0)
(reset! interval (.setInterval js/window step  500 canvas js/klipse-container))
``````