11. Graphics

With graphics, we mean vector graphics. That is, if you don’t want to show images but actually draw something on the screen, like arrows or gratings, you will want to use vector graphics. Modern browsers (and many old ones) support this form of graphics. A difficulty is that older browsers used very different approaches, which is why it is necessary to use a JavaScript vector graphics library. If not, your drawings will not show up on certain (older) browsers.

Vector graphics are supported by NeuroTask using the Dojo graphics library, which has great cross-browser support. At the moment, there is no NeuroTask added support for vector graphics and if you want to use it, you we must refer you to the Dojo GFX libraries.

A simple simple script that draws an ellipse on the screen with Dojo GFX looks like this:

main.style(“background-color”,”lightgrey”);

 1 var surface = gfx.createSurface(main.centerblock.node,"100%","100%"),
 2     size = {x:50,y:50,width:50,height:20},
 3     ellipse = surface.createEllipse({
 4         cx: size.x+"%",
 5         cy: size.y+"%",
 6         rx: size.width/2+"%",
 7         ry: size.height/2+"%"
 8     });
 9 
10 ellipse.setFill("green");
11 
12 awaitkey("ESCAPE");

A graphics surface is here added to the node DOM node of the centerblock Block of the main Box. The returned surface variable can now be used to draw. There are quite a few functions you can use, which will not (yet) discuss here, including showing SVG files.

In the future, we will add functions that will make vector drawing easier. It is likely that the dojo.gfx library will in the future not be loaded by default but only after checking a Use Graphics switch (like with Use Sound and Use Videos). This switch will than load dojox.gfx, (NeuroTask) graphics.js, will do an automatic graphics.await("preloading_completed"), and adds a graphics Surface to each newly created Block. This will allow calls like:

var b = main.addblock("center","center",100,100); // fills all

// Draw a grey rectangle using vector graphics, using a format
// that resembles `addblock()`
var r = b.addrectangle(25,25,50,50,"grey"); 

r.setStroke("red"); // calls Dojo GFX function `setStroke()`

Notice that Dojo GFX uses inter-caps but NeuroTask Scripting does not.