Skip to content

Instantly share code, notes, and snippets.

@mfikes
Last active Jun 25, 2018
Embed
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 "https://gist.github.com/mfikes/e00202b2de7cc2352fedcf92b1fe60dc" :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