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.

ZiggidyCreative
  • 335
  • 3
  • 16
  • Why do you need to rearrange the array to access indices in a particular sequence? – Asad Saeeduddin Jul 18 '16 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. – Asad Saeeduddin Jul 18 '16 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. – ZiggidyCreative Jul 18 '16 at 23:45

2 Answers2

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.

4castle
  • 32,613
  • 11
  • 69
  • 106
  • This is closer to what I need, however, the images are not already sorted by their degree. – ZiggidyCreative Jul 19 '16 at 00:01
  • @ZiggidyCreative Ok, so how would you identify what order they belong in? Do the file names have that information? – 4castle Jul 19 '16 at 00:02
  • 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. – ZiggidyCreative Jul 19 '16 at 00:05
  • 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](http://stackoverflow.com/a/9744576/5743988) – 4castle Jul 19 '16 at 00:09
  • 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. – ZiggidyCreative Jul 19 '16 at 00:11
  • Can you [edit] your question to show how the array is currently populated? If you're using a standard incremental for loop, they should be sorted already. – 4castle Jul 19 '16 at 00:12
  • According to your edit, they look sorted to me. I'm not sure what you're asking for. Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/117646/discussion-between-4castle-and-ziggidycreative). – 4castle Jul 19 '16 at 00:17
  • I've made an edit to address more of the question. If you have more comments, please put them in the chat room. – 4castle Jul 19 '16 at 01:32
  • Thanks very much @4castle! I was able to implement almost your exact code. Edited it to fit my needs, but for the most part does exactly what I needed right out of the box. Great job! I really appreciate your help with this problem. – ZiggidyCreative Jul 19 '16 at 02:02
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)
webdeb
  • 12,993
  • 5
  • 28
  • 44
  • 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? – Asad Saeeduddin Jul 18 '16 at 23:54
  • 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`. – ZiggidyCreative Jul 18 '16 at 23:56
  • 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. – Asad Saeeduddin Jul 19 '16 at 00:00
  • Sorry, maybe I don't understood your problem, but it seams like you have to change the formula to your needs.. – webdeb Jul 19 '16 at 00:02
  • 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 – webdeb Jul 19 '16 at 00:04
  • @webdeb exactly. I am having trouble calculating the next degree. – ZiggidyCreative Jul 19 '16 at 00:06