Week 4

Project file 1
Project file 2
Live Demo

This project explores how written language can be translated into a new visual language. Each word is transformed into a circle, with its size determined by the length of the word. Each letter is assigned a specific color and arranged in concentric layers from the outside to the inside. Using the same encoding system, different texts generate different colors, rhythms, and compositions, transforming written information into a visual form that can be both seen and decoded.

Credits & References

youtube, p5js reference, Chatgpt

Week 2

Project file 1
Project file 2
Project file 3
Live Demo

I want to create a system that translates sentences into images. Every sentence has a different structure, so I want to build a visual coding system that transforms different characteristics of a sentence into shapes, colors, sizes, transparency, and lines. In this way, each sentence generates a different image while following the same set of coding rules. When different variables change, the generated images change accordingly. Word length and number affect the size and quantity of the shapes, thereby influencing the image’s proportions, density, and visual complexity. The proportion of vowels controls the transparency of the shapes, affecting the overall visual depth; meanwhile, the first letter of each word determines the shape’s color, allowing different words to be visually distinguished. I believe word length, the number of words, and the first letter are the more important variables because they determine the image’s primary visual characteristics, whereas transparency and line style are relatively secondary. Although different sentences produce completely different images, the encoding rules remain constant, so the overall visual system remains recognizable.

Credits & References

1. https://youtu.be/POn4cZ0jL-o?si=m1hfcy_OJukc04xJ 2. Chatgpt

Week 3

Project file 2
Project file 3
Project file 4
Live Demo

My source is the sentence “All goes as you wish.” I created a visual coding system that translates features of the sentence, including word length, word count, vowel ratio, and punctuation, into shape, size, proportion, color, and lines. Conditional rules control the proportions and rotation ranges of the shapes, while controlled randomness changes their positions and orientations within defined limits. I also added mouse interaction to control the size of the gradient circles. Each output is different, but they all follow the same visual system.

Credits & References

1.https://www.youtube.com/watch?v=o9sgjuh-CBM 2.Chatgpt

Week 1

Project file 1
Project file 2
Live Demo

At first, I find traditional graphic design software easier and more direct. I can use a mouse to quickly create shapes, while coding takes more thinking because I need to turn my ideas into code. However, I think coding can help me think more carefully about the design process. When I create a shape, I need to break it down into smaller steps. It also helps me notice repeated tasks. For example, when I was making polka dots for the background, I started thinking about how I could use code to create many dots more quickly. This made me think of different ways to solve a design problem. The downside is that coding is new to me, so it can be a little difficult at first and takes time to learn.

Credits & References

I didn't know how to view the mouse coordinates in real-time, so I turned to ChatGPT for help.