Poetic Abode padlet by yuxi zeng

Initial programme description

yuxizeng01 — 2024-11-18 03:01:32 UTC

1. Why are you building this project?

We aim to create a digital "Guka" platform that offers users a unique and enjoyable online creative space. By bringing the traditional Guka (sticker card) activity online, our goals are to:

Stimulate Creativity: Provide a relaxed environment encouraging users to unleash their imagination and create unique works.

Integrate Multimedia Experience: Combine visual decoration with music generation to deliver a new multi-sensory interactive experience.

Lower Participation Barrier: Simplify interactions so users without professional skills can easily enjoy the fun of creation.

Promote Social Sharing: Offer saving and sharing features to enhance user interaction and communication.

2. Art or Design?

Our project is a blend of both art and design.

Artistic Aspect: Users can freely select and combine various stickers and decorations to create unique visual works, embodying the essence of artistic creation. The music generation feature adds unique audio elements to each piece, enhancing artistic appeal.

Design Aspect: Careful UI and interaction design are essential to ensure simplicity and a smooth user experience. Good design allows users to focus more on creation, enhancing overall satisfaction.

visual web 1

yuxizeng01 — 2024-11-18 03:03:19 UTC

2.The initial impression of this artist is that he is very outgoing, willing to present himself, and gives off an air of planning and neatness. At first glance, I think he might be a graphic designer, perhaps specialising in logos and typography. The website feels well organised, with clear columns, making it easy for the viewer to find the interface they want. The artist's experience is presented in an interesting timeline on the main page, which is similar to a third-person narrative that provides detailed answers. The Q&A section also vividly reflects the artist's personality. However, personally, I found the text a bit too extensive for me as a viewer to spend much time reading. His work involves illustration, art and lectures, and he also takes orders for tattoo designs. I believe his audience includes magazine publishers, decorators, art collectors, as well as attendees and fans of his lectures.

visual web 2

yuxizeng01 — 2024-11-18 03:03:59 UTC

2. There is a warm and playful connection between the artists. At first glance, I would have thought she was an illustrator. Her website has a lively and playful vibe that effectively reflects the artist's style. Her timeline of competitions and exhibitions is highlighted in a segmented interface. I think it's a great example of how icons and content can be seamlessly integrated into a coherent style. She is a freelance illustrator and her audience may include magazine publishers, web illustrators, publication designers, and many others.

visual web 3

yuxizeng01 — 2024-11-18 03:04:12 UTC

3.This artist is that she is well organised and logical. However, I didn't see any photos or personal history of this artist on her website. She struck me as more of a graphic designer and educator. The website has a very clean feel to it and the menu interface is particularly unique. She is an editor and lecturer in visual communication by profession. Her target audience includes educators, publishers and copy editors.

Functional web -Pat Penguins

yuxizeng01 — 2024-11-18 03:06:36 UTC

This is a good interactive website example. The penguin can be followed by the mouse, and the perspective can be switched and the penguin can be fed. The picture is simple. When the user does not take action, the penguin has a lot of autonomy and the interaction is very interesting. The goals that we can learn from this project are: 1. Provide users with sticker options 2. Drag and drop interactive functions 3. Visually comfortable work area and button design

What is Guka？

yuxizeng01 — 2024-11-18 03:16:15 UTC

"Guka" is the transliteration of "sticker" in Korean, which means decorating a small card with stickers. The idol economy in South Korea is well developed. In order to better store and appreciate the star cards, fans will install protective covers for them and stick stars, flowers, letters and other decorations on them. After this trend was introduced into the domestic cultural and creative circles, a large number of "Gu Warriors" were born. They are no longer limited to "Gu" star idols, nor do they only display their talents on a small card. Now "Guka" materials include cartoon IP images, characters, landscapes, pets, texts, etc., and there are also Gu plates, Gu fans, Guka bricks and other forms. It can be said that "everything can be Gu".

First attempt in Glitch web

z13734038263qr — 2024-11-18 03:17:29 UTC

Tough the interaction is stuck

First attempt in Cargo web

z13734038263qr — 2024-11-18 03:21:48 UTC

