Skip to content

peilingjiang/cyberflowers

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cyberflowers

Flowers

Every word is a seed of an idea. And seeds of thoughts with distinct emotion, arousal, attitude, and meaning would grow into different flowers of affects (n. emotion or desire, especially as influencing behavior or action). I built this Chrome extension with my Cyberflowers text-based art to help people find positive or negative sentiments on the web (for fun), with the help of ml5.js sentiment library. Please read my documentation for more about this project.

The project was developed for The World: Pixel by Pixel course (NYU ITP, Spring 2020) under instructions of Daniel Rozin, during the quarantine in COVID-19 pandemic.

How to use it?

  1. Install Google Chrome.
  2. Download this repository.
  3. Go to chrome://extensions in your browser.
  4. Turn on Developer mode.
  5. Choose Load unpacked and load the folder.
  6. Now you should see a cyberflower icon next to the address bar. You can go to any website with some text in it, click on the icon and the extension will start running.
  7. You can either click on the character and sow a new cyberflower rooted on it, or select a section of text and move your cursor over it to quickly sow many. After that, you could also click on "Pick Cyberflowers" to save the picture of the flowers.

Please notice that although the extension requires tabs and activeTab permissions (there will be no pop-ups as everything happens in the background), the extension just uses them for the id of each tab and finding the active one.

Technical References

  1. Determine the position index of a character within an HTML element when clicked - Stack Overflow
  2. Get Position of text inside a HTML element - Stack Overflow
  3. Sentiment - ml5.js
  4. Getting Started Tutorial - Chrome Extension

Links

  1. GitHub Repository for the example p5.js sketches
  2. Embedded p5.js sketch (Matrix)
  3. Embedded p5.js sketch (Formation)
  4. Embedded p5.js sketch (Composition)
  5. Embedded p5.js sketch (Groups)