IE support for Processing.js via excanvas.

[Thatcher]

Hi, I noticed that most of the examples are not working in IE if I
simply add excanvas.js to the scripts. This might be a good place to
start discussing other folks experience and start tracking done the
issue, either in processing.js or in excanvas.js

Thatcher

[F1LT3R]

Do you have an example of what is going wrong that I could look at?

[chris thatcher]

Can you recommend a good site that temporarily lets you post html and javascript.  I'm sure I've seen them used from time to time, and it really is a good practice to post a live example when asking a question.

Thanks

--
Christopher Thatcher

[Robert O'Rourke]

Try http://processingjs.pastebin.com/
The subdomain 'processingjs' can be used to make a custom pastebin
group. Otherwise just go to the regular pastebin website.

chris thatcher wrote:
> Can you recommend a good site that temporarily lets you post html and
> javascript. I'm sure I've seen them used from time to time, and it
> really is a good practice to post a live example when asking a question.
>
> Thanks
>
> On Sun, Oct 5, 2008 at 8:08 PM, F1LT3R <alistair...@me.com
> <mailto:alistair...@me.com>> wrote:
>
>
> Do you have an example of what is going wrong that I could look at?
>
>
> On Oct 5, 8:02 pm, Thatcher <thatcher.christop...@gmail.com

[John Resig]

Pretty much anything that isn't simply line or shape drawing will
fail. Internet Explorer's VML isn't able to do image-related work
which cuts out a large number of the examples (I assume that this is
what you're running against).

--John

[chris thatcher]

This is one in particular that should work in IE but I cant get it too.  I don't get an error but I dont an image being drawn either.  Probably my mistake but I don't know for sure.

http://processingjs.pastebin.com/m741ac976

--
Christopher Thatcher

[John Resig]

Any luck simplifying the case? Maybe just getting the setup to work?

--John

[chris thatcher]

OK I'll try some simpler cases, mostly it's good to know what we can expect to be supported right now by excanvas.  I'll start with something much simpler and try to work my way back to this case and see where it breaks.

--
Christopher Thatcher

[Justin Maxwell]

If someone has the time to share one, I'd also like to see an example
of one of the processing.js demos working with excanvas. I've tried
linking excanvas in the head of the examples off lethain.com (http://
lethain.com/entry/2008/may/10/getting-started-with-processing-js/) and
haven't seen any functional results in ie7

On Oct 6, 8:37 am, "chris thatcher" <thatcher.christop...@gmail.com>
wrote:

> OK I'll try some simpler cases, mostly it's good to know what we can expect
> to be supported right now by excanvas.  I'll start with something much
> simpler and try to work my way back to this case and see where it breaks.
>
>
>
> On Mon, Oct 6, 2008 at 11:27 AM, John Resig <jere...@gmail.com> wrote:
>
> > Any luck simplifying the case? Maybe just getting the setup to work?
>
> > --John
>
> > On Mon, Oct 6, 2008 at 11:11 AM, chris thatcher
> > <thatcher.christop...@gmail.com> wrote:
> > > This is one in particular that should work in IE but I cant get it too.
> >  I
> > > don't get an error but I dont an image being drawn either.  Probably my
> > > mistake but I don't know for sure.
>
> > >http://processingjs.pastebin.com/m741ac976
>

[F1LT3R]

Hi Justin,

I have a link that explains how you can make that example work in
Internet Explorer.
http://hyper-metrix.com/processing/docs/index.php?page=Using%20exCanvas.js%20with%20Processing.js

Let me know if you're still having problems.

Al

[John Resig]

Oh sorry, I must've completely missed this! I just committed a fix.
http://github.com/jeresig/processing-js/commit/f90c8d093812c5dc2f73c4ac6055097abb76c4e2

Btw, I love the animated background on your Processing.js site :-)

--John

[Robert O'Rourke]

Al, that is seriously cool! You've inspired me to finish off my
oscilloscope background thing and put my new website design up.

-Rob

[chris thatcher]

Why cant I find a link to this (Al's) site with the processing background?  I wanna see too!

--
Christopher Thatcher

[Justin Maxwell]

It's right here:

http://hyper-metrix.com/processing/docs/index.php?page=Using%20exCanvas.js%20with%20Processing.js

Very cool.

Thanks for committing the fix, John, and thanks for following up so quickly, Chris.  My second question, then, is this:

For those of you coming at processing.js from a javascript background, have you found it more beneficial to learn the processing language and work within the <script type="application/processing"> node, or has managing the object construction, drawing, and interaction through javascript and the Processing API been sufficient?  Are there any benchmarked performance hits on either method?

We're excited about using Processing.js to move away from Flex, and I'm trying to get a scope of how much work it will require (i.e., learning processing, versus only learning the syntax of the processing API and managing objects/interactions through JS)

Thanks in advance for your feedback,

Justin

[chris thatcher]

Bummer, apparently it doesnt work in FF2, but I dont get any sort of error, or see anything obviously awry.

--
Christopher Thatcher

[F1LT3R]

Awesome, can't wait to see it.

On Oct 16, 11:11 am, Robert O'Rourke <r...@sanchothefat.com> wrote:
> Al, that is seriously cool! You've inspired me to finish off my
> oscilloscope background thing and put my new website design up.
>
> -Rob
>
> John Resig wrote:
> > Oh sorry, I must've completely missed this! I just committed a fix.

> >http://github.com/jeresig/processing-js/commit/f90c8d093812c5dc2f73c4...

>
> > Btw, I love the animated background on your Processing.js site :-)
>
> > --John
>

> > On Thu, Oct 16, 2008 at 2:14 AM, F1LT3R <alistairmacdon...@me.com> wrote:
>
> >> Hi Justin,
>
> >> I have a link that explains how you can make that example work in
> >> Internet Explorer.

> >>http://hyper-metrix.com/processing/docs/index.php?page=Using%20exCanv...

[F1LT3R]

I started using JavaScript before Processing. But for a while I just
used the Processing.org's compiled Java IDE to build native Processing
apps. So the only advantage I think this gave me was a good working
knowledge of debugging in the console. Firebug usually gives you
enough clues to debug, so I personally choose to build all my code
as .pro files with the original syntax highlighting and then pull them
in with jQuery's Ajax engine. But I'm not really an IDE fan, I prefer
to use the same text editor to work with any code. So calling
your .pro scripts in at load keeps your code and content separated. So
yes, all my current Processing experiments are built and debugged in a
Processing.js environment.

Pro.js Performance seems to be faster in the browser on Macs and about
the same on the PC; but this it depends what you're trying to do and
which commands you are using. If you're drawing a moving line, the
browser seems to win. If you are creating 400x400 pixel arrays... go
get some coffee while you wait for the next frame. ( The native
Processing application handles these arrays much quicker, but I have
not tested this with Chrome yet. My hope is that Chrome will make
small work of arrays. )

I'm really excited about Processing swallowing up Flash too! I never
got a long with Flash or anything that required you to plug in to your
OS and create a black-hole in your HTML document. in my opinion, it's
simply not good web, to FORCE everyone to download a plugin. Thank God
for the W3C and HTML 5. The web swelled because information was shared
freely and transparently. Projects like processing give us a chance to
deliver that transparency in a familiar way. A way in which we can
view-source and hack around to create our own favorite version of
anything.

I don't think Flash/Flex is going to get replaced in the next two
years, but it will happen at some point. I remember people talking a
few years back about how the operating system itself was only just
going online, that one day people wouldn't have hard-disks and
everything would be stored and retrieved from the sky. Well a few
years on... we are definitely covering ground quite quickly. With
MobileMe and iGoogle etc, we are really just beginning to see a lot of
personal data storred "elsewhere". It's just amazing to look back at
people in the 80s talking about a hand-held computer that was your
phone and your calculator and your TV remote... today it's called the
iPhone... tomorrow it will be something even better. It is interesting
to note that CERN invest considerable effort in creating black holes
with their hadron collider but have already created one with the
invention of the web; and it's slowly sucking in all information
everywhere! :-P

On Oct 16, 12:44 pm, Justin Maxwell <s...@code404.com> wrote:
> It's right here:
>

> http://hyper-metrix.com/processing/docs/index.php?page=Using%20exCanv...

[F1LT3R]

Awesome, thanks :)

On Oct 16, 9:14 am, "John Resig" <jere...@gmail.com> wrote:
> Oh sorry, I must've completely missed this! I just committed a fix.http://github.com/jeresig/processing-js/commit/f90c8d093812c5dc2f73c4...

>
> Btw, I love the animated background on your Processing.js site :-)
>
> --John
>

