Colorful-Coding

/img/colorful-coding_proyecto-1-card.png
Colorful Coding, Proyecto 1, Sine Wave

Resultado Código (def state {:sizes {:w 1200 :h 800}}) (def width (-> state :sizes :w)) (def height (-> state :sizes :h)) (defn setup [] [] (let [canvas (js/createCanvas width height js/WEBGL)] (.parent canvas "p5jsparent") (js/loadPixels) (js/angleMode js/DEGREES))) (defn draw [] [] (js/background 30) (js/rotateX 60) (js/noFill) (js/stroke 255) ;; Se puede hacer con un único `doseq` pero queda bastante más claro así, ;; porque de la otra forma necesitamos hacer `when` para ver cuándo ;; llamamos a las funciones de inicio/fin. (doseq [i (range 150)] (let [r (js/map (js/sin (/ js/frameCount 1)) -1 1 100 200) g (js/map i 0 20 0 255) b (js/map (js/cos js/frameCount) -1 1 200 100)] (js/stroke r g b)) (js/beginShape) (js/rotate (/ js/frameCount 200)) (doseq [j (range 0 360 60)] ;; (js/rotate (/ js/frameCount 2000)) (let [rad (* i 3) x (* (js/cos j) rad) y (* (js/sin j) rad) z (* (js/sin (+ (* js/frameCount 2) (* 5 i))) 50)] (js/vertex x y z))) (js/endShape js/CLOSE))) Enlaces Starlight Challenge p5.js The Coding Train Challenges Libro The Nature Of Code ClojureScript Studio Editor de p5js con ClojureScript Eric Norman sobre concurrencia en Clojure

/img/colorful-coding_proyecto-2-card.png
Colorful Coding, Proyecto 2, Spirograph

Resultado Código (def r1 (volatile! (+ 100 (rand-int 50))) ) (def r2 (volatile! (+ 100 (rand-int 50)))) (def a1 (volatile! 0)) (def a2 (volatile! 0)) (def prevX (volatile! nil)) (def prevY (volatile! nil)) (def a1Inc (volatile! nil)) (def a2Inc (volatile! nil)) (def speed (volatile! 50)) (defn setup [] (vreset! a1Inc (js/random 0.1 5)) (vreset! a2Inc (js/random 0.1 5)) (let [canvas (js/createCanvas 800 800)] (.parent canvas "p5jsparent") (js/angleMode js/DEGREES) (js/background 30))) (defn draw [] (js/translate (/ js/width 2) (/ js/height 2)) (doseq [_ (range @speed)] (let [x1 (* @r1 (js/cos @a1)) y1 (* @r1 (js/sin @a1)) x2 (+ x1 (* @r2 (js/cos @a2))) y2 (+ y1 (* @r2 (js/sin @a2))) r (js/map (js/sin js/frameCount) -1 1 100 200) g (js/map (js/sin js/frameCount) -1 1 100 200) b (js/map (js/sin js/frameCount) -1 1 200 100)] (js/stroke r g b)Giro (y ) usando seno y coseno de ;; Si no compruebo el valor nil/no nil, me aparece ralla desde 0 ;; hasta el primer punto calculado. (when-not (nil? @prevX) (js/line @prevX @prevY x2 y2)) (vreset! prevX x2) (vreset! prevY y2) (vreset! a1 (+ @a1 @a1Inc)) (vreset! a2 (+ @a2 @a2Inc))) )) Otros estados chulos #js {:speed 50 :r1 121, :r2 136, :a1 0, :a2 0, :prevX nil, :prevY nil, :a1Inc 0.7508956561156331, :a2Inc 3.8642557890718057} #js {:a2 0, :a1Inc 4.275794517513079, :speed 50, :a1 0, :r2 136, :a2Inc 1.0797030798400762, :r1 109, :prevY nil, :prevX nil} #js {:a2 0, :a1Inc 1.2013414944503171, :speed 50, :a1 0, :r2 103, :a2Inc 3.7605190603179026, :r1 141, :prevY nil, :prevX nil} Enlaces Starlight Challenge p5.js The Coding Train Challenges Libro The Nature Of Code ClojureScript Studio Editor de p5js con ClojureScript Eric Norman sobre concurrencia en Clojure

/img/colorful-coding_proyecto-4-card.png
Colorful Coding, Proyecto 4

Resultado Código Para que funcione con volatile! he tenido que usar un p5.vector para el valor de alpha. Permite modificación in-place sin necesidad de pegarme con ClojureScript.

/img/colorful-coding_proyecto-9-card.png
Colorful Coding, Proyecto 9

Resultado Código (def points #js []) (def mult 0.005) (def ^:dynamic *max* 0) (defn setup [] (let [canvas (js/createCanvas js/windowWidth js/windowHeight) density 50 space (/ js/width density)] (.parent canvas "p5jsparent") (js/background 30) (js/angleMode js/DEGREES) (js/noiseDetail 1) (doseq [x (range 0 js/width space) y (range 0 js/height space)] (.push points (js/createVector (+ x (js/random -10 10)) (+ y (js/random -10 10))))) (js/shuffle points true))) (defn draw [] (js/noStroke) (binding [*max* (if (< js/frameCount (count points)) js/frameCount (count points))] #_(js/background 30) ;; Esto permite simular movimiento browniano. (doseq [idx (range *max*)] (let [p (aget points idx) angle (js/map (js/noise (* mult (.-x p)) (* mult (.-y p))) 0 1 0 720) r (js/map (.-x p) 0 js/width 50 255) g (js/map (.-y p) 0 js/height 50 255) b (js/map (.-x p) 0 js/width 255 50)] (js/fill r g b) (.add p (js/createVector (js/cos angle) (js/sin angle))) (js/ellipse (.-x p) (.-y p) 1))))) Enlaces Starlight Challenge p5.js The Coding Train Challenges Libro The Nature Of Code ClojureScript Studio Editor de p5js con ClojureScript Eric Norman sobre concurrencia en Clojure