0

I would like to know if there are any javascript libraries to help in rendering graphics. I searched google and didn't find any tools. I want to make Gauss curves in canvas.

3

5 Answers 5

3

I have used and recommend the KineticJS library. It's actively maintained and updated regularly.

2

This took me 15 seconds to find. Play with it until it gets you what you like.

$(document).ready(drawGaussian);

var canvasContext;
var points;
var noise = 0;

function drawGaussian()
{   
canvasContext = document.getElementById("gaussian-canvas").getContext("2d");

document.getElementById("gaussian-canvas").onclick = cycleNoise;

cycleNoise();
}

function cycleNoise()
{   
canvasContext.clearRect(0, 0, 400, 400);

var m = Math.random() > .4
var amount = Math.round(Math.random() * 20000);
var size = Math.round(Math.random() * 3)+1;

document.getElementById("particles").innerHTML = amount;
document.getElementById("size").innerHTML = size;

switch(noise)
{
    case 0:
        drawGaussianField(amount, size, 200, 200, 400, 100, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Field";
        break;
    case 1:
        drawGaussianCurves(amount, size, 200, 200, 400, 150, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Curves";
        break;
    case 2:
        drawGaussianDiamond(amount, size, 200, 200, 400, 130, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Diamond";
        break;
    case 3:
        drawGaussianOval(amount, size, 200, 200, 300, 300, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Circle";
        break;
    case 4:
        drawGaussianBurst(amount, size, 200, 200, 120, 120, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Burst";
        break;
}

noise++;

if(noise > 4) noise = 0;
}


function drawGaussianField(amount, thickness, x, y, width, height, monochromatic)
{
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[3]), y + ((height*.5) * points[2]), thickness, thickness);  
}
}

function drawGaussianCurves(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[2]), thickness, thickness);  
}
}

function drawGaussianDiamond(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[3]), thickness, thickness);  
}
}

function drawGaussianOval(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[1]), thickness, thickness);  
}
}

function drawGaussianBurst(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[2]), y + ((height*.5) * points[3]), thickness, thickness);  
}
}

function setColor(val){
if(val)
{
    canvasContext.fillStyle = '#ffffff';
}
else
{
    canvasContext.fillStyle = "#"+Math.floor(Math.random()*16777215).toString(16);
}
}

function getGaussianPoints(){
var x1, x2, w, y1, y2;

do {
    x1 = 2.0 * Math.random() - 1.0;
    x2 = 2.0 * Math.random() - 1.0;
    w = x1 * x1 + x2 * x2;
} while ( w >= 1.0 );

w = Math.sqrt( (-2.0 * Math.log( w ) ) / w );
y1 = x1 * w;
y2 = x2 * w;

return [x1, x2, y1, y2];
}
3
  • Thanks ! Where did you find that? The internet is a strange place!
    – Delarn
    Mar 11, 2012 at 3:32
  • @Delarn you'll get used to it after a while ;) Mar 11, 2012 at 3:34
  • I know, I've left web dev for 10 years and now that new fun tech is out I relarn it. And seeking good info is quite hard. Thanks for your help.
    – Delarn
    Mar 11, 2012 at 3:36
2

There are a few html5 canvas javascript libraries. One of the more complete ones is paper.js

0
2

Here is a good comparison in smashing magazine between Raphael, Paper and Processing javascript libraries

1
  • Thanks... I'm developping for android so rapahel is a big no ;) but thanks!
    – Delarn
    Mar 12, 2012 at 2:48
1

Paper.js is pretty good for HTML5 canvas. As mentioned earlier you should avoid libraries based on SVG or VML because most won't work on Android devices.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.