code

HTML5 Geolocation

Let’s get your geolocation, super easy:

function getLocation(callback) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(pos) {
            var loc = {
                lat: pos.coords.latitude,
                long: pos.coords.longitude,
                heading: pos.coords.heading
            };
            callback(loc);
        });
    }
} 

You could use it like this:

getLocation(function(loc) {
    console.log(loc)
});

 

code

HTML5 Compass

I’m starting to use this site again!

let’s start off with a simple one: HTML5 Compass.

Just an FYI its mostly only partially supported (http://caniuse.com/#search=deviceorientation).

Super simps, just include the script below: and you should be up and running with the compass. NOTE: just remove the jquery closure if you arent using it.

(function($) {
    $(window).load(function() {
        if(window.DeviceOrientationEvent) {
            $(window).on('deviceorientation', function(evt) {
                console.log(evt.originalEvent.alpha)
            });
        } else {
            console.log('no compass');
        }
    });
})(jQuery);

You might want to think about using something like modernizr to check as well. Also, you might want to think about wrapping it in a closure so you fire this after the window loads.

Google_Animation

CSS Boxes

I have no idea. It was inspired by something I saw on a google site, so I stole the images and re-wrote the animation sequence.

DEMO

webgl

BoilerGL

A simple boiler plate for those of us new to webgl.

Just grab a copy here: https://github.com/GSPBetaGroup/BoilerGL and get started by removing the default geometries.

You have two functions at the top of the script. One to “init” the experience:

/**
             * Init the page with defaults. Add your objects to the scene here. All the initialization is take care of.
             * 
             * By default, the scene initializes with mouse movement & click events. The scene animates with a fly in
             * and has user controls centered around (0,0,0).
             * 
             * @returns {undefined}
             */
            function init() {
                
                // ADD YOUR THINGS HERE
                
                // box
                var geometry = new THREE.BoxGeometry( 300, 300, 300 );
                var material = new THREE.MeshLambertMaterial( { color: 0x00FF00 } );
                var mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );
                interactiveObjects.push(mesh);
                objects.push(mesh);
                
                // sphere
                var geometry = new THREE.SphereGeometry( 50, 32, 32 );
                var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
                var sphere = new THREE.Mesh( geometry, material );
                sphere.position.x = 500;
                sphere.position.y = 500;
                scene.add( sphere );
                interactiveObjects.push(sphere);
                objects.push(sphere);
                
            }

You can see I’ve added a box and a sphere here, by default. Feel free to remove these. Then, a second function called “loop” where you can control the animations of the items:

/**
             * Tween is where you define your behavior. By default the scene automatically calls this function
             * every animation frame.
             * 
             * @returns {undefined}
             */
            function loop() {
                count += .001;
                for (var i = 0; i < objects.length; i++) {
                    var o = objects[i]
                    if (i % 3 == 0)
                        o.position.x += Math.sin(i + count) / 2
                    if (i % 3 == 1)
                        o.position.y += Math.cos(i + count) / 2
                    if (i % 3 == 2)
                        o.position.z += Math.cos(3 * i + count) / 2
                };
                
            }

You can see here, I’m the objects above are gently floating, but you can remove this as well!

That’s it. Two functions, should be fairly easy to get started now.

Thanks to Marpi for contributing the initial code to get this started. I simply re-worked his code to make it easier to use.

myroom

My Room

A simple webgl experiment where I cut a hole in my room so I can watch TV. Going to finish this by uploading a movie of battlefield instead of the demo video. Code to come later, but for now check it out. I’m using a boilerplate I put together called BoilerGL.

DEMO

webgl

Dark World

My first real webgl experiment using threejs. I’ve made some custom textures and will continue to mess around with this until I get something that is super weird and crazy.

DEMO

webgl

WebGL Skybox Texture Mapping

So more to come…on all shit webGL.

I’m just getting into this and I’d rather learn than blog, so I’ll come back with more info and tutorials later. Until then, i wont be posting much, just reminders for myself, which is how I’ve always treated this blog.

Tip of the day:

To map the textures properly, you need to know (px, py, pz, nx, ny, nz) – these are names that people name individual images in a cube map texture.

Here’s the layout:

That’s it for now

Every Chip Gets A Dip

Tostitos believes that no chip should ever be without dip. So for March 23, National Chip & Dip day, we decided to take that sentiment both very seriously and quite literally by giving everyone in America named Chip his (or her?) own free Tostitos dip. For real. All Chips have to do is visit EveryChipGetsADip.com, submit proof of their “chip-ness,” and get ready to receive the deliciousness. While supplies last, of course.

This project was built one week from conception to completion. It was meant to be a quick shot and was met with overwhelming success. We earned lots of media and gained a ton of traction with the “couponer” community, receiving over 14k submissions and changing what we thought was possible internally.

The Team

Kia handled the front end. Patrick produced the project.

My Role

I built the backend and the front end form validator. I also built the admin tool the allowed submissions to either be approved or denied.

Technologies

  • Server
    • NodeJS: app running on server to bother serve the site and the admin interface
    • MySQL: Amazom RDS instance to store the user information
    • Amazon S3 for image storage
    • Websockets: to sync all admin interfaces so each admin can receive realtime updates and work in parallel
  • Front end
    • JavaScript: form validation &  submission was done via Ajax