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..