Skip to content
Lexical exploration tool for writing and brainstorming ideas
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
docs
lib
.gitignore
README.md
bundle.js
fridge.png
index.html
kitchen_tiles.jpg
package.json
webpack.config.js

README.md

In Other Words

Live Site

In Other Words is a fun tool for brainstorming. Double-click on words to generate synonyms. Use a single-click to highlight your favorites.

screenshot

Tools/Technologies

Implementation

Words

Synonyms are fetched using the Big Huge Thesaurus API. Exploring a word only calls the API once on the first double-click. A complete list of synonyms is stored internally, and then dispensed in smaller groups with each successive double-click.

Colors

color.js is a lightweight class for handling rgba colors. Colors can be mixed to create fade effects between to colors.

Physics

Collisions are detected by calculating axis-aligned boxes for each word. At each overlap found, a collision object is returned and added to an array. Once all the collisions have been found for a frame, they are resolved by applying an impulse vector to the object.

// board.js

updateVelocities(){
  const collisions = [];
  // Accumulate all collisions between words
  this.words.forEach(wordA => {
    this.words.forEach(wordB => {
      if (wordA !== wordB && wordA.active && wordB.active) {
        let collision = wordA.checkCollision(wordB);
        // checkCollision returns a reference to wordA, and a vector that
        // points away from wordB, proportional to how much they overlap
        if (collision) {
          collisions.push(collision);
        }
      }
    });
  });
  // Once all collisions have been calculated for a frame, they can be applied.
  // Collisions are resolved by updating both the position AND velocity
  // for a dampened but smooth bounce effect.
  collisions.forEach(({object, impulse}) => {
    // Add to velocity. Gives words a little bit of momentum when moving apart.
    object.vel.x += Math.sign(impulse.x)*.3;
    object.vel.y +=  Math.sign(impulse.y)*.1;

    // Directly update position. Quickly resolves overlaps without sending
    // words flying apart at high speeds
    object.pos.x += impulse.x/5;
    object.pos.y += impulse.y/5;
  });
}

Further Development

  • Allow canvas to appropriately resize with window.
  • Factor out physics logic from word.js into a separate class
  • Optimize physics logic to only check for collisions on objects that have recently moved
You can’t perform that action at this time.