Processing.js Blog

Blog Posts

Processing.js v0.6.0 Released

February 26th, 2010

Download Processing.js 0.6

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

Processing.js v0.5.0 Released

February 17th, 2010

Download Processing.js 0.5

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

ChangeLog:

  • Added acos()
  • Added asin()
  • Added atan()
  • Added automated tests for parser
  • Added bezierTangent()
  • Added binary()
  • Added box()
  • Added camera()
  • Added constants MAX_FLOAT, MIN_FLOAT, MAX_INT, MIN_INT
  • Added curve()
  • Added exp()
  • Added frustum()
  • Added hex()
  • Added join()
  • Added log()
  • Added ortho()
  • Added perspective()
  • Added PMatrix3D()
  • Added printProjection()
  • Added project packaging automation infrastructure
  • Added nf()
  • Added rotateX()
  • Added rotateY()
  • Added rotateZ()
  • Added sort()
  • Added support for Processing based unit tests
  • Added tan()
  • Added trim()
  • Added uniformf()
  • Added uniformi()
  • Added uniformMatrix()
  • Added vertexAttribPointer()
  • Added 3D Matrix Stack Object
  • Added “str1″.equals(”str2″) function
  • Fixed array handling of int()
  • Fixed automated tests to work for large numbers of files
  • Fixed buildImageObject()
  • Fixed char c = ‘#;’
  • Fixed context menu blocking to be explicitly requested
  • Fixed curveVertex()
  • Fixed data-src
  • Fixed duplicate function errors and reserved keywords
  • Fixed import()
  • Fixed inconsistent mouse event semantics
  • Fixed keyCode RIGHT
  • Fixed last p.keyCode not to fire for every keyPress
  • Fixed min() and max() functions to take more than two arguments
  • Fixed noLoop() & loop()
  • Fixed parser whitespace bug in variable names
  • Fixed parsing of Java import statement
  • Fixed parsing of String content
  • Fixed rotate()
  • Fixed size() for 3D
  • Fixed Test harness _checkEqual to compare arrays
  • Fixed Test harness _checkEqual to compare NaN
  • Fixed test reporting for summary case
  • Fixed text(); added cross browser support, added primitive datatypes support
  • Tested parser for processing larger code samples

Processing.js v0.4.0 Released

February 3rd, 2010

Download Processing.js 0.4

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.

github-04

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

Download Processing.js 0.4

ChangeLog:

  • added map()
  • added fill()
  • added reverse()
  • added matchAll()
  • added blendColor()
  • added split()
  • added subset()
  • added splice()
  • added concat()
  • added unbinary()
  • added online()
  • added mag()
  • added hue()
  • added saturation()
  • added brightness()
  • added splitTokens()
  • added append()
  • added match()
  • added unhex()
  • added PVector()
  • added nfs
  • added shorten()
  • added nfp()
  • added focused
  • added strokeCap()
  • added nfc()
  • added cursor ( mode ) definitions
  • added strokeJoin()
  • added bezierPoint()
  • added popStyle()
  • added boolean()
  • added screen()
  • added noCursor()
  • added curveTangent()
  • added pushStyle()
  • added curvePoint()
  • added frameRate()
  • added size() for 3D
  • added background() for 3D
  • added release automation
  • added automated parser and unit tests
  • fixed JSLint validation
  • fixed Pvector
  • fixed parser bugs
  • fixed nf() (Infinite loop)
  • fixed functions that return arrays

Download Processing.js 0.4

Adding new Code to your GitHub Repository

December 3rd, 2009

Previously, I posted a tutorial on setting up GitHub and Git Bash. Now I would like to show you how to get new code into ur repository.

Steps:

  1. Create a local Branch
  2. Create a remote Branch
  3. Add files to your local Branch
  4. Commit changes to your local Branch
  5. Push the new branch to GitHub

Those are the steps, now before we get started bookmark this Git cheat sheet its a good reference.

Note: all commands are entered in Git Bash command prompt. How do u open it? On Vista, Start -> Search for Quick->Right click ‘Quick Launch’ result->Select ‘Git Bash Here’

Create a Local Branch

A local branch is a version of your code package saved on your home machine. I believe you can have as many branches as you want.

  1. git branch<branch name>

Create a Remote Branch

A remote branch is one that sits on the GitHub social coding site, users can select this branch and download code that belongs to this branch alone.

  1. git push origin origin:refs/heads/<branch name>

The command window will give you a confirmation:

