Uploading images in HTML5 by dropzone.

Uploading images in HTML5 by dropzone.

HTML:

<div id="drop_zone">Drop files here</div>

<output id="list"></output>

STYLE:

 .thumb {

    height: 75px;

    border: 1px solid #000;

    margin: 10px 5px 0 0;

  }

#drop_zone {

border: 2px dashed #bbb;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

padding: 25px;

text-align: center;

font: 20pt bold 'Vollkorn';

color: #bbb;

}

JAVASCRIPT:

function handleFileSelect(evt) {

    evt.stopPropagation();

    evt.preventDefault();



    var files = evt.dataTransfer.files; // FileList object.



    // files is a FileList of File objects. List some properties.

    var output = [];

    for (var i = 0, f; f = files[i]; i++) 

    {

      // Only process image files.

      if (!f.type.match('image.*')) {

        continue;

      }

      var reader = new FileReader();

      // Closure to capture the file information.

      reader.onload = (function(theFile) 

      {

            return function(e) 

            {

              // Render thumbnail.

              var span = document.createElement('span');

              span.innerHTML = ['<img class="thumb" src="',

                                e.target.result,'" title="',

                                escape(theFile.name),'"/>'].join('');

              document.getElementById('list').insertBefore(span, null);

            };

      })(f);

      // Read in the image file as a data URL.

      reader.readAsDataURL(f);

       

      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',

                  f.size, ' bytes, last modified: ',

                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',

                  '</li>');

    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

  }



  function handleDragOver(evt) {

    evt.stopPropagation();

    evt.preventDefault();

    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

  }



  // Setup the dnd listeners.

  var dropZone = document.getElementById('drop_zone');

  dropZone.addEventListener('dragover', handleDragOver, false);

  dropZone.addEventListener('drop', handleFileSelect, false);

TEST IT: http://jsfiddle.net/sdorLj3e/

Loopable Soft Noise

Generating Soft Noise on a Canvas

I'm making a space paralax game and I need a function for soft, loopable noise, to make space a little more interesting.
I've been looking at perlin-noise, but speed is an issue..

So I've been fiddling to generate this:
http://jsfiddle.net/LwDC9/1/

As you can see the texture is generated to be completely loopable at ANY format. (Perlin noise usually needs something like 2,4,8,16,32... etc)
If you want a 2048x2048 loopable texture, you'll have to wait a bit, but it'll get there. You can reduce the complexity of the rendering to optimize.

Also the texture is transparent. This is because I want to use it in a parallax.

So let's use that technique to create a huge (640x480) spaceview animation that you might know from games. (using a parallax)

http://jsfiddle.net/LwDC9/3/
Please try the fiddle, the image doesn't do justice to the animation.
I've put some text underneath the canvas, to show it's pretty transparant.
I'd like to see what the performance is on an iPad or something, but right now, I'm pretty happy with the performance in Chrome.

Now when a star dissappears it immeadeately reappears on the other side, the same goes for the colors. That kind of kills the illusion.
So I made the generated bitmaps bigger than the shown ones. I generate 4 bitmaps of 1024 by 512 and show them in a frame of 800x200.

http://jsfiddle.net/LwDC9/5/

Delft stationshal plafond - virtual reality model

Ceiling is ready

The ceiling of Delft is ready, a great moment.

Now we can see the effect we've only seen in Virtual Reality during the design fase for real.

And the match is perfect.

Resizing, cover, center, fit

When you work with pictures and layouts this problem seems to crop up every time:
How do you handle content that doesn't fit?
With the mobile devices ranging from 16:9 to 4:3 and with strange formats like 3:2, 16:10, 5:3, 8:5 etc
this is becoming a more and more pressing matter.

It's like when your TV tries to fit a 4:3 image in a 16:9 container. Almost all solutions given by my remote control suck completely, why is that? In my book there are only two options:

1. You want to see everything (fit) 

1. You don't want the famous black bars. (cover). For instance if you have a decorative movie about a fire, or clouds, anything that is more atmosphere than content.

http://jsfiddle.net/rRE5L/
Cover exactly (centered) code:
http://jsfiddle.net/rRE5L/1/

So I've been fiddling a bit.. You can set the original size and the box size to see what happens in the different scenarios.

Fit exactly code:

But I'd like to have something a little more precies. I'd like to be able to set a box inside the image, that tells us which part of the image is important. That way we can make it fit the container in the best possible combination of the above solutions AND the script can figure out what that needs to be itself from just that data for EVERY container.

