Project Name: Constellation—属于你的星系座标
Constellation is a creative coding software which generates users’ personalized, unique constellations.
Through the analysis of a user’s identity with Chinese Taoism Bagua Symbol and the implementation of nature algorithm into the programming, the project enables a user to see his/her own constellation that represents his/her identity. At the same time, the constellation itself is a living object that changes over time with the user.
It is also my exploration of using programming language and algorithm to represent the beauty of nature.
Exhibition & Press:
- 2018.4 Shenzhen Design Week 2018 | 深圳2018设计周
- 2018.1 – 2018.2 Infinite New Born Exhibition | 光影秘境·旭 交互媒体艺术展
- 2017.12 NYU Shanghai Interactive Media Arts Fall 2017 Final Show | 上海纽约大学交互媒体艺术专业2017秋季学期期末展
- 2017.12 Featured project in press MANA New Media Art Station(新媒体艺术站) for the exhibition report
- 2017.12 Featured project in DFRobot Maker report for the exhibition
The project was featured and showed in IMA Fall 2017 Final Show. It was exhibited as an installation work with projection mapping.
Tool: XCode, OpenFrameworks
Course: Nature of Code @NYU Shanghai
项目介绍：「Constellation」是一个程序生成艺术作品。通过解读中国道家八卦图，以及创意程序编写，生成属于用户自己的星系。这同时也是作者寻找自然之美在电脑中体现的探索与发现。[个人独立作品，课程期末项目，课程名称：Nature of Code]
展览及报道：1）Interactive Media Arts Program End-of-Semester Show; 2)「新媒体艺术站」展览报道案例作品第一位；3）DFRobot创客活动博客案例项目之一
编程工具：Xcode, OpenFrameworks, c++
The complete video can be watched here(VPN required): vimeo.com/nanzhaonz/constellation-long
Some photos & demos:
The sound interaction was implemented into the project during Infinite New Born Exhibition. It was the research and testing for Nan’s capstone project. She was trying to use voice and sound information to generate personal constellations.
- Interaction Implementation: 这次特意增加声音交互，为capstone做用户测试
- Visual Changes: 无线到有线。更改视觉，观众可以更直观的看到星系中的牵引力变化。感受到那一股拉扯力
- User Testing & Learnings: 发现参与者们在看到自己的声音对于星座的影响以后，会更加地去继续持续说话，而我却设定了时间让星座在开始变化时停止反应，这是很影响用户体验的呀。怎样在用户看到变化后继续看到自己的影响，以及星座变化开始的state辨认需要我继续去平衡。
How it generates the constellation:
Behind the scene (Structure of the code):
- Particle class
- the smallest unit in the system.
- Represent the stardust.
- Using sin/cos to create a dynamite visual effect
- Blob class
- have multiple particle objects rotating with each other.
- Represent an asteroid
- Star class
- have a main blob object + an array of blobs
- main blob -> the main star
- the blob array -> the asteroids of the star, attracted by/followed the main blob
- have separation & attraction with other stars
- Spring class
- creates the oscillation force between stars; links stars together for better form as well as dynamite connections
- represent the mutual influence between stars
- a blob array was created to follow the path between stars, for a natural moving connection visual effect.
- StarAgent Class
- represents the center of a constellation, an anonymous force that connects all the stars
- have the oscillation/spring force to all the stars
- Constellation Class
- contains all the classes above
- represent a constellation
Some screen recordings of my journey on creating a constellation 😛
A story of SVG: I couldn’t load the svg file of the bagua symbol unless I change the svg code, adding inherit + specifying the width and height.
The visual expression:
Thanks to Moon’s suggestion, I used blend mode (add) and have multiple objects layered with each other to create a shining, glowing visual effect.
IMA Final Show!
Progress I had before the show:
- Constellation class which enables me to have multiple constellation objects on the screen. (the original idea is to make it convenient to be project mapped on the wall, although it ended up failed, it helped me to reconceptualized the project! ***What if there is a couple? How their constellations influence each other’?)
- Auto-rotation of constellation
- Projection Mapping Setup with Acrylic boards
- I believe to have the space & constellations presented on the glass will have a mystery as well as universal feeling to the audience.
Lessons learned + strugglings + solutions + future thoughts:
I challenged myself to learn OF because I really want to create some complex but beautiful visual effects. Since OF enables me to create more particles with faster speed than Processing and p5.js, I learned OF(c++) for this project. Yeh.
Also, as you may know, OF has a lot of addons/librarys with super cool effects using GPU or OpenGL. I took a lot of time starting learning and realized it was impossible to master them in 1-2 weeks. I also didn’t want to use the code when I totally didn’t understand what the codes were talking about.
After discussing with the professor, I decided to write all my classes and physics objects myself so that I could really control the world I created.
2. Pointer & Reference – What are they?!?!
3. Dot() doesn’t work! How can I get the normal point? Write it yourself.
4. Demo version of the program!
- mode 0: nothing
- mode 1: draw Pakua Symbol
- mode 2: Pick Stars
- mode 3: Star going to the constellation
- mode 4: Burst out the particles(blobParticles) & blobSprings on the lines
- mode >=5: Spring Force Applied and you can start playing.
5. Installation for the IMA FINAL SHOW – it’s never early to prepare
One of the lessons I learned is that it is never too early to start preparing. I knew that I would definitely do projection. And I would use a glasslike material as my screen. I started research very early and bought different kinds of materials from Taobao beforehand. I also reserved a projector from ATS 1 week before the show. Yes, prepare early girl.
Then I spent a night on trying the materials and setting up the project.
What will happen then? Future Development
Feedback & Inspirations from the in-class presentation:
- Rune: What it be used for? “WHY” Meaningful to users. Can be used.
- Jiho: Rotate instead of mouse control, in 3D space
- Maybe the constellation changes/moves when you are changed. (the one in 50 years old is different from that in 20 yrs old)
- My thinking: read BAGUA!!!!! Because it relates to people’s 生辰八字。
Feedback & Inspirations from IMA Show:
- yunnan restaurant, related to “Zhu”
- Other ways to input user information? Physically, touch, sense, movements, or just type in.
- What is the future of development. Not technology, but field of industry that can use the technology to solve problems and pain points.
- Also, what if they are couple, how the constellations then. How they affect each other.
- Project the visuals on transparent fabrics to have a fake-3d effect.
- Hang the acrylic boards in the air and project mapping.
My Thesis Project:
The form of the constellation makes me think about the relationship between individuals and the vast universe. We are all different, and how can we be categorized by only 12 constellations (no matter from Greek 12 zodiac constellations or Chinese 12 animals) ? We should have our own unique constellations in this vast universe that represents the individual life meanings.
Therefore, this project, along with the voice interaction exploration for the Infinite Exhibition, became my early stage research for my thesis project.
My notes/documentations when I was doing the project:
Last but not least,
Thanks to all the people who helped me, gave me suggestions, or inspired me. Thanks to Moon and Rune. Thanks to Dan Shiffman’s videos. Also thanks to myself. Thank you all.
It’s my journey of Nature of Code, but it never ends. See you later.