We try to use glitch as the backend of cargo web, and the webpage made on cargo as the frontend to display the interactive webpage, but the interactive operation of Guka is implemented on glitch, because the code operability of glitch is much more flexible than cargo, and the initial intercommunication between glitch and cargo is achievable.

Trying to use pygame to build this web

z13734038263qr — 2024-11-18 03:24:16 UTC

Later, we evaluated and found that the API links between the two websites were relatively complicated and required a lot of Java code instead of Python code. We wanted to try using pygame to build Python

Music Reference

yuxizeng01 — 2024-11-18 03:26:18 UTC

Interactive web

yuxizeng01 — 2024-11-18 05:01:05 UTC

This webpage uses a camera to recognize the body and follows the user's movements to interact with the orchestra. This made us think about whether we can add this kind of sensor setting?

Interactive web 2

yuxizeng01 — 2024-11-18 05:04:18 UTC

This is a website with a particularly good visual experience. It combines illustrations and animations and provides some indicator buttons. These indicator buttons may be long press, drag, click, etc. The animations triggered by these actions have a strong sense of interaction. With good music, it has a very good audio-visual experience.

First demo of our game

z13734038263qr — 2024-11-22 12:46:15 UTC

Finally, since we are using pygame, we converted the web page into a small game. However, this demo cannot currently analyze the image into text through Ollama and then access the API of the AI platform that generates music.

Determined the visual style of our game

z13734038263qr — 2024-11-22 12:49:55 UTC

We used midjourney to generate a series of sticker images and background images of the room

Partial visual scene

yuxizeng01 — 2024-11-27 11:48:51 UTC

Visual interface and icons

yuxizeng01 — 2024-11-27 11:49:42 UTC

Code version 1: Basic room decoration game

yuxizeng01 — 2024-11-27 12:29:19 UTC

In this initial version, we created a basic room decorating game. Initialized the game window using Pygame, set the size and title of the window. Defined basic colors, such as white and beige, for interface drawing. The Furniture class was created to represent the furniture, each with an image, position, and drag state.The Game class is responsible for the main logic of the game, including loading the background, loading the furniture stickers, and handling user interactions. The user can select furniture from the furniture library and drag it into the room. This version successfully implements the furniture dragging and dropping functionality and establishes the basic framework of the game. However, the interface is relatively simple and single-functional, and lacks rich user interaction and beautiful UI design.

Code version 2: Improved room and furniture design

yuxizeng01 — 2024-11-27 12:31:09 UTC

In this version, we have made significant improvements to the game. First of all, the Room class has been added, which draws a more detailed background of the room, including the wall and floor meshes of the room, making the room look more realistic and aesthetically pleasing. The representation of furniture has also changed; the Furniture class now draws furniture using simple rectangles and adds properties such as name, color, size, and position. The furniture library has been placed in the right toolbar for a more logical user interface layout. Users can drag furniture from the toolbar into a room or move placed furniture, increasing the flexibility of furniture arrangement. This version has improved both the visuals and the user experience, with a more aesthetically pleasing interface and more intuitive interactions. However, the game still lacks in-depth game mechanics such as a money system and more interactive features.

Code version 3: Add money system and spinning function

yuxizeng01 — 2024-11-27 12:32:27 UTC

In this version, we have added richer game mechanics to the game. First of all, a money system was introduced, where the user has initial funds to buy furniture for decoration, each piece of furniture has a price and the corresponding amount of money will be deducted when purchased. This adds to the strategy of the game and users need to plan their money wisely. Secondly, the furniture can now be rotated. The user can use the mouse wheel to rotate the selected piece of furniture, increasing the flexibility of furniture placement. The ability to save and load game progress has also been added, allowing users to save the current room layout and load it later, providing a good ongoing experience. In addition, a main menu and help screen have been added to make the game more complete and professional. With these improvements, gameplay is greatly enhanced and the user experience is improved. However, with the increase in functionality, the code complexity has also increased, and attention needs to be paid to the structural optimization and maintainability of the code.

Code version 4: Trying out Tkinter

yuxizeng01 — 2024-11-27 12:33:40 UTC

