https://github.com/sneakypeet/p5js-cljs-starter
A starter project for drawing with P5.js using clojurescript
https://github.com/sneakypeet/p5js-cljs-starter
cljs clojurescript p5 p5js
Last synced: about 1 month ago
JSON representation
A starter project for drawing with P5.js using clojurescript
- Host: GitHub
- URL: https://github.com/sneakypeet/p5js-cljs-starter
- Owner: SneakyPeet
- License: mit
- Created: 2018-09-29T10:08:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-10-16T18:00:44.000Z (over 6 years ago)
- Last Synced: 2025-03-22T04:02:00.584Z (about 2 months ago)
- Topics: cljs, clojurescript, p5, p5js
- Language: Clojure
- Size: 182 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# P5 CLJS STARTER KIT
A starter project for drawing with P5.js using clojurescript and figwheel.
This project does not try and wrap P5.js. Instead it simply provides the ability to manage drawing state with clojurescript data types while allowing you to directly access the drawing power of p5.js.
## Example
Some random dots moving around the screen
```
;;;; STATE
(def size 500)
(defn dots [] (->> (range 50)
(map #(hash-map :position (v2d/abs (v2d/random size))
:color [(rand-int 255) (rand-int 255) (rand-int 255)]))))
(defn move [dots]
(map #(update % :position v2d/add (v2d/random 2)) dots))
(defonce *state (atom (dots)))
;;;; P5
(defn draw-dot [dot]
(let [{:keys [position color]} dot
[x y] position
[r g b] color]
(js/fill r g b)
(js/ellipse x y 10 13)))
(defn setup []
(js/createCanvas 500 500)
(js/rectMode "CENTER")
(js/noStroke))
(defn draw []
(js/background 240)
(doseq [dot @*state]
(draw-dot dot))
(frame-rate/show)
(swap! *state move))
```
## Components
* Frame Rate: Toggle frame rate display using `(p5.components.frame-rate/show)`
* Child Canvas: A canvas that gets it's size from it's parent element `(p5.components.child-canvas/create-canvas "my-id")`
## Vector Math
For immutable 2d vectors and helper functions see `src/vecvec/v2d.cljs`.
A 2d vector is represented using normal clojure vectors `[x y]`. This allows for easy destructuring and immutability.
```
(let [[x y] (-> (v2d/random)
(v2d/add (v2d/new 1 2)
v2d/abs))]
x)
```
## Setup
To get an interactive development environment run:
lein figwheel
To clean all compiled files:
lein clean
To create a production build run:
lein do clean, cljsbuild once min