FANDOM


Twowgen-demo

The book produced by inputting "AA" into the generator

The TWOW πŸ“• gen (commonly referred to as the booksona generator) is a tool made by Cary's brother, Michael, that produces book images depending on an inputted name.

Its existence was first revealed in HTwins Central by Micahel on June 1, 2016, whereas its first mention in the show fell on TWOW 14A two days later.

Description

The TWOW πŸ“• gen lets users input a name and will generate colors corresponding to the first two characters of that name. Each letter produces its own hue, cycling through the rainbow such that β€œA” is a shade of red, β€œM” is cyan, and β€œZ” is rose. A slightly different cycle exists for numerals so that, instead, β€œ0” is red, β€œ4” is cyan, and β€œ9” is rose.

The generator will then produce a book image by tinting separated parts of a book asset with the colors and layering them over one another.

There are six external images, each a part of the book, that are imported. The first three are for books with a face and limbs, and the other three are for blank books. Users can select whether the book should have a face and limbs or not.

Color generation

Twowgen-formula

The on-site JavaScript implementation of the process

The calculations used to generate the color for each letter are as follows:

  1. Capitalize the character. (e.g. β€œa” to β€œA”, β€œΓ©β€ to β€œΓ‰β€, do nothing with characters that don’t have a distinguishable capital)
  2. Take the Unicode code point of this capital character.
    • If the character is an Arabic digit (β€œ0β€β€“β€œ9”), subtract 48 (the code for β€œ0”) from its code point and divide the resulting value by 10.
    • Otherwise, subtract 65 (the code for β€œA”) from its code point and divide the resulting value by 26.
  3. Take the decimal portion of the resulting quotient (i.e. subtract its floor or perform a modulo by 1). Let this decimal portion be h.
  4. Subtract two thirds from h and take the absolute value of this difference. Then, multiply this absolute value by 2. Subtract this product from 0.3. Compare this difference with 0 and take whichever is higher, and then subtract it from 0.7. Let this third difference be s. (As a formula: $ s = 0.7 - \max\left(0, 0.3 - 2\left|h - \frac{2}{3}\right|\right) $)
  5. Let h360 be h multiplied by 360. Let s100 be s multiplied by 100.
  6. The character’s color, in terms of HSL, has a hue of h360 degrees, a saturation of s100%, and a lightness of 60%.

This process is the same used by Cary when generating default book sprites.

This information can be found by inspecting the JavaScript of the page, specifically the makeLetterTint function.

The ranges of both cycles intersect at hues of 0 degrees (β€œA” and β€œ0”) and 180 degrees (β€œN” and β€œ5”). As such, there are 34 (26 + 10 βˆ’ 2) unique tints that the tool can generate, leading to a total count of 1156 possible books.

Trivia

  • During an older version, Meester Tweester noted that the generator could not create books from a single character input. When Michael resolved this bug, he thus placed a comment, reading,Β 
    // This is dedicated to Meester Tweester
    within the updateBookΒ function beside the code used to fix it.
  • When putting the textures with the sides of the book together, there is a distinct line running through the center.
  • Characters with a hexadecimal value of 10000 (decimal value of 65,536) or higher will start to produce two different colors. This is due to astral characters' composition of two characters.
  • After selecting "Blank", the user cannot revert until the page is reloaded.
    • This occurs because the code erroneously tries to use:
      faceEnabled = checks[0].getAttribute('checked');
      which returns an empty string, unlike:
      faceEnabled = checks[0].checked;
      in the checkChanged function.
  • Depending on the browser, the generated image may have miscolored limbs and no outline, caused by a lack of support for compositing operations.
  • The book’s legs end up in front of the cover, though the first imported image shows that they should be behind. This happens because the second image has the legs uncovered and is placed over the first.

Gallery