# Starry Night
MUST 5003 project 01
by Junke Chen

[Codepen Link of Starry Night](https://codepen.io/jc5479/pen/rNLayMm)
[!]The IDcard of first 10 stars have been created, feel free to check them out!

## Source of Inspiration
I was inspired by a website called **"I remember"** which was designed for memory collection and storage. Users can upload their own memories, or view the memories of strangers. Each memory was stored in a single dot of light, which was gathered into a galaxy.
[A description video of "I remember"](https://vimeo.com/91504654)

The visual effect of the site reminds me of **planets in the universe**. Since ancient times, mankind has been creating countless imaginations of planets, and has given birth to countless classic planet settings and stories, and it can be said that the stories of cosmic planets have condensed mankind's greatest imagination and romance.

Therefore, I wanted to design a website with the cosmic planets as the basic visuals where people can **see and share their imagination of the universe**.

In fact, I'd like the planet to look like the animation of "I remember", but I can't achieve that yet, so I've only made a set of stationary planets. Maybe I'll improve it later.

## Design Purpose and Targeted Users
### Design Purpose
* **Knowledge** of the setting of the universe and planet in various cultures of the world (including mythology, literature, animation, movies, games, etc.)
* **Collection** of user-created planet settings

### Targeted Users
* Kids
* Users interested in cosmic planets
* ACG fans

## Introduction of Each Function
### **Auto-play Music**
###### Current Design
* background music "Vincent", set the autoplay and loop play.
###### Improvements
* Solve the problem that sometimes it can't play automatically because of the browser.
* Design a "settings" button, in which users can adjust the music whether to play, music sound size and other attributes.
### Head
###### Current Design
* A title and slogan on the left
* Input(search) and a submit button on the right
###### Improvements
* Press submit button, the planets with search keywords will have the effect of glowing/approaching/rising
* Press submit button, it shows how many planets matching the search requirement are found.

### Left Sidebar
###### Current Design
* Title "selection", 5 inputs of type checkbox.
* There is a button on the right side of the sidebar to control the expansion and contraction of the sidebar, click the sidebar left-margin will increase or decrease the width of the sidebar accordingly.
###### Improvements
* When one or more checkboxes are checked, the planets with related tags will appear to glow/approach/rise, indicating how many planets match the search requirements.
* There will be more classifications as more planetary reserves become available, such as ethnicity.
* Or I will use the tag(button) as selection method.

### Universe(middle)
###### Current Design
* In case the animation is not possible, I inserted 17 planet images in 3 rows, 6, 5, 6 columns each, each with a button on it
* When clicked on the image, a modal (IDcard) appeared with basic information, image and story.
* Click on the modal in the upper right corner to exit.
###### Improvements
* Reserve a certain number of planet pictures, appearing and arranging them randomly (learn from the animation of I remember).
### Bottom
###### Current Design
* The background is a photo of the Earth, there is a button (create your star) in the middle
* When click on it, a modal (IDcard) will appear, with one more submit button than before at the bottom
* Photo is an input with the type of file.
###### Improvements
* Submitted to generate a new planet and additional IDcard
* Further, it is hoped that the visuals of the planet can be shaped based on information submitted by the user, such as color, appearance, etc.

## Conclusion
The process of doing this project was filled with twists and turns.
In the early stages, I've been too obsessed with finding a good idea, but I found that most of the designs I thought were great in my search for inspiration are difficult to implement with my current knowledge base. Even when I finally found I remember, I sacrificed a lot of its strengths.
I actually think that the starry night design upgrade should not be finished only with js. This is something I've been struggling with for a long time, namely that the best way to implement my idea is probably not html, but flash or some other software.
In fact, in addition to the existing design, I also made an opening animation, a big bang effect, and two lines of slogan *"I chase starlight in search of my infinity, even as sixpences enwreathe my reality"*(which I love very much), but I found that the opening animation could not float on top of the original page, nor could it disappear completely after the animation was over. So I finally had to give it up.
I also had the feeling from previous doodle assignments that my work was quite unprofessional, and I'm actually quite uncomfortable with some of the more practical designs. In the project, I thought the interaction part would be fine if it was done, but because of the second problem (i.e., it's hard to do with JS alone), I ended up estimating that the design and effect of the interaction should not be good enough.
But anyway, I get a lot of joy out of it. I will continue to try to appreciate and explore the possibilities of interaction.