HTML How to randomize images on passage?

[kothen]

Hi all, I apologize if this is a stupid question, I am new to Twine and have a very limited understanding of it. However, I have searched and could not find an answer that worked for me.


I am using Twine with Sugarcube, and what I am trying to do is have it so the image/gif/video that appears on a passage is randomly selected from a pool of images. Such as visiting a person and 1 of 10 images are shown. Right now my "Fix" for it is to just have the link to a passage lead to a random passage with a different image using

<<set _randomNumber = random(1, 8)>>
<<switch _randomNumber>>
<<case 1>>

But I feel this is a very sloppy and bad method and would much prefer to have one passage be able to display multiple ones.

Thank you!

 

[Satori6]

<<set _src to randomImage('park',8)>>
<img @src=_src>

Then your JS could be something like:

window.randomImage=function(passage,count){
  let extension='.jpg',
      id=((Math.floor(Math.random()*(count)+1)).toString()),
      folder= pathToYourPicFolder;
  return folder+passage+id+extension;
}

"passage" would be the subfolder. For example MyGame/pics/park

You could also store the amount of pictures for each passage in arrays.

pics=[
['park','house','lake'],
[8,6,3]
];

Then you'd just pass the folder name

<<set _src to randomImage('park')>>
<img @src=_src>

And use something like

window.randomImage=function(passage){
  let extension='.jpg',
      id=((Math.floor(Math.random()*(pics[1][pics[0].indexOf(passage)])+1)).toString()),
      folder= pathToYourPicFolder;
  return folder+passage+id+extension;
}

You can also use the Twine widgets to recreate the same functionality, but if you're already writing JS, I think it's simpler to just write it as it's meant to be.

 

[guest1492]

Here are 2 quick ways to do so:

You must be registered to see the links

Assuming that your images all share a naming scheme such as img_1.jpg, img_2.jpg, etc. you can do something like so:

<img @src="'img_' + random(1, 10) + '.jpg'">

You must be registered to see the links

SugarCube includes some custom methods for arrays such as random() and pluck(). So you can store all your image locations in an array and then use the relevant array method to select one.

<<set _array = [
    'cat.jpg',
    'dog.jpg',
    'pig.jpg',
    'zebra.jpg'
]>>

<<set _img = _array.random()>>

[img[_img]]

/* or a combo of both */
<img @src="_img">

 

[kothen]

Thank you all for the replies! I'm still very new to all of this so I'm going to take some time to attempt this and fill it in with my images/terms. My images are stored locally in the img folder of my story, would I still have to use the whole entire direct path such as C:/user/documents/twine (etc) ?

I sort of jumped head first after watching some tutorials so it's all very confusing to me.

 

[guest1492]

You can google relative file paths. If you are on the twine discord, there is also a post in the faqs.

 

[Satori6]

Thank you all for the replies! I'm still very new to all of this so I'm going to take some time to attempt this and fill it in with my images/terms. My images are stored locally in the img folder of my story, would I still have to use the whole entire direct path such as C:/user/documents/twine (etc) ?

I sort of jumped head first after watching some tutorials so it's all very confusing to me.

I usually do something like this:

 if(document.location.href.toLowerCase().includes("/temp/")){path=MyFolder+'img/';}else{path="img/";}

And I also store "MyFolder" as a global SugarCube variable for ease of use and change.

 

[Satori6]

I usually do something like this:

 if(document.location.href.toLowerCase().includes("/temp/")){path=MyFolder+'img/';}else{path="img/";}

And I also store "MyFolder" as a global SugarCube variable for ease of use and change.

To elaborate a bit: The "/temp/" check is to see if I'm running it from Twine, which stores it in the temp folder (at least in Windows). That allows me to be able to load the images while in the testing environment.

If it's not in the temporary folder, it simply loads them from the "img" subfolder within the game's folder (regardless of its location) without the need to use absolute paths.

 

[guest1492]

Satori6
Maliface (a user on the Twine discord server) wrote

You must be registered to see the links

that makes use of the HTML

You must be registered to see the links

element. Even though you already have a method that works for you, you might still want to take a look at it.

 

[Satori6]

Satori6
Maliface (a user on the Twine discord server) wrote

You must be registered to see the links

that makes use of the HTML

You must be registered to see the links

element. Even though you already have a method that works for you, you might still want to take a look at it.

Thank you! I'll check it out.

 

[kothen]

Hey all, thank you very much for your suggestions and help, Current I found a method that works for me. Now, given what I've heard about other games such as Yandere Dev, This is probably another really unrefined method. But it involves using


ie.

<<set $imagechoice to random(2)>>

