Is it possible to add weight to images in a genera

Question

I wish to make a random image generator (which is working fine), however, I was wondering is there a way to add weight to certain images which won't appear as much as others?

I have attached the code below:

<script language="JavaScript">

function random_imglink(){
var myimages=new Array()

myimages[1]="Blue_Car.png"
myimages[2]="Red_Car.png"
myimages[3]="White_Car.png"
myimages[4]="Black_Car.png"


var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()


function confirmRefresh() {
var okToRefresh = confirm("Do you really want to refresh the page?");
if (okToRefresh)
    {
            setTimeout("location.reload(true);",10);
    }
}

</script>
<input type="button" value="Generate a new player" onClick="document.location.reload(true)">


</script>
</a></p>

I do have a SMALL amount of knowledge regarding JavaScript, however, I'm no pro.

Answer 1

Easy way would just to be to increase the length of your array, and then add the images with more probability to hit more times, and the images with less probability less times. You can use a for loop for each.

for (i=0;i<15;i++) {
    myimages[i] = "Blue_Car.png";
}
for (i=15;i<40;i++) {
    myimages[i] = "Red_Car.png";
}
for (i=40;i<80;i++) {
    myimages[i] = "White_Car.png";
}
for (i=80;i<100;i++) {
    myimages[i] = "Black_Car.png";
}

Answer 2

You already have an answer, but I'll post mine anyway.

<script language="JavaScript">
var counter = 0;  // this is just to show that something happens when you randomly get the same car as the previous car.  
function random_imglink() {
  var myimages = [
    {weight: 3,  url: "http://insideevs.com/wp-content/uploads/2012/07/bollare-bluecar.jpg"}, // blue
    {weight: 10, url: "http://4.bp.blogspot.com/-UKeEILt_8nw/UZOCIEMrMVI/AAAAAAAAAvI/X5i-HaJRnTc/s400/red+car10.jpg"},  // red
    {weight: 5,  url: "http://i.telegraph.co.uk/multimedia/archive/02661/Audi-A5-Sportback_2661284b.jpg"}, // white
    {weight: 2,  url: "http://1.bp.blogspot.com/-mojnxHJlWVA/UZ1KShiKMeI/AAAAAAAAHMo/oO7qMo7PJq4/s400/Best-Black-Car-2009_j2bq.gif"} // black
  ];
  // calculate total weigt
  // this example: totalWeight = 20
  // Then we search a random number from 0 to 19.  0,1,2 belongs to blue; 3 to 12 is red; 13 to 17 is white; 18 to 19 is black
  // we add min and max range to the image object, so we can easily return the good one.
  var totalWeight = 0;
  for (var i=0; i<myimages.length; i++) {
    myimages[i].min = totalWeight;
    myimages[i].max = totalWeight + myimages[i].weight - 1;  // example: if the first weight is 3; the max is 3-1 = 2
    totalWeight += myimages[i].weight;
  }
  var ry = Math.floor(Math.random() * totalWeight);
  for (var i=0; i<myimages.length; i++) {
    if (ry >=  myimages[i].min && ry <=  myimages[i].max) {
      var index = i;  // we've got a winner
      break;
    }
  }
  document.getElementById('image').innerHTML = '<img src="' + myimages[index].url + '">';
  document.getElementById('counter').innerHTML = counter++;
}
window.onload = function() {
  random_imglink();
}
</script>

<input type="button" value="New random car" onClick="random_imglink()">
<div id="counter"></div>
<div id="image"></div>

Answer 3

var myimages=new Array();
myimages[0]="Blue_Car.png";
myimages[1]="Red_Car.png";
myimages[2]="White_Car.png";
myimages[3]="Black_Car.png";
// myimages[4] = ...

// All values summed up must equal 1
var probabilities=new Array();
probabilities[0]=0.1;  // 10%
probabilities[1]=0.1;  // 10%
probabilities[2]=0.25; // 25%
probabilities[3]=0.55; // 55%
// probabilities[4] = ... (also need to change the other probability values)

function getImage() {
    var rand = Math.random();
    var probabilitiy_sum = 0;
    for(var i=0; i < probabilities.length; i++) {
        probabilitiy_sum += probabilities[i];
        if(rand <= probabilitiy_sum ) {
            return myimages[i];
        }
    }
    return myimages[myimages.length];
}

// Just for testing:
for(var i=0; i < 10; i++) {
    document.getElementById("textbox").innerHTML += getImage() + "<br />";
}

<div id="textbox"></div>

Answer 4

To extend @ByteHamster's response (accept his, not mine), you can do the same thing with an array of objects to easier keep track of the possibilities.

var myimages = [{
  image: "Blue_Car.png",
  probability: 0.1
}, {
  image: "Red_Car.png",
  probability: 0.1
}, {
  image: "White_Car.png",
  probability: 0.25
}, {
  image: "Black_Car.png",
  probability: 0.55
}];

function getImage() {
  var rand = Math.random();
  var probabilitiy_sum = 0;
  for (var i = 0; i < myimages.length; i++) {
    probabilitiy_sum += myimages[i].probability;
    if (rand <= probabilitiy_sum) {
      return myimages[i].image;
    }
  }
  return myimages[myimages.length].image;
}

// Just for testing:
for (var i = 0; i < 10; i++) {
  document.getElementById("textbox").innerHTML += getImage() + "<br />";
}

<div id="textbox"></div>