{"id":18368462,"url":"https://github.com/sneakypeet/p5js-cljs-starter","last_synced_at":"2025-04-06T17:31:42.303Z","repository":{"id":85408482,"uuid":"150851903","full_name":"SneakyPeet/p5js-cljs-starter","owner":"SneakyPeet","description":"A starter project for drawing with P5.js using clojurescript","archived":false,"fork":false,"pushed_at":"2018-10-16T18:00:44.000Z","size":186,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T04:02:00.584Z","etag":null,"topics":["cljs","clojurescript","p5","p5js"],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SneakyPeet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-29T10:08:52.000Z","updated_at":"2023-07-25T14:20:15.000Z","dependencies_parsed_at":"2023-03-05T23:30:27.867Z","dependency_job_id":null,"html_url":"https://github.com/SneakyPeet/p5js-cljs-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SneakyPeet%2Fp5js-cljs-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SneakyPeet%2Fp5js-cljs-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SneakyPeet%2Fp5js-cljs-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SneakyPeet%2Fp5js-cljs-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SneakyPeet","download_url":"https://codeload.github.com/SneakyPeet/p5js-cljs-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247522354,"owners_count":20952530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cljs","clojurescript","p5","p5js"],"created_at":"2024-11-05T23:26:02.071Z","updated_at":"2025-04-06T17:31:42.295Z","avatar_url":"https://github.com/SneakyPeet.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# P5 CLJS STARTER KIT\n\nA starter project for drawing with P5.js using clojurescript and figwheel.\n\nThis 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.\n\n\n## Example\n\nSome random dots moving around the screen\n\n```\n;;;; STATE\n\n(def size 500)\n\n\n(defn dots [] (-\u003e\u003e (range 50)\n                   (map #(hash-map :position (v2d/abs (v2d/random size))\n                                   :color [(rand-int 255) (rand-int 255) (rand-int 255)]))))\n\n\n(defn move [dots]\n  (map #(update % :position v2d/add (v2d/random 2)) dots))\n\n\n(defonce *state (atom (dots)))\n\n\n;;;; P5\n\n(defn draw-dot [dot]\n  (let [{:keys [position color]} dot\n        [x y] position\n        [r g b] color]\n    (js/fill r g b)\n    (js/ellipse x y 10 13)))\n\n\n(defn setup []\n  (js/createCanvas 500 500)\n  (js/rectMode \"CENTER\")\n  (js/noStroke))\n\n\n(defn draw []\n  (js/background 240)\n  (doseq [dot @*state]\n    (draw-dot dot))\n  (frame-rate/show)\n  (swap! *state move))\n\n```\n\n## Components\n\n* Frame Rate: Toggle frame rate display using `(p5.components.frame-rate/show)`\n* Child Canvas: A canvas that gets it's size from it's parent element `(p5.components.child-canvas/create-canvas \"my-id\")`\n\n\n## Vector Math\n\nFor immutable 2d vectors and helper functions see `src/vecvec/v2d.cljs`.\n\nA 2d vector is represented using normal clojure vectors `[x y]`. This allows for easy destructuring and immutability.\n\n```\n(let [[x y] (-\u003e (v2d/random)\n                (v2d/add (v2d/new 1 2)\n                v2d/abs))]\n  x)\n```\n\n## Setup\n\nTo get an interactive development environment run:\n\n    lein figwheel\n\nTo clean all compiled files:\n\n    lein clean\n\nTo create a production build run:\n\n    lein do clean, cljsbuild once min\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsneakypeet%2Fp5js-cljs-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsneakypeet%2Fp5js-cljs-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsneakypeet%2Fp5js-cljs-starter/lists"}