0

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.

Improve this question
3
  • Why do you need to rearrange the array to access indices in a particular sequence? Commented Jul 18, 2016 at 23:43
  • PS: @Whoever voted to close. This question is not asking for a "book, tool, software library, tutorial or other off-site resource". Please actually read the close reason you are selecting. Commented Jul 18, 2016 at 23:45
  • I guess the images don't need to be re-arranged per-say, but as long as I can sort over them in the correct order and load them in, that would be ideal. Commented Jul 18, 2016 at 23:45

2 Answers 2

Reset to default
3

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 >>= 1
    // 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 >>= 1) {
    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.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

This is closer to what I need, however, the images are not already sorted by their degree.
@ZiggidyCreative Ok, so how would you identify what order they belong in? Do the file names have that information?
Each image is named image_00n.jpg. 1 up to any number really. I've extracted each frame from a video using ffmpeg. Each frame is numbered. Not all exports have the same amount of images.
In that case you won't need an array at all (unless you need to cache the values). You could fetch the file name as you loop with "image_" + i + ".jpg". Also, if you need to pad the i with zeros, see this answer
yes, I'm loading the images off of the server as an array buffer, so I'm caching the data in a new Image(). Using canvas to display image data, hooked up mousemove event to the canvas, which loops through the image array.
|
1

Algorithm? Oh please, this is Math from 3. grade ;)

// this is an array.. with n images..
var images = [....];

// this is the angle, which is a value between 0 and 359
var angle = 0...359;

// this is a mathematical expression
var currentImageIdx = Math.round((360 / (images.length - 1)) * angle)
Improve this answer

6 Comments

Is this JavaScript? Assuming 1...360 is shorthand for an array, how can you multiply the entire array by a number? Also, what does dividing 360 by 359 accomplish?
This doesn't exactly account for sorting. This works to grab the array index, but I still need to be able to calculate the next angle.
Again, I don't understand what the point of 360 / (images.length - 1) is. images.length is 360. You're producing the fixed value 360 / 359 == 1.0027855153203342, and then multiplying this with the angle. I don't understand what this accomplishes.
Sorry, maybe I don't understood your problem, but it seams like you have to change the formula to your needs..
your have your degrees like (0...360) it can be 90, 180, 220.. whatever... you want the correct image, right? so calculate images per degree, and you get the index of the image for this degree.. @AsadSaeeduddin
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.