Cyberflowers

Cyberflowers

May 2, 2020


Combining the beauty of digital typography and computational design, Cyberflowers explore a new way to appreciate literal materials in the cyberspace by embodying their content and sentiment in flowers, with characters from the text being stamen and petals. The project was developed with p5.js and demonstrated by the interactive Chrome extension as a proof of concept.

Art of Typography #

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Grew up and living in the digital era, we have built a common sense and intuitively perceive those shapes, composed of curvatures, lines, and solid surfaces, as meaningful pieces. This perception, emerging only in the recent hundreds of years, is so strong, just like our centrality of social cognition of faces, forces us to form meanings around even arbitrary graphics (like this (twitter) recent example during social distancing), however, can also be easily sabotaged. Different coloring, margin, sizes, or even a tiny change to the familiarized radian and stroke length, can easily make us lose the conformity of it being text and rather stimuli our imagination. (For the following canvases, please click on the canvas to switch text.)


Swipe the cursor from left to right to see the formation.


With simple and repeated revolving, I created a new form of text art that I’d like to call Cyberflowers - made of digital typography and grew from the digital texts in the cyberspace. Here you can see how individual letters gradually break their shape-based meaning and become blooming cyberflowers while the curves and lines become cyber-petals and cyber-stamens.

Thanks to p5’s nature of interactivity, I can play with the composition of those flowers. By changing the relative position of the starting letter, the formed flowers can be totally different given the same letter, number, or punctuation.


Move the cursor around to change the composition.


You can see the composition of cyberflowers that I finally decided for each character at the left bottom corner or browse through them below. The compositions were regulated with the vertical and horizontal offsets of the char, the turning angle each time (which will finally affect the number of cyber-petals), and the size of each petal. These data were recorded into a .json file (as follows) that were packed with the scripts.

{
    "en": {
        "A": [[   0,   -1], 11,   4],
        "a": [[   0,   -1], 11,   4],
        "B": [[   0, -1.6], 11, 3.5],
        "b": [[   0,    3], 12, 3.5],
        "C": [[ 0.7,    0], 12,   4],
        "c": [[0.65,    0], 12,   4],
        ...
    }
}

One thing I almost forgot to mention is the actual typography I was using for all the cyberflowers here, also one of the most famous of all time, Times. In spite of its great name, the font is aesthetically out-of-time and has been put on the “Never Use” lists for graphic designers. I can’t agree more with this fact, while proudly used it as a proof-of-concept manner - If Times works, who doesn’t? On the other hand, honestly, the font has advantages that outstand itself from those popular and boring ones. With the serifs directly modified and inherited from English calligraphy, it features soft curves as well as powerful and solid straight lines and sharp corners. Both of which add various flavors into the graphic and give us more power to create different shapes when we don’t have to perceive them as characters. Here’s the final works:


Click on the canvas to change to different chars.


Letters, Words, Lines #

Then I tried to push this arbitrary imagination further, from a single character, to words and lines. 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 a Chrome extension based on the art to help people find positive or negative sentiments on the web (for fun), with the help of ml5.js sentiment library.

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4

The sizes of cyberflowers, shades of their colors, and blooming speeds are all based on the sentiment scores of the content around the picked letter.

How to use it? #

Please go to the GitHub repository page to download the source file of the package, unzip it, and load into your Chrome. (You’ll need to go to chrome://extensions, turn on Developer mode, and choose Load unpacked.)

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.

Demo

The current version (0.3.5) of the extension has been submitted to Chrome Extension Store for review and would be published if no issues found.

Future Works #

  1. Apply the concept to other languages - Katakana, Hiragana, Chinese characters, and more.
  2. Distinguish different cyberflowers by their shapes instead of color, as those with sharper outline and scarer looks should be different from those with soft outline and an appealing look in terms of sentiment and emotion representation.
  3. Instead of using a sentiment model, try emotion models as they’ll have more dimensions and represent the original content more accurate.

References #

  1. Prior works - Peiling Jiang’s accordion book design for A Clockwork Orange
  2. Typography - Wikipedia

From presentation feedbacks:

  1. Nombre Redondo by Marina Victoria

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
  1. GitHub Repository for the extension
  2. GitHub Repository for the example p5.js sketches
  3. Embedded p5.js sketch (Matrix)
  4. Embedded p5.js sketch (Formation)
  5. Embedded p5.js sketch (Composition)
  6. Embedded p5.js sketch (Groups)
  7. Cyberflowers - Chrome Web Store by JPL