Skip to content

Instantly share code, notes, and snippets.

Last active Jun 25, 2018
What would you like to do?
Bocko in browser using cljs.main and synthetic index.html

First start up the REPL by issuing this command:

clj -Sdeps '{:deps {github-mfikes/e00202b2de7cc2352fedcf92b1fe60dc {:git/url "" :sha "68ef581813e08a92bd52e7beeea1535ab7b3337f"}}}' -m cljs.main -i @index.cljs -r

Once the REPL is waiting for the browser to connect, if it doesn't automatically, open http://localhost:9000 in your browser.

You will now be running Bocko. The following forms evaluated in the REPL will draw an American flag.

;; Draw 13 stripes cycling over red/white

(doseq [[n c] (take 13 
                (map vector (range) (cycle [:red :white])))] 
  (color c)
  (let [x1 10 
        x2 25 
        y (+ 10 n)]
    (hlin x1 x2 y)))

;; Fill in a dark blue field in the corner

(color :dark-blue)
(doseq [x (range 10 19)
        y (range 10 17)]
  (plot x y))

;; Add some stars to the field by skipping by 2

(color :white)
(doseq [x (range 11 19 2)
        y (range 11 17 2)]
  (plot x y))
{:paths ["."]
:deps {org.clojure/clojurescript {:mvn/version "1.10.238"}
bocko-canvas {:mvn/version "1.0.0"}}}
(require '[bocko-canvas.core :as bocko-canvas]
'[bocko.core :refer [color plot scrn hlin vlin clear *color*]])
(set! (.-innerHTML (.getElementById js/document "app"))
"<canvas id=\"canvas\" width=\"1120\" height=\"640\" style=\"border:1px solid #888888;\"></canvas>")
(.setAttribute (.-body js/document) "bgcolor" "#000000")
(bocko-canvas/init (.getElementById js/document "canvas"))
(println "Available plotting functions: color plot scrn hlin vlin clear *color*")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment