How is the color for each story chosen, and (where) is this saved by Twine? What code creates this svg?
I am interested in changing the color and styling of the maps ā Iām working with importing and exporting large collections of works (40+) and want to use techniques such as more color options to help make them visually distinct.
The color of the bubbles is decided based on the first letter of the story name, which will determine which of the four colors get used for the bubbles. (Aā¦ = green, Bā¦ = cyan, Cā¦ = purple, Dā¦ = red, Eā¦ = green, Fā¦ = cyan, etcā¦)
The color isnāt āsaved by Twineā, it simply uses the first letter every time.
You can see the code which generates those previews in the Twine source here and in the āitem-previewā subdirectory below that (the former code selects the hue, the latter generates the preview using that hue).
Argh. That would be a long-standing bug. The intention was to sum the Unicode values of all characters in the name modulo 40, then multiply that value by 90 to spread it, in theory, across possible hue values in HSV notation. Which is obviously written incorrectly now that you point it out.
Ah this explains why when I loaded 40 student papers sorted by name there were so many long runs of the same color ā way more than could be explained by randomness.
I think maybe (JavaScript is not my strength, and Iām no sure what target output you wanted, but assuming 0-359:
hue() {
// A hue based on the story's name.
return (this.story.name.split('').reduce(
(sum,letter)=> sum + letter.charCodeAt(0),0) % 360
)
}
Neat, thanks. I havenāt used project tasks on github, so Iām not quite sure how they work ā only familiar with issues and PRs. Let me know if you want me to contribute anything.
Iām glad youāve said that, there was me thinking if it was red colored bubbles / boxes there was some major spanner in the works going on for that story! LOL