> On Thu, Oct 16, 2008 at 2:14 AM, F1LT3R <alistairmacdon...@me.com> wrote:
>
> > Hi Justin,
>
> > I have a link that explains how you can make that example work in
> > Internet Explorer.

> >http://hyper-metrix.com/processing/docs/index.php?page=Using%20exCanv...

[F1LT3R]

My bad. Apparently FF2 and FF3 handle the -1 z-index differently. All
fixed, try again.


On Oct 16, 12:50 pm, "chris thatcher" <thatcher.christop...@gmail.com>
wrote:

> Bummer, apparently it doesnt work in FF2, but I dont get any sort of error,
> or see anything obviously awry.
>
>
>
> On Thu, Oct 16, 2008 at 12:44 PM, Justin Maxwell <s...@code404.com> wrote:
>
> > It's right here:
>

> >http://hyper-metrix.com/processing/docs/index.php?page=Using%20exCanv...

[Justin Maxwell]

I really appreciate your detailed response. Thanks. I don't think
Processing/Canvas/SVG/etc. will replace Flash anytime soon, nor do I
actually want them to (there's some really amazing stuff happening
thanks to ActionScript 3), but I do like the idea of using canvas for
charting and visualization instead of requiring a plugin that requires
user installation.

I'm not a fan of IDEs either. I spend my time in TextMate and
Firebug, and I'd like to keep it that way.