In this version, we try to use Tkinter instead of Pygame in order to make it easier to create complex UI interfaces. Using Tkinter, I implemented a simple sticker game where the user can select rooms, choose furniture stickers and click on the canvas to place the stickers. Buttons for deleting, saving images and generating music were added, and placeholders were provided, although generating music was not yet implemented.Tkinter's strength lies in its rich GUI controls and simple layout management, which makes it easier to create interface elements such as buttons, text boxes, and so on. However, compared to Pygame, Tkinter has limitations in graphical drawing and interactive effects, especially when dealing with complex images and animations. After weighing the options, I realized that Tkinter might not be a good fit for our game's needs, and decided to stick with Pygame, but borrow some of Tkinter's UI design ideas.

Code version 5: Improvements to the sticker function

yuxizeng01 — 2024-11-27 12:35:00 UTC

In this release, we returned to Pygame and focused on the sticker feature. First, sticker images were loaded so that users can drag and drop stickers around the room, adding to the fun of the game. Introduced sound effects that play the sound of tearing stickers while dragging and dropping stickers, enhancing user immersion. Added buttons, including sticker button, save button and music button, which are convenient for users to operate. The function of saving screen is realized, so that users can save their works as pictures. Although the function of music generation and playback is not yet perfected, it is ready for the subsequent development. This version focuses on the realization of the core functions, the interface is more beautiful and the user experience has been significantly improved.

Code version 6: Add save function and prepare image to text

yuxizeng01 — 2024-11-27 12:36:22 UTC

In this version, we added a save screen feature to the game, which allows users to save their work as an image, ready for subsequent image analysis and verse generation. At the same time, work began on how to convert the saved images into text descriptions in order to generate the corresponding verses. Although the function of music generation and playback has not yet been realized, the corresponding methods are reserved in the code. Music buttons have been added that, when clicked, will allow the generated music to be played or the verses to be displayed in the future. This version prepares for the integration of AI functionality while maintaining the core gameplay of the game. The user experience has been further improved, but the image-to-text conversion and verse generation features need to be implemented in the next step.

Code version 7: Using the BLIP model and the OpenAI API

yuxizeng01 — 2024-11-27 12:38:00 UTC

Initial programme description

yuxizeng01 — 2024-11-27 12:42:01 UTC

3. How do you measure success?

Success metrics include:

User Engagement: Active Users: Growth in registered and active users.

Usage Duration: Average time users spend on the platform.

Number of Creations: Reflects the platform's attractiveness.

User Satisfaction: Feedback and Reviews: Collecting user opinions to gauge satisfaction.

Retention Rate: Indicates long-term user value.

Technical Performance: Stability: Smooth operation without crashes or major bugs.

Responsiveness: Fast page loads and operation response times.

Achievement of Project Goals: Feature Completeness: Implementing all core functionalities within the planned timeframe.

Quality Standards: Meeting expected desig

Reorienting the project and adding background music

yuxizeng01 — 2024-11-27 12:42:44 UTC

Modify direction and functionality implementation

In view of the technical difficulty of the music generation API, it was decided to adjust the project theme to directly generate verses, and the project name was changed to “Poetic Abode”.

Add background music in the code to play along with the game startup.

Added music control buttons to allow users to play and pause the background music.

Adjusted the style of the room selection screen to harmonize with the overall theme.

Reorienting the project and adding background music

yuxizeng01 — 2024-11-27 12:43:21 UTC

In the final adjustments, we made appropriate changes to the direction of the project. Due to the technical difficulty of generating music and the limited time available, we decided to focus on generating verses, which would allow us to better control the scope of the project and ensure the integrity of the functionality. The name of the project was changed to “Poetic Abode” to better fit the new theme. We also added background music to the game to enhance the user experience. Added music control buttons so that users can easily control the play and pause of the music. Adjusted the style of the room selection screen to match the overall theme. Through these modifications, the project became more complete and the user experience was further improved. We learned to flexibly adjust the direction in the project development and make the best choice according to the actual situation.

Final Code

z13734038263qr — 2024-11-27 13:00:49 UTC