no description yet

canvas-noclear-paint.js

function onMouseMove(event){

        var test=new Path.Circle([0,0],5)
        
        test.position=event.point;
        test.data.velocity=3;
        test.onFrame=function(event){
            test.position=test.position+new Point(Math.random()*test.data.velocity,test.data.velocity);
            test.data.velocity=Math.max(0,test.data.velocity-Math.random()*0.1);
        }
        test.bounds.width=event.delta.length;
        test.bounds.height=event.delta.length;
        test.fillColor=new Color(Math.random()/4,Math.random(),Math.random()/2,1)
        
        if(project.activeLayer.children.length>200){
            project.activeLayer.children[0].remove();
        }
}

function onFrame(event){
    
    function setPixel(imageData, x, y, r, g, b, a) {
        index = (x + y * imageData.width) * 4;
        imageData.data[index+0] = r;
        imageData.data[index+1] = g;
        imageData.data[index+2] = b;
        imageData.data[index+3] = a;
    }
    
    element = document.getElementById("canvas");
    c = element.getContext("2d");
    
    // read the width and height of the canvas
    width = element.width;
    height = element.height;
    
    // create a new pixel array
    imageData = c.createImageData(width, height);
    
    // draw random dots
    for (i = 0; i < 10000; i++) {
        x = Math.random() * width | 0; // |0 to truncate to Int32
        y = Math.random() * height | 0;
        r = Math.random() * 256 | 0;
        g = Math.random() * 256 | 0;
        b = Math.random() * 256 | 0;
        setPixel(imageData, x, y, r, g, b, 255); // 255 opaque
    }
    
    // copy the image data back onto the canvas
    c.putImageData(imageData, 0, 0); // at coords 0,0

}