Newbie: Canvas?

[pinkfloydhomer]

Just as an exercise, I want to make a simple mandelbrot javascript
program. I need to draw pixels on a "canvas". How can I do that with
javascript? In general, are there some good online resources about
game programming in javascript?

/David

 

[Lee]

(e-mail address removed) said:

Just as an exercise, I want to make a simple mandelbrot javascript
program. I need to draw pixels on a "canvas". How can I do that with
javascript? In general, are there some good online resources about
game programming in javascript?

Javascript was never intended for game programming and has no
built-in drawing capability. Maybe you're looking for Java?


--

 

[RobG]

Just as an exercise, I want to make a simple mandelbrot javascript
program. I need to draw pixels on a "canvas". How can I do that with
javascript? In general, are there some good online resources about
game programming in javascript?

Javascript itself has no drawing capabilities (it doesn't have any
form of I/O), it's utterly dependent on the host environment for
that. Here are some drawing examples that might get you going:

<URL: http://www.c-point.com/javascript_vector_draw.htm >
<URL: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm >

Google for "javascript drawing library". You can try SVG graphics as
well, but support is patchy and it usually requires a plugin. You
might like to checkout the canvas element:

<URL: http://developer.apple.com/documentation/AppleApplications/
Conceptual/SafariJSProgTopics/Tasks/Canvas.html >
URL: http://developer.mozilla.org/en/docs/Canvas_tutorial >
URL: http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas
Of course it's not supported by IE, but it should be in HTML 5. There
are a few drawing libraries out there that use div elements as pixels,
but of course they require quite a bit of CPU/graphics grunt due to
the potentiall very large number of elements.

Also, try this demo of a particle engine - it requires some serious
CPU but works OK on lesser machines (albeit slowly).

<URL: http://www.nearinfinity.com/blogs/page/jharwig?
entry=javascript_particle_engine >

 

[Dr J R Stockton]

(e-mail address removed) said:

Javascript was never intended for game programming and has no
built-in drawing capability. Maybe you're looking for Java?

I have just created a <table> with 100 rows and 100 columns.
Surely javascript can set the background colours of the cells to use
them as pixels?

For greater resolution, the cells could contain images of block-patterns.

The following HTML shows the rudiments of a diagram similar to the wide
one generated by the first button in <URL:http://www.merlyn.demon.co.uk
gravity4.htm>, which is a representation of the tall thin one on the
right, lower down.

<table>
<tr><td>X Z Y L3</td><td style="width:333px"><hr></td>
<td>M</td><td style="width:44px; background=brown">M</td></tr>
</table>

Now javascript could *compute* that, enabling diagrams for different
mass-ratios.

a
<span style="width:77px;"><hr></span>|<span style="width:77px;"><hr></span>
c


Granted, Java should do better; maybe I'll learn it.

 

[RobG]

I have just created a <table> with 100 rows and 100 columns.
Surely javascript can set the background colours of the cells to use
them as pixels?

For greater resolution, the cells could contain images of block-patterns.

The following HTML shows the rudiments of a diagram similar to the wide
one generated by the first button in <URL:http://www.merlyn.demon.co.uk
gravity4.htm>, which is a representation of the tall thin one on the
right, lower down.

<table>
<tr><td>X Z Y L3</td><td style="width:333px"><hr></td>
<td>M</td><td style="width:44px; background=brown">M</td></tr>
</table>

Now javascript could *compute* that, enabling diagrams for different
mass-ratios.

a
<span style="width:77px;"><hr></span>|<span style="width:77px;"><hr></span>
c

Granted, Java should do better; maybe I'll learn it.

--
(c) John Stockton, Surrey, UK. [email protected] Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links;
Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

 

[Randy Webb]

Dr J R Stockton said the following on 2/11/2007 5:36 PM:

I have just created a <table> with 100 rows and 100 columns.
Surely javascript can set the background colours of the cells to use
them as pixels?

Yes, and I did it long ago but using div elements instead. Once you go
beyond about 400 pixels in the "area" to draw in, you get so slow that
it locks the machine up.

http://members.aol.com/_ht_a/HikksNotAtHome/graphit/index.html

Uses 400 div elements along with 400 1x1 jpgs (the red dots are actually
images that get moved). By clicking on 2 points in the blue it will
"draw" a red line between them.

Now javascript could *compute* that, enabling diagrams for different
mass-ratios.

That isn't Javascript "drawing" though, it is simply manipulating HTML
to mimic drawing.

 

[RobG]

On Feb 12, 8:36 am, Dr J R Stockton <[email protected]>
wrote:
[...]

I have just created a <table> with 100 rows and 100 columns.
Surely javascript can set the background colours of the cells to use
them as pixels?

Heaven forbid, do you to invoke the wrath of the "tables are for
tabular data only" fanatics?

For greater resolution, the cells could contain images of block-patterns.

The following HTML shows the rudiments of a diagram similar to the wide
one generated by the first button in <URL:http://www.merlyn.demon.co.uk
gravity4.htm>, which is a representation of the tall thin one on the
right, lower down.

In Firefox, that button causes a page that never stops loading, which
indicates a document.write without a final document.close().

 

[Dr J R Stockton]

Dr J R Stockton said the following on 2/11/2007 5:36 PM: FFF!!


Yes, and I did it long ago but using div elements instead. Once you go
beyond about 400 pixels in the "area" to draw in, you get so slow that
it locks the machine up.

But machines are larger and faster nowadays. This, on mine, does 16384
coloured elements in about 5 seconds :-

St = []
for (J=16; J<256; J+=2) for (K=16; K<256; K+=2)
St.push( "<span style=\"position:absolute; top:" +
J + "px;" + "color:#00" + J.toString(16) + K.toString(16) +
"; left:" + K + "px; height:1em; width:3em;\">.<\/span>\n")

document.write(St.join(""))

That should be enough for a simple Mandelbrot.

That isn't Javascript "drawing" though, it is simply manipulating HTML
to mimic drawing.

It serves, although not always.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]

On Feb 12, 8:36 am, Dr J R Stockton <[email protected]>
wrote:
[...]

I have just created a <table> with 100 rows and 100 columns.
Surely javascript can set the background colours of the cells to use
them as pixels?

Heaven forbid, do you to invoke the wrath of the "tables are for
tabular data only" fanatics?

It would be a table of the colours of the Mandelbrot set, indexed by X &
Y. ;-}

In Firefox, that button causes a page that never stops loading, which
indicates a document.write without a final document.close().

Thanks. Probably fixed. Since the fix is applied near the foot of file
include1.js, it will take effect in about 16 other places on the site
too.

The present second button, superior except that the arithmetic is not
yet installed, should have been OK now anyway.

 

[Randy Webb]

Dr J R Stockton said the following on 2/12/2007 7:54 AM:

FFF!!

Sue me, then FOAD.

But machines are larger and faster nowadays.

Very true. The machine I wrote my page for was slow at 400 pixels. Now,
with the new one, I can do 60,000 without a lag.