by Yiming Li
For the journals on this project, I decided to put the reflection part at the end. First of all first, I want to show you some pictures. These are some of the cyberpunk style cities that have become more popular in recent years. Take a look at these dazzling steel jungles, what are the features? Flashing neon lights, billboards, and a wealth of visual elements fill every corner of this image. Sometimes I think it’s maight be a trend, to cover the surfaces and silhouettes of various buildings with all sorts of eye-candy billboards and text. Because people always like things that are eye-catching enough.
And this doesn’t just happen in the virtual world.Here’s a photo taken in Chongqing, a veritable cyberpunk city in China.
It is difficult for us to define this phenomenon as good or bad. And we’re not here to criticise anything today either. But I think it is undoubtedly a great challenge to the human eye’s ability to receive and process information. Our society is rapidly evolving, and the word ‘prosperity’ becomes visualised in these neon flashes. But where is the real line between ‘prosperity’ and ‘disorder’?
Many cyberpunk works tend to use Chinese and Japanese to enhance the presentation. The language, as a hieroglyphic, will seem more difficult to understand especially to those who don’t know the language, and everything will seem even more confusing against the colourful lights. But in another hand, the square words add a bit of order to the chaos as well.
In Taiwan in the last century, people had different definitions of the word ‘prosperity’. The neon signs flashing under the night sky, the crowds of people and cars running around. The sound of trams passing by mixed with the smell of the night – such scenes have appeared in many Hong Kong-Taiwan films of the last century. I think it’s a special emotion that people have for the nightlife. The millennium period is a special point in time, the aftermath of the rapid development of society has reached every lonely individual. The confusion about the future and the loneliness of being in a metropolis are intertwined to form this unique style.
This special emotion for the night is also reflected in various cultural and creative products of the same period. Artists and singers put complex and varied emotions into words. The intertwining and collision of their own styles of emotion and urbane words have resulted in many popular classics, and even songs that are sung to this day.
A famous Hong Kong singer, Sandy Lam, is a representative figure of this period. She was one of the hottest pop singers during the millennium. Her lyrics are full of the unique flavour of that period and her own personal feelings about life. Her album released in 2000 still has 40 million plays on Spotify today.
Looking at the above, I strated to think can lyrics represent a period of time and space? Probably. The words pave a street, a brick and mortar, a signboard, they all trying to tell some individual story that happened at some point in time. And that’s what the singers are trying to do as well. And I have to think about how to visualise these abstract emotions in words and design.
I learnt a lot more in depth about processing techniques in this unit and I decided to try and achieve this effect using processing. I’ve seen a lot of interesting work converting images into 2D text before. I think I probably understand how it works, but not all of it. Of course, it all starts with a simple loadString().
I’ve been looking online for some tutorials, and the two images above show them rendered in roughly the same way, except that one of them is in 3D. My idea is relatively simple and doesn’t require a 3D effect. I find the part of the code I need in these tutorials and then try to understand it before adding it to my own project.
In fact, in processing to achieve this similar effect in the code ideas are roughly the same. The basic logic is to let the processing analyse the pixel points in the image and replace the text. This is my personal understanding so far. But before we can do that, we need a photo and a ‘simpler version’ of it. The colours of the pixels should not be too cluttered, and the best way to do this is to create a black and white silhouette of them.
Next, since it is to be replaced with text, we necessarily need a txt document. Here again, we have the aforementioned Sandy Lam, with a few randomly selected lyrics from her songs. By her lyrics to help me construct this scene of words.You also have to choose a .ttf font that you downloaded in advance, and it must support Traditional Chinese, otherwise Processing won’t be able to display the text.
This part counts as prep work, then I can start writing code. There’s basically not much to this part, inserting images and fonts for the whole sketch, as well as using float(); int(); char(); and introducing some functions and variables that will be used later.
I’m going to add something here. I’d like to add some kinetic effects to this text and to the final generated effect, like floating up and down, so that this project doesn’t look very boring. So the above lines of code also include functions to control the rate at which the text floats up and down on the axes, the size of the text, the sparsity of the text, etc.
There are some parameters that are often wrong and adjusting them took me a long time. A lot of the problems didn’t seem to make sense, but they were actually solved after many iterations of checking. The generation is pretty good, although I don’t have a way to show a dynamic screenshot right now. The final display is below:
Also, if I change some parameters, I can achieve different effects. What I think is cool about this code is that you can totally change it to different images, and even though it’s a bit simple, you can still do some really cool effects with it. Also, the time for this project was slightly tight for me, and I think I still need to refine my programming skills a bit more, and hopefully I can do better next time.
*Warm tip: Squint your eyes and look at the distance.