The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

background: #000;

dabblet.html

<canvas width="600" height="720" id="can"  class="slide-canvas"></canvas>
<canvas width="600" height="720" id="can1"  class="slide-canvas"></canvas>
<script id="vs" type="x-shader/x-vertex">
        attribute vec3  position;
        attribute vec4  color;
        uniform float size;
        uniform   mat4  mvpMatrix;
        varying   vec4  vColor;

        void main(void){
            vColor       = color;
            gl_Position  = mvpMatrix * vec4(position, 1.0);
            gl_PointSize = size;
        }
    </script>

    <script id="fs" type="x-shader/x-fragment">
        precision mediump float;

        uniform sampler2D texture;
        varying vec4      vColor;

        void main(void){
            vec4 smpColor = vec4(1.0);
            smpColor = texture2D(texture, gl_PointCoord);
            if(smpColor.a == 0.0){
                discard;
            }else{
                gl_FragColor = vColor * smpColor;
            }
        }
    </script>

dabblet.js

var gl;
        var canvas;

        var mMatrix, vMatrix, pMatrix, mvpMatrix, iMatrix, tmpMatrix;
        var attLocation = [];
        var attStride = [];
        var uniLocation = [];

        var particles = [];
        var position = [];
        var color = [];
        var texture;

        var active=[], pool=[];

        //var stats = new Stats();
        var cW = 600,
            cH = 720;

        function setup(){
            //setStats();

            canvas = $(".slide.current .slide-canvas")[1];
            //canvas.width = 465;
            //canvas.height = 465;

            gl = createGLContext(canvas);

            var vertexShader = loadShaderFromDOM("vs");
            var fragmentShader = loadShaderFromDOM("fs");
            var prg = createProgram(vertexShader, fragmentShader);

            attLocation[0] = gl.getAttribLocation(prg, 'position');
            attLocation[1] = gl.getAttribLocation(prg, 'color');

            attStride[0] = 3;
            attStride[1] = 4;

            uniLocation[0]  = gl.getUniformLocation(prg, 'mvpMatrix');
            uniLocation[1]  = gl.getUniformLocation(prg, 'texture');
            uniLocation[2]  = gl.getUniformLocation(prg, 'size');

            mMatrix   = mat4.identity(mat4.create());
            vMatrix   = mat4.identity(mat4.create());
            pMatrix   = mat4.identity(mat4.create());
            mvpMatrix = mat4.identity(mat4.create());
            iMatrix = mat4.identity(mat4.create());
            tmpMatrix = mat4.identity(mat4.create());

            gl.depthFunc(gl.LEQUAL);
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

            for(var i = 0; i < 3000; i++){
                position.push(2*Math.random()-1, -200*Math.random()-1, 2*Math.random()-1);
                color.push(Math.random()*0.3+0.5, Math.random()*0.3, Math.random()*0.3, 1);
                pool[i] = i;

                particles[i] = {};
                particles[i].translate = [0, 0, 0];
                particles[i].velocity = [0, 0, 0];
                particles[i].size = Math.random()*35*2+10*2;
            }
            var pPos = createBuffer(position);
            var pCol = createBuffer(color);
            setAttribute([pPos, pCol], attLocation, attStride);

            createTexture();

            onEnterFrame();
        }

        var ci = 0,
            counter = 0;
            toLow = false,
            ff = false;

        function onEnterFrame(){

            var inputCount =  Math.min(5,0.6*counter);
            ci++;
            counter = toLow ? counter-1 : counter+1

            gl.clearColor(0.0, 0.0, 0.0, 0);
            gl.clearDepth(1.0);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);

            gl.uniform1i(uniLocation[1], 0);

            var camPosition = [0, 0, 600];
            mat4.lookAt(camPosition, [0, 0, 0], [0, 1, 0], vMatrix);
            mat4.perspective(45, cW / cH, 0.1, 1000, pMatrix);
            mat4.multiply(pMatrix, vMatrix, mvpMatrix);

            for(var i = 0; i < inputCount; i++){
                var index = pool.pop(),
                    size =  Math.max(Math.min(Math.random()*35*2*0.1*counter+30*2,300),80);
                active.push(index);
                particles[index].translate = [0, 0, 0];
                particles[index].velocity = [Math.random()*15-7.5, Math.random()*10-7, Math.random()*15-7.5];
                particles[index].size = size;
            }

            var i = active.length;
            if (!toLow) {
                toLow = i >= 400;
            } else {
                if (!ff) {
                    context.clearRect(0, 0, 600, 720);
                    context.drawImage(image[1], coords.startX, coords.startY, image[1].width, image[1].height);
                }
                ff = true;

            }
            while(i--){
                var index = active[i];
                var particle = particles[index];
                particle.translate[0] += particle.velocity[0];
                particle.translate[1] += particle.velocity[1];
                particle.translate[2] += particle.velocity[2];
                particle.velocity[0] += -(position[index*3]+particle.translate[0])/(particle.size);
                particle.velocity[1] += .4;
                particle.velocity[2] += -(position[index*3+2]+particle.translate[2])/(particle.size);
                particle.size -= 1.5;
                //console.log(particle.translate,particle.velocity)

                if(particle.size < 0){
                    active.splice(i,1);
                    pool.push(index);
                    //console.log(index, active)
                    continue;
                }

                mat4.translate(iMatrix, particle.translate, mMatrix);
                mat4.multiply(mvpMatrix, mMatrix, tmpMatrix);
                gl.uniform1f(uniLocation[2], particle.size);
                gl.uniformMatrix4fv(uniLocation[0], false, tmpMatrix);
                gl.drawArrays(gl.POINTS, index, 1);
            }

            gl.flush();
            //stats.update();
            setTimeout(onEnterFrame, 66);
        }

        function createTexture(){
            var ctx = document.getElementById('img_canvas').getContext('2d');
            ctx.beginPath();
            var edgecolor1 = "rgba(255,159,38,1)";
            var edgecolor2 = "rgba(255,159,38,0)";
            var gradblur = ctx.createRadialGradient(64, 64, 0, 64, 64, 64);
            gradblur.addColorStop(0,edgecolor1);
            gradblur.addColorStop(1,edgecolor2);
            ctx.fillStyle = gradblur;
            ctx.arc(64, 64, 64, 0, Math.PI*2, false);
            ctx.fill();
            var data = ctx.getImageData(0, 0, 128, 128).data;

            var tex = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, tex);

            var pixels = new Uint8Array(128*128*4);
            for(var i = 0; i < 128*128*4; i++){
                pixels[i] = data[i];
            }
            ctx.clearRect(0,0,128,128);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 128, 128, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
            gl.generateMipmap(gl.TEXTURE_2D);
            gl.bindTexture(gl.TEXTURE_2D, null);
            texture = tex;
        }

        function createGLContext(canvas){
            var names = ["webgl", "experimental-webgl"];
            var context = null;
            for(var i = 0; i < names.length; i++){
                try{
                    context = canvas.getContext(names[i]);
                    context.clearColor(0, 0, 0, 0)
                } catch (e){}
                if(context){
                    break;
                }
            }

            if(context){
                context.viewportWidth = cW;
                context.viewportHeight = cH;
            }
            else{
                alert("Faild to create WebGL context!");
            }
            return context;
        }

        function loadShaderFromDOM(id){
            var shaderScript = document.getElementById(id);

            if(!shaderScript){
                return null;
            }

            var shaderSource = "";
            var currentChild = shaderScript.firstChild;
            while(currentChild){
                if(currentChild.nodeType == 3){
                    shaderSource += currentChild.textContent;
                }
                currentChild = currentChild.nextSibling;
            }

            var shader;
            if(shaderScript.type == "x-shader/x-fragment"){
                shader = gl.createShader(gl.FRAGMENT_SHADER);
            } else if(shaderScript.type == "x-shader/x-vertex"){
                shader = gl.createShader(gl.VERTEX_SHADER);
            } else{
                return null;
            }

            gl.shaderSource(shader, shaderSource);
            gl.compileShader(shader);

            if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
                alert("Error compiling shader", gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }
            return shader;
        }

        function createProgram(vs, fs){
            var program = gl.createProgram();

            gl.attachShader(program, vs);
            gl.attachShader(program, fs);
            gl.flush();
            gl.linkProgram(program);

            if(gl.getProgramParameter(program, gl.LINK_STATUS)){
                gl.useProgram(program);
                return program;
            }else{
                alert(gl.getProgramInfoLog(program));
            }
        }

        function createBuffer(data){
            var buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            var arr = new Float32Array(data);
            gl.bufferData(gl.ARRAY_BUFFER, arr, gl.STATIC_DRAW);
            gl.bindBuffer(gl.ARRAY_BUFFER, null);
            return buffer;
        }

        function setAttribute(buffers, attL, attS){
            for(var i in buffers){
                gl.bindBuffer(gl.ARRAY_BUFFER, buffers[i]);
                gl.enableVertexAttribArray(attL[i]);
                gl.vertexAttribPointer(attL[i], attS[i], gl.FLOAT, false, 0, 0);
            }
        }


setup()

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}