Selecting SlideShow Images From Binary String

[TimeTracker]

G'day: Having taught myself JavaScript I occasionally need some help. I want to convert a string of binary digits (e.g. 110101) into a series of images for a continuously looping slide show. Each position in the string has a choice of two small images. The slide show must run from right to left. The total range of images (.gif or .jpg) will be preloaded from which the selection is made after random decimal to binary conversion. How do I select each digit in succession and then create an array of images for the slide show?

I know that "String.prototype.reverse = function (){" reverses a string to run right to left. Here I am using CodeLifter's JavaScript Cross-Browser SlideShow Script With Adjustable Timing and Unlimited Images as my basis.
<script>

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// Set speed (milliseconds)
var speed = 1000

// Specify the image files
var Pic = new Array()
Pic[0] = "1stDigit"
Pic[1] = "2ndDigit"
Pic[2] = "3rdDigit"
Pic[3] = "4thDigit"
Pic[4] = "5thDigit"
Pic[5] = "6thDigit"

function 1stDigit(){
if (String.prototype.reverse.1stDigit.value = "1"){
then Pic[0] = "red11.gif";}
else { Pict[0] = red10.gif";}
}
function 2ndDigit(){
if (String.prototype.reverse.2ndDigit.value = "1"){
then Pic[0] = "red21.gif";}
else { Pict[0] = red20.gif";}
}
etc.

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}

</script>

[jscheuer1]

Yuck! There has got to be a better way. What is the point? I mean what do you want to have happen? If you just want to have a random subset of images loaded each time, all you need to do is shuffle an entire array of images and then show only the first x number of them. Say you have 100 images in an array called slides:

slides.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
var theSlides=[];
for (var i_tem = 0; i_tem < 20; i_tem++)
theSlides[i_tem]=slides[i_tem];

Then run your slide show using the 'theSlides' array of 20 images chosen out of the 100 randomized ones in the 'slides' array.

[TimeTracker]

Thanks, John. Perhaps I should explain the purpose for the code. I can produce my own slide show using gif animation. At the moment I am experimenting with the possibility of mimicking what stem cell therapists hope to achieve, yet without any invasvie technologies. The binary code is linked to the passage of time and every day it advances by 1 digit. By going back to the period when I was still in my mother's womb and targetting the days when my spinal cord and vertabrae started to develop, I am hoping that the body will reactivate those energies and start repairing this part of my body. Each digit is represented by a specific colour or shade of colour. These energies respond to light. Writing a routine in Javascript will make it easier to share it with others who might then be able to benefit. It will also be possible to target other organs in the body simply at the press of a button.
Creating gif animations and the html to use them is time intensive and all I am doing is looking for an easier way. Thank you for showing an interest. If successful maybe you might benefit from it some day. By the way this is my seventh system under development and hopefully my last.

[jscheuer1]

Benefit from what? Animation or gene therapy? Um, animated slide shows are rather simple compared to your code. Perhaps if you were to forget about the gene therapy angle for a moment and explain in plain English what you would like to have happen with your images, I may be able to really help out.

[TimeTracker]

John, thanks. I will start with today's binary code: 1011101000010110111010. What I want the script to do is select the first digit on the right and choose its 1stDigit 0 image (there is always a choice of two), then progress to the 2ndDigit's 1 image, then move on to the 3rdDigit and select its 0 image and so on right to the end. Having selected these means a new array will be created from which the slideshow can run continuously. I am current running 10-15 minute sessions.
Something is happening because every arthritic area in my body is feeling tender. Since this research has never been done before, it is completely unknown territory. However, scienctific medicine cannot help me, so I am trying to help myself.

[jscheuer1]

<script type="text/javascript">
var bin='1011101000010110111010';
var c=bin.length-1;
var cc=1;
var Pic=[];
while(c>-1)
Pic[Pic.length]='red'+[cc++]+bin.charAt(c--)+'.gif';
alert(Pic.join('\n'));
</script>

Notes: The variable bin must be a string, convert it to one first if it isn't one already. To do this, it is easiest to start with the decimal number, ex:

var num=3048890;
var bin=num.toString(2);

The alert is simply to give you visual feedback on the contents of the array generated, it is not required for the code to work.

[TimeTracker]

Thanks, John. I shall see what I can do with this profound piece of code. Naturally as the script develops other issues are bound to arise, e.g. how to store in memory useful information like the Remember Me tick box in the forum log in. I will let you know how things progress. To date my series of calculators features some great scripts. One is over forty pages long.

[TimeTracker]

John, I have a successful script with images flowing in sequence and it looks great. However, whenever I try to define the 'bin' string using prior code to manually convert a decimal value to binary I get error messages like "preLoad is undefined" or "preLoad is null and not an object." This is part of the slide show script.
var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}

How can I get over these error messages? I have already spent hours trying to get around the problem.

[jscheuer1]

You should protect your 'i' by formally declaring it:

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (var i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}

But, this has little if anything to do with your question. There could be other problems but, when converting from a decimal value to a binary string you must start with a decimal number not a decimal string. Once you have a decimal number - say by doing:

var dnum=new Date().getTime();

Then you can do:

var bin=dnum.toString(2);

and you should be good to go. BTW, at present the above method used with my prior code gives an array of about 41 images. The only other problems would be if some or all of the images in the generated image array do not exist or if there is some kind of conflict in variables.

[jscheuer1]

var dnum=new Date().getTime();
var bin=dnum.toString(2);
var c=bin.length-1;
var cc=1;
var Pic=[];
while(cc<23)
Pic[Pic.length]='red'+[cc++]+bin.charAt(c--)+'.gif';