So you prefer writing all your scripting in processing instead of
writing it in javascript? are there any limitations to the API that
would otherwise limit me from doing everything possible in the
interpreted processing.js code?

My goal is to make it through the Ben Fry, "Visualizing Data," book,
but all in the browser, and I'd rather do it in JS -- a language I
know, using the Processing.js API -- than do it in processing. So far
I'm getting hung up on things like trying to load strings from
processing within the browser. I've figured out how to load images
thanks to the examples on John's site, but there's nothing about
loading external text files. That seems like something that's going
to need handling through $.get() in javascript, which makes me want to
pick one place or the other to do this. Does that make any sense?

Thanks in advance for the advice.

Best,
Justin

[chris thatcher]

The processing.js parser is actually very lazy, like me, so you can get away with mixing the processing language with javascript.  I'm not advocating that ;) but if no perfecctionists are looking over your shoulder, I'm just saying it's possible.

Thatcher

--
Christopher Thatcher

[F1LT3R]

Hey Justin,

Any limits to the API are only there until we code in the blank
spaces.

Going through that book sounds like a very cool project indeed.
Actually is a REALLY awesome idea.

I load strings into Processing using $.get, but it might be better
practice in the long-run to write a full ajax engine into
Processing.js itself. But when HTML5 is in full swing... you will be
able to load and save files from the server without Ajax anyway I
believe. I extended the Processing.js code to load exported DEC and
RAW objects that could be exported from Blender 3D and then parsed
into Processing Matrixes that can be manipulated on the Canvas in
animation chains using a similar methodology to jQuery CSS animations.
Shotgun. It's only 2D right now, but when 3D context is pinned down in
greater detail by the W3C... things are going to get very interesting.
Processing is as much a 3D language as a 2D language.

[Justin Maxwell]

Again, thanks so much for the awesome replies. Your helpfulness is
only driving my enthusiasm to dig in to this.

So I think I understand what you're saying...let me check :)

Chapter 3 in Visualizing Data requires us to load in the Table.pde
library, then load in a delimited file. In the Processing IDE, this
is cake. In Pjs, I'm finding I'm spending my time trying to learn how
to load external files instead of making it through the chapter :)
Table.pde relies on the loadStrings method.

In processing, I'd load strings in through string[] myStrings =
loadStrings("filename.ext"). Since it doesn't appear I can do that in
Pjs, would this be right?

(assuming i declared string[] myStrings; in the processing file)

var myStringsInJS = [];
// put stuff in there
window.Processing.data.myStrings = myStringsInJS;

Thanks!
Justin

[F1LT3R]

Firstly I would only do <b>window.processing.data</b> if you are going
to share the variables with another Canvas or perhaps another Java
script, I assume this is what you're doing?

I'll show you what I am doing if that helps:

In the Processing.js file I have added the following few lines...
<pre>
p.loadStrings = function loadStrings(loadUrl) {
return $.ajax({type: "GET", url: loadUrl, async:
false}).responseText.split("\n");
};
</pre>

Then in your Processing script you do this:

<pre>
String myString = loadStrings("strings.txt");
int i;
for (i=0; i < myString.length; i++){
console.log(myString[i]);
}
</pre>

[Justin Maxwell]

Awesome. Thank you so much.

