PROJECT PRESENTATION & REFLECTION
Github Code Link https://github.com/christynatalisa/CCLab_Christy/tree/master/your_city
Live View Link
https://christynatalisa.github.io/CCLab_Christy/your_city
Presentation Text (“for public use”):
Your City – Christy Natalisa
Interactive Vizualization
- The Project Subtitle
A tool where you can build your own city, whichever way you like. - Elevator Pitch
“Your City” would be an interactive visualization with the topic of architecture/culture, where the audience can generate a layout of their own city whichever way they like, using user input elements of sliders and buttons. - Abstract
This topic of architecture/culture would explore the possible layouts and uniqueness of any city, since the outcome would be dependent on the audience’s liking and ideas of what kind of layout they want to build. I have selected this content because I’m interested in the beauty of different layouts of different cities. Taking famous landmarks, buildings, and skycrapers, the user would be able to appreciate the architecture representation from different cultural backgrounds and origins. - Images (1-3 images, each with a short caption. These can be animated GIFs. their purpose is not to explain details of your project, but solely to look good, to arouse interest, to attract the viewer into trying your project out for themselves.)
An example of a construction of a city
Reflection (“for internal use”):
The primary audience for this text is your future-self, your classmates and your instructor. You are asked to describe the process you went through in producing the work, as well as reflecting on the outcomes and your learning.
This reflection should at a minimum address the following:
1) Process: Design and Composition
Describe the design process of your project. Explain your decisions that lead to the visual appearance of your work, as well as the user interaction. Make sure you include iterations, things you tried but didn’t work, and conclusions you drew. Discuss what you have found of value to build upon in your project, and in what ways your project is different or better.
The beginning of the layout structure started simply since all the appearances of user input elements such as the buttons and sliders were still defaulted. The selections of the PNG were also not entirely unified since each of the versions of buildings varies (some 3D, some 2D, others realistic style and sketch style).
After further designing the interface using code, I added the styling of the buttons and sliders, such as the 3d like the appearance of the buttons, which is interactive and change colors when the user hover and click on it, and also the slider which has a delicate lighting effect when being hovered and clicked, manipulating the CSS styling and mainly taking reference from the w3schools website.
2) Process: Technical
Describe the technical development process of your project. Describe the technical challenges that you faced, solutions you found as well as compromises you had to make.
What could have been implemented better and what changes you would make if you had the chance to do it all over again. What discoveries did you make along the way? Be as detailed and specific as you can.
Using the technical competencies you have developed in this course*, combine your chosen topic and form into something that is accessible to the public on a website hosted on GitHub. The website should include at a minimum two HTML pages, CSS, and a canvas that is controlled by p5js. The p5 sketch needs to use at least one class (OOP).
There are two HTML pages, where the first one is the title and start button, and the second one where the main blank canvas is located in which the audience go about constructing their version of the city, and once they are satisfied with how it looks, there will be a save button that changes the display of the page, showcasing the previously constructed skyline in a framed-gallery like display.
One of the challenges I faced is within the OOP coding structure to change the x and y coordinates of the building, as well as the scale of each building.
The display of the buildings utilizes the array element, in which we push the new png image every time a new building button is pressed.
The iteration of the building images utilizes the if and for loop, in which the value of the sliders gets incorporated within the loop, to dynamically change the x and y location values of each building.
3) Reflection and Future Development
Summarize your conclusions and critical reflections on your work. Consider how your project evolved from project proposal to its current version. In regards to the concept you set out to explore, which parts of the project work well and which ones are you less satisfied with.
Reflect on feedback received from peer students, instructor and guest critics and constructive adjustments to the project based on the feedback. Also demonstrate what you would like to implement further and how you would continue to explore in future work any of the ideas your project engaged.
There were quite some changes from the beginning of the proposal, since it started out as a layout of an exhibit of cities. After gaining feedback to emphasize more on the usage of p5 canvas, I revised the proposal into a different format of interactive visualization, still based on the same topic of cities/skyline, but a more interactive format. The project evolved with a substantial amount of changes from the revised proposal itself, which mainly came from interaction day.
In regards to the concept I set out to explore, parts of the project that worked well includes constructing the lay out of the user input elements, since I was able to form the organization of the buttons according to my liking. The part of the project that comes off as quite a bit of a challenge is incorporating the functions of the buttons, like changing the night and day timing, and also the forming of the ‘end result’ page, which shows after the user clicks the ‘Save Here’ button.
Sharing Feedback during the Project Presentation
During the presentation, helpful and constructive feedback received includes:
- Anchoring the scaling to the middle bottom of the buildings
- Utilizing filters for the buildings PNG for the night version
- Title adjustments to skyline instead of city
- SaveCanvas function
- Function to change back to initial grey canvas
- Addition of land at the bottom to avoid floating effect
In conclusion, the final project was a pleasant learning experience, and I would like to thank Professor Gottfried, TA Sam, LA Sophie and Sonny for giving relentless support and guidance throughout the whole process.