Performance issues using images using arbor.js

Question

I worked on adapting arbor.js to use images.

However, being the relative JS noob that I have is not fully optimized.

As far as I can tell, the way I set it up is to recreate the image object for each image and each frame, which leads to subtle flicker.

Can anyone suggest a way to move the new Image () object from the redraw function to the init? As far as I know, this is the main OOP problem, but completely stuck.

Thanks!

Pastebin where I am at the output of the script

Current state .

Answer 1

Sorry Here are a few steps. I will talk about the key stages, the rest from the textbook.

First add the relevant information to your JSON, for example:

nodes:{ innovation:{ 'color':colour.darkblue, 'shape':'dot', 'radius':30, 'image': 'innovation.png', 'image_w':130, 'image_h':24, 'alpha':1 }, participation:{ 'color':colour.purple, 'shape':'dot', 'radius':40, 'image':'participation.png', 'image_w':130, 'image_h':24, 'alpha':1 }, ... 

Upload all your images when the item loads.

 init:function(system){ // Normal initialisation particleSystem = system particleSystem.screenSize(canvas.width, canvas.height) particleSystem.screenPadding(25, 50) that.initMouseHandling() // Preload all images into the node object particleSystem.eachNode(function(node, pt) { if(node.data.image) { node.data.imageob = new Image() node.data.imageob.src = imagepath + node.data.image } }) ... 

Then to move the images themselves ...

 particleSystem.eachNode(function(node, pt){ ... // Image info from JSON var imageob = node.data.imageob var imageH = node.data.image_h var imageW = node.data.image_w ... // Draw the object if (node.data.shape=='dot'){ // Check if it a dot gfx.oval(pt.xw/2, pt.yw/2, w,w, {fill:ctx.fillStyle, alpha:node.data.alpha}) nodeBoxes[node.name] = [pt.xw/2, pt.yw/2, w,w] // Does it have an image? if (imageob){ // Images are drawn from cache ctx.drawImage(imageob, pt.x-(imageW/2), pt.y+radius/2, imageW, imageH) } }else { // If none of the above, draw a rectangle gfx.rect(pt.xw/2, pt.y-10, w,20, 4, {fill:ctx.fillStyle, alpha:node.data.alpha}) nodeBoxes[node.name] = [pt.xw/2, pt.y-11, w, 22] } ...