Birthday
Visualization
Interaction Design
HTML/CSS Javascript
p5.js
︎ 3 weeks
︎ Individual work
This project focuses on data visualization. It enables users to visualize their birthday
through shapes and sounds.
I designed and coded this website for the “Media Practices: Programming” course at Parsons School of Design.
Visit the website (it takes a few seconds to load)
I designed and coded this website for the “Media Practices: Programming” course at Parsons School of Design.
Visit the website (it takes a few seconds to load)
Concept & Research
I have chosen this subject as I wanted to work with data in a fun and interactive way. Programming enables me to make my interface interactive.
This project is a website interface. Users will enter their birthdate (MM/DD/YYYY) and shapes/sounds will be displayed on the screen. It is a personalized website as it works according to people’s date of birth. Shapes would be displayed as zodiac constellations, a color will be assigned to each shape according to the user’s month and a music will play according to the user’s decade.
This project is a website interface. Users will enter their birthdate (MM/DD/YYYY) and shapes/sounds will be displayed on the screen. It is a personalized website as it works according to people’s date of birth. Shapes would be displayed as zodiac constellations, a color will be assigned to each shape according to the user’s month and a music will play according to the user’s decade.
Instructions
Data in: user’s date of birth (MM/DD/YYYY)
Data out: birthday’s visualization: zodiac constellation (day and month), color (month), music (decade)
Instructions:
1. User enters their birthday (MM/DD/YYYY)
2. Gets their zodiac constellation graphics (MM/DD)
3. Gets their month’s color (MM)
4. Gets their decade’s music (YYYY)
5. Reload the page everytime the birthdate changes
Data out: birthday’s visualization: zodiac constellation (day and month), color (month), music (decade)
Instructions:
1. User enters their birthday (MM/DD/YYYY)
2. Gets their zodiac constellation graphics (MM/DD)
3. Gets their month’s color (MM)
4. Gets their decade’s music (YYYY)
5. Reload the page everytime the birthdate changes
Prototype
