<?xml version="1.0" encoding="UTF-8"?>
<!--Generated by Squarespace Site Server v5.11.81 (http://www.squarespace.com/) on Tue, 29 May 2012 12:03:32 GMT--><feed xmlns="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"><title>Blog</title><subtitle>Blog</subtitle><id>http://www.7techgames.com/blog/</id><link rel="alternate" type="application/xhtml+xml" href="http://www.7techgames.com/blog/"/><link rel="self" type="application/atom+xml" href="http://www.7techgames.com/blog/atom.xml"/><updated>2012-02-07T03:35:05Z</updated><generator uri="http://www.squarespace.com/" version="Squarespace Site Server v5.11.81 (http://www.squarespace.com/)">Squarespace</generator><entry><title>HTML5/Javascript - Drawing on the Canvas</title><category term="HTML5"/><category term="canvas"/><category term="javascript"/><id>http://www.7techgames.com/blog/2012/1/29/html5javascript-drawing-on-the-canvas.html</id><link rel="alternate" type="text/html" href="http://www.7techgames.com/blog/2012/1/29/html5javascript-drawing-on-the-canvas.html"/><author><name>Brandon</name></author><published>2012-01-29T22:00:23Z</published><updated>2012-01-29T22:00:23Z</updated><content type="html" xml:lang="en-US"><![CDATA[<p>I've been playing around with canvas, and as noted throughout the web, there are distinct differences in performance across the various browsers.&nbsp; Below is a good example of this; I've created a little wierd/rotation/exploding particle demo, but I used two different method to draw the particles to the canvas, fillRect and drawImage, and the performance difference (anectdotably) is surprising. (Both are drawing 2000 'particles')</p>
<p>
        <strong>Here is <em>fillRect</em>:</strong></p>
    <div>
        <div onclick="drawPixels()"><strong>
            Start/Pause - Click here!</strong></div>
        <div onclick="prepareStuff()">
            Reset</div>
        <canvas id="c" width="450" height="250" style="background: black" />
    </div>
    <script>

        var numParticles = 2000;

        var c;
        var ctx;
        var pxls;
        var i;
        var animating = false;
        setInterval("move()", 10);

        window.onload = prepareStuff();

        function prepareStuff() {
            animating = false;
            c = document.getElementById('c');
            ctx = c.getContext('2d');
            ctx.clearRect(0, 0, 450, 250);
            px = ctx.createImageData(1, 1);
            pxls = [];
            //				x: Math.random() * 800 << 0,
            //				y: Math.random() * 300 << 0,
            // Precompute random pixels so this time isn't included in the tests
            for (var i = 0; i < numParticles ; ++i) pxls.push({
                    x: 225,
                    y: 125,
                    oldx: 0,
                    oldy: 0,
                    xvel: Math.random() * 5000 << 0,
                    yvel: Math.random() * 5000 << 0,
                    r: Math.random() * 255 << 0,
                    g: Math.random() * 255 << 0,
                    b: Math.random() * 255 << 0,
                    a: Math.random() * 128 << 0 + 128,
                    angle: Math.random() * 3600 << 0,
                    xrad: 0,
                    yrad: 0
                });
            i = 0;
        }

        function drawPixels() {
            for (i = 0; i < numParticles ; i++) {
                var px = pxls[i];
                ctx.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + (px.a / 255) + ')';
                ctx.fillRect(px.x, px.y, 2, 2);

            }
            if (animating)
                animating = false;
            else
                animating = true;
        }

        function move() {

            if (animating == true) {
                ctx.clearRect(0, 0, 450, 250);
                for (i = 0; i < numParticles ; i++) {
                    var px = pxls[i];
                    //px.x += (px.xvel - 3500) / 1000;
                    //px.y += (px.yvel - 3500) / 1000;
                    px.oldx = px.x + ((Math.cos(px.angle / 10) * px.xrad) / 100) / 2;
                    px.oldy = px.y + ((Math.sin(px.angle / 10) * px.yrad) / 100) / 2;
                    px.x += (Math.cos(px.angle / 10) * px.xrad) / 100;
                    px.y += (Math.sin(px.angle / 10) * px.yrad) / 100;
                    px.xrad += px.xvel / 500;
                    px.yrad += px.yvel / 500;
                    px.angle++;
                    ctx.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + (px.a / 255) + ')';
                    ctx.fillRect(px.x, px.y, 2, 2);
                    ctx.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + (px.a / 255) + ')';
                    ctx.fillRect(px.oldx, px.oldy, 2, 2);
                    if (px.x > 800 || px.x < 0 || px.y > 500 || px.y < 0) {
                        px.x = 200;
                        px.y = 200;
                        xvel = Math.random() * 9000 << 0;
                        yvel = Math.random() * 9000 << 0;
                        r = Math.random() * 255 << 0;
                        g = Math.random() * 255 << 0;
                        b = Math.random() * 255 << 0;
                        a = Math.random() * 128 << 0 + 128;
                        angle = Math.random() * 3600 << 0;
                        xrad = 0;
                        yrad = 0;

                    }
                }
            }

        }

</script>
    <p>
        <strong>Here is <em>drawImage</em>:</strong></p>
    <p>
        &nbsp;</p>
    <div>
        <div onclick="drawImgs()"><strong>
            Start/Pause - Click here!</strong></div>
        <div onclick="prepareStuff()">
            Reset</div>
        <canvas id="c2" width="450" height="250" style="background: black" />
    </div>
    <img src="http://www.7techgames.com/storage/images/greenradial.png" style="visibility: hidden"
        id="white" />
    <img src="http://www.7techgames.com/storage/images/yellowradial.png" style="visibility: hidden"
        id="yellow" />
    <img src="http://www.7techgames.com/storage/images/redradial.png" style="visibility: hidden"
        id="red" />
    <img src="http://www.7techgames.com/storage/images/greenradial.png" style="visibility: hidden"
        id="green" />
    <img src="http://www.7techgames.com/storage/images/cyanradial.png" style="visibility: hidden"
        id="cyan" />
    <script>

		    var numParticles = 2000;

		    var c2;
		    var red, yellow, green, cyan, white;
		    var ctx2;
		    var pxls2;
		    var i;
		    var animating2 = false;
		    setInterval("move2()", 10);

		    window.onload = prepareStuff();

		    function prepareStuff() {
		        animating2 = false;
		        c2 = document.getElementById('c2');

		        ctx2 = c2.getContext('2d');
		        ctx2.clearRect(0, 0, 450, 250);

		        //px = ctx2.createImageData(1, 1);
		        pxls2 = [];

		        // Precompute random pixels so this time isn't included in the tests
		        for (var i = 0; i < numParticles ; ++i) pxls2.push({
		                x: 225,
		                y: 125,
		                oldx: 0,
		                oldy: 0,
		                xvel: Math.random() * 5000 << 0,
		                yvel: Math.random() * 5000 << 0,
		                color: Math.random() * 5 << 0,
		                angle: Math.random() * 3600 << 0,
		                xrad: 0,
		                yrad: 0
		            });
		        i = 0;

		        white = document.getElementById('white');
		        red = document.getElementById('red');
		        yellow = document.getElementById('yellow');
		        green = document.getElementById('green');
		        cyan = document.getElementById('cyan');
		        white = document.getElementById('white');
		    }

		    function drawImgs() {
		        for (i = 0; i < numParticles ; i++) {
		            var px2 = pxls2[i];
		            var radial;
		            switch (px2.color) {
		                case 0: radial = white; break;
		                case 1: radial = red; break;
		                case 2: radial = yellow; break;
		                case 3: radial = green; break;
		                case 4: radial = cyan; break;
		                default: radial = white; break;
		            }
		            ctx2.drawImage(radial, px2.x, px2.y);
		        }
		        if (animating2)
		            animating2 = false;
		        else
		            animating2 = true;
		    }

		    function move2() {

		        if (animating2 == true) {
		            ctx2.clearRect(0, 0, 450, 250);
		            for (i = 0; i < numParticles ; i++) {
		                var px2 = pxls2[i];
		                px2.oldx = px2.x + ((Math.cos(px2.angle / 10) * px2.xrad) / 100) / 2;
		                px2.oldy = px2.y + ((Math.sin(px2.angle / 10) * px2.yrad) / 100) / 2;
		                px2.x += (Math.cos(px2.angle / 10) * px2.xrad) / 100;
		                px2.y += (Math.sin(px2.angle / 10) * px2.yrad) / 100;
		                px2.xrad += px2.xvel / 500;
		                px2.yrad += px2.yvel / 500;
		                px2.angle++;

		                var radial;
		                switch (px2.color) {
		                    case 0: radial = white; break;
		                    case 1: radial = red; break;
		                    case 2: radial = yellow; break;
		                    case 3: radial = green; break;
		                    case 4: radial = cyan; break;
		                    default: radial = white;
		                }
		                ctx2.drawImage(radial, px2.x, px2.y);

		                if (px2.x > 800 || px2.x < 0 || px2.y > 500 || px2.y < 0) {
		                    px2.x = 200;
		                    px2.y = 200;
		                    xvel = Math.random() * 9000 << 0;
		                    yvel = Math.random() * 9000 << 0;
		                    r = Math.random() * 255 << 0;
		                    g = Math.random() * 255 << 0;
		                    b = Math.random() * 255 << 0;
		                    a = Math.random() * 128 << 0 + 128;
		                    angle = Math.random() * 3600 << 0;
		                    xrad = 0;
		                    yrad = 0;

		                }
		            }
		        }

		    }

</script>
<p>
So, depending on your browser, there's a noticable difference between the two.
</p>
<p>
More on the HTML5 theme, my next side project is a simple 3d engine in Javascript. I'm sure there's one that exists somewhere out there already, but that's no fun!  I already have some of the work done into, once I get some of the rotation math into it, I'll post up a quick demo, so far it's looking pretty good. In the end, though, the canvas is pretty cool and will make websites in the near future to become pretty exciting.  :D </p>]]></content></entry><entry><title>First!</title><id>http://www.7techgames.com/blog/2012/1/23/first.html</id><link rel="alternate" type="text/html" href="http://www.7techgames.com/blog/2012/1/23/first.html"/><author><name>Brandon</name></author><published>2012-01-24T03:49:22Z</published><updated>2012-01-24T03:49:22Z</updated><content type="html" xml:lang="en-US"><![CDATA[<p>So, the site is somewhat up, still messing around with the look and feel and getting the hang of the software. &nbsp;Hopefully soon I'll get some screenshots of our games up, and then hopefully actually get a game or two out! :O :O &nbsp;In the meantime, if you're actually readining this as the only post on the site, <strong>Congrats! You're WAAAYYYY ahead of the curve!</strong>&nbsp;and please come back to the site and see it when there's actually <em>real</em>&nbsp;content here! :)</p>]]></content></entry></feed>
