Don’t know what you could do with this, but it seems the australian cancer research foundation launched a site where user can submit their photos and be a part of an interactive video experience. Check it out here: https://theone.cancerresearch/.

I noticed after I had submitted that I was taken to a url: https://theone.cancerresearch/i-am-103 – the key here to notice is that this url looks like an id in disguise…

The “103” at the end gives it away, it’s an auto incrementing system, if you submit another webcam photo, you’ll get 104. So you can guess that these posts are being submitted automatically. So I dug into the page. You can see straight away that there is an image linked in Amazon S3 where my webcam photo was stored:

My first thought is that you can just simply visit the url for all the photos: https://theone.s3.amazonaws.com/faces, but this was of course protected since it’s amazon.

Since these photos are being added automatically, we can assume there is no moderation. I would venture there are some dick pics on the site. I’m half in the mood to write a script tonight that will index all of the images, and give me a quick gallery of everyone’s user submitted photos, not sure what I’d find…

So you’ve created a model in THREE.js and it’s not exporting your textures or your models are showing up blank when you import them with collada loader.

This one’s nice and easy. Just make sure you are checking the boxes to include UV textures:

Then make sure your file paths are right. The collada file is just XML so you should be able to open the file with your favorite text editor. Make sure the URLS that point to the texture files are correct and that your textures are copied into the directory with your collada file.

That’s it!

Let’s get your geolocation, super easy:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

You could use it like this:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

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.

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

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.

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:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

/**
             * 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);
                
            }

[/pastacode]

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:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

/**
             * 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
                };
                
            }

[/pastacode]

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.

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

its been a while.

here’s the sitch.

You want to use a library like this: https://github.com/Nyx0uf/NYXImagesKit or this: https://github.com/square/SocketRocket but you dont know how to import it!

That’s because you need this: http://www.raywenderlich.com/41377/creating-a-static-library-in-ios-tutorial

Also, if you want to find the library and its not showing up you may have to do this: http://www.blog.montgomerie.net/easy-xcode-static-library-subprojects-and-submodules#Configure_the_app_target_to_use_the_static_library_s_headers_when_building and you may need to change the urls to something more appropriate like: “$(TARGET_BUILD_DIR)/include”

Just read about half way down the page where it says “Method 2: subprojects”. That ought to tell you everything you need to know.

super simps, cya

on your pi or your linux installation, you should probably have something called iptables

sometimes you don’t want to run say, nodejs, as root. but you can’t make it listen to ports lower than 1024 without being root.

in that case just redirect all traffic on port 80 to something like 8080. then run your node app to listen to port 8080 and you are good to go!

[pastacode lang=”bash” message=”” highlight=”” provider=”manual”]

iptables -A INPUT -i eth0 -p tcp --dport 80 -j ACCEPT
iptables -A INPUT -i eth0 -p tcp --dport 8080 -j ACCEPT
iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080

[/pastacode]