Center image vertically and horizontally, CSS and jQuery a.k.a. image lightbox

In my opinion you should use libraries rather than role your own solution, but I came across this Stackoverflow question and couldn’t resist rolling my own lightweight, lightbox implementation.

Here is a link and to my jsFiddle where the magic happens.

Check out the results:

lightbox 300x259 Center image vertically and horizontally, CSS and jQuery a.k.a. image lightbox

Posted in Code | Leave a comment

Socualizer – Social Media Visualizer

 

socualizer sample 300x149 Socualizer   Social Media Visualizer

 

Socualizer is a product I’ve been developing for the past 3 months with the goal of integrating Social Media streams with high-end, club / concert grade visuals. The end result will be a turn-key, brandable, social media visualizer, with a powerful dashboard to control the streams and entire visual experience.

Technically, Socualizer is built using node.js, node-twitter, instagram-node-libthree.js, tween.js and WebGL and some soon to be released on GitHub utility classes developed by myself to push the limits of double sided planes using WebGL.

Socualizer is currently in private beta.

Posted in Works | Leave a comment

Playground – Multiplayer, Collaborative, Visual Experience for Mobile

Recently I was asked to join Tangible Interaction in developing a Chrome Experiment that used WebRTC, an emerging web technology that enables P2P browser interaction (tabs talking to other tabs), without sending the data over the server.

We developed Playground, which enables 5 friends in close proximity (100m) to join a “room” where each player will have a different controller that determines a visual outcome.

The project was a lot of fun to develop and break new ground using an up and coming web technology on mobile.

The app can be found on Chrome Experiments here.

large 300x225 Playground   Multiplayer, Collaborative, Visual Experience for Mobile

Posted in Code, Works | Leave a comment

Code Tabs: Online HTML, JS, CSS, and Processing Editor with TABS

I’ve released an early stage version of my online editor for html, js, css, and processing called “Code Tabs” today.

One thing missing from a lot of online editors is the ability to create custom tabs, a pretty essential feature for any project with more than a couple of hundred lines of code.

I’ll be using and testing Code Tabs this summer in a course at my school: IAT 167 Digital Games. The course is basically an introduction to game programming for students with a multimedia / multidisciplinary background.

You can find Code Tabs on GitHub.

See this post for a list of features.

Posted in Code, News, Processing, Works | Leave a comment

Code Tabs Preview

Simple HTML, CSS, JS, and Processing editor, with TABS!

examples 300x274 Code Tabs Preview

Features:

  • TABS! No other online editor has them!
  • Code hinting (autocomplete suggestions) for above languages
  • Syntax highlighting (obvies…)
  • Selection match highlighting
  • Brace match highlighting
  • Brace / Tag completion
  • Brace / Tag folding
  • Import and use any Javascript library (image ex: three.js)
  • Import or Drag and Drop images for use in Processing and Javascript tabs (it’s a cat!)
  • Built in webcam module (data-webcam=”true”)
  • Fullscreen mode
  • Mobile friendly
  • Export .zip of all tabs in tidy project folder
  • Setup in HTML markup using: data-option=”value” (easy as pie!)
Posted in Code, News, Processing, Works | 1 Response

Close a Twitter Bootstrap Popover when Clicking Outside

A vexing topic for me and a bunch of other people on stackoverflow, the problem being that Twitter Bootstrap Popovers don’t close when you click outside to anywhere else on the document.

This might not be your desired outcome, simply: when clicking outside a popover, wouldn’t you want it to close?

The code below makes this possible:

$('[data-toggle="popover"]').popover();

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

A note about the use of $(':not(#anything)') as my body selector. This is due to iOS not binding click events to ‘html’ or ‘body’.

To put it short, this is a bulletproof way to detect clicks anywhere on the document (providing you don’t have a div with an id of ‘anything’).

Live Example Here

Posted in Bootstrap, Code | 24 Responses

Twitter Bootstrap Carousel Full Markup Example

I really like Twitter Bootstrap but I’ve noticed that their example page only shows minimal markup for some of the more exciting features, leaving out little details like the “carousel-caption” class that I had to use view source to find.

If you were looking for how they do their clever captions at the bottom of each carousel image, look no further.

Since the carousel may or may not play automatically I recommend triggering it with Javascript, live example here.

Below is the full markup of a Twitter Bootstrap Carousel

<div class="container">
    <div class="row">
        <div class="span12">
            
            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
                    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                    <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="http://mattlockyer.com/wp-content/uploads/2011/11/Example8-720.jpg" alt="http://www.mattlockyer.com">
                        <div class="carousel-caption">
                             <h4>First Thumbnail label</h4>

                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="http://mattlockyer.com/wp-content/uploads/2011/11/Desktop2.jpg" alt="http://www.mattlockyer.com">
                        <div class="carousel-caption">
                             <h4>Second Thumbnail label</h4>

                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="http://mattlockyer.com/wp-content/uploads/2011/11/tree.jpg" alt="http://www.mattlockyer.com">
                        <div class="carousel-caption">
                             <h4>Third Thumbnail label</h4>

                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

Enjoy!

Posted in Bootstrap, Code | 2 Responses

HTML5 Canvas API, Paper.js, Raphael.js, Processing.js: Performance, Benchmarks and a New Trick

An original benchmark posted here showed that Processing.js was lagging by 68-68% behind native Canvas API calls performing essentially the same thing.

I was curious where the bottleneck for Processing.js was in the original test so I exposed the processing canvas context to the sketch itself in the head of the document.

Then I simply used the native Canvas API calls from within the Processing.js draw loop like so:

//placed in head of document to expose processing canvas to sketch
var pctx = processingCanvas.getContext('2d');

//in processingjs draw loop
pctx.fillStyle = "#000";
pctx.fillRect(0, 0, 50, 50);
pctx.clearRect(0, 0, 100, 100);

My updated test is here and…

Using the native canvas api from within Processing.js is MUCH faster.

Perhaps the fastest (in my tests it outperformed the original Canvas API calls by 2-4% on Chrome and Android)!!!

Check this out to see how you can use the native Canvas API in your sketches for a performance boost!

Posted in Code, Processing | Leave a comment

Minecraft Steve Easy Costume Template (wine box design)

Recently was invited to a costume party. I really hate having to come up with a costume and buy a bunch of cheap crap that will eventually be thrown out or donated so I decided to go a little crafty this time…

I looked at some other templates for Minecraft Steve costumes but they were cumbersome and required too much custom cardboard (what a waste)!

So I decided that a simple wine box would do the trick and made my own template, hope you enjoy!

20130223 200507 225x300 Minecraft Steve Easy Costume Template (wine box design)

857375 10151775653583709 1603125681 o 168x300 Minecraft Steve Easy Costume Template (wine box design)

859296 10151775654038709 249271803 o 1 300x169 Minecraft Steve Easy Costume Template (wine box design)

Minecraft Steve Template Wine Box PDF and PSD (.zip)

Posted in Unfiltered | 4 Responses

aMotion Toolkit Video Recording Preview

preview5 300x152 aMotion Toolkit Video Recording Preview

preview6 300x238 aMotion Toolkit Video Recording Preview

Developing a cross platform motion texture engine in Java for creating affective motion textures with a node based, data flow UI.

Using the Xuggle library for recording H264 video at a seemless 60fps.

Using LWJGL for OpenGL and OpenCL.

Using Jetty to create HTML5 UI that uses WebSockets so the application can be controlled through the web by phones and other devices collaboratively.

Posted in School, Works | Leave a comment