Tag Archives: javascript

Osciallating Divs – Looking back at old code

I went back and looked at some old code in an experiment with the GSAP (aka Greensock) animation library.
I and i thought – oh, wow, that’s how I coded javascript a few months ago. With a bunch of globals.
So I cleaned up the code hiding that nastiness away. And the code is now on github.

View the animation here on you desktop, tablet or phone.

Note that the animation plays  choppy on older mobile devices when the alpha is tweened.

Ipad Web App

Built out an Ipad esales webb app following a Lynd.com tutorial by Chris Converse.  See it in web browser here. Drop the hash #browser, to be prompted to add the app to an ipad. When the app loads on an Ipad, the user is prompted to add it to the home screen so that it looks and feels like a native IOS app. This is all javascript, but I applied revealing modular javascript pattern.  I’m applying this pattern to all my javascirpt  work.  It take more set up, but it really tames javascript. This app:

  • repsonds to Landscape/Portrait
  • has google map
  • animated home screen

Single Page Web Applications Book Review

Single Page Web Applications
JavaScript end-to-end
Michael S. Mikowski and Josh C. Powell

Set those frameworks aside – for the moment – and roll up your sleeves, Single Page Web Applications, by Michael Mikowksi and Josh Powell is the equivalent of eating your spinach. With nothing but javascript, jQuery and a couple plug-ins, and a database, they take you step by step through the process of building a out a javascript end-to-end single page chat application.

Coming from a class based coding language, I had this down in spades. But how to build complex apps in a proto-type functional coding language like Javascript without diving into a world a of pain?

The authors employ a repeating MVC pattern for architecting their code. If you’ve ever built anything of complexity – nothing new there. But if not, this is a good place to grok that concept.

But it’s the particulars of Javascript that of interest of course. Before they dive in the deep end – there are some javascript uniqueness to to tackle. I think I can say, that after reading this book, I finally, truly get closure.

In this book you learn to build feature modules – with well defined APIs and strong isolation. They start simple and add complexity and are careful to explain their reasoning all they way through.

Only once in this book did a hit a wall and that was setting up the MongoDb database on a mac.  I posted my issue on the discussion forum and got a quick response from the author.

I’m re-reading this book so that I can truly grok the concepts and techniques – and thereby sketch out and build well defined and scoped feature modules of any sort – a day planner, a slide show, a video player – that can be popped into the larger application with minimum fuss.

Buy this book. Read it – read it again – and jump on the discussion forum.

 

RWD Sortable Gallery

Photo_GalleryI spent a a day going through a tutorial on creating a sortable photo gallery that scales to screen.

This relies on fancybox to provide light box functionality to hi-res images.

On resizing the screen, the thumbnails  animate to a new grid lay out.  Other design elements such as the navigation and background art adjust for computer, tablet or phone.

At phone screen size, the light box  behavior is disabled and a straight targeting of the hi-res photos occurs.

This is a type of  product I’ve built in Flash many times, but it’s good to now have one in javascript that i can pull off the shelf  and customize rapidly.

To do-

  • Make the gallery load content dynamically.
  • Test on IE.
  • Test on windows versions of Safari, Chrome, Firefox
  • add light box behavior back to images when screen goes from less than phone screen size up to tablet size or larger.

 

Box2DWebb, CreateJS Interactive Canvas animation

Interactive animation – bouncing balls – created with the Box2dWebb and CreateJS frameworks.  This is a canvas application that will play on mobile.

The bouncing ball logic is all handled by Box2dWebb – which is a port of a physics engine used in ActionScript.

Code break down:

Animation properties (bouncieness, etc) are set up in the init. A bit map (the soccer ball) is loaded into a createJS sprite and loaded on to the stage (canvas).  A box2d object is created and added as a property of the createJS objects.   On the ticker, the bitmap tracks the x,  y position, and rotation of the  physics object as it bounces around.

Basic game logic such as creating the balls, keeping and displaying the ball count on the canvas are all handled with standard javascript.

TODO
Dive into the Box2DWebb code and figure out collision detection.

Note – As a Flash developer, I have found the CreateJS frame work to be both helpful and a little frustrating.  There are a couple key version discrepancies that I had suss out on my own.  Although, I did not use Flash for this little example, the CreateJS Toolkit that is built into Flash CC exports versions of the frame work that are not the latest.  Apparently there is an update to Flash Professional that is due out soon and this will be addressed.

More canvas game set up experiments forth coming. Stand bye.

Javascript/CSS animation test – Oscillating dot animation

A test using greensock GASP and jquery – with:

Note that the animation plays  choppy on older mobile devices when the alpha is tweened.

var MYAPP={};
$(document).ready(function() {
	MYAPP._body = $('body');
	for (var i=0; i<100; i++) {
		initSQ(i);
	}
	$(window).on('resize', onResize);
	//get query string value
	if ($.url().param("tweenAlpha") == 'true') {
		MYAPP.tweenAlpha=true;
	} else {
		MYAPP.tweenAlpha=false;
	}
	onResize();
});
function onResize(){
	var origX = $(document).width()/2;
	var origY = $(document).height()/2;
	if (MYAPP.tweenAlpha) {
		TweenMax.set($("div.bip") , {x:origX, y:origY, opacity:0});
	} else {
		TweenMax.set($("div.bip") , {x:origX, y:origY});
	}
	$("div.bip").each(function(index, element) {
	   if (origX < origY) {
		   rad = origX/2;
	   } else {
		   rad = origY/2;
	   }
		var ang = Math.random()*2*Math.PI;
		var x2 = (rad)*Math.sin(ang) +  origX;
		var y2 = (rad)*Math.cos(ang)  +  origY;
		TweenMax.to(element , 2, {x:x2, y:y2, opacity:1, delay: index*.01, repeat:-1, yoyo:true});
    });
}
function initSQ(i){
	MYAPP._body.append("
"); }