Code Monkey home page Code Monkey logo

ringo-processing's Introduction

ringo-processing

ringo-processing is a RingoJS package that allows you to write Processing sketches in (modern) JavaScript.

Warning

This is alpha code and mostly untested on anything other than OS X.

If you have questions (or answers!) please get in touch (on e.g. the RingoJS mailing list or the #ringojs IRC channel on Freenode).

Installation

Once you have a working RingoJS installation:

ringo-admin install chl/ringo-processing

Alternatively, simply check out this repository inside the RingoJS packages directory.

Samples

Samples live in a separate ringo-processing-samples project.

API

With minor divergences (see below), the Processing API as you know and (hopefully) love it is available as you'd expect.

ringo-processing currently supports two styles of writing sketches.

Simple Style

A sketch object (accessible as sketch) and the Processing API1 are injected into a given scope:

require("ringo-processing").wire(this);

function setup() {
    size(400, 400);
    background(0);
    colorMode(RGB, 1);
    strokeWeight(5);
    stroke(0.75, 0, 0);
}

function draw() {
    line(0, 0, width, height);
    line(0, height, width, 0);
}

run();

Prototype Style

This second style is particularly useful if you want to package sketches as re-usable RingoJS modules:

var {Sketch, RGB} = require("ringo-processing");

export("X");

function X() {};

X.prototype = new Sketch();

X.prototype.setup = function() {
    this.size(400, 400);
    this.colorMode(RGB, 1);
    this.background(0);
    this.strokeWeight(5);
    this.stroke(0.75, 0, 0);
};

X.prototype.draw = function() {
    this.line(0, 0, this.width, this.height);
    this.line(0, this.height, this.width, 0);
};

if (require.main == module.id)
    new X().run();

Divergences

  • frameRate: Implemented as read/write property instead of field/method pair.
  • mousePressed/isMousePressed: mousePressed corresponds to the event handler, isMousePressed to the field.
  • keyPressed/isKeyPressed: See above.
  • mousePressed vs. mousePressedEvent &c.: *Event versions of event handlers get an event argument.
  • Additional events: sketchResized, sketchResizing

Live-Coding

Of course! Just start ringo, wire up ringo-processing and let it roll.

A typical (if not particularly exciting) REPL session might look like this:

require("ringo-processing").wire(this)
run({exit: false}) // do not exit when frame is closed
r = random, bg = background, f = fill // let's define some abbreviations
t = 10 // parametric design is about to begin!
draw = function() {f(100 + r(50), 0, 0); rect(r(width), r(height), t, t)}
noStroke() // those strokes definitely need to go
bg(0) // let's start over
size(600, 200)
t = 25
...

In order to run and modify an existing sketch interactively, explore the ringo -i option:

ringo -i ringo-processing-samples/learning-processing/example-9-8.js

Web Applications

Spectacular documentation is being prepared. Slowly.

Processing Libraries

Work in progress. Only OpenGL tested so far. Use use:

function setup() {
    use("opengl");
    size(800, 600, OPENGL);
    ...
}

Caveats

  • Performance: If you want speed, you'll probably need to use Java (or Scala, or Clojure ...).
  • Initialization: While wire sets up all functions, properties &c., actually using the Processing API will only work after calling run (which initializes the Processing applet). Apart from variable declarations, most initialization code should go into setup.
  • Threading: Be advised that at least two threads are involved - the Swing event dispatching thread and the Processing animation thread. To ensure that code executes on the correct thread, call Processing API functions only from the Processing event handlers (setup, draw &c.); in case you need to interact with Swing, look up invokeLater/invokeAndWait in SwingUtilities.
  • OpenGL sketches & REPL API interaction leads to segfaults (maybe due to threading issues?).

Related Projects

Plans/Todo

  • A runner (to do away with boilerplate code in simple mode)
  • A "control panel" similar to what ruby-processing offers
  • Higher-order library (grid, eachPoint &c.)?
  • NodeBox-like color utilities
  • Probably not: Applet (web) export

Done

  • Web application PGraphics sugar: imageResponse &c.

License

ringo-processing is available under the same license as RingoJS.

Processing, core components of which are bundled with ringo-processing, is distributed under the terms of the GNU Lesser General Public License.

Footnotes

1 More precisely: Appropriately-bound proxy functions/properties and constants representing the Processing API.

ringo-processing's People

Contributors

chl avatar robi42 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

robi42

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.