sketch2fabric demo

Converted from sketch.js demo to fabric.js.

by jrdiaz

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/all.min.js"></script>
<html>
    <head>
        <title>sketch2fabric.js</title>
        <!--<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>-->
    </head>
    <body>
        <article id="info">
            <header>
                <h1><strong>sketch2fabric.js</strong> demo</h1>
                <h2>Spawn particles with your mouse</h2>
                <p>Converted from <a href="http://soulwire.github.com/sketch.js/">sketch.js demo</a><br/>
                    to <a href="https://github.com/kangax/fabric.js">fabric.js</a> by 
                    <a href="http://3nibbles.blogspot.com">jrdiaz</a></p>
            </header>
        </article>
        <div id="container">
            <canvas id="c" width="1200" height="600" style="border:1px solid #ccc"></canvas>
        </div>
        <!--<script type="text/javascript" src="fabric/dist/all.js"></script>-->
        <!--<script type="text/javascript" src="star.class.js"></script>-->
        <!--<script type="text/javascript" src="sketch2fabric.js"></script>-->
    </body>
</html>

CSS

html, body {
    font-family: 'Play', sans-serif;
    background: #2b2b2b;
    margin: 0;
}

#info {
    position: absolute;
    left: 10px;
    top: 10px;
}

#info {
    background: rgba(0,0,0,0.8);
    padding: 12px 10px;
    margin-bottom: 1px;
    color: #fff;
}

#info h1 {
    line-height: 22px;
    font-weight: 300;
    font-size: 18px;
    margin: 0;
}

#info h2 {
    line-height: 14px;
    font-weight: 300;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin: 0 0 6px 0;
}

#info p { font-size: 10px; }

#info a {
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.2);
    margin-right: 4px;
    /*line-height: 20px;
    font-size: 10px;*/
    color: rgba(255,255,255,0.5);
}

#info a:hover {
    border-bottom: 1px dotted rgba(255,255,255,0.6);
    color: rgba(255,255,255,1.0);
}

JavaScript

// ----------------------------------------
// Global functions and constants
// ----------------------------------------
Math.TWO_PI     = Math.PI * 2;
Math.HALF_PI    = Math.PI / 2;
Math.QUARTER_PI = Math.PI / 4;
function random( min, max ) {
    if (min && typeof min.length === 'number' && !! min.length) return min[Math.floor(Math.random() * min.length)];
    if (typeof max !== 'number') max = min || 1, min = 0;
    return min + Math.random() * (max - min);
}

var info = document.getElementById('info');


// ----------------------------------------
// Particle object
// ----------------------------------------
var Particle = fabric.util.createClass( fabric.Circle, {

    type: 'particle',

    initialize: function( options ) {
        this.callSuper( 'initialize', options );

        this.selectable = false;

        this.alive      = true;

        this.radius     = options.radius || 10;
        this.wander     = 0.15;
        this.theta      = random( Math.TWO_PI );
        this.drag       = 0.92;
        this.color      = '#fff';

        this.left       = options.left || 0.0;
        this.top        = options.top || 0.0;

        this.vx         = 0.0;
        this.vy         = 0.0;

    },

    move: function() {
        this.left   += this.vx;
        this.top    += this.vy;

        this.vx     *= this.drag;
        this.vy     *= this.drag;

        this.theta  += random( -0.5, 0.5 ) * this.wander;
        this.vx     += Math.sin( this.theta ) * 0.1;
        this.vy     += Math.cos( this.theta ) * 0.1;

        this.radius *= 0.96;
        this.alive   = this.radius > 0.5;
    },

    _render: function( ctx ) {

        // Shear
        // var sx = 0.75; // .75 horizontal shear
        // var sy = 0;    // no vertical shear
        // ctx.transform(1, sy, sx, 1, 0, 0);

        // Oval
        // ctx.scale(2, 1);

        // Shadow
        // ctx.shadowColor = 'black';
        // ctx.shadowBlur = 20;
        // ctx.shadowOffsetX = 10;
        //...