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.

Wilhem! Game Template

I built this  game a couple years ago as a demo of coding skills for a client. It’s not a game so much as a template for building a more complex game.  And for laughs, there’s the  Wilhem scream built in as a sound effect.

How to play: Select a coin, select a square to move to…. or select another occupied square and watch your coin die.

The code is an example of well organized flexible OOP Action-script coding.  My general approach to building Flash applications  of any complexity is a home-rolled MVC set up, observer design pattern, and the use interfaces… for starters. The complexity of the Flash projects I was taking on in the late 2000s, demanded adopting a flexible code organization. The primary objective was not get it out the door, but rather to  build it so we can add bells/ whistles and pull them out on short notice – without starting over from scratch Here is the code for the game template.

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("
"); }

 

Get ‘Er Done

IMG_0003 (1)Back from a two week vacation in the desert. I provided guerrilla art support for a number of projects at The Burning Man festival. What does that mean? About 10 days of driving around loaning out tools, jump starting dead vehicles, getting broken equipment fixed, getting crew members moved off of their work site and into their new camp sites just prior to opening night, bringing volunteers out to projects much in need of bodies – in short – getting-it-done. I had a lot of fun riding in and saving the day.

This is my first year in a long time of not being on an art project and of having my own 4 wheel vehicle. I bought this chopped Dodge RAM cargo van on craigslist a week before coming out and it became my rolling office.

If you saw a blue truck rolling around out there doing the same thing, that was my buddy Stephen from the Temple Crew doing the same thing. We didn’t plan that. Being a couple event OGs saw a need and we jumped in.

Artist at Burning Man are on their own in terms of gear, food, supplies, camp  infrastructure, etc. There are too many projects for it to be otherwise. However, as the event evolves, more and more artist from around the world who have no experience with this wasteland called the Black Rock desert – one of the most inhospitable places on the planet – are coming out and trying to make a go at.  Which provides those of us who have more experience out there, and have the personal connections, to do what we can to keep things moving…. to Get It Done.

I would encourage every participant at Burning Man to look around. Find an art project that is not done. Schlep a bag of ice out to he crew… or some viddles. One crew I spent a lot of time with was eating granola and drinking hot Gatorade for serval days.  If someone had shown up with 6 cheeseburgers and cups of coffee on Tuesday night, they might have mustered the strength to finish up sooner.  Sometimes a crew just needs bodies to throw stuff on a truck. Jump in!  It’s a great way to meet new friends.

 

New code, new dev environments

As part of my effort to try new code, I’ve been mucking around in Python, Node.js, and Ruby on Rails.

Setting up a coding environment is a daunting challenge. I have a brand new mac book air with os 10.8. And I’m doing things in terminal I’ve never done. But I’ve been able to set up the necessary, code, packages, frameworks… what have you all without running sudo.  I don’t know much unix but I know know, sudo is like doing internal engine work on your car.

I’ve been using Homebrew. I don’t know how i found it but it hasn’t let me down.

And Now, For Something Completely Different…

Rafting Guide School
Rafting Guide School

New city, new coast, and now… a new professional pursuit.  I left my awesome job at Yahoo working and ran off to white water rafting guide school in May.  After two weeks of intense training, I returned to Portland, and I’ve begun to pick up work guiding trips on the Clackamas River.

While not on the river, I’m playing around with new coding environments rediscovering why I got into software development in the first place.

I’m grateful to my team at Yahoo.  I had a great run there.