ZiggidyCreative ZiggidyCreative - 4 months ago 20
Javascript Question

Rearrange an array based on 360 degrees

I'm building a 360 degree image rotator, and I have the need to load in images in a specific order. Reason being, there can be a lot of images, and we need to load in as many images from the most angles while providing a view of as much of the object as possible, without the rotation being too jerky.

if we have 360 images that capture the object at a 1 degree angle difference, how would I take an array of images thats in order from 1-360 and rearrange it, to load in the image at index 180, then 90 degrees, then 45 degrees, and so on.

Images array:

var images = [image_001.jpg, image_002.jpg, ...image_475.jpg];


For example, I need to find out the next array index in the sequence. I need to load indexes in this order: 1, 180, 360, 90, 135, 225, 315, 45, etc...

If someone knows of a name for an algorithm this represents, that would be helpful, as well as examples.

Thanks for reading.

Answer

If the array is already sorted by their "degree", then you won't need to rearrange them, just change how you access them.

var images = [], numImages = 360;
for (var i = numImages; i > 0; i = Math.floor(i / 2)) { // or i = i / 2 | 0
    // get image at i
}

This will loop through 360 180 90 45 22 11 5 2 1

Edit:

In order to improve this loop so that it loops at different intervals, you can loop like this:

function asyncAddToArray(arr, index, val) {
    return function() {
        arr[index] = val;
    }
}

var images = [], loadedImages = [], numImages = 360;
for (var j = numImages; j > 0; j = j / 2 | 0) {
    for (var i = 0; i < numImages; i += j) {
        if (!images[i]) {
            var img = images[i] = new Image();
            img.onload = asyncAddToArray(loadedImages, i, true);
            img.src = "images_" + (i < 100 ? i < 10 ? "00" + i : "0" + i : i) + ".jpg";
        }
    } 
}

This will allow you to load in a more sporadic order, so that your user can still view a "less blury" 3D image in the meantime while all the images are loading.

The numbers will be in this pattern: 0 180 90 270 45 135 225 315 22 44 66 88 110 132 ... 359
(To see the full sequence, see this JSFiddle.)

Note: You will need to use loadedImages in order to identify the "nearest" image that can be displayed to the user, and i may be offset by 1 if your file names start at 1 instead of 0.