Simple javascript canvas particle system

Today I had some time over and wanted to test out the html5 canvas so I set up to build a quick and dirty particle fountain in javascript.

It is nothing fancy, just something i put togheter in 30 minutes.

Here is a demo: http://blog.warzone.se/demos/particlefountain/

Javascript:

/**
 *
 * Just a simple javascript particle fountain
 * written by Thomas Brunström, thomas.brunstrom@sogeti.se
 * 
 */
window.onload = function() {
    var i,
    canHolder = document.getElementById('canvas'), // The div that we append the canvas to.
    canvas = document.createElement("canvas"), // Create a canvas object
    windowSize = {x : window.innerWidth, y : window.innerHeight}, // Window size
    mouseLoc = { x : (windowSize.x / 2), y : (windowSize.y / 2)}, // Mouse location
    ctx = canvas.getContext("2d"), // getContext to draw with.
    objects = [], // Array to hold the objects that we draw
    render = function() {
	// Clear the canvas
	ctx.fillStyle = "rgba(0,0,0,1)";
	ctx.fillRect(0,0,windowSize.x,windowSize.y);
	// Loop through all the objects and move them according to their speed and direction
	for(i = 0;i<objects.length;i++) {
	    objects[i].xS += objects[i].speedX;
	    objects[i].yS += objects[i].speedY
	    ctx.fillStyle = objects[i].col;
	    ctx.fillRect(objects[i].xS,objects[i].yS,2,2);
	    // If the object is outside the visible area of the
	    // browserwindow we redraw the object at the mouse posiiton
	    if(objects[i].xS > windowSize.x
	       || objects[i].yS > windowSize.y
	       || objects[i].yS < 0
	       || objects[i].xS < 0) {
		objects[i] = createObject();
	    }
	}
	setTimeout(render,(1000/60));//Set timeout, ~60 updates per second.
    },
    // Helper function to generate a object
    createObject = function() {
	return {
	    col : 'rgba(' + Math.round(Math.random() * 255) + ','
	    + Math.round(Math.random() * 255) + ','
	    + Math.round(Math.random() * 255)+ ',1)', //Color on object
	    speedX : ((Math.random() * 14) - 7),//Speed x
	    speedY : ((Math.random() * 14) - 7),//Speed y
	    yS : mouseLoc.y, //yStart -> position
	    xS : mouseLoc.x //xStart -> position
	};
    };
    // Save the mouse location so we can render from where the mouse is
    canvas.onmousemove = function(e) {
	mouseLoc = {x : e.clientX, y : e.clientY }; 
    };
    // Set up the height and width of the canvas 
    canvas.height = windowSize.y; 
    canvas.width = windowSize.x;
    // Set the background on the canvas to black
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.fillRect(0,0,windowSize.x,windowSize.y);
    // Append the canvas to the DOM
    canHolder.appendChild(canvas);
    // Create the objects
    for(i=0;i<1000;i++) {
	objects.push(
	    createObject()
	);
	
    }
    // Lets start drawing the objects
    setTimeout(render,(1000/60));    
};

Html

<!DOCTYPE html>
<html>
<head>
    <title>Canvastest</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="canvas"></div>
</body>
<script type="text/javascript" src="./script.js" ></script>
</html>

Css:

* {margin: 0; padding:0;}
body {margin: 0; padding:0; height: 100%; width: 100%;overflow: hidden;}
canvas {z-index: 5;}

Get Composer content from another page as a control

Today I needed to display some Composer content from one page on another page in EPiServer, a task not to easy to accomplish when I started to dig into it.

So I came up with a function that takes three arguments, PageData page, Page thePage, string ContentAreaId (The contentAreaId is optional since I used it mostly for a Composer area named MainArea). The function then returns a Control with the content from the ContentAreaId.

        public static Control GetRenderedComposerContent(PageData page, Page thePage, string ContentAreaId = "MainArea")
        {
            Control renderControl = new Control();
            ExtensionPageData structure = PageDataManager.LoadPageStruct(page.PageLink);
            ContentAreaData contentArea = structure.GetContentAreaById(ContentAreaId);
            if (contentArea != null)
            {
                for (var i = 0; i < contentArea.ContentFunctions.Count; i++)
                {
                    ContentFunctionData data = contentArea.ContentFunctions[i];
                    BaseContentFunction contentFunction = PageDataManager.InitContentFunctionControl(ExtensionGeneric.ViewMode.ExtensionNormalMode, thePage, data);
                    renderControl.Controls.Add(contentFunction);
                    Development.UI.Hardox.Masterpages.Hardox.IListItemPosition element = contentFunction as Development.UI.Hardox.Masterpages.Hardox.IListItemPosition;
                    if (element == null)
                    {
                        continue;
                    }
                    element.IsLastElement = IsLastElement(i, contentArea);
                    element.IsFirstElement = IsFirstElement(i);
                }
            }
            return renderControl;
        }

        private static bool IsFirstElement(int i)
        {
            return i == 0;
        }
        private static bool IsLastElement(int i, ContentAreaData contentArea)
        {
            return i == contentArea.ContentFunctions.Count - 1;
        }

I used this function to generate a page with tabs and all the content is rendered on Page_Load with all the content from different pages using a repeater.

So Default.aspx have the following code, notice the placeholder that I use in the repeater to inject the Composer control into.

    <asp:Repeater runat="server" ID="TabsContent" OnItemDataBound="repeaterDataBound">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <li>
                <asp:PlaceHolder runat="server" ID="TheContent"></asp:PlaceHolder>
            </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>

Code behind for Default.aspx (Default.aspx.cs):

        protected void repeaterDataBound(object source, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType != ListItemType.AlternatingItem)
            {
                return;
            }
            PageData p = e.Item.DataItem as PageData;
            e.Item.FindControl("TheContent").Controls.Add(GetRenderedComposerContent(p, Page));
        }