function setup(canvas) { // The setup() function runs once, before the animation starts. // Images must be preloaded here. // Draw some text into a 100 x 50 image and blur it: img = render(function() { text("hello", 25, 25, {fontsize:20}); }, 100, 50); img = blur(img, 2); // Set the canvas size (this will clear the canvas). canvas.size(650, 400); } function draw(canvas) { // The draw() function runs every frame. canvas.clear(); stroke(0, 0, 0, 1.0); // R,G,B,A (0.0-1.0) nofill(); // Draw a curved line: var p = new BezierPath(); p.moveto(100, 100); p.curveto(100, 150, 300, 250, 250, 300); drawpath(p); // Calculate points along the point and draw circles at their location. // The Array.enumerate() function takes an array and a function(index, value). Array.enumerate(p.points(10), function(i, pt) { ellipse(pt.x, pt.y, 4, 4, {fill: color(1,0,0)}); }); // Each frame, rotate the blurred image a little more: translate(50, 50); rotate(canvas.frame); image(img, -50, -25); // Print some feedback (see the line below): print(canvas.mouse.x, canvas.mouse.y, "fps: "+canvas.fps); }