I'd like my script to be intelligent enought to arrive at the conclusions above without further assistance.
So it would try to cover as much as possible, using as much of the picture we can show. Unless that means the important bit gets cropped. In that case it will FIT the important bit (and if that means you end up with bars, so be it. It will center the result, to have the bars nice and even.

Now this is not really a solution for TV's any more, because on a tv screen the important bit moves around. But if your problem is you want to watch a movie with subtitles and still see as much of the movie as possible, it would be a solution. So TV-manufacturers pay attention, I want this on my next one!!!

I'll get back with a fiddle on that soon enough..

Advanced gestures

The idea of gestures comes from touch screens, but it's actually quite usefull for mouse too.
I've been toying with these gestures here:
http://www.snoep.at/labs/html5/demo_gestures/

Should work with both touch and mouse.
Working on the multitouch, can't predict what will happen there yet.

DEMO:

http://www.snoep.at/labs/html5/demo_gestures/

Hybrid can do webapps!

 Hybrid v1.2.0

I'm proud to announce that the hybrid is now capable of delivering first class web-apps.
I can set stage-scale-mode to 'lineair' (which is like flash used to behave) and 'responsive', which is more what you'd expect from HTML5 webapps.

I've just been creating all interface elements that anyone could need in my opinion like scrolling panes, canvases, buttons, lists, menubuttons etc. It's efficient because it uses spritesheets to define the look of all elements, which makes it possible to make it look real fresh and modern and actually add a splash of color here and there..
(I left out some things I don't like, like user-dockable toolbars, I don't get the concept, I think it's just bad design. You should know better than your user where to put stuff..)

If there turns out I need more, I'll make more. But for now, it's party time!
I'll be using this library to make the apps AND the games for Making Games.

This is the first taste of a brand new version of the Hybrid.
So without further ado:

http://www.snoep.at/labs/html5/puppet_editor/

The webapp I've been working on. It looks great on an i-pad (now that I've fixed the menu-button-bug)
I've only tested it in Chrome, Firefox, Safari, IE and on an I-pad.
The interface works great (like I expected) on all.

I actually need this puppet-editor for a game I'm creating right now, so I'm as happy as a fish in a pond.
I'll be focussing on making this thing do stuff, instead of just looking pretty, so I'm writing down my wishlist, to get back to later.

Wishlist

There is always something, isn't there..?

• I'm still in the process of making multi-touch support.
  For web-apps that is a cool feature that makes everybody's life a little easier.
• Also I have a wish to make popups/windowing a little more general and easier, but I haven't figured out an easy syntax yet.
• Flash support is at this stage theoretical.. At this point I still have more experience with Flash interfaces than with HTML5, so I'm sure I will do it soon without a single re-design of the Hybrid's syntax. 
• The popup on the right-mouse still states it's a game engine. While that is true, it has just become something a little more. I just don't have a word for it yet. Any suggestions..?
• Text in the popup is still selectable on drag.. Hmmmmm. A little rethinking of the popup might be in order.
• It doesn't handle the iPad orientation change event without trouble yet. It works if you reload the page in the new orientation, but apple doesn't think of reorientation as resizing. Oh dear, I hate it when people just shout: "This is a special case, normal rules don't apply, because WE call apples: 'oranges' "
  On Orange-iOs that seems to happen quite a lot. (I'm one of those people who started programming when you had to negotiate everything with the bar-tender if you were programming on a Mac. I might be slightly biassed, but I never understood this urge to make life hard on developers.)

Games maken (les 1)

Games Maken in HTML5 , les 1

Voor wie?

Deze lessen zijn specifiek gemaakt met vragen die gesteld werden door leerlingen die ik een gameworkshop gaf. Ik heb de afgelopen vijf jaar regelmatig game-workshops gegeven.

Ik vermoed dat deze lessen geschikt zijn voor iedereen die nog nooit iets met games heeft gedaan, maar dat wel graag wil. Het is ook een goeie bron om voor het eerst te leren programmeren.

Wat heb je nodig?

Een computer met internet. Verder NIKS! Je kunt dit in een internetcafé huren voor de prijs van een kop koffie..
We gebruiken alleen software die gratis (op het web) toegankelijk is en je hoeft niks te installeren.

Verhuisd naar:

http://games-maken.blogspot.nl/2014/06/games-maken-les-1.html