The Engine The word-doodle engine transforms raw text into organized art via a three-step generation pipeline:
1. Vocabulary Analysis & Frequency Mapping -When text is provided, the engine parses the string into individual tokens. It converts all words to a uniform uppercase format to ensure accurate counting. Then it calculates how many times each unique word appears, identifying the maxFrequency to establish visual weight for each word.
2. Word Weight Scaling -Size: fontSize is determined by a random base value scaled by the word's frequency weight. -Weight: High-frequency words (above 80% weight) are automatically assigned a fontWeight of 700 for extra impact. -Orientation: To make it more visual appealing, there is a 15% chance a word will rotate 90°, switching to a vertical placement.
3. Collision Detection -Coordinate Generation: The engine picks a random (x,y)coordinate within the viewport. Boundary Validation: It compares the candidate's bounding box against every word already placed on the canvas, including a 5px safety padding. The Retry Loop: If an overlap is detected, the engine attempts to find a new spot. It will try up to 70 different positions before skipping the word. This prevents infinite loops and keeps the browser performance smooth even with high word counts.
Check out the live demo here: https://j-ncel.github.io/word-doodle/