Creative Coding: Constellation




Project Name: Constellation—属于你的星系座标
Project Description:
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:

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
Individual project

项目名称:Constellation ——属于你的星系座标
项目介绍:「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):


Some photos & demos:



Voice Interaction

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):

屏幕快照 2017-12-17 下午3.45.23.png

  • 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 😛

Read the svg and creates spheres

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.

屏幕快照 2017-12-17 下午4.31.28

Have star class, control the position in the space
My failed try on spring force lol

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.

From 2D to 3D visual tryouts

IMA Final Show!

Progress I had before the show:

  1. 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’?)
  2. Auto-rotation of constellation
  3. Projection Mapping Setup with Acrylic boards
    1.  I believe to have the space & constellations presented on the glass will have a mystery as well as universal feeling to the audience.
Constellation objects & auto-rotation
The Projection Mapping installation


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.

屏幕快照 2017-12-17 下午6.08.58

2. Pointer & Reference – What are they?!?!

屏幕快照 2017-12-17 下午6.27.44.png

屏幕快照 2017-12-17 下午6.28.11
My notes when I learned what the ** pointer and reference mean.

3. Dot() doesn’t work! How can I get the normal point? Write it yourself.

屏幕快照 2017-12-17 下午6.31.36.png

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:

  1. Rune: What it be used for? “WHY” Meaningful to users. Can be used.
  2. Jiho: Rotate instead of mouse control, in 3D space
  3. Maybe the constellation changes/moves when you are changed. (the one in 50 years old is different from that in 20 yrs old)
  4. My thinking: read BAGUA!!!!! Because it relates to people’s 生辰八字。

Feedback & Inspirations from IMA Show:

  1. yunnan restaurant, related to “Zhu”
  2. Other ways to input user information? Physically, touch, sense, movements, or just type in.
  3. What is the future of development. Not technology, but field of industry that can use the technology to solve problems and pain points.
  4. Also, what if they are couple, how the constellations then. How they affect each other.
  5. Project the visuals on transparent fabrics to have a fake-3d effect.
  6. 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.

For more information, please refer to the video here and the documentation blog here.

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.