Howto:Canvas Path Benchmarking

This article is a stub. You can help the wiki by expanding it.

Screenshot showing a Canvas GUI dialog with 3000 random OpenVG paths (line segments) drawn (for benchmarking purposes)

Motivation

Assume you have one array you have written into a path, now you want to replace the path element by one corresponding to the second array.

Code

###
# Based on, and adapted from: 
# http://wiki.flightgear.org/Canvas_Snippets#Adding_OpenVG_Paths

var (width,height) = (640,480);
var title = 'Canvas.Path.setData() test';

var window = canvas.Window.new([width,height],"dialog").set('title',title);

var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color"));

var root = myCanvas.createGroup();

var graph = root.createChild("group");

var x_axis = graph.createChild("path", "x-axis")
.moveTo(10, height/2)
.lineTo(width-10, height/2)
.setColor(1,0,0)
.setStrokeLineWidth(3);

var y_axis = graph.createChild("path", "y-axis")
.moveTo(10, 10)
.lineTo(10, height-10)
.setColor(0,0,1)
.setStrokeLineWidth(2);


var plot = graph.createChild("path", "plot")
.moveTo(10, height/2)
.setColor(0,1,0)
.setStrokeLineWidth(0.5);

var randomPoints = func(total=3000) {
window.set('title',title~" points="~total);

var cmds = [];
var points = [];

for(var i=0;i<=total;i+=1) {
 append(cmds, canvas.Path.VG_LINE_TO);
 var x = 10+rand() * (width-10) + rand()*5;
 var y = 10+rand() * (height-10) + rand()*8;
 append(points, [x,y]);
 # print("x/y: ", x, y);
}
return {cmds:cmds, points:points};
}


var setData_test = func(data) {
plot.setData( data.cmds, data.points);
}

var myPoints = randomPoints(3000);

debug.benchmark("setData() test:", func setData_test(myPoints) );

References

References