Using:
Where t increases monotonically, and k can be varied with the slider below, the (x,y) co-ordinates sweep out the curve of a distressed Cardioid. When k = 0.5 the curve sweeps out a perfect Cardioid.
A familiar game implemented using Big-Bang, a ClojureScript library inspired by Racket's big-bang. It abstracts the GUI event-loop into a component based system, allowing self-contained big-bang 'worlds' to communicate over core.async channels, in a reactive CSP style.
In this example, the main file builds some DOM elements and fetches various SVG assets for inclusion on the page. Then, three big-bang components are initialized:
| (ns big-bang.example.cat-animation | |
| (:require-macros [cljs.core.async.macros :refer [go]]) | |
| (:require [enchilada :refer [canvas ctx canvas-size proxy-request]] | |
| [cljs.core.async :as async :refer [<!]] | |
| [dataview.loader :refer [fetch-image]] | |
| [big-bang.core :refer [big-bang!]] | |
| [jayq.core :refer [show attr]])) | |
| (defn increment-and-wrap [x] | |
| (if (< x 800) |
Move the mouse around to see a demonstration of Big-Bang mouse-move event handling. Big-bang uses core.async to handle events in a reactive manner, dispatching to relevant state-handlers so that manipulating state occurs in a purely functional manner.
In the code below, the update function is only fired when a new mouse-move event is delivered to big-bang's event loop. It is passed the event and the current 'world-state', of which it returns a modified version. The render function is invoked on a javascript requestAnimationFrame() callback only if the world state has been changed.
Big-bang is a new library, and is subject to ongoing change, but supports a flexible architecture which allows:
<canvas>, but as demonstrated below there is no restriction)Move the mouse around the page, and watch as OM reactively sets the co-ordinates. This was slightly modified from David Nolan's examples at https://github.com/swannodette/om/blob/master/examples/mouse/src/core.cljs to add a <div id="app"></div> programmatically. I imagine there's an official OM way to splice components into a page, but used Dommy instead ... FTW.
Compare and contrast to the equivalent Big-Bang version: http://programming-enchiladas.destructuring-bind.org/rm-hull/8617788
| #include <nall/platform.hpp> | |
| #include <nall/stdint.hpp> | |
| using namespace nall; | |
| extern "C" { | |
| void filter_size(unsigned&, unsigned&); | |
| void filter_render(uint32_t*, uint32_t*, unsigned, const uint16_t*, unsigned, unsigned, unsigned); | |
| }; | |
| enum { |
| (ns clojure-conj-talk.core | |
| (:use [enchilada :only [canvas ctx canvas-size]] | |
| [monet.canvas :only [fill-style fill-rect]] | |
| [jayq.core :only [show]]) | |
| (:require [cljs.core.async :refer [<! >! chan timeout]]) | |
| (:require-macros [cljs.core.async.macros :as m :refer [go]])) | |
| (def colors | |
| (rand-nth [ | |
| [ |
| (ns async-test.sinewave.core | |
| (:require [cljs.core.async :refer [<! >! chan timeout]]) | |
| (:require-macros | |
| [cljs.core.async.macros :as m :refer [go]])) | |
| (defn sin-vals [offset] | |
| (map #(Math/sin %) (iterate (partial + 0.1) offset))) | |
| (let [events (chan)] |
| (ns boids | |
| (:use [enchilada :only [canvas ctx value-of canvas-size]] | |
| [jayq.core :only [show]] | |
| [monet.core :only [animation-frame]] | |
| [monet.canvas :only [save restore | |
| begin-path move-to line-to close-path | |
| stroke stroke-style fill fill-rect fill-style | |
| rotate translate]] | |
| [boids.rules :only [step make-boid]]) | |
| (:require [boids.vector :refer [heading]])) |