Total 0 (delta 0), reused 0 (delta 0)
To git@github.com:annasob/processing-js.git
* [new branch] origin/HEAD -> withCursor2-

——————————————————————

Total 0 (delta 0), reused 0 (delta 0)

To git@github.com:annasob/processing-js.git

* [new branch] origin/HEAD -> withCursor2

——————————————————————

If you get an error saying repository not found make sure your config file is correct. Here is a snippet:

——————————————————————-

[remote "origin"]

fetch = +refs/heads/*:refs/remotes/origin/*

url = git@github.com:annasob/processing-js.git

[branch "master"]

remote = origin

merge = refs/heads/master
——————————————————————

Just in case you created a branch and want to delete it use this:

  1. git push git@github.com:annasob/processing-js.git : origin/<branch name>

The command window will give you a confirmation:

Total 0 (delta 0), reused 0 (delta 0)
To git@github.com:annasob/processing-js.git
* [new branch] origin/HEAD -> withCursor2-

——————————————————————————-

Total 0 (delta 0), reused 0 (delta 0)

To git@github.com:annasob/processing-js.git

* [new branch] origin/withCursor2 -> origin/withCursor2

———————————————————————————

Add files to your local branch
I am not sure if this makes a difference, but i just opened the processing-js directory I was working in and dragged any new files/folders I needed to have. Alternatively, you can use these commands, well first you have to tell Git which branch you are going to be working with:

  1. git checkout <local branch name>
  2. git add <filename or directory>

Commit changes to your local Branch

Before you can submit the changes to GitHub, you have to commit them on your local machine.

  1. git commit -a

This command will commit all of your changes and allow you to write a message in vim. Vim guide.

The message should be significant, as everyone will read it to see whats new from the previous versions.

Push the new branch to GitHub

Now you are ready to update the remote branch.

  1. git push git@github.com:annasob/processing-js.git <remote branch name>

Note: you will need to put your own repository path in. Here is the message you will see:

——————————————————————–

Counting objects: 7, done.

Delta compression using up to 2 threads.

Compressing objects: 100% (3/3), done.

Writing objects: 100% (5/5), 617 bytes, done.

Total 5 (delta 1), reused 0 (delta 0)

To git@github.com:annasob/processing-js.git

8e069aa..dd33dfd withCursor -> withCursor

———————————————————————-

After you do all of this, log in to ur GitHub account and go to your repository. If you roll over ‘all branches’ you will see your new branch. Select it and try downloading the contents to ensure that nothing is missing.

Note, I have reported a bug, somehow the download functionality in GitHub doesn’t always work.

Hope this tutorial helps :) Feel free to post comments.

View all of my blogs

Setting up Git/GitHub on Windows

December 3rd, 2009

I have a Vista machine and i needed to set up Git and GitHub.

What is Git and GitHub? Basically it is an online code sharing community that uses repositories to maintain code versions.

What will u need to do?

  1. Set up a free account on the GitHub social network and a repository
  2. Download and install Source Code Management tool
  3. Link the two together

Set up a free account

Sign UP

Sign UP

  • Click “Sign Up” in the Open Source table
Free Option

Free Option

  • Fill in the registration form (leave SSH Public Key blank)

Setting up a repository

So there should only be one code repository per project. If a repository DOESN’T exist u can create one. However, if it DOES exist then you have to fork it.

FORK: By forking a project instead of cloning, creating a new GitHub repo, and pushing to it, you allow us to create a link between your fork and the original. This link helps us keep you informed of changes to the original codebase and make it trivial for you to notify the originator of changes that you have made and would like have reviewed.

For the purpose of my setup, I will be forking an existing processing.js repository

  • If u are not logged in (to GitHub), log in. This will bring u to the home page, if not click on the GitHub Social Coding logo on the upper left corner of the page.
GitHub Home

GitHub Home

  • Click on “Find a Repository”
  • Type “processing.js” in the search textbox (don’t change any defaults) and press enter
Search For Repository

Search For Repository

  • Select the “jeresig/processing-js” Repository
  • Select the “fork” button (found beside the repository name)
Fork

Fork

Download and install Source Code Management tool

For windows, you can use cygwin or msysgit. I am using msysgit.

  • Download the latest version from Google Code. Run the executable
  • Press “Next” for most of the configuration except for the following screens:
Git Configuration

Git Configuration

Git Configuration

Git Configuration

Git Configuration

Git Configuration

  • Once Setup is complete, you can generate your SSH key. Open up the msysgit cmd: Start=> Search for “Quick Launch” folder => right click => Select “Git Bash Here”
Quick Launch

Quick Launch

  • The command window should open up. Type ssh-keygen -C “youremailinquotes@com” -t rsa to create a key. Here is another tutorial on SSH Keygen.

SSH Key

SSH Key Gen

Note: You do not need to put in any input after the ssh-keygen command, just press enter after every prompt.

  • Identify yourself on Git using these two commands:

  1. git config –global user.name “yournameinquotes”
  2. git config –global user.email youremail@com
  • Tell GitHub apps about u. Log into GitHub, select “Account” (top right corner), select “Global Git Config”. Copy and paste the commands in the pop-up into the Git Bash command prompt.
Git Blobal Configuration

Git Blobal Configuration

Link the two together

  • Add SSH key you just created into GitHub. Open SSH key in a text editor. Looking back at the ssh-keygen command, you identified “C:\Users\YourNameHere\.ssh\” as the path. Open this folder (it might be hidden). Open id_rsa.pub in a text editor and copy its entire contents.
  • Go back to your GitHub Account and just under the “Global Git Config” we used 2 steps above u will find the “SSH Public Key” Section. Click “Add a Key” and paste the SSH key into the “Key” textarea. DO NOT include any extra spaces. You can leave the “Title” blank if u wish. Don’t forget to press “Add Key”
Add the SSH Key

Add the SSH Key

  • Test to make sure that everything works. On the Git Bash command prompt type the following command: ssh git@github.com I got a connection confirmation prompt and I had to type yes.

Verification

Verification

  • Get the actual code in the Repository using this Git Command: git clone git://github.com/annasob/processing-js.git processing
  • To get the path of ur repository: Log into GitHub. On the homepage click on the Repository you want to clone. Once the repository information comes up look for “Public Clone URL” or “Your Clone Url”

Run an External Processing.js Sketch

November 11th, 2009

It is very easy to load an external sketch with Processing.js. How easy?

Two lines easy!

 <script src="processing.min.js"></script>
 <canvas datasrc="init-example.pjs" width="200" height="200"></canvas>

Try this code

1) Include the “processing.js” JavaScript file.
2) Use the datasrc attribute to specify which Processing sketch you want to load.

This way the sketch is loaded using AJAX, so for security reasons you cannot run cross domain scripts.

Microsoft Are Doing “Lots of stuff” re: the HTML5 Canvas

May 28th, 2009

Well it has been a little while since I blogged about “Persuading Microsoft to Implement the Canvas”, and unfortunately, it looks like none of the Processing.js users went through the process and requested the Canvas. (Please correct me if I am wrong). Microsoft held an online meeting today for Internet Explorer users to ask questions to a panel of Microsoft Internet Explorer experts, including experts from the development team. Naturally, I had to ask the question:

F1LT3R[12:58] asked the experts: Probably the most important question on my mind… do the experts know if future browsers will support the Canvas tag? Or has there been any experiments/work done from the development team with respect to the HTML5 Canvas?

EricLaw [MSFT] (Expert)[13:05]: Well, as you know, some browsers already support Canvas; there are a variety of plugins which aim to add Canvas support to IE7 and 8. We’re definitely hearing feedback from the development community that they’re interested in seeing canvas support in IE9, and there is at least one feature request filed in the Connect database.

It seemed from the answer that Microsoft were dodging my question. But when I re-read my question, I could see how it was a little too ambiguous. So I tried to get to the core of the matter by simplifying:

F1LT3R[13:07] asked the experts: Are the Microsoft Experts aware any experiments/work done from the development team with respect to the HTML5 Canvas?

Matt Crow[msft] (Expert)[13:10] I’m not sure I understand your question. We’re certainly tracking the progress of the HTML5 specification, and we’re gathering feedback about what features developers are looking forward to in IE9. At this time, we have no announcements to make on this front.

Another wise yet frustratingly political answer from the IE team. It is good to hear that they are “tracking” the HTML5 specification, but could it really be, that the development team with the most used browser in the world, was only listening to customers, without pursuing any development?

Lots of stuff :)

F1LT3R[13:10] asked the experts: So the IE development team are officially doing nothing except listening to users re: the Canvas at this time?

EricLaw [MSFT] (Expert)[13:12]: We’re doing lots of stuff :)

Now we are getting somewhere! I know this response is even more ambiguous than my first question, but it leaves me with high hopes for the future of the HTML5 Canvas tag. Microsoft are more than listening to their users… they are doing “lots of stuff :)”. I can only imagine this means there is some kind of development going on.

I would guess that publicizing Microsoft’s Canvas developments would somehow be detrimental to the development process, which is obviously no good for anyone: so they choose to remain silent. Rumors have been circulating that Microsoft are planning to jump the gun re: the 3D Canvas Context and deliver a powerful Direct-X Canvas in IE9, while this seems to makes a lot of sense for several reasons, it remains… only a rumor.

F1LT3R[13:51] asked the experts: You say the IE team are doing “Lots of stuff” re: the Canvas, what sort of stuff?

EricLaw [MSFT] (Expert)[13:54]: We’re currently finishing up IE8 on Win7, and working to deliver a IE.Next release that will delight both web developers and normal users. Obviously, we’re very interested in feature requests and learning about any pain points with IE8.

Conclusion

Putting their comments in perspective, Microsoft are:

  1. aware that their developer-users are asking for the Canvas element
  2. focused on “delighting developers” with IE9
  3. doing “lots of stuff” re: the Canvas element
  4. announcing nothing!

While these comments make the dream of developing Canvas apps for wider audiences very tangible, I would have to advise: never to play Poker with a Microsoft employee.

The Future

The next IE Expert Panel will be held on the June 18th. If there is anyone else out there interested in Canvas, SVGs or any other HTML5 related issues in IE, sign-up, log in and join the W3C revolution. More details about the next here: Windows Internet Explorer 8 Expert Zone Chat

Persuading Microsoft to Implement Canvas

May 11th, 2009

Everyone must be very aware at this point that the words “Microsoft” and “Canvas” are usually combined to form negative sentences. But this does not have to be the case. As it stands, there are two options to consider when trying to use Processing.js in Internet Explorer.

  1. ExCanvas via VML: http://excanvas.sourceforge.net/
  2. IECanvas via Plugin: http://hg.mozilla.org/users/vladimir_mozilla.com/iecanvas
  3. Silverlight: Cannot find an implementation of this yet.

Commercially speaking, the situation is a mess. The majority of web development positions will gear their web-app or web-site to work seamlessly on all browsers. Because the Canvas is not implemented in Internet Explorer, this leaves a superb technology unused and under-developed. It may be true that Silverlight has played a role in bypassing Canvas development at Microsoft, but now that Silverlight has arrived, are we still using the Canvas? Yes, more so than ever. This is not to degrade Silverlight, it has some very cool features and will probably play a big role in hardware devices of the future. But tools like Flash and Silverlight are a huge turn-off to a large proportion of web developers.

Are Microsoft Implementing The Canvas Already?

I got in touch with Pete LePage, a Project Manager for the Internet Explorer team and asked him whether we could expect to see the Canvas in IE9. Here is what he said:

Pete LePage - Microsoft

Hey Al,

Having just shipped Internet Explorer 8, we aren’t ready to talk about future versions of the browser yet. We’re currently looking and evaluating many features and standards that developers have asked for. The best place to look for future announcements is on the IE blog at http://blogs.msdn.com/ie.

Thanks,

Pete

So the Internet Explorer team are “looking into many features and standards that developers have asked for”. Although this was not the news I wanted to hear, it is good news. It means that a) Microsoft are listening to their users and b) they are paying attention to standards. This gives you and me a golden opportunity: to get our voices heard and request the Canvas as a future-feature of the Internet Explorer browser.

Getting Yourself Heard at Microsoft

There are ways to get yourself heard at Microsoft. You can write letters, you can send emails, you can visit the IE blog above and post comments; but one thing that I would urge everyone to do is to join the Microsoft Connect service and get your request filed away into their databases. The Microsoft Connect service is a web-platform for communication between Microsoft Software Engineers and their developer community. If you develop sites/apps that work in IE, that community includes you. Unfortunately the sign-up and feature request process is a little confusing, and long-winded, so I have put together a guide to help people get to the right place.

Before I get to that, I wanted to share the link to the feature request page for the Canvas in Internet Explorer. Take a quick look at the comments so far. https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334060 If you think you have something to say, or just want to officially add your vote as a web developer, you may want to read the guide below so you do not get lost in a maze of Microsoft web-forms.

Guide: Requesting Features for IE via Microsoft Connect

The Boring Bit

1) Connect uses a Microsoft Passport service, so if you already have a Microsoft Passport, you can skip to Step 11. If you don’t have a Microsoft Passport yet, you will need to register for one. Point your browser to: http://connect.microsoft.com/. And click the “Sign In” button.

Microsoft Connect

2) If you do not have a Microsoft Passport click “Sign Up Now”:

Sign Up Now

3) I am going to make the assumption that you already have an email address, so click “Continue”:

Continue

4) Create your Microsoft Passport Credentials:

Microsoft Credentials

5) Agree to terms:

Agree Terms

6) Continue:

Continue Again

7) Go to your email and click the “verify” link:

Verify Email

8 ) The link will take you to this page; where you are asked to confirm that the person clicking the link in your email was in fact… you:

Verify Yourself

9) Sign in to Microsoft Connect using your new Microsoft Passport credentials:

Sign in 2

10) Strangely, you will then be signed in to the MSN network:

MSN Network

The Confusing Bit

11) Hit the Microsoft Connect network and sign in with your Microsoft Passport Credentials at: http://connect.microsoft.com/

Back to Connect

12) OK: here is where it gets a little more confusing, click on the “Choose one of your connections” drop-down box:

Choose One of your connections

13) You will now be asked to register to connect to an asset. This simply means that if Microsoft are going to listen to what you have to say, they want some contact information so they can get in touch with you. Click “Continue”:

Register a Connection

14) Agree to some more terms:

Agree to more terms

15) Provide some contact details:

Provide contact details

16) Click “Continue” and go get your email:

Continue to email

17) Once you have verified your email, choose your nick-name for the Microsoft Connect forum:

Choose nick-name

18) Click on “Connection Directory” to list various software packages:

Connection Directory

19) Search for “Internet Explorer Beta Feedback” and then click the “Apply Now” link:

Internet Explorer Beta Feedback

20) You will then be asked to register further contact information, but hey, that’s what you live for… right? Fill out the required fields and click continue:

More contact info registering

21) Naturally you will need to confirm your email just one more time, (third time lucky):

Confirm your damn friggin email again damnit

The Bit You Expected

22) Congratulations! When you see this screen, you have successfully added IE8 to you Connect dashboard, you are almost there. Click the “Feedback” link to the top-left of the page:

Almost there!

23) On the Feedback page for IE8, type “Canvas” into the search box and submit the form:

Search for Canvas

24) Click on the link entitled: “Suggestion: Support for <canvas>” (ID:334060):

Suggestion: Support for Canvas

25) Now you have arrived on the official feedback/request form for the Canvas element on the Microsoft Connect service. Good work. Remember to give this issue a 5/5 rating and to click “view or add” to validate that you are getting the same error as everyone else (that there is no Canvas):

Rate issue and add validation

26) Scroll down to the comments section, click “add comment” and leave your vote +1 and anything you wish to say:

Add vote and leave comment

Finished, finally!

If you actually bothered to go through all that, pat yourself on the back, you just learned a great lesson in user-experience and earned yourself a medal, or perhaps a beer. It is great to see people like you contributing to the community and the continuation of tomorrow’s web technology. Now all you need to do is pray that Microsoft get the message and decide to implement Apple technology.

It worked with True Type fonts. :)

Happy Birthday Processing.js!

May 8th, 2009

Happy Birthday Processing.js

Today we are celebrating the fact that Processing.js has made it all the way around the sun! As you may have guessed from the image above (or from RSS feeds), Processing.js now ships with TTF support. Rather than read binary files in Javascript, Processing.js loads True Type Fonts that have been converted to Batik SVGs.

This means you can use your favorite fonts in your Processing.js apps, games & visualizations using the standard loadFont( “fontName” ) and text( “Hello world!”, x, y) methods. There are a couple of bugs to iron out in Opera and a few features yet to be added here & there; but we thought you would want to open your present early. If you can’t wait to get cracking with True Type in Processing.js; click here.

Enjoy!

Updates to println() & print()…

May 1st, 2009

I updated println() and print() to call back the arguments into a user function called lnPrinted() or just printed().

Usage:

    void lnPrinted(){
        console.log( ln );
    }

    println( 'string' );

This would print the text “string” to the console in FireFox. The same is true for print():

Usage:

    void printed(){
        console.log( ln );
    }

    print( 'string' );

In Native Processing these two functions have different operations, however, there does not seem to be a way to print adjoining lines in web-browsers logs like you can in the Native application. Regardless, as the function is past back to you as lnPrinted(ln); you can handle it however you wish. I took this route because there are always going to be a million different ways to log output and it seems like everyone has a different idea of how it should work, so perhaps the control should be to the user.

I updated it so you could pass arrays also:

    size(50,50);
    noStroke();

    void lnPrinted(){
      fill( ln[0], ln[1], ln[2] );
      rect( 0, 0, 50, 50 );
    }

    println( 0, 255, 0 );