Matrix selection


Hey gang,

I have a project where I’m reading in a single image from a large set, and the image is chosen by multiple parameters. To illustrate this, I made a simple car example where you pick the car model, the style, and the color, and it goes amongst the 27 images (3 x 3 x 3) to find which one to display:

I used a brute-force method using nested groups. This works OK, but I was wondering if anybody knew of a more elegant method, i.e. something in .js which will give me more flexibility and a project I can actually safely scroll in :wink:

Any thoughts?

Thanks in advance! (264.6 KB)

(π•„π•šπ•”π•™π•’π•–π• 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

Background image is a property that can be change. Just create a timeline that changes the background image. Heh, just add 27 keyframes with a different image for each. No custom JavaScript necessary. When a button is clicked, it moves the timeline to the right image. Tedious but effective.

Alternative method, each button get’s an ID. The ID name corresponds to the image name. So, when the image is clicked, that event triggers the changing of the background image.

Additional reading…


Hi Photics-

These are great links, and I thank you.

Indeed, I’d thought of the animation idea, but it misses the matrix quality of the selection problem. If Silver is pressed, should it be calling up Silver BMW Sedan or, say, Silver Rolls Convertible, or one of the other 7 choices? Thinking about this, I suppose I could do string manipulation, so that my ID names are Silver.BMW.Convertible and it keeps replacing the different parts of the string…