<<if $imagechoice is 0>><img src="image1.webm">
<<elseif $imagechoice is 1>><img src="image2.webm">
<<elseif $imagechoice is 2>><img src="image3.webm">
<</if>>


For now it works for my needs as this project I'm working on is just a personal test that doesn't have any plans to be published at all. Once I get more experience with Twine and the Coding in general, I will attempt to use the methods you posted again as I could not for the life of me figure out how to translate them into my own code as I am missing all the fundamentals.

 

[Satori6]

Hey all, thank you very much for your suggestions and help, Current I found a method that works for me. Now, given what I've heard about other games such as Yandere Dev, This is probably another really unrefined method. But it involves using


ie.

<<set $imagechoice to random(2)>>

<<if $imagechoice is 0>><img src="image1.webm">
<<elseif $imagechoice is 1>><img src="image2.webm">
<<elseif $imagechoice is 2>><img src="image3.webm">
<</if>>


For now it works for my needs as this project I'm working on is just a personal test that doesn't have any plans to be published at all. Once I get more experience with Twine and the Coding in general, I will attempt to use the methods you posted again as I could not for the life of me figure out how to translate them into my own code as I am missing all the fundamentals.

This works for small sets of pictures, but it's still extra work.

If you're having problems with implementing or understanding some specific part, feel free to continue asking. That's the point of this forum.

 

[kothen]

This works for small sets of pictures, but it's still extra work.

If you're having problems with implementing or understanding some specific part, feel free to continue asking. That's the point of this forum.

Thank you! in that case I suppose I'm confused on how to use the first part of your first post. Would if be possible to see a full example on how to use that? I don't understand exactly which parts I am supposed to replace in the example code with my own file names.

<<set _src to randomImage('park',8)>> <img @src=_src>

<<set _src to randomImage('park',8)>>
<img @src=_src>

Then your JS could be something like:

window.randomImage=function(passage,count){
  let extension='.jpg',
      id=((Math.floor(Math.random()*(count)+1)).toString()),
      folder= pathToYourPicFolder;
  return folder+passage+id+extension;
}

"passage" would be the subfolder. For example MyGame/pics/park

You could also store the amount of pictures for each passage in arrays.

pics=[
['park','house','lake'],
[8,6,3]
];

Then you'd just pass the folder name

<<set _src to randomImage('park')>>
<img @src=_src>

And use something like

window.randomImage=function(passage){
  let extension='.jpg',
      id=((Math.floor(Math.random()*(pics[1][pics[0].indexOf(passage)])+1)).toString()),
      folder= pathToYourPicFolder;
  return folder+passage+id+extension;
}

You can also use the Twine widgets to recreate the same functionality, but if you're already writing JS, I think it's simpler to just write it as it's meant to be.

I guess for example, Lets say I have 10 images in img/Home. And the files are named 1.png , 2.png, 3.png etc. How would I edit the code exactly to have that work? As well as the array function you mentioned? Thank you very much in advanced.

 

[Satori6]

Thank you! in that case I suppose I'm confused on how to use the first part of your first post. Would if be possible to see a full example on how to use that? I don't understand exactly which parts I am supposed to replace in the example code with my own file names.

I guess for example, Lets say I have 10 images in img/Home. And the files are named 1.png , 2.png, 3.png etc. How would I edit the code exactly to have that work? As well as the array function you mentioned? Thank you very much in advanced.

This would go into your Story Javascript:

window.randomImage=function(passage){
  let pics=[   
        ['Home'],
        [10]  
      ];
  let id=(Math.floor(Math.random()*(pics[1][pics[0].indexOf(passage)])+1)).toString(), 
      folder=(document.location.href.toLowerCase().includes('/temp/')?'C:/MyGame/Folder/img/':'img/')+passage+'/';
  return folder+id+'.png';
}

You would replace the path with your game folder.
That code is to check if it's being run using the "Play" button within Twine, in Windows.
If you don't need it, you'd just replace the code for:

window.randomImage=function(passage){
  let pics=[   
        ['Home'],
        [10]  
      ];
  return 'img/'+passage+'/'+(Math.floor(Math.random()*(pics[1][pics[0].indexOf(passage)])+1)).toString()+'.png';
}

And then in your passage you could simply type:

[img[randomImage('Home')]]

Spoiler: Nerd stuff

You don't have permission to view the spoiler content. Log in or register now.

 

[kothen]

I appreciate this so much you have no idea. I'm going to spend time tinkering and playing with this now to see if I can get it too work.

 

[Satori6]

I appreciate this so much you have no idea. I'm going to spend time tinkering and playing with this now to see if I can get it too work.

No problem. Let us know if you run into any issues.