My code stories

Half gob smacked I’ll just throw out one more post today. I’ve discovered Oridomi today. In a matter of minutes, I was able to add a cool feature to my page. First, I added a static Google Map image to my page using the Google Map API for position and markers. var customShapes = []; <img src="https://maps.googleapis.com/maps/api/staticmap?center=59.273544,11.096837&zoom=15&size=600x400&markers=color:blue%7C59.273544,11.096837&maptype=hybrid" /> Then I put this image inside a div element that when executed folds the map up like a… yes, map ;) Check out the code… var customShapes = []; var oriDomi = new OriDomi('.myoridommi', { vPanels: 5, // number of panels when folding left or right (vertically oriented) hPanels: 3, // number of panels when folding top or bottom speed: 3200, // folding duration in ms ripple: 2, // backwards ripple effect when animating shadingIntesity: .5, // lessen th...

For my showcase webpage, I wanted to show some of my blog posts as a demo. Now getting hold of rss-content is fairly easy in an rss-reader; but as JavaScript objects – not so much. I came across different pieces and put them together in a solution that gave me a limited number of blog posts as JavaScript objects using ajax and the blogger API. In the following snippet, I fetch the data using ajax and handle the response building an array of blog posts. Please see my inline comments... var customShapes = []; // First I need a container holding the data in a structured way. As I render the content, I traverse through the array handling each object var blogPosts = []; ... // As the query will change in different scenarios I keep part of the query string as an argument in the function call. loadBlogPostAndRender('alt=json-in-script&start-index=1'); ... ... function loadBlogPostAndRender(posts) { $.ajax({ url: 'http://www.someBloggerBlogUrl/feeds/p...

I have been showing animations using canvas in several blog posts lately and implemented a lot of this in my own homepage. Now, if you are doing animations you need to plan how the animations should execute so that the user does not miss the whole show. :) You might want to kick off the animation on a click, or even on a long page – start the animation once the user scrolls down to the animations position. There would be little use in an animation if the show were over when the user gets to it, right? Now, you can hook on to the browsers events using the window object or the document object. The click event I’ve already covered in this post . For the scroll event you need to grab the window object. The easiest way to do this is to use JQuery and extend the scroll event. In this example I’ve added a delay before kicking of the animation. I’ve also calculated the position the user should scroll to before firing the event handler. var target = $("#mainSectionFootprint...

This post will be a short one attending a problem I briefly touched upon in my previous post on animation using canvas. We live in a "mobile first" world and need to pay attention to responsive designing. Try as you might resizing your canvas using CSS you are in for a disappointing surprise. Especially if you are rendering text, it will look all chunky and broken. My solution to this problem is to calculate a factor value based on the window and canvas width. Using this value, I can multiply it with all xes and ys and lengths and widths and so on and keep the relative positions all these shapes have to each other. var ic = window.innerWidth / (canvas.width * 1.2) > 1 ? 1 : window.innerWidth / (canvas.width * 1.2); When adding objects I apply the factor to keep the relative positions. var customShapes = []; // Figures - Balls customShapes.push({ x: ic * (canvas.width / 2 - 58), minRadius: 0, maxRadius: ic * (3), y: ic * (canvas.height / 4 - 152), borderThic...

Object animation using JavaScript is fairly simple once you get the hang of it. In the three previous posts I've explained how to render shapes and how to render a series of shapes. To recap some of the steps I've included the part where I create the objects. Creating classes I've created a generic shape class called CShape, with a set of basic properties that I find relevant for any of the shapes I'm going to render. This also includes properties relevant to animation. Each property is explained in the comments below. // Applies to circles, boxes and lines // X and Y coordinates // expand (bool) growing (true) or shrinking (false) // direction - animating going cw or ccw // speed - animation speed // borderThickness - border thickness // borderColor - border color // color - shape color // clickZone - clickable zone with pointer cursor // speed - animation speed function CShape() { this.x = 0; this.y = 0; this.expand = true; this.speed = ...

In a previous blog post (Painting using Canvas and JS), I explained how to paint a figure using canvas. I explained how to paint the figure inside a single function by setting coordinates and calling stroke and fill. In the following post, (Create an interactive HTML5 Canvas using event handlers.) I presented the clickable area as an object. In this, post I am going to start up by combining the two like the snippet below. I create an object called CustFigure. It has X and Y values and a height and width. This is all we need in order to place it in the grid and to get the size of the figure, say a box. var CustFigure = function (x, y, height, width, label ) { this.x = x; this.y = y; this.height = height; this.width = width; this.label = label; }; function DrawShape(Shape){ var rectWidth = Shape.width; var rectHeight = Shape.height; var rectX = Shape.x; var rectY = Shape.y; renderContext.beginPath(); renderContext.fillRect(r...