07 Erika Xiang - molab-itp/content-2023-Fa GitHub Wiki
Week 01 - ASCII Text Art
Week 02 - Image Art
Week 03 - Random Generator
-
I love the beginner tutorials they are easy to catch up with. However, I felt the progress went a bit too fast last week since we started using SwiftUI. I am a bit afraid that I could not catch up.
-
I learned arrays and randoms which are super helpful for this week's assignment (I got some basic knowledge on arrays and random since I learned some Python).
-
For this week's assignment, I wrote a program that generates 10 random rectangles in different sizes and colors.
- I first created an empty array 'RectangleData' structs.
- I created 'ImageGeneratorView' as a custom view that displays the rectangles, which is 200 x 200 pixels.
- generateRandomImage() to generate random rectangles.
- Fun thing was that I added a button with 'action' to call the 'generateRandomImage' function. '.padding(), .background(), .foregroundColor(), and .cornerRadius()' modifiers customize the button's appearance.
- A binding property: @Binding is a property wrapper used to create a two-way binding between a parent view (ContentView) and a child view (ImageGeneratorView). It allows ImageGeneratorView to access and display the rectangles data from ContentView.
- I created a 'ForEach' loop to iterate over the rectangles array and create a view for each RectangleData element. The id parameter is set to .self.id, ensuring that each rectangle is uniquely identifiable.
- I created a 'RectangleData' Struct that represents the properties of each rectangle, such as its position, size, and color. It conforms to the 'Identifiable' and 'Hashable' protocols to make it suitable for use in 'ForEach'.
- Color.random() Extension provides a random() method to generate random colors.
Week 04 - Audio and Timer
I wanted to give my project a unique twist compared to John's demo. In my project, I incorporated tabItems to consolidate everything onto a single page while maintaining a multi-screen feel (or so I believe). While I understand how multiple pages function, I thought for my little kitten ASMR app, it would be more user-friendly to combine everything onto a single page. When users switch tabs, both the displayed image and audio change accordingly. Initially, I faced some confusion regarding the audio playback. Since users switch tabs, I needed to ensure that the audio and timer on each tab would stop and reset. At first, I struggled with this issue, but I eventually discovered that utilizing onAppear() and onChange() solved the problem. From that point on, my project progressed smoothly, and I gained valuable insights along the way!
Here is the helpful resource I found: onChange() Modifier
Week 05 - Storage and App
For this week's assignment, I add a "Favorites" tabItem to the page so that users could save the kitten as fav and go back to it anytime on the "Favorites". I also added a counter so that it counts the number of fav kitten ASMR the user has.
Week 06 - Data and App
This week I worked on my previous app a little bit more. I added UiImage so that users could upload images from library. And I also added edit button to the playlist of kitten's ASMR so users could manage their sounds a bit easier. I was planning on adding the voice recording function but did not get enough time Useful Resource I found for uploading the images from library: ImagePicker Controller
Week 07 - Files and App
This week I worked on the Kitten ASMR app more. I added a new function of slideshow, so it automatically scroll through the kitten images. For my final project, I am thinking of building an app for my product line that I am running. It is going to be a shopping app that shows the customers the products and it could be shown in AR(I might do more research on the AR function).
Week 08 - Filters and Camera
I attempted to concentrate on capturing pictures within the app and showcasing them in a frame using UIImagePickerController, but unfortunately, I encountered difficulties with handling the captures. I'm determined to resolve this issue by next week. Additionally, I experimented with incorporating filter options using CIImage, but it seems there's an issue with the arrays I arranged. I was attempting a different approach than the demo, which caused the filters not to transition smoothly from one to another. Update: Fixed the filter functions.
Week 09 - Firebase Chat App
This week I built a real-time chat app based on the firebase tutorial. I added some more functions such as changing the chat background, select photo from the library using imagepicker, deleting the chat channel, and sending stickers. My final ideas:
- Building a gallery app showing my 3D printed products for my brand. a. Use AR to display 3D items in a real-world camera (this may be challenging). b. Displaying product photos in a slide show gallery. c. As users, they could leave comments on the posts in real time. d. Users could select background music and customize products' colors. e. Including Home, Gallery, Product Details, and About Page. f. More ideas...
Week 10 - Final Project Proposal
P.S. Probably not going to finish all of the features but I will continue develop throughout my career period.
Project Proposal: 3D Printed Products Gallery App
Objective: The objective of this project is to create a visually stunning and interactive gallery app to showcase my brand's 3D printed products. The app will leverage Swift code to implement features such as augmented reality (AR) display, a slide show gallery, real-time comments, and customization options.
Key Features:
-
AR Display (Challenging Feature):
- Utilize ARKit in Swift to implement augmented reality features.
- Allow users to view 3D printed products in real-world environments through the device's camera.
- Implement realistic scaling, rotation, and placement of 3D models in the AR space.
-
Slide Show Gallery:
- Create a visually appealing gallery section to display product photos.
- Implement swipe gestures for easy navigation between images.
- Optimize image loading and caching for a smooth user experience.
-
Real-Time Comments:
- Enable users to leave comments on product posts in real-time.
- Implement a user-friendly comment section with features like user avatars, timestamps, and comment moderation.
-
Customization Options:
- Allow users to customize product colors within the app.
- Implement a color picker interface for selecting and previewing different color options.
- Ensure that customizations are visually reflected in both the AR display and gallery images.
-
Background Music Selection:
- Integrate a music player feature that lets users choose background music.
- Include a selection of pre-installed tracks and the option for users to upload their own music.
- Implement volume controls and the ability to play/pause music.
-
App Pages:
- Home Page: Introduction to the brand and app overview.
- Gallery Page: Displaying 3D printed products in both AR and a slide show.
- Product Details Page: Providing detailed information about each product.
- About Page: Offering information about the brand, its values, and the 3D printing process.
-
Additional Ideas:
- Implement a search functionality for users to easily find specific products.
- Include social media sharing options to increase brand visibility.
- Integrate analytics to track user engagement and popular products.
Development Approach:
- Utilize Swift and Xcode for iOS app development.
- Leverage ARKit for augmented reality features.
- Implement a clean and intuitive user interface using SwiftUI or UIKit.
- Regularly test the app on various iOS devices to ensure compatibility.
Feedback: Have to cut down the workload and make sure the features are working. Finish the UIKit and Firebase parts first, and see if have time for the ARKit.
Week 11 - Final Project Proposal Update 1
Game Title: Dice Explorer
Game Concept:
- The player is an explorer on a blind map represented by a grid.
- Each turn, roll a virtual dice to determine the number of steps to take.
- Uncover tiles on the grid, and if the player lands on a mine twice, the game ends.
Game Mechanics:
- The game grid consists of hidden tiles and mines.
- Roll a virtual dice to determine the number of steps to move (e.g., 1 to 6).
- Uncover tiles equal to the dice roll.
- If a mine is uncovered, mark it, and the player can't step on that tile again.
- The goal is to uncover as much of the map as possible without stepping on a mine twice.
Features:
- Simple dice-rolling mechanic.
- Marked mines to avoid.
- Basic grid-based exploration.
- Game ends if the player steps on a mine twice.
Gameplay Flow:
- Starting the Game: The player starts on a random tile on the grid.
- Rolling the Dice: Roll the virtual dice to determine the number of steps.
- Uncovering Tiles: Move and uncover tiles based on the dice roll.
- Avoiding Mines: If a mine is uncovered, mark it. Stepping on a marked mine ends the game.
- Marking Mines: Keep track of mines to avoid them in future rolls.
- Exploration: Continue exploring and marking mines until the player steps on a mine twice.
- Game Over: The game ends when the player steps on a mine for the second time.
- Score: The score is based on the number of tiles uncovered before the game ends.
Visual Style:
- Simple grid-based map with hidden tiles.
- Mines represented by a distinct symbol.
- Basic UI elements for dice rolling and mine marking.
This concept creates a straightforward exploration game with an element of risk management. The player relies on luck (dice rolls) and memory (marking mines) to explore the map without encountering mines twice. It's a casual and strategic game suitable for quick gameplay sessions.
This week I developed a dice rolling feature with CoreMotion Accelerometer and SceneKit. I will continue on building the mine map in the following days!
Week 12 - Final Project Proposal Update 2
This week I worked on the mine map. And a little add-up for the dice rolling. Now the player could get number result from the dice rolling and gain steps to move in the mine map. But there is something wrong with the counter in the mine map I have to fix up.
Week 13 - Final Project Update 3
Got stucked on trying to pass the dice rolling result to the mine map in my storyboard-based project. Fixed with changing it to environmentobject.