The page you requested could not be found. Click here to return home.
diff --git a/Gemfile b/Gemfile
deleted file mode 100644
index 1df7a4b..0000000
--- a/Gemfile
+++ /dev/null
@@ -1,8 +0,0 @@
-source 'https://rubygems.org'
-
-gem 'jekyll', '=0.12.0'
-gem 'liquid', '=2.4.1'
-gem 'redcarpet', '=2.1.1'
-gem 'maruku', '=0.6.0'
-gem 'rdiscount', '=1.6.8'
-gem 'RedCloth', '=4.2.9'
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index d2766b7..0000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,38 +0,0 @@
-GEM
- remote: https://rubygems.org/
- specs:
- RedCloth (4.2.9)
- classifier (1.3.3)
- fast-stemmer (>= 1.0.0)
- directory_watcher (1.4.1)
- fast-stemmer (1.0.1)
- jekyll (0.12.0)
- classifier (~> 1.3)
- directory_watcher (~> 1.1)
- kramdown (~> 0.13.4)
- liquid (~> 2.3)
- maruku (~> 0.5)
- pygments.rb (~> 0.3.2)
- kramdown (0.13.8)
- liquid (2.4.1)
- maruku (0.6.0)
- syntax (>= 1.0.0)
- posix-spawn (0.3.6)
- pygments.rb (0.3.7)
- posix-spawn (~> 0.3.6)
- yajl-ruby (~> 1.1.0)
- rdiscount (1.6.8)
- redcarpet (2.1.1)
- syntax (1.0.0)
- yajl-ruby (1.1.0)
-
-PLATFORMS
- ruby
-
-DEPENDENCIES
- RedCloth (= 4.2.9)
- jekyll (= 0.12.0)
- liquid (= 2.4.1)
- maruku (= 0.6.0)
- rdiscount (= 1.6.8)
- redcarpet (= 2.1.1)
diff --git a/README.md b/README.md
index 9d4455c..96f5e07 100644
--- a/README.md
+++ b/README.md
@@ -1,140 +1,14 @@
-The Processing.js website
-=========================
+Processing.js
+=============
-This is our website, in all its glory.
+Processing.js was a port of the [Processing](https://processing.org) programming language for the web, and was maintained from November 2011 to December 2018, having been unofficially retired in March of 2017.
-Testing the website locally
----------------------------
+If you're looking for the last version of Processing.js before the project was officially discontinued, you're looking for [v1.6.6](https://github.com/processing-js/processing-js/tree/v1.6.6).
-Install [Jekyll](https://github.com/mojombo/jekyll/wiki/Install) on your computer,
-clone this repository, and run `jekyll` inside the root of the repository.
+That last version of the website itself can be found as an [archived tree](https://github.com/processing-js/processing-js.github.io/tree/archive) on github.
-To match Github Pages, you'll need to install Jekyll v0.11.0, uninstall Liquid v2.3.0
-(`gem uninstall liquid`), then install Liquid v2.2.2 (`gem install liquid -v 2.2.2`). For this
-combination to work, you'll need to be running ruby 1.8.7; ruby 1.9.x fails with an "invalid byte
-sequence in UTF-8" ArgumentError.
+If you want to use Processing on the web today, please have a look at the newer [P5.js](https://p5js.org) project, which was a reimagining of Processing "if it had been designed for use on the web from the get-go".
-Jekyll will compile (yes, seriously) the website into the _site directory, and start a
-localhost web server running on port 4000. Jekyll will automatically recompile the site
-if you make any changes.
+Thank you to everyone who used Processing.js in the past, and of course: everyone who worked on the project over the years.
-Updating the blog
------------------
-
-The blog index is `/blog/index.html`, and all of the individual blog posts are located in
-`/blog/_posts/`. I've created a template blog post in `/blog/_posts/template.html`, but for
-posterity, here it is:
-
- ---
- layout: post
- title: Template blog title
- ---
-
Write your blog post here
-
-Once you've changed the title to something appropriate and written something useful for the
-blog post, you need to save the blog post with a specific filename within the _posts
-directory to have Jekyll pick it up as a blog post. The format is `yyyy-mm-dd-title-with-dashes.ext`,
-where ext can be html, md, or textile.
-
-Updating the downloads
-----------------------
-
-The downloads index is `/downloads/index.html`, and all of the files for download are located
-at [https://github.com/processing-js/processing-js/downloads](https://github.com/processing-js/processing-js/downloads).
-Each release of Processing.js gets a post in the `/downloads/_posts/` directory which contains
-links for each download.
-Everyone with the right access (see below) should upload the files to the Github Downloads
-page, then update the Processing.js Downloads page to point to the new files.
-
-Updating the exhibitions
-------------------------
-
-The exhibitions index is `/exhibition/index.html`, and all of the individual exhibitions are
-located in `/exhibition/_posts/`. I've created a template exhibition in
-`/exhibition/_posts/template.html`, but it's here too:
-
-
-
-
-
- Demoname by
-
-
-
-You'll need a make a 180x75 screenshot of the exhibition in question, and put that in
-`/images/exhibition/`. Once you done that, fill out the rest of the information in the
-template. Like blog posts, you'll need to name the exhibition in a specific format so
-that it's picked up by Jekyll: `yyyy-mm-dd-title-with-dashes.ext`, where ext can be html,
-md, or textile. To preserve the order of exhibitions on the index page, I just incremented
-the date by one day for each exhibition.
-
-Updating the articles
----------------------
-
-The articles index is `/articles/index.html`, and all of the individual articles are located
-in `/articles/_posts/`. The template is at `/articles/_posts/template.html`, but let's look
-at it anyways:
-
- ---
- layout: default
- desc: Jon's Guide to ASDF
- title: ASDF Guide
- permalink: /articles/ASDFGuide.html
- ---
-
This is my lovely article about ASDF
-
-The desc is a short description of the article that's shown on the Articles index page. The
-title is the actual title of the article. The permalink is where the article should actually
-be placed when compiled; by default it gets a URL with the publish date, which is something
-we don't care about. Like blog posts and exhibitions, you'll need to name the exhibition in
-a specific format so that it's picked up by Jekyll: `yyyy-mm-dd-title-with-dashes.ext`, where
-ext can be html, md, or textile.
-
-If you want to update the list of articles that appears on the front page, you'll need to edit
-the default layout in `/_layouts/default.html`.
-
-Updating the front page
------------------------
-
-The front page index is `/index.html`. If you're editing the front page text or exhibitions,
-this is the place to do it.
-
-Updating anything else
-----------------------
-
-Everything else is static content. Go to the exact file you're looking for, and make whatever
-changes you need to make!
-
-Layouts
--------
-
-On almost every single page you see, there's a few lines of text that looks like this:
-
- ---
- layout: default
- ---
-
-This YAML front matter tells Jekyll to use the layout in `_layouts` named `default`. In this
-case, `_layouts/default.html`. There's another layout for blog posts called `post` which
-inherits from `default`. Be careful about making changes to these layouts, as it affects
-pretty much every other page. Everything that you link to from this page must be linked in
-an absolute fashion, with a `/` at the front.
-
-Access controls
----------------
-
-Who is allowed to update the git repository is controlled by the Processing.js
-[organization settings](https://github.com/organizations/processing-js/teams) on Github.
-
-Hosting considerations
-----------------------
-
-The Processing.js site will work on any hosting service that serves content with the
-correct MIME type. The only content on the website that is not stored within the
-repository is the various Processing.js releases on our Downloads page. Those are
-currently stored in the [Github Downloads page](https://github.com/processing-js/processing-js/downloads)
-for Processing.js. If we had to move from Github Pages hosting to somewhere else, we'd
-need to update the download links on our Downloads page. We'd also need to figure out
-access controls for new hosting; the access controls for Github are everyone added to
-the [Processing.js organization](https://github.com/processing-js).
+- The Processing.js Team
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index d5303c9..0000000
--- a/_config.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-# Github defaults
-safe: true
-lsi: false
-pygments: true
diff --git a/_layouts/default.html b/_layouts/default.html
deleted file mode 100644
index 38c85c6..0000000
--- a/_layouts/default.html
+++ /dev/null
@@ -1,101 +0,0 @@
-
-
-
-
- {% if page.title %}{{ page.title }} | {% endif %}Processing.js
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- a port of the Processing Visualization Language
-
-
This page tries to explain how to quickly and (as) correctly (as possible) use
- Processing sketches on webpages. The information is based on the work done by
- the processing.js group.
-
-
This information on this page reflects the best of my knowledge anno November
- 2010, and processing.js becomes more and more complete, so it is possible that the
- information on this page changes over time. Should you spot any incompletenesses
- or blatant mistakes, please contact me at
-
-
- pomax at
- nihongoresources.com,
-
- with the obvious substitutions in place to make it a legal email address.
-
-
What is Processing?
-
-
The "Processing" language (also referred to as "P5") is a programming language
- with a focus on data visualisation. Of course, "data" is a loose concept, and
- Processing can be used for anything from drawing a few lines and circles on a
- screen, to full blown interactive animations. In fact, a basic Processing program
- is two lines of code, and will already play an animation:
Of course this program doesn't show you anything, because all it does is set up
- the visual context to have a certain width and height (indicated in the setup
- method as the size(...,...) instruction) and then calls draw() every few milliseconds.
- Of course, draw() is empty, so it won't actually show you anything. A more useful
- minimal program would be a "hello world" program, but I hate those because they only
- show a programming language can write text, and that's pretty much the least interesting
- feature of any programming language. Instead let's look at a minimal program that makes
- sense for a data visualisation language:
-
- {% highlight java linenos %}
- float framerate = 24; // our "sketch" will have a framerate of 24 frames per second.
-
- int ball_x; // ball administration: x coordinate
- int ball_y; // ball administration: y coordinate
- int ball_radius = 20; // ball administration: ball radius
-
- void setup() {
- size(200,200); // set draw area size
- frameRate(framerate); // set animation framerate
- ball_x = width/2; // set the initial ball coordinates
- ball_y = ball_radius; // set the initial ball coordinates
- stroke(#003300); // set the default shape outline colour
- fill(#0000FF); // set the default shape fill colour
- }
-
- void draw() {
- // compute the ball height for this frame
- float bounce_height = height/2 * abs(sin(PI*frameCount/framerate));
- // because the top of the screen is 0, and the bottom is "height",
- float ball_height = height - (bounce_height+ball_radius);
- // clear the drawing area
- background(#FFFFEE);
- // set the new ball y position
- ball_y = (int) (ball_height);
- // draw the ball
- ellipse(ball_x,ball_y,ball_radius,ball_radius);
- }{% endhighlight %}
-
-
-
-
- play controls:
-
-
-
-
-
This looks a bit long for a minimal program, but then again, this actually does
- something: it shows us a ball that bounces up and down, taking one second for each
- bounce. It shows a few aspects of Processing too: every variable is strongly typed.
- So you have to indicate what you'll be using a variable for, and you can choose from:
-
-
-
boolean, a binary value that can be either true or false
-
byte, an 8-bit value
-
char, a byte representing an ascii character
-
color, a type specific to Processing, representing an on-screen color
-
int, a 32 bit signed integer number
-
long, a 64 bit signed integer number
-
float, a 32 bit signed decimal number
-
double, a 64 bit signed decimal number
-
-
-
And of course there are also the typical complex data types:
-
-
-
Object, a catch-all data type for things that are complex data types.
-
String, a text string (stored as UTF-16).
-
ArrayList, a list structure for arbitrary values with add/remove functionality.
-
HashMap, a structure that can store {, } pairs.
-
XMLElement, a convenient XML-mirroring object.
-
-
-
You'll see why this last one turns out to be really useful later on.
-
-
Coming back to the minimally functional example of a Processing program, or "sketch",
- there are also some examples of Processing' own API at work. The following methods are
- native Processing calls:
-
-
-
size(int, int), sets the drawing area dimensions, and the global "width" and "height" values.
-
frameRate(int), sets the refresh rate for the drawing area, and the frameRate value.
-
stroke(color), sets the shape outline color.
-
fill(color), sets the shape fill color.
-
abs(number), computes the absolute value of any number.
-
sin(number), computes the sinoid value based on any number (treated as radians).
-
background(color), sets every pixel of the drawing area to the specified color.
-
ellipse(int, int, int, int), draws an ellipse on the drawing area.
-
-
-
The Processing API is in fact quite expansive (See
- http://processing.org/reference for the full
- list), but it can't cover everything. Luckily it supports object oriented programming, so
- that our previous example can also be written as an object oriented sketch:
Instead of doing everything in the draw() function, the object oriented approach
- tucks all the code that relates to computing the ball's position in the definition
- for what we consider a "Ball". To be good object oriented programmers, we've also said
- that things that are a Ball are also a Bouncer, and this lets us extend our sketch very
- easily to instead of a bouncing ball, have a bouncing box by keeping almost everything
- the same, and adding a new class Box that's a Bouncer:
All of a sudden we have a bouncing box, that starts from a falling position instead
- of from the ground, and we didn't have to modify the master draw() function for it!
- In fact, let's just use a group of bouncing things:
-
- {% highlight java linenos %}
- Bouncer[] bouncer = new Bouncer[3];
-
- void setup() {
- ...
- bouncer[0] = new Ball(width/3-20,20,20);
- bouncer[1] = new Box(width/2-10,20,20,20);
- bouncer[2] = new Ball((2*width/3)+20,20,20);
- }
-
- void draw() {
- for(int b=0, end=bouncer.length; b
-
-
- play controls:
-
-
-
-
-
Fantastic, two bouncing balls and a bouncing box, bouncing counter-point to each
- other. But it's not very interactive yet. Let's change it so that we can "hang on"
- to bouncing things until we let go of them again. Processing allows interaction with
- the keyboard and mouse, using what are known as "event handlers", methods that Processing
- automatically calls for you when you use the keyboard or mouse. In this case we care
- about mouse interaction, so we'll look at mousePressed and mouseReleased events:
Because the Ball and Box classes will do the same thing on mouse interaction,
- the interface Bouncer has been changed to an actual class too, to take care of some of
- the shared functionality. Now if you click on anything that's a Bouncer it'll stop
- moving until you let it go. Let's go one step further an just allow us to move the
- bouncing things around, too.
And with that, on to the original topic of this article: using Processing on web pages
-
-
Putting a sketch on the page
-
-
The great thing about Processing is that it can be used on webpages. Traditionally,
- you would convert your sketch to a java applet, and embed that on a page, but the
- processing.js project has changed this: you can now use your sketches directly without
- turning it into an applet at all. In the same way that you include a javascript file,
- or a CSS stylesheet, you can simply link to your sketch and magic happens.
-
-
Let's say we save the previous sketch, with the bouncing and the mouse interaction,
- as "mysketch.pde", and we want to show this on a webpage. Using processing.js, this is
- a trivially simple trick:
And we're done. In fact, I went ahead and made sure this page already uses processing.js,
- and that there is a mysketch.pde to load. If you click on the play control for the sketch
- above, it will start running, and do exactly what you would expect it to do based on what
- it does when you run it from the Processing environment.
-
-
Putting a sketch inline on the page
-
-
While not recommended, you can also put your sketch directly on a page, much like how
- you can put javascript or CSS styles directly on a page. However, in order for processing.js
- to properly load your code, you'll need some extra help in the form of the "init.js" file
- that is included with the processing.js examples archive from the processing.js downloads page
There are several reasons for why this is not a very good practice, but the most important
- one is that this way you can't be sure whether or not you've written a bug-free sketch. By
- writing it directly on the page, you might in fact have written some buggy code, which you
- will then find is terribly hard to debug because the browser is not equiped with a debugger
- for Processing code. In fact, processing.js rewrites your sketch into pure javascript (using
- some terribly clever tricks that we won't go into), so even if when it tells you where the
- error is in a javascript debugger, it will tell you where it went wrong in the converted
- javascript object, not the actual place in your source code. So keep it as a separate file,
- and make sure to test your code in the Processing IDE!
-
-
Making your sketch and your page see each other
-
-
Just running a sketch on a page is fine, but the benefit of a webpage is that it offers
- the kind of user interaction that you can't get from within the sketch itself. Pretty buttons,
- text areas that fold away, pop up, etc. make it very attractive to have your sketch do all
- the animation graphicsy work, but have all the information about the sketch, as well as
- controls for it, on the webpage. This is entirely possible - in fact, the "stop" and "play"
- buttons for the sketch above are examples of javascript telling the sketch what to do. Because
- a webpage offers more than a plain sketch can, processing.js has a few special tricks up its
- sleeve, so that you can get the most out of your creative work. Arguably the most important of
- these is the "get the sketch" function:
This is the pivotal function on the javascript side of things. It gives you a direct reference
- to your sketch, and everything in it, so that you can call any function and examine and modify
- any variable that is in the sketch.
-
-
Making javascript see your sketch
-
-
Let's say we have the following sketch:
-
- {% highlight java linenos %}
- void setup() {
- size(200,200);
- noLoop(); // turn off animation, since we won't need it
- stroke(#FFEE88);
- fill(#FFEE88);
- background(#000033);
- text("",0,0); // force Processing to load a font
- textSize(24); // set the font size to something big
- }
-
- void draw() { }
-
- void drawText(String t)
- {
- background(#000033);
- // get the width for the text
- float twidth = textWidth(t);
- // place the text centered on the drawing area
- text(t, (width - twidth)/2, height/2);
- }{% endhighlight %}
-
-
We can make this sketch draw a different text based on some text we have on our webpage,
- using javascript. This is in fact really easy: first, let's save this processing code as
- mysketch2.pde, and load it onto a page in the same way as earlier in the article. Then, we
- use javascript to ask for our sketch instance, after which we call the "drawText" function
- with some text that we get from the web page that the sketch is running on:
This has the same effect as the sketch that's running below. Simply fill in a bit
- of text, and hit the ▶ button to see the sketch render it on the drawing area.
-
-
-
-
- set text:
-
-
-
-
-
So far so good, but what if we also want to make Processing code call javascript?
- In order for us to so, while making sure the sketch keeps running both on your page an
- in the Processing environment, we have to do a bit more work
-
-
Making your sketch "see" javascript
-
-
You can't just stick plain javascript in your sketch and hope everything goes well
- because it's "on a web page". A better approach is to neatly separate your sketch and
- your on-page javascript, and ensure that whatever you want to do on your page runs
- through a javascript function. How do we do that? Let's say we have the following page:
-
- {% highlight html linenos %}
-
-
-
-
- My Processing Page
-
-
-
-
-
- x/y: /
-
-
- {% endhighlight %}
-
-
And say we have the following sketch, which we'll save as mysketch3.pde:
As an exercise, let's try to get the mouse coordinates from that mouseMoved event
- onto the page. This means we'll need to define a javascript function that will do this for us:
What we've done is we've told Processing: "There are things that follow the
- JavaScript interface. This means that whatever else they can do, they'll have a
- function called "showXYCoordinates" and that function takes two arguments, both of type int."
- - of course, the sketch will not magically know our on-page javascript, so we also
- define a function that lets us tell the sketch what actually counts as javascript,
- which is what the bindJavascript(...) function is for.
-
-
This leaves us with needing to make sure that we really do tell the sketch what
- Javascript is, which we'll do as follows on the page:
This defines a function that checks whether processing.js has loaded our sketch yet.
- If not, it tries again 250ms later. If the sketch is loaded, the reference to the sketch
- is used to tell it what "javascript" should be. This is achieved by virtue of processing.js
- trusting that you wrote valid code. As such, as long as you're on the javascript side of
- things, you can pass the sketch whatever you like, and the sketch will trust that it conforms
- to what the method says the type should be. In this case we pass the javascript "this" value
- (which refers to the global javascript environment for the current window), and tell processing
- "this thing conforms to your JavaScript interface, so it has loads of things but the only
- thing you need to be concerned about is whether or not it has a showXYCoordinates(int, int)
- function, which it does."
-
-
So, our final sketch behaves like the sketch below, and our final page source looks like the following:
Passing complex objects from javascript to your sketch
-
-
This leaves us with one last topic that we need to cover, simply because it's so common:
- using an AJAX approach to get some data, and then passing that data, properly formatted, to your sketch.
-
-
Actually using Processing objects
-
-
One interesting thing that processing.js allows us to do is to create objects as we defined them in
- our sketch, in javascript, and then hand them over to the sketch to deal with. To give an example, let's
- use the following sketch, which lets you draw points by clicking with the mouse, and links up all the
- points with lines:
Because processing.js turns the sketch into actual javascript, every class we defined in it
- can be created using new pjs.ClassName(arguments,...).
-
-
JSON
-
-
Another way to get data from javascript into a sketch is by way of a JSON description. JSON
- is particulary interesting because javascript can read a JSON text string and immediately turn
- it into a full-fledged javascript object. Let's look at our point-drawing sketch again, this
- time with a dedicated "addPoint" method:
-
- {% highlight java linenos %}
- ArrayList points;
-
- void setup() {
- size(200,200);
- points = new ArrayList();
- }
-
- void draw() {
- background(200,200,255);
- for(int p=0, end=points.size(); pNow what if -- instead of using mouse clicks, or predetermined javascript -- we want to
- load points based on some data on a remote server? We change our web page so that it can deal
- with JSON data from a remote server, and then make our javascript tell the sketch what to do:
Another favourite is the XML document. This is where the Processing data type "XMLElement"
- comes into play. Rather than trying to use javascript to parse the XML, we pass the xml data
- straight on to our sketch, which will know exactly what to do with it:
-
-
-
-
load points:
-
- {% highlight javascript linenos %}
- function loadPoints(id, button) {
- button.disabled = "disabled";
- var pjs = Processing.getInstanceById(id);
- var xml = $.get("http://thatfunkysite.com/serving/getxml.php");
- pjs.buildFromXML(xml);
- }{% endhighlight %}
-
-
And the handling in our sketch will look like this:
-
- {% highlight java linenos %}
- void buildFromXML(String xml) {
- XMLElement data = new XMLElement(xml);
- XMLElement[] xmlpoints = data.getChildren();
- for(int p=0, end=xmlpoints.length; pIf the xml thus loaded looks like the following snippet, the sketch will behave in
- the way the sketch below does:
-
- {% highlight xml linenos %}
-
-
-
-
-
-
- {% endhighlight %}
-
-
SVG
-
-
A special kind of XML document is the SVG Scalable Vector Graphics document. What's
- special about it is that it already represents visual data, and Processing can load SVG
- XML natively.
-
-
-
-
drawing with SVG
-
- {% highlight java linenos %}
- XMLElement svgxml;
- PShape ps;
- int x=0;
- int y=0;
- int xoffset=0;
- int yoffset=0;
- int xmark=0;
- int ymark=0;
-
- void setup() {
- size(200,200);
- noLoop();
- }
-
- void draw() {
- background(255);
- stroke(0);
- for(int px=0; pxThis sketch will load the following SVG code, and allows you to click on the shape to
- change its color, or click-drag it to move it around:
-
- {% highlight xml linenos %}
- {% endhighlight %}
-
-
Javascript Objects
-
-
One last thing you may want to pass to a sketch is a real javascript object. Say we have
- a physics library that we want to take advantage of in our sketch, and for Processing it's a
- .jar file, but there's a javascript version too. This thing lets us create a javascript "Physics"
- object that we can call functions on for computing momentum and force transfer when we make
- two things hit each other. Since processing.js does not support .jar libraries (because it's
- precompiled binary java class code, and pjs cannot unpack a jar file, reverse engineer the
- .java source, transform it to Processing API calls, then confirm all calls are supported) we'll
- use this convenient javascript library. But how to do this cleanly?
-
-
We have to do three things:
-
-
-
Write an interface for the object we're using, so our sketch will know what it even is,
-
use a javascript binding so that we can ask javascript to make these objects for us, and
-
write a javascript function to make these objects for us.
-
-
-
So let's get cracking! First we determine which functions in the javascript Physics object
- we actually make use of. We could write an interface that has correct method signatures for
- every function in the library, but this would be overkill. After reviewing our code we see
- that we actually only make use of three of the objects functions: collide_objects(forcevector1,
- forcevector2, collisionangle), get_force_vector(startpoint, distancevector, accelleration) and
- get_trajectory(startpoint, objectmass, initialvector, gravityvector, gravitystrength).
- Let's build our interface:
-
- {% highlight java linenos %}
- interface Physics
- {
- // collision modifies the two force vectors in place. Nothing is returned.
- void collide_objects(float[] forcevector1, float[] forcevector2, float collisionangle);
-
- // get force vector returns a force vector
- float[] get_force_vector(float[] startpoint, float[] distancevector, float accelleration);
-
- // trajectory calculation returns a curve, represented as a lest of 2D coordinates
- float[][] get_trajectory(float[] startpoint, float objectmass, float[] initialvector, float[] gravityvector, float gravitystrength);
- }{% endhighlight %}
-
-
First job done. Now to bind javascript. We've already looked at how to do this, so just follow
- the standard procedure and job's a good'n. In addition to whatever javascript functions you want
- to expose, however, we must add one more:
Finally, we now make use of our purely javascript library in our js file(s):
-
- {% highlight java linenos %}
- function buildPhysicsObject(x, y, someothervar)
- {
- return new Physics(x,y,someothervar);
- }{% endhighlight %}
-
-
This last step seems silly, but we have to delegate the task of building a javascript object
- to javascript. If we tried to do this inside our sketch, processing.js will not complain, but
- Processing will. To make matters worse, it also obscures the point of failure: if something
- goes wrong in the sketch, did it go wrong because processing.js has a bug, or because you were
- sloppy with javascript inside a Processing sketch? Golden rule: keep the different languages
- separated as much as possible.
-
-
We're almost set to use our javascript library for Processing purposes now. The only thing
- left is to create these objects and then use them in our sketch:
-
- {% highlight java linenos %}
- class MassBody
- {
- // a class for bodies with mass that travel with some speed and are located at some x/y position
- float[] forceVector = new float[2]; // 2 dimensional vector;
- int XDIM = 0; // index constant
- int YDIM = 1; // index constant
- float x = 0; // position
- float y = 0; // position
- MassBody(float x, float y) { forceVector[XDIM] = 0; forceVector[YDIM] = 0; this.x=x; this.y=y; }
- void draw() { /* draws the body */ }
- float[] getForce() { return forceVector; }
- void impartForce(float[] stimulus) { forceVector[XDIM] += stimulus[XDIM]; forceVector[YDIM] += stimulus[YDIM]; }
- void updatePosition() { x+=...; y+=...; }
- }
-
- MassBody body1 = new MassBody(...);
- MassBody body2 = new MassBody(...);
-
- Phsyics physicsObject
-
- void bindJavascript(JavaScript js) {
- javascript = js;
- int x = 0;
- float y = 9;
- String[] somevalues = {"scalar", "vector", "tensor"};
- physicsObject = javascript.buildPhysicsObject(x,y,somevalues);
- }
-
- void setup()
- {
- ...
- }
-
- void draw()
- {
- // if the two bodies collide, compute the resultant forces
- if(body1.collides(body2))
- {
- // forces are recomputed in place
- float angle_12 = body1.getAngleTo(body2);
- physicsObject.collide_objects(body1.getForce(), body2.getForce(), angle_12);
- body1.updatePosition();
- body2.updatePosition();
- }
- body1.draw();
- body2.draw();
- }{% endhighlight %}
-
-
And we're done!
-
-
Processing.js as javascript graphics library
-
-
As last point of business, you can of course also use Processing.js as a pure graphics
- library, by invoking it for some canvas and then calling Processing API calls directly. Let's
- jump right in! The following code is what you would write on-page, although of course as ever
- it's far better practice to link to your source files, so you should really place what's in
- the script tags in a file myPjsSketch.js and link to it using src="..." instead.
-
-
The following code is split up into multiple (numbered) sections.
-
-
-
-
First, bind a new Processing instance to the indicated canvas.
So let's see that in action - the code that we just ran through is supposed to draw
- a sinewave, with an amplitude that depends on where the mouse is on the canvas. If all
- went well, it will look like this:
-
-
-
-
-
-
More information
-
-
This guide was brought to you by Mike "Pomax" Kamermans.
-
-
For more information, you can visit the following websites, or visit us in the
- #processing.js IRC channel on irc.mozilla.org.
diff --git a/articles/_posts/2011-12-02-RenderingModes.html b/articles/_posts/2011-12-02-RenderingModes.html
deleted file mode 100644
index 30fa0c9..0000000
--- a/articles/_posts/2011-12-02-RenderingModes.html
+++ /dev/null
@@ -1,278 +0,0 @@
----
-layout: default
-desc: The different rendering modes available in Processing.js
-title: Rendering Modes
-permalink: /articles/RenderingModes.html
----
-
- Understanding Rendering Modes in Processing.js
-
- Introduction
-
- The Processing language enables complex 2D and 3D graphics programming without having
- to understand the details of the underlying graphics system. It is designed to be
- easily learned, yet allows one's skills to grow and evolve without ever feeling
- limited.
-
- Processing can be used to work with both 2D and 3D graphics. It achieves this through
- a number of different rendering engines, which affect how it works. For example,
- one might choose to render a 2D sketch using the JAVA2D and P2D renderers or create
- 3D sketches with the P3D and OPENGL renderers. There are also renderers for creating
- PDFs. Processing allows developers to choose renderers based on tradeoffs of speed
- and quality.
-
- A renderer is chosen through the use of Processing's
- size() function. For example, to create a 2D sketch that is 200 by 200 pixels
- in size:
-{% highlight java linenos %}
-size(200, 200, P2D);
-{% endhighlight %}
-
-
- The 2D Rendering Context
-
- Processing.js uses the HTML canvas element to provide 2D and WebGL rendering contexts.
- The canvas 2D API is used to implement Processing's JAVA2D and P2D renderers (see
- the canvas API for
- details on canvas). You can create a 2D Processing.js sketch using any of the following:
-
- Processing.js 3D renderers (P3D and OPENGL) are implemented using WebGL. The Web-based
- Graphics Library (WebGL) is a canvas rendering context that provides a JavaScript
- based 3D drawing API for the web (see
- https://developer.mozilla.org/en/WebGL). WebGL is based on OpenGL ES 2.0,
- a subset of OpenGL designed to be used in embedded devices. Many modern browsers
- support WebGL, but not all. You can confirm that your browser and computer/operating
- system support WebGL here.
- You can download a WebGL enabled browser
- here.
-
- Just as Processing relies on OpenGL for its 3D graphics (OPENGL renderer), Processing.js
- uses OpenGL via WebGL, allowing Processing.js sketches to work just like their Processing
- equivalent.
-
- In order to create a 3D OpenGL sketch in Processing, two things are necessary. First,
- the OpenGL library must be imported. Second, the OpenGL rendered must be specified:
-
-{% highlight java linenos %}
-import processing.opengl.*
-...
-size(200, 200, OPENGL);
-{% endhighlight %}
-
-
-
- Since Processing.js is actually JavaScript, it does not support importing Java-based
- libraries. However, in order to enable sketches written in Processing to work in
- Processing.js, the import line can be safely included—Processing.js will simply
- ignore it. The following methods of creating a 3D Processing.js sketch are equivalent:
-
- Once you have a 3D enabled browser installed you can try out some example 2D and
- 3D sketches here.
-
-
- Processing.js as a Simplified Web Drawing API
-
- Once a 3D sketch has been created, all of the normal Processing drawing operations
- can be done. Most Processing functions have 2D and 3D versions (e.g., you provide
- different arguments for points in 2D or 3D space). By learning the Processing syntax,
- it's easy to create complex 2D and WebGL graphics without ever touching the underlying
- graphics APIs. This is true of Processing and Java, and also of Processing.js and
- canvas/WebGL. The Processing langauge provides a powerful and beginner friendly
- on-ramp to canvas 2D and WebGL. Consult the
- Processing.js Langauge Reference for specific details on how to use each
- function.
-
- Using the Processing.js API in JavaScript
-
- In addition to running standard Processing sketches, Processing.js can also be used
- in so-called API mode. This is the Processing language API which is accessbile to
- JavaScript without any Processing code. The Processing.js API is available if you
- download the complete Processing.js zip file instead of just the .js file from the
- Downloads page (for example: processing.js-version.zip vs processing.min.js) (http://processingjs.org/download).
- It is essentially the same as Processing.js, but without the code parser (i.e.,
- you can use the API either way, but the Processing.js API is a somewhat smaller
- file). See
- Writing JavaScript-only Processing.js Code for more details.
-
- Accessing the Raw Canvas Context - Advanced:
-
- It's also possible to work with the raw canvas context, both 2D and WebGL, from
- Processing.js, JavaScript, or both. This is not a recommended method, since it will
- make your Processing.js sketch harder to use in Processing; however, sometimes it's
- useful to know how to control the canvas context from outside the sketch in JavaScript,
- or to do something that Processing doesn't allow, which the canvas or WebGL APIs
- do.
-
- All Processing.js sketches have an externals property, accessible from within the
- Processing code as a global variable. This object is meant to allow for accessing
- and sharing external but related data between the sketch code and the web page.
- The externals object has a number of useful properties, including:
-
-
sketch: the current sketch object
-
canvas: the canvas element associated with a sketch
-
- context: the canvas rendering context being used by the sketch
-
-
-
- From JavaScript, these can be accessed via a Processing.js sketch's instance:
-
-{% highlight javascript linenos %}
-var p = Processing.instances[0];
-var context = p.externals.context;
-var p2 = Processing.getInstanceById('canvas-id');
-var p2Canvas = p2.externals.canvas;
-{% endhighlight %}
-
-
-
- The same thing can be done from within Processing code, where the externals object
- is available as a global variable:
-
-{% highlight javascript linenos %}
-// Processing.js allows you to mix JavaScript, so using var is fine here:
-var currentContext = externals.context;
-{% endhighlight %}
-
-
-Once you have a reference to the context, you can use any valid canvas API call,
-including raw WebGL functions if using a 3D sketch.
diff --git a/articles/_posts/2011-12-03-p5QuickStart.html b/articles/_posts/2011-12-03-p5QuickStart.html
deleted file mode 100644
index 3c4d30f..0000000
--- a/articles/_posts/2011-12-03-p5QuickStart.html
+++ /dev/null
@@ -1,459 +0,0 @@
----
-layout: default
-desc: A guide to Processing.js for Processing developers
-title: Processing Quick Start
-permalink: /articles/p5QuickStart.html
----
-
- This quick start guide is written from the standpoint of a Processing developer.
- No HTML or JavaScript knowledge is assumed, and only basic Processing knowledge
- is necessary.
If you're in a rush, here's what you need to know:
-
-
Processing.js is written in JavaScript, and uses HTML5's <canvas> element.
- It converts your Processing code to JavaScript and runs it.
-
To use it, download Processing.js here:
- downloads
-
Make your Processing *.pde files as you normally would, for example hello-web.pde
-
Create a web page that includes Processing.js as well as a <canvas> with info
- about where to get your sketch file (you can specify multiple *.pde files, separating
- them with spaces):
- Load your web page, and it will parse, translate, and run your sketch in the browser.
-
Why Processing.js?
-
The Web: from Java to JavaScript
-
- Processing is built using Java. It was created at much the same time that the web
- was starting. At this time the choice of the Java language, and Java Runtime, as
- implementation targets for Processing made a lot of sense. In the mid-1990s, Java
- was poised to become the language of the web, with Applets and other Java technologies
- being used broadly on the client-side. Even Netscape, who created the language which
- would eventually become the lingua franca of the web with JavaScript, named their
- language so as to align themselves with the growing hype around Java.
-
- In the end, Java became an important server side technology, receding from the client-side
- and browser. Today, most web browsers still support Java Applets, by means of a
- binary plugin. However, few web developers deploy Java-based web applications now,
- due to long load and startup times and difficulties relying on Java (or compatible
- Java versions) being installed. This trend is not isolated to Java, but is happening
- to all browser plugins (e.g., Flash), which are becoming less popular as issues
- of security, installation, deployment, etc. make them inconvenient or risky.
-
- Another reason that plugins like Java and Flash have fallen out of favour is that
- recent advances in standard web technologies, specifically HTML5 and JavaScript,
- have made it possible to do things that previously depended on native (i.e., faster,
- compiled) code. Companies like Google, with GMail and Google Docs, or Scribd (see
- Scribd-in-HTML5)
- have shown that HTML, CSS, and JavaScript alone are enough to build fast, full featured
- web applications.
-
Processing.js uses Modern Web Standards
-
- Processing.js is built using JavaScript and HTML5. Processing.js is really two things:
- a Processing-to-JavaScript translator; and an implementation of the Processing API
- (e.g., functions like line(), stroke(), etc.) written in JavaScript instead of Java.
- It might seem odd at first to imagine your Processing sketches running in a browser,
- usually without modification. But this is exactly what Processing.js enables.
-
- Processing.js automatically converts your Processing code to JavaScript. This means
- that you don't have to learn JavaScript in order to run your code in a browser.
- You can, quite literally, write your code using the Processing IDE like you always
- have, and follow the steps below to get it running on the web. There's nothing new
- to learn, beyond getting a simple web page created.
-
- Under the hood, Processing.js uses the new HTML5 canvas element to create your sketch's
- graphics. The canvas element is a new feature of the web, and is either implemented
- or will be implemented by all major web browsers. All Processing drawing features
- have been reimplemented in Processing.js to use canvas, so any browser that supports
- canvas will also support Processing.js.
-
- Here's a sample of a Processing.js sketch running in the browser. If you can see
- it working, your browser supports everything you need already, and you can move
- on to instructions below.
-
-
Writing a Processing.js Sketch
-
- There's nothing you should do differently to write sketches for Processing.js: you
- write your Processing.js code exactly like Processing. For most people, this will
- mean using the Processing IDE, which has the nice benefit of letting you write,
- run, and test your code all in once place. Remember, any valid Processing sketch
- should also be a valid Processing.js sketch.
-
- If you want to experiment with web-based Processing.js code editors, you can also
- try these:
- Let's make a simple sketch that is 200 by 200 in size, sets the background to gray,
- draws a small white circle, and prints a message to the debug console:
- I'll assume below that you saved this to a file called hello-web.pde
-
-
Obtaining Processing.js
-
- Processing.js is a JavaScript library that is meant to be included in a web page.
- You don't have to compile it, tell your web server about it, etc. It simply has
- to be included in a web page, and the browser will do the rest.
-
- You can download Processing.js at the download
- page. The library comes in a number of forms, for example:
-
-
processing-1.0.0.js (note that 1.0.0 is just the version, the number might be higher
- when you look at this)
-
processing-1.0.0.min.js
-
-
- The version numbers may be different as you read this, but note the file extensions.
- Both end in .js, but one also has .min. The .min version is Processing.js in a minified
- form, which means it will be smaller to download (minified JavaScript uses tricks
- like removing whitespace and renaming long variable names to single letters). File
- sizes, and download times, matter on the web in a way they don't with normal Processing
- sketches.
-
Creating a Processing.js Web Page
-
- It's easy to get overwhelmed with the amount there is to learn about modern web
- technologies. But there's a secret: you can ignore 95% of it as you start, and add
- more later as you have time and interest. Unlike compilers or programming languages,
- web browsers are designed to accept almost any input you throw at them, whether
- valid or not, whether complete or not. Here's your first Processing.js web page:
- That's it! No <html> or <body> tags, no title, no CSS, just the processing.js
- script, and a canvas. While there isn't much here, it's important to understand
- what is. First, the script tag has a src attribute, which is the file to
- load. This could be a full url or a relative path. In this case the browser is going
- to look for a file named processing-1.0.0.min.js in the same directory as
- your web page.
-
- The second thing in this web page is a <canvas> tag. Notice that it too has
- an attribute, data-processing-sources. This is a list of filenames (or just
- one filename if you only have 1 file) separated by spaces (filenames and URLs on
- the web can't include spaces, so space is a safe choice for separating lists). In
- this case, the browser is going to look for a file named hello-web.pde located
- in the same directory as your page page.
-
- How does the browser know how to load a Processing *.pde file? Processing.js takes
- care of this, and will download, parse (i.e., translate to JavaScript), then run
- it automatically when the page is loaded.
-
- And that's it! Save this file to the same directory as hello-web.pde and
- processing-1.0.0.min.js and call it hello-web.html.
-
- If you're the kind of person who doesn't like taking shortcuts, here's what a more
- complete web page might look like:
-
-{% highlight html linenos %}
-
-
-
- Hello Web - Processing.js Test
-
-
-
-
Processing.js Test
-
This is my first Processing.js web-based sketch:
-
-
-
-{% endhighlight %}
-
-
- Both ways work, and you shouldn't let yourself get burdened by HTML and other web
- syntax until you feel you want to do other things with your web pages.
-
Running your Processing.js Web Page
-
- In case it isn't obvious, you run your hello-web.pde sketch by loading your
- hello-web.html web page in a compatible browser. Web browsers will provide
- you a way to load a local file, usually using the File menu and then Open File....
- If you've saved the files above on a web server, you can use the remote URL instead.
-
Things to Know as a Processing Developer using Processing.js
-
- While Processing.js is compatible with Processing, Java is not JavaScript, and canvas
- has some differences from Java's graphics classes. Here are some tricks and tips
- as you start working on more complex sketches in Processing.js.
-
Processing.js has no data directory
-
- Processing uses the concept of a data directory, where images and other resources
- are located. Processing.js does not include this. As a result, you should always
- provide file pages (e.g., images) that are relative to your web page, which is the
- norm on the web.
-
Processing.js implements Processing, but not all of Java
-
- Processing.js is compatible with Processing, but is not, and will never be, fully
- compatible with Java. If your sketch uses functions or classes not defined as part
- of Processing, they are unlikely to work with Processing.js. Similarly, libraries
- that are written for Processing, which are written in Java instead of Processing,
- will most likely not work.
-
Processing.js only has two rendering modes
-
- Processing has many rendering modes to choose from, depending on the desired quality
- and speed for graphics (e.g., OPENGL, P3D, JAVA2D, etc.). Processing.js uses <canvas>
- which provides either a 2D drawing context or a 3D context based on WebGL (a version
- of OpenGL for the web). Therefore, whatever you choose, you will end-up with either
- the 2D or 3D context.
-
Division which is expected to produce an integer might need explicit casting
-
- There are a class of bugs that arise when converting Processing code to Processing.js
- that involve integer vs. floating point division. What was straight-up integer division
- in Processing code, when converted to Processing.js, can sometimes become problematic,
- as numbers become doubles, and introduce a fractional part. The fix is to explicitly
- cast any division to an integer that exhibits this behaviour:
-
-{% highlight java linenos %}
-// before
-int g = mouseX / i;
-
-// after
-int g = (int)(mouseX / i);
-{% endhighlight %}
-
-
Processing.js has to cheat to simulate Processing's synchronous I/O
-
- Processing uses a synchronous I/O model, which means that functions like loadImage()
- take time to execute, and while they are running, nothing else happens: the program
- waits until loadImage() is done before moving on to the next statement. This
- means that you can count on the value returned by a function like loadImage()
- being usable in the next line of code.
-
- Web browsers don't work like this. The web uses an asynchronous I/O model, which
- means that functions which load external resources can't make the program wait until
- they finish. In order to replicate Processing's load* functions, you have to use
- a special Processing.js Directive.
-
- The Processing.js Directives are hints to the browser that are written in comments
- rather than in the Processing code itself. Here's a typical Processing sketch that
- loads an image synchronously and then draws it:
- This code will not work in the browser with Processing.js, because the call to image()
- will happen before the file picture.jpg has been downloaded. The fix is to
- ask Processing.js to download the image before the sketch starts, and cache it--a
- technique known as preloading. Here is the modified code:
- Notice the extra comment line at the top of the code. The @pjs directive
- is for Processing.js, and not the developer. Think of it as an extra line of code
- that will be executed before the program begins.
-
- If you have multiple images to load, use a list like so:
Processing.js requires more care with variable naming than Processing
-
- One of the powerful features of JavaScript is its dynamic, typeless nature. Where
- typed languages like Java, and therefore Processing, can reuse names without fear
- of ambiguity (e.g., method overloading), Processing.js cannot. Without getting into
- the inner-workings of JavaScript, the best advice for Processing developers is to
- not use function/class/etc. names from Processing as variable names. For example,
- a variable named line might seem reasonable, but it will cause issues with
- the similarly named line() function built-into Processing and Processing.js.
- This is equally true for built-in functions and functions you create. A good rule-
- of-thumb is: avoid having a variable foo in the same sketch as a function
- foo();.
-
-
Processing.js needs your help when overriding overloaded superclass methods
-
- If your code uses subclasses that override one or more overloaded methods in the superclass, you
- will need "dummy" overrides for every method signature that you'd normally leave untouched:
-
-{% highlight java linenos %}
-class X
-{
- void doSomething()
- {
- ...
- }
-
- void doSomething(float x, float y)
- {
- ...
- }
-}
-
-class Y extends X
-{
- void doSomething()
- {
- // different code from compared to the super class
- }
-
- // even though we don't override this method,
- // its signature must be added to prevent Pjs
- // from getting the method chain wrong:
- void doSomething(float x, float y)
- {
- super.doSomething(x,y);
- }
-}
-{% endhighlight %}
-
-
- Even though in Processing you will not need to implement the fallthrough method for doSomethign with a
- (float,float) signature, doing so is almost always necessary to make sure Processing.js doesn't get
- confused about which class's method to call.
-
-
Calling color() with out-of-range values produces unpredictable colors
-
- Also in the class of integer vs. floating point issues, color(number) and color(number, number)
- may not behave quite as expected. In native Processing, color(int) and color(float) behave
- differently in that the first is used for full color integers. Calling color(#FF0000) and
- color(16711680) are the same call, so they produce a red color. However, when using float
- values the color()/1 function treats the input as gray values, between 0 and the max indicated
- value (255, by default). Any value lower than 0 or higher than max is simply capped. Because of
- the integer vs. floating point issues with JavaScript, Processing.js does not perform any capping,
- and so even though the following code will show a black and a white line in Processing, it will
- show a yellow line, and an "invisible" line in Processing.js instead.
We recommend you always sanitize your inputs for color if you need colors to be "in range", and only use hex colors, using color(#RRGGBB), or rgb/rgba colors, using color(r,g,b) and color(r,g,b,a)
-
It is possible to put Processing code directly in your web page
-
- Using the data-processing-sources attribute on the canvas, and having Processing.js
- load an external file is the preferred and recommended way to include scripts in
- a web page. However, it is also possible to write in-line Processing code.
-
- A few changes are necessary to make the example above work with inline Processing
- code:
- This code is more complex because it has to figure out which canvas goes with which
- script (i.e., you can have multiple Processing sketches living in the same page,
- and therefore, multiple canvases). Also note that the scripts include a type
- attribute, which distinguishes between JavaScript and Processing code (the browser
- will ignore Processing scripts). Finally, note the use of the id and target
- attributes to connect the Processing script with the associated canvas.
-
Whatever you can do with the web, you can do with Processing.js
-
- Now that your sketch is working, and you have a basic web page, you'll probably
- start getting ideas about how to make this look more beautiful, how to better integrate
- your sketch with the surrounding web page or site, and how to mix data from various
- web services and APIs. Is it possible to mix images on Flickr and a Processing.js
- sketch? Yes. Is it possible to link Twitter to Processing.js? Yes. Anything the
- web can do, your Processing.js sketch can do.
-
- This is an important idea, and is worth restating: Processing.js turned your once
- Java-based code into JavaScript, and your graphics into <canvas>. As a result,
- anything you read on the web about dynamic web programming, AJAX, other JavaScript
- libraries or APIs, all of it applies to your sketch now. You aren't running code
- in a box, cut-off from the rest of the web. Your code is a first-class member of
- the web, even though you didn't write it that way.
-
- If you're feeling adventurous and want to go learn more about how to do other thing
- with HTML, JavaScript, CSS, etc. remember that everything they say applies to you
- and your sketches.
-
diff --git a/articles/_posts/2011-12-04-jsQuickStart.html b/articles/_posts/2011-12-04-jsQuickStart.html
deleted file mode 100644
index b4dd3aa..0000000
--- a/articles/_posts/2011-12-04-jsQuickStart.html
+++ /dev/null
@@ -1,582 +0,0 @@
----
-layout: default
-desc: A guide to Processing.js for JavaScript developers
-title: JavaScript Quick Start
-permalink: /articles/jsQuickStart.html
----
-
- This quick start guide is written from the standpoint of a JavaScript developer.
- The document assumes you know JavaScript and web programming, but only very basic
- Processing knowledge is assumed.
- If you're in a rush, here's what you need to know:
-
-
Processing.js converts Processing code to JavaScript and runs it in the browser,
- using <canvas> for a drawing surface.
-
To use it, download Processing.js here:
- downloads
-
Make your Processing *.pde files as you normally would, for example hello-web.pde
-
Create a web page that includes Processing.js as well as a <canvas> with info
- about where to get your sketch file (you can specify multiple *.pde files, separating
- them with spaces):
- The Processing language was originally created at MIT as part of the Media lab and
- Aesthetics and Computation group. They needed a way to bridge the gap between software
- developers, artists, data visualizers, etc., and to do so in a way that allowed
- new programmers (or non-programmers) to do complex visual work easily. Processing
- was built using Java, and can be thought of as a simplified Java, with a simplified
- Java API for drawing and graphics.
- Processing has a large and vibrant community, who are good at creating 2D and 3D
- graphics, visualizing data sets, audio, video, etc. With HTML5 the web gained canvas,
- audio, and video--things which had previously only been available via plugins like
- Flash or Java. At the same time, advances in JavaScript engines have made it possible
- to do things in script that were previously too slow.
-
- By porting the Processing language to the web, both the Processing and web communities
- benefit. For Processing, this means that code which used to only work on the desktop
- now "just works" in the browser. For the web, this means that a new but mature and
- full-featured approach to graphics programming becomes available. The <canvas>
- element is too low-level for most developers to use directly--JavaScript libraries
- are necessary. Processing.js can be thought of as just such a library, simplifying
- the use of the 2D and 3D canvas operations.
- The Processing language was designed to be small but complete, and easy to learn.
- This document does not attempt to teach you Processing, and you are encouraged to
- seek out Processing specific tutorials, books, and examples. Any Processing code
- or concepts should map to Processing.js (the exceptions are listed below). You can
- also use pure JavaScript to work with the Processing drawing API, skipping the Java
- syntax of Processing in favour of JavaScript.
- Processing.js was originally created in order to allow existing Processing developers
- and existing Processing code (often referred to as sketches) to work unmodified
- on the web. As a result, the recommend way to use Processing.js is to write Processing
- code, and have Processing.js convert it to JavaScript before running it.
-
- Over time, many web developers have begun using Processing.js, and asked that we
- design a way for the API to be used separate from the Processing language itself.
- Therefore, we have provided a way for JavaScript developers to write pure JavaScript
- code and still use the Processing.js functions and objects. NOTE: Processing.js
- is first and foremost a port of Processing to the open web, with design decisions
- favouring compatibility with Processing. It was not designed as a general purpose
- HTML drawing library. Having said that, it can be used as a high-level drawing API
- for canvas.
-
- Below we discuss the various methods for using Processing.js in your web pages.
Create a separate Processing file or files, naming them whatever you want, as long as they have a
- *.pde extension.
-
Create a web page that includes Processing.js as well as a <canvas> with info
- about where to get your sketch file(s), and include Processing filenames as a space-separated
- list in a data-processing-sources attribute on the canvas:
-
-
-{% highlight html linenos %}
-
-
-
- Hello Web - Processing.js Test
-
-
-
-
Processing.js Test
-
This is my first Processing.js web-based sketch:
-
-
-
-{% endhighlight %}
-
-
- Processing.js will automatically scan the document on page load for <canvas>
- elements with data-processing-sources attributes, download the files using
- XMLHTTPRequest, and feed them to the Processing-to-JavaScript translator. The resulting
- JavaScript is run using eval.
- Processing.js automatically downloads and converts any Processing code to JavaScript.
- It does this using the Processing.compile() method, and those interested in building
- tools or utilities for Processing.js can do the same.
-
- In order to obtain "compiled" code (i.e., JavaScript suitable for use by the Processing.js
- runtime) from Processing code, do the following:
-
-{% highlight javascript linenos %}
-// hard-coded Processing code, text from an HTML widget, downloaded text, etc.
-var processingCode = "...";
-var jsCode = Processing.compile(processingCode).sourceCode;
-{% endhighlight %}
-
-
- For example, converting the following Processing code produces the "compiled" JavaScript
- underneath:
- The previous method produced JavaScript code from Processing, but you can also write
- JavaScript on its own. The Processing.js parser turns Processing code into a JavaScript
- function, then runs it. As a result, it's possible to skip the Processing code altogether,
- and simply write a JavaScript function, passing this to your Processing instance.
- Here's an example:
-
-{% highlight javascript linenos %}
-function sketchProc(processing) {
- // Override draw function, by default it will be called 60 times per second
- processing.draw = function() {
- // determine center and max clock arm length
- var centerX = processing.width / 2, centerY = processing.height / 2;
- var maxArmLength = Math.min(centerX, centerY);
-
- function drawArm(position, lengthScale, weight) {
- processing.strokeWeight(weight);
- processing.line(centerX, centerY,
- centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
- centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
- }
-
- // erase background
- processing.background(224);
-
- var now = new Date();
-
- // Moving hours arm by small increments
- var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
- drawArm(hoursPosition, 0.5, 5);
-
- // Moving minutes arm by small increments
- var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
- drawArm(minutesPosition, 0.80, 3);
-
- // Moving hour arm by second increments
- var secondsPosition = now.getSeconds() / 60;
- drawArm(secondsPosition, 0.90, 1);
- };
-}
-
-var canvas = document.getElementById("canvas1");
-// attaching the sketchProc function to the canvas
-var processingInstance = new Processing(canvas, sketchProc);
-{% endhighlight %}
-
-
- Here a sketch function is created, similar to what the parser would produce. This
- function should take 1 argument, a reference to a processing object (i.e., the Processing
- runtime), which will be created by the Processing constructor. Any Processing functions
- or objects are accessible as properties of this object.
-
- Once that function is complete, pass it, along with a reference to a canvas, to
- the Processing constructor (remember to use new).
- One of the first questions people ask with Processing.js is whether they can read
- values from the document in which the Processing sketch is running, or vice versa.
- The answer is yes.
-
- Processing.js converts Processing code into JavaScript contained in a function closure.
- The variables and functions you create are not attached to the global object (i.e.,
- window). However, you can still get access to them.
- Since Processing code gets converted to JavaScript and run like any other function,
- all Processing code has access to the global object. This means that if you create
- a variable or function in a global script block, they are automatically accessible
- to Processing. Consider this example:
- The previous example kept a clean separation between the JavaScript and Processing
- code, while loosening the boundary between the two. Because Processing.js converts
- Processing code to JavaScript, it's also possible to mix them directly. The Processing.js
- parser will leave JavaScript it finds within the Processing code unaltered, allowing
- developers to write a hybrid of Processing and JavaScript (NOTE: this is why we
- don't use a pure Processing parser approach in processing.js). Here is the previous
- example rewritten using this method:
- There is some JavaScript syntax that can't be easily mixed this way (e.g., regex
- literals). In those cases you can simply move your pure JavaScript to a <script>
- block and access it using the method described above.
- Reaching out from the Processing code to JavaScript is easier than going the other
- way, since the JavaScript created by the Processing.js parser is not exposed directly
- on the global object. Instead, you gain access using the Processing.instances property.
-
- The Processing constructor keeps track of instances it creates, and makes them available
- using the getInstanceById() method. By default, when a <canvas> has a data-processing-sources
- attribute, its id is used as a unique identifier for the Processing instance. If
- no id attribute is provided, you can use Processing.instances[0].
-
- After you have a reference to the appropriate Processing instance, you can call
- into it like so:
- Here two buttons in the DOM are used to allow the user to start or stop a running
- Processing sketch. They control the Processing instance (you might have several
- in a page, or hidden in divs) directly from JavaScript, calling Processing functions:
- loop() and noLoop(). The Processing functions are well documented elsewhere.
- While Processing.js tries to be fully compatible with Processing, there are some
- things which are different or require workarounds. We have also added some web-specific
- features to make Processing.js easier to use. Here are some tricks and tips as you
- start working on more complex sketches in Processing.js.
- Each Processing instance (i.e., Processing.instances) has an externals property,
- which is an object containing references to various non-Processing DOM/JavaScript
- objects that can be useful. For example:
- There are a class of bugs that arise when converting Processing code to Processing.js
- that involve integer vs. floating point division. What was straight-up integer division
- in Processing code, when converted to Processing.js, can sometimes become problematic,
- as numbers become doubles, and introduce a fractional part. The fix is to explicitly
- cast any division to an integer that exhibits this behaviour:
-
-{% highlight java linenos %}
-// before
-int g = mouseX / i;
-
-// after
-int g = (int)(mouseX / i);
-{% endhighlight %}
-
-
- Processing uses a synchronous I/O model, which means that functions like loadImage()
- take time to execute, and while they are running, nothing else happens: the program
- waits until loadImage() is done before moving on to the next statement. This
- means that you can count on the value returned by a function like loadImage()
- being usable in the next line of code.
-
- Web browsers don't work like this. The web uses an asynchronous I/O model, which
- means that functions which load external resources can't make the program wait until
- they finish. In order to replicate Processing's load* functions, you have to use
- a special Processing.js Directive.
-
- The Processing.js Directives are hints to the browser that are written in comments
- rather than in the Processing code itself. Here's a typical Processing sketch that
- loads an image synchronously and then draws it:
- This code will not work in the browser with Processing.js, because the call to image()
- will happen before the file picture.jpg has been downloaded. The fix is to
- ask Processing.js to download the image before the sketch starts, and cache it--a
- technique known as preloading. Here is the modified code:
- Notice the extra comment line at the top of the code. The @pjs directive
- is for Processing.js, and not the developer. Think of it as an extra line of code
- that will be executed before the program begins.
-
- If you have multiple images to load, use a list like so:
- One of the powerful features of JavaScript is its dynamic, typeless nature. Where
- typed languages like Java, and therefore Processing, can reuse names without fear
- of ambiguity (e.g., method overloading), Processing.js cannot. Without getting into
- the inner-workings of JavaScript, the best advice for Processing developers is to
- not use function/class/etc. names from Processing as variable names. For example,
- a variable named line might seem reasonable, but it will cause issues with
- the similarly named line() function built-into Processing and Processing.js.
- If your code uses subclasses that override one or more overloaded methods in the superclass, you
- will need "dummy" overrides for every method signature that you'd normally leave untouched:
-
-{% highlight java linenos %}
-class X
-{
- void doSomething()
- {
- ...
- }
-
- void doSomething(float x, float y)
- {
- ...
- }
-}
-
-class Y extends X
-{
- void doSomething()
- {
- // different code from compared to the super class
- }
-
- // even though we don't override this method,
- // its signature must be added to prevent Pjs
- // from getting the method chain wrong:
- void doSomething(float x, float y)
- {
- super.doSomething(x,y);
- }
-}
-{% endhighlight %}
-
-
- Even though in Processing you will not need to implement the fallthrough method for doSomethign with a
- (float,float) signature, doing so is almost always necessary to make sure Processing.js doesn't get
- confused about which class's method to call.
- Using the data-processing-sources attribute on the canvas, and having Processing.js
- load an external file is the preferred and recommended way to include scripts in
- a web page. However, it is also possible to write in-line Processing code.
-
- A few changes are necessary to make the example above work with inline Processing
- code:
- This code is more complex because it has to figure out which canvas goes with which
- script (i.e., you can have multiple Processing sketches living in the same page,
- and therefore, multiple canvases). Also note that the scripts include a type
- attribute, which distinguishes between JavaScript and Processing code (the browser
- will ignore Processing scripts). Finally, note the use of the id and target
- attributes to connect the Processing script with the associated canvas.
We are very pleased to announce the release of Processing.js 0.4!
-
-
The students at Seneca and the community at large, have been working hard to get some
-awesome code into the repository. Many smaller fixes and features have been added as well
-as larger functions like blend modes. Another landmark in 0.4, are the small fragments of
-OpenGL code that have begun to land. If you were not aware that Processing.js is getting
-3D hardware support in the browser, you are now!
-
-
The whole development process has taken a few releases to get right, but the community
-has gathered great momentum in the last few months and the "right people" have joined the
-group, helping Processing.js to run like the well oiled machine it should be. We are seeing
-some amazing innovation and creativity from community members, such the experimental
-HTML5 audio stream reading and writing in
-Firefox from David Humprey and co.
-
-
Development Process
-
-The GitHub flow has also shifted to a more organized state with Anna Sobiepanek heading up .NEXT branch control prior to super-review and release candidacy. This allows us to keep the repository clean, so the main branch jeresig/processing-js will only get updated when a new release ships. The code will bubble up through controlled channels that have had rigorous tests and checks applied by the community, keeping the library parallel with it's big sister Processing, while maintaining a degree of difference that makes Processing.js suitable for the web context in which it is deployed.
-
-
-
-
Linting
-
-
From 0.4 onwards, release code is being linted, beautified and packed before release
-using some excellent script-fu from David Humprey and tested by fellow release controller
-(and GitHub master) Corban Brook.
-This way we will be confident that new releases do not break old functionality, code will
-be lightweight, ready for deployment and be easier-on-the-eye for future developers.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js
We are very pleased to announce the release of Processing.js 0.5!
-
-
The students at Seneca and the community at large, have been working hard to get some
-awesome code into the repository. Many smaller fixes and features have been added. However,
-the most exiting addition is the implementation of camera functions and a more complete 3D
-foundation that is now able to render and rotate a box.
-
-
Linting
-
-
From 0.4 onwards, release code is being linted, beautified and packed before release
-using some excellent script-fu from David Humprey and tested by fellow release controller
-(and GitHub master) Corban Brook.
-This way we will be confident that new releases do not break old functionality, code will
-be lightweight, ready for deployment and be easier-on-the-eye for future developers.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js
We are very pleased to announce the release of Processing.js 0.6!
-
-
The students at Seneca and the community at large, have been working hard to get some
-awesome code into the repository. Many smaller fixes and features have been added. However,
-the most exiting addition is the implementation of 3D functions like sphere, line, fill and
-stroke. Also, we have set up OpenGrok to enable easy searching of the Java Processing.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js
-
-
Changelog
-
-
-
Added ellipseMode support ellipse
-
Added a way to specify tests that are known to fail
-
Added applyMatrix()
-
Added float() suppose to work on all primitive datatypes including arrays
-
Added char() suppose to work on all primitive datatypes including arrays
-
Added str() suppose to work on all primitive datatypes including arrays
-
Added normal()
-
Added modelZ()
-
Added modelX()
-
Added modelY()
-
Added sphere()
-
Added sphereDetail()
-
Added scale()
-
Added line() - 3D
-
Added fill() - 3D
-
Added noFill() - 3D
-
Added noStroke() - 3D
-
Added stroke() - 3D
-
Added PMatrix3D - remaining functions
-
Added P3D support
-
Added tinylog for println() println
-
Added automated tests: string parsing
-
Fixed loadImage()to work in Opera
-
Fixed fake-dom to work with println and tinylog
-
Fixed KNOWN-FAILURES for tinylog parsing
-
Fixed and updated the AUTHORS log
-
Fixed Parse Error: Does not like strings in the format "test test, test test, ..."
-
Fixed Rename zip file for make release
-
Fixed keyCodes for numbered keys return same values as some letter keys
-
Fixed Test harness _checkEqual does not compare "undefined"
-
Fixed automated tests: make check-one path not resolving
-
Fixed Example: examples/basic.displaying.html incorrect source code "loadimage example bug"
-
Setup an OpenGrok instance infrastructure
-
diff --git a/blog/_posts/2010-03-24-processingjs-v070-released.html b/blog/_posts/2010-03-24-processingjs-v070-released.html
deleted file mode 100644
index db979ef..0000000
--- a/blog/_posts/2010-03-24-processingjs-v070-released.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: post
-title: Processing.js v0.7.0 Released
----
-
We are very pleased to announce the release of Processing.js 0.7!
-
-
The students at Seneca and the community at large, have been working hard to get some
-awesome code into the repository. Many smaller fixes and features have been added. Some
-exiting addition to the implementation include PImage with asynchronous image loading,
-reference (ref) tests, and lighting.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js
-
-
Changelog
-
-
-
Added custom @pjs directive parser
-
Added endCamera()
-
Added beginCamera()
-
Added custom mouseScrolled event
-
Added requestImage()
-
Added byte()
-
Added split()
-
Added PImage
-
Added String.toCharArray()
-
Added long data type
-
Added ArrayList.contains()
-
Added curveVertex() 3D
-
Added dist() 3D
-
Added curve() 3D
-
Added ambientLight()
-
Added curveDetail()
-
Added createImage()
-
Added noLights()
-
Added loadImage() preloading
-
Added directionalLight
-
Added Hashmap
-
Added loadBytes()
-
Added pointLight()
-
Added text()
-
Fixed date()
-
Fixed month()
-
Fixed failing PMatrix3D tests
-
Fixed _checkEquals() to add epsilon value
-
Fixed String.prototype.equals
-
Fixed background() for PImage support
-
Fixed image() for PImage support
-
Fixed set() for PImage support
-
Fixed parser test runner bug
-
Fixed parsing of tab characters
-
Fixed parsing of array declarations with spaces
-
Fixed parsing of multiple catch blocks
-
Fixed get() for PImage support
-
Fixed Char to properly distinguish Char from numbers/strings
-
Fixed Rhino parsing of processing.js
-
Fixed parser/unit tests to work on Windows
-
Fixed arrayCopy()
-
Fixed box()
-
Fixed min(), max() error handling for invalid arguments
-
Fixed bug in seneca/hex example
-
Fixed background() 3D when called outside of draw()
-
Fixed link() to respect target
-
Removed invalid tests
-
Switched from Packer to YUI Compressor
-
Build system improvements for release, testing
-
Added Automated Ref Tests
-
diff --git a/blog/_posts/2010-03-26-processingjs-v071-released.html b/blog/_posts/2010-03-26-processingjs-v071-released.html
deleted file mode 100644
index 62c8cb1..0000000
--- a/blog/_posts/2010-03-26-processingjs-v071-released.html
+++ /dev/null
@@ -1,24 +0,0 @@
----
-layout: post
-title: Processing.js v0.7.1 Released
----
-
We are very pleased to announce the release of Processing.js 0.7.1!
-
-
The students at Seneca and the community at large, have been working hard to get some
-awesome code into the repository. After the release of 0.7 we realized that our implementation
-of mouse wheel support actually broke the whole script in Chrome/Safari. We ask that anyone
-that downloaded the 0.7 release upgrade to 0.7.1 as soon as possible.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js
-
-
Changelog
-
-
-
Fixed mouse scrolled event for Chrome/Safari
-
diff --git a/blog/_posts/2010-04-09-processingjs-v08-released.html b/blog/_posts/2010-04-09-processingjs-v08-released.html
deleted file mode 100644
index 8bff86f..0000000
--- a/blog/_posts/2010-04-09-processingjs-v08-released.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-layout: post
-title: Processing.js v0.8 Released
----
-
We are very pleased to announce the release of Processing.js 0.8!
-
-
The students at Seneca and the community at large, have been working hard to get some
-awesome code into the repository. We are proud to announce a full rewrite of p.color which
-greatly increases performance. Also included in this release are lightning functions like
-spotlight(), ambientLight(), and pointLight(), as well as material properties like
-shininess(), and emissive().
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js
-
-
Changelog
-
-
-
Added spotLight
-
Added createImage
-
Added PImage blend prototype
-
Added PImage resize prototype
-
Added PImage copy prototype
-
Added @pjs directive for moz-opaque
-
Added copy
-
Added noTint
-
Added shininess
-
Added blend
-
Added lightSpecular
-
Added specular
-
Added ambient
-
Added emissive
-
Added PMatrix2DStack, and associated methods
-
Added lights
-
Added lightFalloff
-
Added printMatrix
-
Fixed canvas size change issue
-
Fixed image clipping logic
-
Fixed cursor to use PImage
-
Fixed performance and accuracy of color
-
Fixed smooth and noSmooth
-
Fixed default framerate to match Processing (60fps)
-
Fixed Math functions for performance
-
Fixed tint
-
Fixed parser to better handle custom classes (still known issues)
-
Fixed array.remove
-
Fixed style, linting issues in processing.js source
-
Fixed OOM parser error in matchAll
-
Fixed release target to auto-write version numbers in release files
-
Fixed background to throw if image size is not same as canvas
-
Fixed Boolean array bug
-
Fixed pmouseX and pmouseY
-
Fixed mouse offset bug when canvas in relative html elements
-
Fixed p.color.toGLArray
-
Fixed typo in mouseScrolled
-
Fixed p.set to support PImage and new color code
-
Fixed year
-
Fixed parser bug with Windows newlines
-
Fixed stroke and fill for performance
-
Fixed drawing of transparent pixels to canvas
-
Converted visual tests to unit and/or ref tests
-
Updated _checkThrows for false case
-
Updated ref tests to use better initial values, added calibration tests
-
Removed dead code
-
Added manual test tracking system
-
diff --git a/blog/_posts/2010-05-11-processingjs-v09-released.html b/blog/_posts/2010-05-11-processingjs-v09-released.html
deleted file mode 100644
index aab01ae..0000000
--- a/blog/_posts/2010-05-11-processingjs-v09-released.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-layout: post
-title: Processing.js v0.9 Released
----
-
We are very pleased to announce the release of Processing.js 0.9!
-
-
The new 0.9 release is now available on the GitHub repository. We are proud to announce
-new 3D functionality such as quad, triangle, and vertex. Also included in this release is
-multiple file support and an optimized version on PImage.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js You
-can also get involved by helping with the testing or documentation phase.
-
-
Changelog
-
-
-
Added quad() 3D
-
Added triangle() 3D
-
Added endShape() 3D
-
Added beginShape() 3D
-
Added vertex() 3D
-
Added more 3D ref tests
-
Added imageMode()
-
Added PMatrix2D::mult()
-
Added PMatrix2D::scale()
-
Added PMatrix2D::preApply()
-
Added PMatrix2D::invert(
-
Added PMatrix2D::rotate() and PMatrix2D::rotateZ()
-
Added PMatrix2D::translate()
-
Added PMatrix2D::determinant()
-
Added PMatrix2D::multY()
-
Added PMatrix2D::multX()
-
Added PMatrix2D::transpose()
-
Added P2D constant
-
Added QUARTER_PI constant
-
Added interface keyword support
-
Added screenZ()
-
Added screenX()
-
Added screenY()
-
Added HSB colour in addition to RGB color color.tostring
-
Added randomSeed()
-
Added bezierVertex()
-
Added remaining missing constants from PConstants
-
Added PImage support for cursor()
-
Added pjs directive to include multiple processing files
-
Added hue()
-
Added brightness()
-
Added saturation()
-
Added PImage: prototype for set "pimage set"
-
Added sketch.processing.org code in our tree
-
Added color.toHSB( colorInt )
-
Added mousewheel support for Minefield
-
Added parser static keyword support
-
Added parser Support minified processing code
-
Added data-processing-sources support
-
Fixed parser to handle local parameter names same as public variable names
-
Fixed parsing of whitespace between constructor and ()
-
Fixed parsing of function parameter newlines
-
Fixed parser to handle functions and constructors with the same name
-
Fixed parser to allow Returning array of floats
-
Fixed parser to allow functions before constructors
-
Fixed Parser: Calculate upper values in for loops only once
-
Fixed parser to allow Static variables
-
Fixed parser to allow Inheritance
-
Fixed p.background() called with no arguments[0]
-
Fixed noStroke() for lines
-
Fixed make release on Windows
-
Fixed public ctors for parser
-
Fixed empty draw() call clears background
-
Fixed noise()
-
Fixed random()
-
Fixed "p is undefined" errors in bespin ide
-
Fixed ImageData objects can't be literals, must use createImageData "cross browser"
-
Fixed class functions being repeated in the parsed
-
Fixed code in pimage.toDataURL() to use bit shifting
-
Fixed p.ArrayList to work for more than 3 dimensions
-
Fixed Multi-line comments with size() call break library parser
-
Fix make check-lint env var
-
Fixed Commented size() call for 3D context breaks lib
-
Fixed Events continue to get processed after exit() is called
Fixed p.point to not use .slice.split with strokeStyle
-
Fixed Processing.js class functions not use with()
-
Fixed keyTyped()
-
Fixed lerpColor()
-
Ensured p.set(x,y,c) fully tested after color() changes
-
Final Linting for v0.9.0 Release
-
Remove jsbeautify from release target
-
Fixed PImage pixel array to use ImageData object
-
Transform pixel[n] to pixel(n)
-
Remove buildImageObject and getImage
-
Cleaned up curveVertex.htm example
-
Get rid of with(p) in p.init
-
Optimized p.redraw()
-
diff --git a/blog/_posts/2010-05-20-processingjs-v091-released.html b/blog/_posts/2010-05-20-processingjs-v091-released.html
deleted file mode 100644
index 5688ab3..0000000
--- a/blog/_posts/2010-05-20-processingjs-v091-released.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: post
-title: Processing.js v0.9.1 Released
----
-
-
We are very pleased to announce the release of Processing.js 0.9.1!
-
-
The new 0.9.1 release is now available for download
-on the GitHub repository. This release is an architectural refactoring of the library to remove a legacy
-performance issue. This rewrite will allow modern JavaScript engines to better optimize the libraries code
-at runtime. For example, taking advantage of tracing in Firefox's SpiderMonkey engine. Of course, this
-release would not be possible without
-Scott.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage questions about
-Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js You can also get
-involved by helping with the testing or documentation phase. We are desperately seeking help with
-documentation.
-
-
Changelog
-
-
-
Remove with( p ) for performance gain
-
diff --git a/blog/_posts/2010-06-16-processingjs-v094-released.html b/blog/_posts/2010-06-16-processingjs-v094-released.html
deleted file mode 100644
index 3a4b410..0000000
--- a/blog/_posts/2010-06-16-processingjs-v094-released.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-layout: post
-title: Processing.js v0.9.4 Released
----
-
We are very pleased to announce the release of Processing.js 0.9.4!
-
-
The new 0.9.4 release is now available for download
-on the GitHub repository. This release features a brand new lightweight parser that improves flexibility.
-But thats not all. We have added a lot of 3D features and are NOW supporting textures. Check out the newly
-added crisp @pjs directive for crisp lines and points. Of course performance is always on the top of our
-list, we are proud to say that processing.js is now faster than ever!
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage questions about
-Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js You can also get
-involved by helping with the testing or documentation phase.
-
-
We are desperately seeking help with documentation.
-
-
Changelog
-
-
-
Added ellipse() 3D
-
Added curvevertex() 3D
-
Added curve() 3D
-
Added rect() 3D
-
Added bezier() 3D
-
Added bezierVertex() 3D
-
Added text() 3D
-
Added curveDetail()
-
Added bezierDetail()
-
Added strokeWeight() and point()
-
Added filter()
-
Added PImage: filter prototype "pimage filter"
-
Added PImage: save prototype "pimage save"
-
Added PImage 0 argument constructor
-
Added filter MODEs for p.filter() and PImage.filter()
-
Added textureMode()
-
Added texture()
-
Added texture support
-
Added ArrayList.toArray
-
Added save()
-
Added XMLElement type
-
Added textWidth()
-
Added status()
-
Added a new lightweight parser
-
Added unit tests for new parser
-
Added a .version property
-
Added unit test for binary()
-
Added support for getting a reference to a Processing object "processing reference"
-
Added key/keyCode argument for keyReleased
-
Added call to draw() in setup if translate is called
-
Added file:/// uri support for running ref tests
-
Added crisp @pjs directive for crisp lines and points
-
Added a test coverage tool that provides simple way to check code coverage during unit/parser testing
-
Fixed pimage.get(x,y,w,h)
-
Fixed p.set() performance to increase speed
-
Fixed text() performance by removing unnecessary type conversions
-
Fixed p.text accepts null input, this causes an error
-
Fixed binary() to support all primitive datatypes including arrays
-
Fixed unbinary() to support all primitive datatypes including arrays
-
Fixed unhex() to support all primitive datatypes including arrays
-
Fixed shaders to take in color attribute for individual vertices
-
Fixed loadFont() to handle font with spaces in name
-
Fixed mouseX/mouseY are not computed with style.border taken into account
-
Fixed "p.mousePressed is not a function" error when clicking on a canvas that did not define it
-
Fixed mousePressed fails when mousePressed() is defined
-
Fixed keyCode is undefined in sketches
-
Fixed p.color - optimizations
-
Fixed parser to handle sketch code pixels = new color[]
-
Fixed parser so that vars which conflict with function names use constant naming convention
-
Fixed parser to allow "Code" in a single line comment
-
Fixed parser inheritance problems with variables
-
Fixed Processing.debug
-
Fixed PImage examples with Frame Rate
-
Fixed all functions that rely on p.vertex
-
Fixed Chrome error for Win that appeared when image() was used chrome
-
Fixed functions to allow Chromium to render 3D sketches
-
Fixed Reference test script
-
Fixed init.js fails to load sketch into targetted canvas
-
Removed dead code: Point
-
diff --git a/blog/_posts/2010-07-26-processingjs-v096-released.html b/blog/_posts/2010-07-26-processingjs-v096-released.html
deleted file mode 100644
index 825c547..0000000
--- a/blog/_posts/2010-07-26-processingjs-v096-released.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-layout: post
-title: Processing.js v0.9.6 Released
----
-
We are very pleased to announce the release of Processing.js 0.9.6!
-
-
The new 0.9.6 release is now available for
-download on the GitHub repository.
-This release encompasses an early implementation of loading and displaying SVG (Scalable
-Vector Graphics) shapes. It also includes additional 3D features such as hint() and
-background transparency. For the optimization enthusiasts, we optimized our code by
-removing recursion and removing temporary variables where possible.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js You
-can also get involved by helping with the testing or documentation phase. We are
-desperately seeking help with documentation.
-
-
Changelog
-
-
-
Added PConstants Object
-
Added PShape
-
Added hint() - 3D
-
Added ArrayList add(int index, Object value)
-
Added ArrayList set(index, value)
-
Added shape()
-
Added shapeMode()
-
Added loadShape()
-
Added createGraphics() 3D support
-
Added transparent backgrounds 3D support
-
Added transparency directive to fix Moving On Curves example
-
Added "IMAGE" to the global members array
-
Added createFont()
-
Added size() default width and height
-
Added textAlign()
-
Added pause-on-blur/focus for draw() and @pjs directive to reduce cpu usage
-
Added textWidth() 3D
-
Fixed tinylogLite so it doesn't slows down frame rate
-
Fixed ajax() to check whether the data request was successful
-
Fixed point does not render after text()
-
Fixed ref tests broken on file:/// uri
-
Fixed 2D ref tests
-
Fixed p.splice
-
Fixed exit() to remove the instance from the "Processing.instances"
-
Fixed loading remote images security errors
-
Fixed extra argument bug for a parseFloat line
-
Fixed use of .moz attributes
-
Fixed p.arrayCopy()
-
Fixed smooth and noSmooth
-
Fixed strokeWeight for 2d point
-
Fixed keyCode is not defined parser error
-
Fixed parser errors when semicolon is missed
-
Fixed parser bug on cast with space: (type) (something)
-
Remove all occurances of typeof obj === 'undefined'
-
Optimized performance by removing recursive calls when possible
-
Optimized p.expand()
-
Optimized p.parse(), introduce p.compile()
-
Updated ref test runner for 3D tests
-
Removed unnecessary whitespace from processing.js
-
diff --git a/blog/_posts/2010-08-16-processingjs-v097-released.html b/blog/_posts/2010-08-16-processingjs-v097-released.html
deleted file mode 100644
index 47d2bed..0000000
--- a/blog/_posts/2010-08-16-processingjs-v097-released.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-layout: post
-title: Processing.js v0.9.7 Released
----
-
We are very pleased to announce the release of Processing.js 0.9.7!
-
-
The new 0.9.7 release is now available for
-download on the GitHub repository.
-Release features include 3D implementation of PImage, updated SVG support, improved
-PGraphics, and added functionality such as textDescent. For IE9 users we are proud to
-finally offer you a processing-js version that will run in your browser (IE 9 preview 4).
-Also, for those of you that like native JavaScript we have added the ability to run
-processing-js sketches using straight JavaScript. Look at examples/js for a demonstration.
-
-
Get involved!
-
-
If you would like to get involved with Processing.js development, or have general usage
-questions about Processing.js, we would love meet you on IRC:
-irc://irc.mozilla.org/processing.js You
-can also get involved by helping with the testing or documentation phase. We are
-desperately seeking help with documentation.
-
-
Changelog
-
-
-
Added saveStrings()
-
Added textMode()
-
Added 3D implementation to image()
-
Added 3D implementation to PImage
-
Added loadStrings()
-
Added textAscent()
-
Added textDescent()
-
Added createFont / loadFont and PDE "development environment"
-
Added parser test coverage to 55%
-
Added PConstants parser optimization
-
Added PVector constructor optimization
-
Added PShapeSVG::parseMatrix
-
Added IE9 support
-
Fixed SVG single path cutout not rendering correctly
-
Fixed SVG color strings object
-
Fixed SVG parsePoly Chrome bug
-
Fixed SVG parsePath
-
Fixed PImage.mask doesnt work given an object generated by PGraphics.get
-
Fixed PImage functions to check this.isRemote
-
Fixed 3D Lights
-
Fixed make-check errors does not print array braces
-
Fixed Chrome 3D rect error
-
Fixed vertex 2D inline shape stroke and fill color
-
Fixed background in draw doesn't redraw 3d
-
Fixed Canvas not being painted when inside div
-
Fixed readPixels call for "ref test"
-
Fixed web color parsing behavior
-
Fixed XMLElement type doesn't support one parameter string ctor
-
Fixed tickle example is crashing using opera 10.53 on windows 7
-
Fixed shaders so they pass shader validation
-
Fixed frameRate() not changable outside of setup()
-
Fixed Paser fails silently when keywords aren't in global member array
-
Fixed Parser test speed on new parser's generated constructors
-
Fixed Parser bug: in-class default scope is not "this" but the DOM window
-
Change name of opaque pjs directive to "transparent" transparency "transparent background"
-
Removed newWebGLArray wrapper
-
Removed unsupported symbols
-
Created JS only example documentation example
-
diff --git a/blog/_posts/2010-11-18-processingjs-v10-released.html b/blog/_posts/2010-11-18-processingjs-v10-released.html
deleted file mode 100644
index 1cbdf16..0000000
--- a/blog/_posts/2010-11-18-processingjs-v10-released.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: post
-title: Processing.js v1.0 Released
----
-
This is the one you've been waiting for. The Processing.js team is pleased to announce
-the release of Processing.js
-version 1.0. Since its original release by John Resig in 2008, over 1,000 bug fixes,
-features, and under-the-hood improvements were made. The goal of Processing.js is parity
-with Processing, ease of use in the web environment, wide compatibility with modern web
-browsers, and great performance. Processing.js is now feature complete with Processing,
-with a very few exceptions (see the Reference
-page for details).
-
-
This release represents years of work by a very dedicated developer and user community.
-With Processing.js we hope to expand the reach of Processing on the web, and bring a new
-generation of developers to this wonderful language. The open web will be a much easier
-place to do graphical programming, starting today.
-
-We're proud of Processing.js and hope you'll enjoy using it as much as we do!
-
-
Download the code here
-and get started learning
-how to use Processing.js.
-
-
ChangeLog
-
-
-
Added source level documentation for functions
-
Added reference pages for missing language features
-
Added sketchpad.cc to list of dev tools
-
Added saveFrame()
-
Added remaining PImage features
-
Added compile-time optimizations for constants, functions, closures
-
Added PShapeSVG(new XMLElemnt(svg string))
-
Added check for missing use of 'new' to Processing() calls
-
Added test for casting and negative ints
-
Added cursor URL example to test suite
-
Added Makefile target for examples packaging
-
Created wiki for processingjs.org
-
Created quick start guides for Processing and JavaScript developers
-
Fixed keyReleased so it doesn't fire when key is held down
-
Fixed neighborhood.html
-
Fixed translate() call ordering with background()
-
Fixed issue with loadStrings() so it doesn't remove last character
-
Fixed matrix operations run in setup such that they are not reset in draw
-
Fixed remaining KNOWN-FAILURES that were fixable
-
Fixed performance issue with Image() function when mask and tint aren't specified
-
Fixed performance issue with text$line
-
Fixed SVG to work properly with negative widths
-
Fixed PShapeSVG/PShape to be public
-
Fixes to allow WebKit to load 3D sketches
-
Fixed PImage.mask to work with objects generated by PGraphics.get
-
Fixes to support IE9
-
Fixed parser to accept additional float literal formats
-
Fixed performance issue with ArrayList
-
Fixed issue with abstract methods
-
Fixed text 3D error
-
Fixed mouseX/mouseY values to take scrollbars into account
-
Fixed parser bug with discarded processing methods
-
Fixed performance issue with uniformMatrix and vertexAttributePointer
Our mission this release was to focus on tightening up on as many bugs as possible but
-also to add a large set of new features to the library. Some of the highlights of the new
-features for this release are:
-
-
-
Support for touch events on iOS devices
-
mouseOver and mouseOut events were added to allow events to take place when the user
- enters and leaves a canvas
-
A custom pjs packager has been created that can take a sketch and package it together
- with the library, strip out unneeded code, minify it, and create a final .js file that is
- much smaller in size and lightweight
-
An option was added to the makefile that allows you to create an API only version of
- processing.js
-
Numerous website updates were done to the reference pages and documentation
-
-
-
More than 60 other bugs were fixed this release including 3D fixes and a ton of fixes
-to our testing platforms making our bug detection process much more efficient.
-
-
Our exhibition page has also been updated with some of the newest Processing.js works
-on the web. If you have some work, and would like us to showcase it all you have to do is
-get in touch with us. You
-can do so via IRC, twitter (@annasob, or
-@dhhodgin), or the
-processingjs google group.
-We accept all exhibit requests as long as they are your own work.
Added make file option to create an API only version of processing.js
-
Added webkit touch events natively in pjs
-
Added custom pjs packager for pre-parsed code
-
Added Java for each loop is now supported
-
Fixed PJS defaults not matching P5 where reasonable
-
Fixed 3D demos broken on systems running OSX 10.6 using nVidia cards
-
Fixed key event filtering per sketch (multi-sketch page setup)
-
Fixed xmlElementRemoveAttribute test failing
-
Fixed XMLElement.parseChildrenRecursive
-
Fixed XMLElement constructor returning this
-
Fixed OO bug with classes
-
Fixed Processing instances not always being added to Processing.instances
-
Fixed P3D not respecting noFill()
-
Fixed ref test runner broken on IE9
-
Fixed ajax() should be asynchronous
-
Fixed XMLElement.getChildren(path) not returning all the children
-
Fixed inheriting from ArrayList failing
-
Fixed toImageData() scope issue
-
Fixed ArrayList contains() not checking equality (1.0)
-
Fixed shaders being broken with new restrictions on non-constant loops
-
Fixed Ref test creation problem with WebGL
-
Fixed parsing problem with the ternary operator and the pixel array
-
Fixed box vertices and comments not being congruent
-
Fixed loop() going relatively mad after a noLoop() and more than 0 second wait
-
Fixed Minefield from reporting syntax error on first line
-
Fixed text() function width and height restrictions being unreliable
-
Fixed unexpected result when converting char() to str()
-
Fixed jsshell tests to use snarf() instead of munging strings
-
Fixed pollution of object prototypes
-
Fixed static methods not working
-
Updated the way document focus is checked at the start of every frame redraw (1.0)
-
Updated fake-dom.js to support xhr.overrideMimeType
-
Updated PShape to use prototypes
-
Updated numerous website reference pages
-
Removed pimagefilter.pde, and filter.pde files from unit tests
-
diff --git a/blog/_posts/2011-05-31-processingjs-v12-released.html b/blog/_posts/2011-05-31-processingjs-v12-released.html
deleted file mode 100644
index b6e8c5f..0000000
--- a/blog/_posts/2011-05-31-processingjs-v12-released.html
+++ /dev/null
@@ -1,168 +0,0 @@
----
-layout: post
-title: Processing.js v1.2 Released
----
-
The Processing.js team is pleased to announce the
-release of Processing.js version 1.2. This
-is one of our largest releases to date, and focuses on performance, compatibility, 3D, and
-bug fixes. More people than ever are using Processing.js, from professional design houses
-to video game developers to fashion designers, and as the demand and uses continue to
-grow, we are excited to be able to bring you an even better Processing.js.
-
-
Since our last release, exciting things have been happening in browser development.
-WebGL, the 3D extension of the HTML5 canvas element, has now shipped in Firefox and Chrome,
-and is being tested in nightly builds of Safari and Opera. Processing.js has been fully
-WebGL compatible for more than a year, and version 1.2 includes some great 3D performance
-and bug fixes. We've also
-written a guide to
-help explain how Processing.js uses canvas and WebGL to support the various Processing
-render modes. Processing.js is a great way to get started with 2D and 3D graphics on the
-web, without having to understand all of the underlying technologies. With several guides for
-people new to Processing,
-JavaScript developers
-and Processing developers,
-there has never been a better time to jump in!
-
-
This release also includes some important changes to ensure better compatibility with
-Processing 1.5. First, we've altered our default frame rate to match Processing's (i.e.,
-60 fps). Developers who are upgrading from previous versions of Processing.js, and who
-don't explicitly set a frame rate, may notice that sketches seem to run more slowly. Don't
-worry, Processing.js is faster than ever! Your sketch is just drawing at 60fps. It's
-possible to make things as fast as the browsers will allow by setting a higher frame rate,
-but this will of course consume more CPU, and actually
-not
-provide any real gain other than bigger deltas between visible frames.
-
-
We had many requests from our users to follow Processing's lead and add support for Java
-Generics, and we're happy to report that as of Processing 1.2 this is fully supported!
-We've also improved our compatibility in key classes and functions like ArrayList and
-XMLElement, and arc() and beginShape(), etc. If you find that your Processing code isn't
-compatible with Processing.js, please make sure you tell us.
-
-
While we've been developing 1.2, we've seen some great examples of Processing.js in the
-wild. Here are some of our favorites:
One of the things we love most is seeing all the creative and unexpected ways that
-people use Processing.js. If you have a cool example, let us know about it, and we might
-showcase it on the site and in our blog posts.
-
-
Finally, we want to take this release as an opportunity to acknowledge one of our team
-members who will be leaving us. Anna Sobiepanek
-has been a full-time developer and researcher at
-Seneca's Centre for
-Development of Open Technology (CDOT) for more than a year. She's helped develop and
-lead the Processing.js project, and been our main git master
-(Anna's github graph is often
-used as an example of a complex git project). Anna's been a passionate contributor and
-great leader in the Processing.js project, and we'll miss her daily work with us. Lots of
-people bemoan the lack of women in open source, and we've been blessed to have such a great
-developer and amazing woman working on our team. We wish her well in her new job, and look
-forward to her continued contributions as a volunteer.
-
-
We hope you enjoy using Processing.js 1.2. We enjoyed making it for you, and are already
-working on 1.3!
Aligned default frameRate to match Processing (e.g., 60fps). NOTE: if your sketch seems slower than before, frameRate(1000) will yield the old behavior.
-
Added Performance Tests
-
Added lazy loading sketch extension
-
Added XMLElement toString() function
-
Added loadShape() testing
-
Added support for Java Generics
-
Added ArrayList addAll()
-
Fixed stroke being applied in endShape()
-
Fixed the key variable to hold the proper data type
-
Fixed string functions split(), contains()
-
Fixed background() when called with image different size from sketch
-
Fixed IE9 loading issues
-
Fixed mouseX/mouseY to be computed with canvas scaling taken into account
-
Fixed text string's height to not ignore textLeading()
-
Fixed copy() to handle transparency
-
Fixed ellipse 3D to take noStroke and noFill values into account
-
Fixed regression in specular() defaults to be same as 1.1.0
-
Fixed screenX()
-
Fixed arc() 3D fill
-
Fixed endShape(CLOSE) so the shape doesn't disappear
-
Fix for 3D PGraphics always drawing below 2D shapes
-
Fixed noStroke() on P3D endShape()
-
Fixed 3D ref tests
-
Fixed rect() for 3D when used with lights
-
Fixed param()
-
Fixed leak of global typed array variables
-
Fixed rendering of println() so it's more usable
-
Fixed Scaling/Light problem in 3D
-
Fixed reverseTransform()
-
Fixed line(x,y,x,y) so that it draws a point
-
Fixed Processing constructor to take a single argument
-
Fixed Iterator for Map's EntrySet to iterate through the entire set
-
Fixed dir vector transforms in directionalLight() and spotLight()
-
Fixed arrayList remove() to take an object argument
-
Fixed light/shadowing failures in ref tests for 3D
-
Fixed strokeWeight to not get reset in draw()
-
Fixed image cache to set loaded property for images inserted from js
-
Fixed parser bug with negative values
-
Fixed parser bug with static variables
-
Fixed textWidth to work with newlines
-
Fixed beginShape() and endShape() to work with bezierVertex()
-
Fixed arc() when covering 0 radians
-
Fixed unit tests that caused UTF-8 errors in newer JSSHELL
-
Fixed linting errors
-
Fixed arc() regressions
-
Fixed XML API to be Processing 1.5 compatible
-
Fixed subset(array, offset) bug
-
Converted all XMLElement tests to unit tests
-
Converted endShape() ref tests to be part of the regular 2D/3D ref tests
-
Documented rotate() to explain direction
-
Documentation fixes and corrections on website
-
Improved minification
-
Improved the performance of arc()
-
Improved the performance of blur()
-
Improve the performance of blend()'s ADD mode
-
Implemented ArrayList indexOf()
-
Improve the performance and output of ref tests
-
Improved compatibility of WebGL context creation
-
Moved colors object out of Processing instances to save memory
-
Reduced calls to uniformMatrix()
-
Removed test/unit/braces.js
-
Removed clear()
-
Removed transform matrix calculations if there are no lights
-
Removed dependency on init.js, and init.js from examples
-
Removed all uses of use3DContext from compiled sketches
-
Rewrote build system, switched to closure
-
Removed Bespin IDE
-
Removed unused tools and minifiers
-
Removed uses of constructor.name
-
Renamed internal uses of int(), boolean(), etc. to parseInt(), parseBoolean(), etc
-
Updated README, LICENSE, AUTHORS, CHANGELOG
-
Add known failures to ref tests
-
Convert test-suite tests to REF tests
-
Fixed inheritance for certain (js object) methods still broken (1.1)
-
Fixed more extra semi-colon breaking
-
Fixed createImage for RGB format produces image with transparent background
-
Removed String.prototype.match and .replace in IE9
-
Removed static beginCamera/endCamera examples from repo
-
Re-factor 3D and 2D drawing functions into separate objects
-
diff --git a/blog/_posts/2011-06-02-processingjs-v121-released.html b/blog/_posts/2011-06-02-processingjs-v121-released.html
deleted file mode 100644
index 6361761..0000000
--- a/blog/_posts/2011-06-02-processingjs-v121-released.html
+++ /dev/null
@@ -1,22 +0,0 @@
----
-layout: post
-title: Processing.js v1.2.1 Released
----
-
Hot on the heels of 1.2.0 we're releasing a maintenance
-release 1.2.1 to address a regression identified by Florian Jenett, relating to the
-use of background() with 3 arguments. An associated issue broke the @pjs "transparent"
-directive, and we fixed both issues in this maintenance release. We also took the
-opportunity to update the gzipped version of processing.js in the release archive, which
-was accidentally posted as a 0-byte file. This release is brought to you thanks to
-Florian's quick post on our bug tracker, so: if you find issues with Processing.js, don't
-hesitate to file a bug with us at
-https://processing-js.lighthouseapp.com
-- we hate them just as much as you do.
diff --git a/blog/_posts/2011-07-14-processing-js-v1-2-3-released.html b/blog/_posts/2011-07-14-processing-js-v1-2-3-released.html
deleted file mode 100644
index 79fbd62..0000000
--- a/blog/_posts/2011-07-14-processing-js-v1-2-3-released.html
+++ /dev/null
@@ -1,137 +0,0 @@
----
-layout: post
-title: Processing.js v1.2.3 released
----
-
The Processing.js team is pleased to announce the release of
-Processing.js 1.2.3. This is a maintenance release, which focused primarily on tests,
-non-core Processing code, and other things we never have time to do--spring cleaning, if you will.
-
-
While we mainly worked around the edges of the core Processing code, there are still
-some notable changes and updates for our users. Specifically:
-
-
-
We have removed init.js, and changed the way that inline Processing code gets loaded
-by Processing.js. In the past, inline sketches (e.g., those contained within <script
-type="text/processing">...</script>) were loaded by a helper script called
-"init.js". This was confusing for users. Starting with 1.2.3, inline Processing scripts
-need to specify the ID of the canvas in which they should be drawn, by specifying this ID
-as the value of an attribute called "data-processing-target". For example:
-
-While the preferred way to load sketches is using the "data-processing-sources" attribute
-on the canvas element instead of doing inline sketches, sometimes using inline code is
-desirable, and that's now easier to use. The "example.html" file further demonstrates
-several ways of getting your Processing sketches shown on a page.
-
We have removed the @pjs "transparent" directive. In the past we used this in order
-to give a hint to the canvas that transparency would be happening. Not all browsers
-implement this hint, and we decided (after doing performance tests) that the confusion it
-caused for users isn't worth keeping it.
-
-
-
Our next release will be focused on core Processing fixes again, as well as achieving
-parity with the upcoming
-Processing
-2.0 release of our sister project. If you are using Processing.js and notice
-compatibility, performance, or other issues, please let us know via
-IRC (irc.mozilla.org #processing.js) or
-by filing a bug on our
-bug
-tracker.
-
-
Members of the Processing.js development team will be presenting a talk at
-SIGGRAPH 2011. We will be talking about the
-development of Processing.js and showing off some really cool demos using Processing.js
-and other web features. If you are at SIGGRAPH, be sure to come check us out.
The Processing.js team is pleased to announce the release of Processing.js 1.3.0. This
-is our biggest release to date, and represents an enourmous amount of work from the team.
-This release focuses on a number of key issues: significant performance improvements,
-greatly improved text handling and font metrics, and general bug fixes and compatibility
-with Processing, including getting ready for Processing 2.0!
-
-
1.3.0 is fast. We've put a ton of effort into making Processing.js run your sketches
-faster. Our performance test suite shows some incredible speed-ups using 1.3.0 over
-previous releases. All browsers on all platforms run faster. How much faster? Our tests
-show a 6% - 60% gain across the board:
-
-
-
Firefox: 10% - 25% increase
-
Chrome: 35% increase
-
Safari: 30% - 60% increase
-
Opera: 30% - 50% increase
-
Internet Explorer: 41% increase
-
Safari Mobile on iOS: 6% - 8% increase
-
-
-
We're really proud of the gains we've made in this release, and we're not done yet.
-There are further performance gains to be had in 1.4 and beyond. Couple this with the
-tremendous improvements in JavaScript engines and browser graphics performance, and the
-future is looking better and better for doing Processing.js development. If you find
-something runs slowly in Processing.js, we want to know. Make sure you file a bug or talk
-to us on IRC. Chances are we can make it faster.
-
-
1.3.0 is amazing at working with text and fonts. The release includes a total rewrite
-of our font and text handling code. We know that typography is important to many Processing
-and Processing.js users—it is to us as well. In order to get the amazing cross-platform,
-cross-browser compatibility we did in this release, we had to go to
-some extreme lengths
-. It wasn't easy, but the results are beautiful, and should make working with text in
-processing.js an enjoyable and beautiful experience.
-
-
1.3.0 is more compatible with Processing than ever before. As Processing moves toward
-its 2.0 release, and with it new features and API changes, we're implementing the same
-things in Processing.js. The 1.3.0 release includes many compatibility fixes, which address
-differences between sketches written in Processing and Processing.js. "If it works in
-Processing, it should work in Processing.js." As Shaun McWhinnie (@himseelf)
-wrote on Twitter:
-
-
Sat down to *learn* processing.js last night, then found out it can parse my
-existing pde sketches #jobdone
-
-
Compatibility continues to be our goal, and with 1.3.0, it's more true than ever before.
-Have you found a Processing sketch that doesn't work in Processing.js? Let us know!
-
-
This release also introduces an important change for functions like line(), point(),
-rect(). In the past we used anit-alised points/lines, due to limitations in HTML5 canvas.
-In the past we told our users to add the crisp pjs directive to their sketches, as a hint
-to Processing.js that you wanted points/lines without anti-aliasing. This was confusing to
-most people, and cumbersome to use. Our team has figured out a way to overcome this
-limitation, and we are now able to draw crisp points/lines by default, which matches the
-expected behaviour of the same sketches run in Processing.
-
-
We hope you enjoy working with Processing.js 1.3.0, and let us know. Processing.js is
-a labour of love, and we appreciate your encouragement and hearing how you're using it in
-your data visualizations, art, teaching, game development, etc. The number of people using
-Processing.js around the world is humbling to us.
-
-
While you're downloading Processing.js 1.3.0, here are some uses of Processing.js we
-found while we were creating this release:
diff --git a/blog/_posts/2011-10-06-processing-js-v1-3-5-released.html b/blog/_posts/2011-10-06-processing-js-v1-3-5-released.html
deleted file mode 100644
index bcb3581..0000000
--- a/blog/_posts/2011-10-06-processing-js-v1-3-5-released.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-layout: post
-title: Processing.js v1.3.5 released
----
-
The Processing.js team is pleased to announce the release of Processing.js 1.3.5. This
-is a maintenance release, containing many compatibility fixes for the soon to be released
-Processing v 2.0, as well as fixes for issues reported by our users in 1.3.0. We've also
-included a number of updates for 3D, not the least of which is that 3D now renders crisp,
-and addressed several performance issues. As always, we encourage you to
-
-file bugs when you spot something we missed, and thank those of you who filed bugs that
-we fixed in this release. Our community continues to grow, and the feedback, demos, and test
-cases are always welcome.
-
-
You can download the full Processing.js 1.3.5 library
-(production (recommended),
-debug version), get the
-
-API-only version (no Processing parser, for JavaScript developers), or grab a
-zip file
-containing everything, including many working examples.
-
-
While you're downloading Processing.js 1.3.5, here are some demos we really liked:
diff --git a/blog/_posts/2011-10-13-processing-js-v1-3-6-released.html b/blog/_posts/2011-10-13-processing-js-v1-3-6-released.html
deleted file mode 100644
index 9158c2e..0000000
--- a/blog/_posts/2011-10-13-processing-js-v1-3-6-released.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-layout: post
-title: Processing.js v1.3.6 released
----
-
The Processing.js team is pleased to announce the release of Processing.js 1.3.6. This
-is a maintenance release for 1.3.5, which had a bug where any non-square 3D sketch would
-be stretched. We highly recommend that you upgrade to this version, especially if you're
-using 3D mode. A big thanks to Casey Reas on the Processing team for reporting this bug.
-And congratulations on the
-newest addition to the family!
-
-
If you run into any problems with Processing.js, please file a
-
-bug or talk to us on IRC
-(irc://irc.mozilla.org/processing.js).
-
-
Changelog
-
-
-
Fixed arc() not filling the last half degree [#1717]
-
Fixed camera() call order regression in 1.3.5 [#1714]
-
Fixed delay() to throw an unsupported function error [#1724]
It's conference season, and the Processing.js team has been invited to speak at various
-events around the world in the next month. If you're interested in learning Processing.js,
-or want to connect with others who use it, these events are great places to meet the
-Processing/Processing.js communities. Two of Processing.js' lead developers, David Humphrey
-and Jon Buckley, will be running these sessions and giving talks.
-
-
On Thursday October 27, 2011 from 9:00am
-- 12:00pm we'll be at the Free Software and
-Open Source Symposium (FSOSS) at Seneca College in Toronto (the home of Processing.js!).
-This workshop will give an introduction to Processing and Processing.js, and show how to
-integrate web technologies (e.g., JavaScript libraries) and data services (e.g., Twitter)
-with Processing.js sketches.
-
-
From November 4-6 we'll be in London, UK for the
-Mozilla Media Festival. We'll be giving a workshop
-on Processing.js, and showing how to use HTML5 media technologies, JavaScript libraries, and
-mobile device APIs. Workshop time TBD.
-
-
From November 11-13 we'll be in Chicago for the
-Mobile Processing conference. We'll
-be giving a
-workshop on using Processing.js with the web and mobile web, how to make Processing
-sketches work on Andorid, iOS, and other mobile platforms, and generally how to leverage
-web technologies and data sources in Processing.js. We will also give a
-
-talk on Processing.js generally, and how it can be used with the (mobile) web.
-
-
We also see that there is a series of
-Processing.js
-workshops going on at GAFFTA on Tuesdays & Thursdays, October 25th &
-27th, November 1st & 3rd. If you're in San Francisco, be sure to check these out.
-
-
Looking forward to meeting you at one of these events.
diff --git a/blog/_posts/2012-07-31-processing-js-v1-4-0-released.html b/blog/_posts/2012-07-31-processing-js-v1-4-0-released.html
deleted file mode 100755
index 18a063f..0000000
--- a/blog/_posts/2012-07-31-processing-js-v1-4-0-released.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-layout: post
-title: Processing.js v1.4.0 released
----
-
Processing.js 1.4.0! Yes, it's finally here, and it's a doozy. Many of the dev team have
-been working on other projects over the last year, with some people wondering whether Processing.js
-was a dead project, so just to reassure you: it is very much alive. However, we've had to make some
-changes to the way we do releases now that we no longer have any developers dedicating all their time
-to the project. So, let's start with the biggest change: a release! You can find the full list of
-things that were added or fixed in the changelog below, but to give you a taste of
-what's changed: SVG drawing to buffers now works, method overloading has been made far more robust,
-XML with CDATA no longer breaks and the Processing 2.0 XML API is supported, IE9 no longer crashes
-without the debug tools turned one, and we even managed to slip variable argument syntax (Type...
-varname) into the parser. There's even a new extension to play with.
-
-
The second change is also relatively big: we're changing from spaced out, big releases to
-relatively frequent, but small releases. This benefits everyone: you get more frequent updates
-to Processing.js, and issues that you report (or contribute code for!) make it into the public
-version much faster, and the people who work on Processing.js (a number of formerly full-time
-devs are still involved with the project on a part time basis) can simply focus on getting two
-or three important tickets out of the way each release, rather than spending time trying to work
-through twenty or thirty. This makes things much more managable.
-
-
The tl;dr version; Processing 1.4.0 is out! Go download
-it! And to keep you coming back for more, expect 1.4.1 at the end of August!
-
-
As always: if you run into any problems with Processing.js, please file a
-
-bug or talk to us on IRC
-(irc://irc.mozilla.org/processing.js).
Unmarked ref tests as known fails due to FF9 JIT bugs [#1700]
-
Updated the generics regexp for array notation [#1812]
-
diff --git a/blog/_posts/2012-08-08-processing-js-v1-4-1-hotfix.html b/blog/_posts/2012-08-08-processing-js-v1-4-1-hotfix.html
deleted file mode 100755
index f2684da..0000000
--- a/blog/_posts/2012-08-08-processing-js-v1-4-1-hotfix.html
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: post
-title: Processing.js v1.4.1 released
----
-
Hot on the heels of 1.4.0 comes 1.4.1, which is an emergency
-hotfix release to fix a regression issue introduced by the patch for
-ticket #1775,
-which aimed to solve the problem of getting an I-bar cursor when
-doing click-drags on a sketch. Long story short, the code intercepted
-click events but forgot to set focus on the sketch. Without focus,
-key events don't make it into the sketch so we had the unfortunate
-situation where your sketch wouldn't respond to the keyboard.
-
-
This was fixed as issue #1883
-and should no longer cause any problems. As a bonus, we also threw in
-#1886
-which adds String.matches, which has been missing all this time.
\ No newline at end of file
diff --git a/blog/_posts/template.html b/blog/_posts/template.html
deleted file mode 100644
index fc7a841..0000000
--- a/blog/_posts/template.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: post
-title: Template blog title
----
-
This is a blog template
-
-
Go nuts with whatever HTML you like, but try to stick to your basic p's, h3's, and ul's.
-
-
Be sure to name this new blog post properly, "yyyy-mm-dd-title-with-dashes.ext", where
-.ext can be html, md, or textile.
The Processing.js IRC channel has moved to irc.mozilla.org where the PJS
- developers are hanging out. Need information, have feature suggestions, bugs? Join
- irc://irc.mozilla.org/processing.js
- and we will help you get the most out of Processing.js.
The development team have chosen to go with LightHouse as the bug tracking system
- for Processing.js. If you think you may have stumbled accross a bug, or you are
- interested in joining in the development, visit
- Processing.js at Lighthouse.
The current fork of the Processing.js repo at GitHub. Developers wishing to contribute
- to Processing.js should sign-up at GitHub and pull the code to their local machines.
- Then any changes you make can be easily integrated into the master version.
A very helpful group of Processing.js enthusiasts who frequently share code,
- techniques and collaborate on new ideas. A great place for beginners to get started.
After its initial release in 2008 by John Resig, the
- Processing.js project was picked-up by students in the
- Centre for Development of
- Open Technology at Seneca College. The
- student team
- finished the port of Processing.js, fixing more than 900 bugs, shipping 12 releases,
- and creating a vibrant developer community around Processing.js in the process. This
- project was done through a partnership between the
- Mozilla Foundation and
- Seneca College, and was led by
- David Humphrey, Al
- MacDonald, and Corban Brook. The students
- continue to maintain the project today.
Download the latest Processing.js, including full and minified versions, examples,
-an API-only version without the Processing parser, or a complete zip file of everything.
-Released {{ current.date | date_to_long_string }}
Processing.js 1.4.0! And then Processing 1.4.1! Because there was a really silly but
-ruinous regression introduced by 1.4.0! All joking aside, 1.4.1 is a hotfix for 1.4.0,
-fixing a bug that prevents sketches from focussing on mouse clicks. That's pretty severe,
-because without the globalKeyEvents instruction, Processing.js sketches only receive key
-events when they have focus. No focus, no key events. No key events, very limited interaction.
-So if you grabbed v1.4.0, quickly grab yourself
-a new v1.4.1 and enjoy all the goodness that 1.4.0 introduced, without the lack of
-key events this time.
-
-
About Processing.js
-
-
Processing.js is the sister project of the popular Processing
-visual programming language, designed for the web. Processing.js makes your data visualizations,
-digital art, interactive animations, educational graphs, video games, etc. work using web standards
-and without any plug-ins. You write code using the Processing language, include it in your web
-page, and Processing.js does the rest. It's not magic, but almost.
-
-
Originally developed by Ben Fry and
-Casey Reas, Processing started as an open source programming language based on Java to help
-the electronic arts and visual design communities learn the basics of computer programming in a
-visual context. Processing.js takes this to the next level, allowing Processing code to be run
-by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and
-Internet Explorer. Processing.js brings the best of visual programming to the web, both for
-Processing and web developers.
-
-
Everything you need to work with Processing.js is here. You can download
-the most recent version of Processing.js, read Quick Start Guides for
-Processing Developers or
-JavaScript Developers,
-learn about the Processing language and Processing.js
-render modes, consult the
-Reference, and of course view many existing demos
-that use Processing.js. You can also get involved with the Processing
-and Processing.js communities, both of which are active and and looking for new users and developers.
-
-
Whether you're an advanced Processing developer or completely new, whether you're a pro with
-web technologies or just getting started, Processing.js bridges the
-gap between these two powerful technologies.
-
- 
- 
-
-
-
diff --git a/_layouts/post.html b/_layouts/post.html
deleted file mode 100644
index 71278da..0000000
--- a/_layouts/post.html
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: default
----
-
-
-
-
-
-
-
-
-
- IRC Channel
- 
-
- Bug Tracking with LightHouse
- 
-
- GitHub Repository
- 
-
- Google Group
- 
-
- Open Source @ Seneca
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
-