Before I start modifying my Pjs file...

John, is this something you plan to add to processing.js in the near
future?

Thanks a million, folks. I really appreciate it!
Justin

[John Resig]

> John, is this something you plan to add to processing.js in the near
> future?

Sure, I don't see why not. It'd be pretty awesome to get parity with
the book (I'll have to crack open my copy to see how we do!)

--John

[F1LT3R]

The drawback to having a sloppy/lazy parser is that your code dosn't
always work when you put it back into a regular Processing applet. I
get the impression from some message boards that there would be a lot
of hardcore Processing fans who would think this was an unforgivable
sin.


On Oct 17, 8:55 am, "chris thatcher" <thatcher.christop...@gmail.com>
wrote:

[John Resig]

> The drawback to having a sloppy/lazy parser is that your code dosn't
> always work when you put it back into a regular Processing applet. I
> get the impression from some message boards that there would be a lot
> of hardcore Processing fans who would think this was an unforgivable
> sin.

Of course any hardcore Processing fans probably aren't using
Processing.js to begin with since (at this time) JavaScript doesn't
provide the raw processing power that a Java Applet does (nor all the
libraries of Processing).

Kind of an uphill battle, in that respect. An easier market to tackle
is the casual Processing developer and the JavaScript developer
looking to do more with Canvas.

--John

[vitorsilva]

i created a table.js to replace the table.pde that it's referenced on
the book (original is available here http://benfry.com/writing/map/Table.pde)
it know it's not great javascript code but it was the best i could do
and it let's me keep my processing code pretty much the same as the
exemple on the book


Table = function(filename)
{
var rowCount;

this.filename = filename;
this.data = loadData(this.filename);
this.getRowCount = getRowCount;
this.getRowIndex = getRowIndex;
this.getRowName = getRowName;
this.getString = getString;
this.getString2 = getString2; // these function were supposed to be
private but i don't know how to do it
this.getInt = getInt;
this.getInt2 = getInt2;
this.getFloat = getFloat;
this.getFloat2 = getFloat2;

function loadData(fileName)
{
if (fileName == undefined)
return "";
//return new String[10][10];
else
{
var r = $.ajax({type: "GET", url: fileName, async:
false}).responseText;
rows = r.split("\n")
var data = []

for (var i = 0; i < rows.length; i++) {
//if (trim(rows[i]).length() == 0) {
// continue; // skip empty rows
//}
if (rows[i].substring(0,1) == "#") {
continue; // skip comment lines
}

// split the row on the tabs
pieces = rows[i].split("\t"); //split(rows[i], TAB);
// copy to the table array
data[i] = pieces;

// this could be done in one fell swoop via:
//data[rowCount++] = split(rows[i], TAB);
}
// resize the 'data' array as necessary
rowCount = data.length;
return data;
}
}

function getRowCount() {
return rowCount;
}

// find a row by its name, returns -1 if no row found
function getRowIndex(name) {
for (var i = 0; i < rowCount; i++) {
if (this.data[i][0] == name) {
return i;
}
}
alert("No row named '" + name + "' was found");
return -1;
}

function getRowName(row) {
return this.getString(row, 0);
}

function getString(rowIndex, column) {
if (isNaN(rowIndex))
return this.getString2(rowIndex, column);
else
return this.data[rowIndex][column];
}

function getString2(rowName, column) {
return this.getString(this.getRowIndex(rowName), column);
}

function getInt(rowIndex, column) {
if (isNaN(rowIndex))
return this.getInt2(rowIndex, column)
else
return parseInt(this.getString(rowIndex, column));
}

function getInt2(rowName, column) {
return parseInt(this.getString(rowName, column));
}


function getFloat(rowIndex, column) {
if (isNaN(rowIndex))
return this.getFloat2(rowIndex, column)
else
return parseFloat(this.getString(rowIndex, column));
}

function getFloat2(rowName, column) {
return parseFloat(this.getString(rowName, column));

}

}









On Oct 17, 5:18 pm, Justin Maxwell <s...@code404.com> wrote:
> Again, thanks so much for the awesome replies.  Your helpfulness is  
> only driving my enthusiasm to dig in to this.
>
> So I think I understand what you're saying...let me check :)
>
> Chapter 3 in Visualizing Data requires us toloadin the Table.pde  

> library, thenloadin a delimited file.  In the Processing IDE, this  

> is cake.  In Pjs, I'm finding I'm spending my time trying to learn how  

> toloadexternal files instead of making it through the chapter :)  

> Table.pde relies on the loadStrings method.
>

> In processing, I'dloadstrings in through string[] myStrings =  

> loadStrings("filename.ext").  Since it doesn't appear I can do that in  
> Pjs, would this be right?
>
> (assuming i declared string[] myStrings; in the processing file)
>
> var myStringsInJS = [];
> // put stuff in there
> window.Processing.data.myStrings = myStringsInJS;
>
> Thanks!
> Justin
>
> On Oct 17, 2008, at 6:57 AM, F1LT3R wrote:
>

> > Iloadstrings into Processing using $.get, but it might be better

[F1LT3R]

John, what was your reason for creating Processing.js? I mean... what
made you think.... right... I'm going to sit down and convert a whole
freeking language to a whole other language and make it run almost
identically in completely different run-time environment? Are you
insane?

And I also wondered... had you been using Processing long before you
decided to bring it to the Web or were you get converted by some
Processing evangelists?

[F1LT3R]

That's very cool Vitor. Do you have a running JavaScript example of
this we can see?

I guess the next step is to update Processing.js so that so you can
keep the script identical and drop that 'isNan' and jQuery stuff. As
long as the jQuery stuff is invisible to the regular Processing user
they won't feel the difference; and an appropriate AJAX engine and
HTML5 file engine could be written at a later date.

I don't know if you've popped the hood on Processing.js yet, but it's
written in such a beautifully way with respect to adding your own or
existing functions. All you have to do is find the section with
p.whateverFunction = function whateverFunction(){} and start adding
stuff.

For example: add the following at line 641...

// A regular Processing function
p.println = function println( ln ){
console.log( ln );
}

or if you need to return something you would do this.....

// An imaginary, but working Processing function
p.addOne = function addOne( toVal ){
return toVal + 1;

}


On Nov 13, 1:54 pm, vitorsilva <vitorsilva....@gmail.com> wrote:
> i created a table.js to replace the table.pde that it's referenced on

> the book (original is available herehttp://benfry.com/writing/map/Table.pde)

[Vitor Silva]

hi

i do have a running example.
check in http://blog.osmeusapontamentos.com/processing/dataVisualizationExamplesUsingProcessingJS.htm
i'll be updating that page as long as i walk through ben fry visualizing data book.

the js script is probably not that good since what i'm trying to achieve is really more learn some concepts about data visualization (by mostly copy/pasting the books examples) than writing good code...

since i don't have a lot of spare time, i'm trying to spend my time on writing code if i really need to create a new function that is still not implemented on the original processing.js or your forked version of course :)

ps: i added a reference to your processing version since it has those functions that you created (lerpColor, norm, ...)

2008/11/15 F1LT3R <alistair...@me.com>

--

http://blog.osmeusapontamentos.com/

[F1LT3R]

I just sat down with a coffee and read through your page and source.
It's really great stuff! I can't remember whether I asked you this
before or not... but is it your intention to do this for the whole
book? It seems like it would be a huge milestone in Pjs journey. And I
am sure it would help the pre-pjs Processing community come to terms
with the fact that Processing.js is more than just a toy for web-
designers.

Thanks for the links buddy. I will do a quick gradient tutorial and
link you back ;)

On Nov 22, 6:01 pm, "Vitor Silva" <vitorsilva....@gmail.com> wrote:
> hi
>
> i do have a running example.

> check inhttp://blog.osmeusapontamentos.com/processing/dataVisualizationExampl...

> i'll be updating that page as long as i walk through ben fry visualizing
> data book.
>
> the js script is probably not that good since what i'm trying to achieve is
> really more learn some concepts about data visualization (by mostly
> copy/pasting the books examples) than writing good code...
>
> since i don't have a lot of spare time, i'm trying to spend my time on
> writing code if i really need to create a new function that is still not
> implemented on the original processing.js or your forked version of course
> :)
>
> ps: i added a reference to your processing version since it has those
> functions that you created (lerpColor, norm, ...)
>

> 2008/11/15 F1LT3R <alistairmacdon...@me.com>

[Vitor Silva]

>>but is it your intention to do this for the whole book?

it depends on the the complexity of the other examples of the book.
but, yes, in theory that is what i'm trying to accomplish, although at a slow pace (about a dozen pages a week)
as soon as i have new examples i'll let you know.

2008/11/23 F1LT3R <alistair...@me.com>

--

http://blog.osmeusapontamentos.com/