top of page

Neon Night

​霓虹夜

by Xiaomeng Chen, 2019

My Responsibilities

%E8%B5%84%E6%BA%90%2012%404x_edited.png
%E8%B5%84%E6%BA%90%2012%404x_edited.png
%E8%B5%84%E6%BA%90%2012%404x_edited.png
%E8%B5%84%E6%BA%90%2012%404x_edited.png
%E8%B5%84%E6%BA%90%2012%404x_edited.png
%E8%B5%84%E6%BA%90%2012%404x_edited.png
%E8%B5%84%E6%BA%90%2012%404x_edited.png
%E8%B5%84%E6%BA%90%2012%404x_edited.png

About the work

My favorite cyberpunk is often shown as a combination of the neon light, neon texts, and metropolis constructions. This work, programmed in P5.js, tells a leisure life in the cyberpunk unity.

​

Neon light is a focus of the cyberpunk culture. Such light brightens the leisure life. The design takes the neon elements, such as geographical shapes, stripes, and texts to incorporate with the neon light and colors. I randomly and generatively arrange these neon elements in front of some city constructions like window and wall.

​

To achieve the idea, colors are carefully picked from the cyberpunk images. Geometrical shapes of stripes and circles, and graphics of neon texts are also cut from neon-theme images (from unsplash.com). Besides, jazz sound is applied. The animation of the texts is running following the sound rhythm.

我最喜欢的赛博朋克以夜晚的霓虹最为难忘，多表现为霓虹文字和大都会建筑的组合。结合P5.js编程，使我的这个艺术作品具有可交互性，更好的展现出赛博朋克的夜晚。

 

霓虹灯是赛博朋克文化的焦点。这种光线照亮了娱乐生活。设计采用了霓虹元素，例如几何形状，条纹和文字，以及霓虹色彩。在编程设计中，用户对页面的每一次刷新都可以致使霓虹元素随机生成，散布在屏幕的任意随机位置，散落在背景图片--城市建筑（如窗户和墙壁）的前面。此外，可交互的元素还有背景音乐 -- 爵士。霓虹元素的震动节奏将按照外界声音节奏运行，当一切外界声音静止，只有爵士乐播放时，霓虹元素将根据爵士乐的节奏舞蹈震动。

Testings

Prototype:

The design is generative at each refresh of the page. After pressing the mouse, the background will be changed, Type “p” and the sound will be paused. Type “s” to save the screenshot. When the sound is playing, the texts will be jumpy the same with rhythm of the sound. When the sound stops playing, the texts will be jumpy the same with user’s environment sound (user interacts through microphone).

1st Iteration:

Users indicated from heuristic evaluations that the “User control and freedom” and “Aesthetic and minimalist design” heuristics been violated.

Based on users' suggestions, the background has been replaced by two images. They will be shown individually and each by each though the control of pressing the mouse. When the mouse is pressed, the background will be changed while the music will be play or pause. I remove the “type ’s’ to screenshot” interaction but add a “keyPressed” function. When the key is pressed, a spot with random neon colors will be created and drop from the top edge to the bottom, which is unpredictable and romantic.

2st Iteration:

Based on users' suggestions, I re-wrote instructions on the left top corner. It changed from “Press mouse to play or pause; Press key to create spots” to “Click background to play/pause music; Press keys to create spots”. Besides, the music volume has been reset from “0.3” to “0.5”. To solve the problem of overlapping images, I utilized the “for” loop of setting numbers of images to map the x position of them, while their y positions were still randomly picked. Last, I set the size of particles (spots) to change as the microphone input, and their size range will be “(10, 60)”.

Challenges

This is my first time working with P5.js. Errors were quite a lot which I found was hard to resolve.
Users put forward a few ideas which are hard to achieve.
The effects are not strong enough, and I wish I could play with 3D next time.


这是我第一次学习并创作使用P5.js。我遇到了很多难以解决的问题，尤其是在用户测试的时候，用户们通常会提出一些诉求。以用户体验为基准，我努力一遍遍编辑更改我的设计，并由此学到了很多知识，也扎实了我的编程思维。此外，我认为霓虹夜的整体效果不够强，缺少一定感染力，我希望今后可以在编程中实现3D效果。

bottom of page