Skip to content

A starter project for drawing with P5.js using clojurescript

License

Notifications You must be signed in to change notification settings

SneakyPeet/p5js-cljs-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A starter project for drawing with P5.js using clojurescript

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published