Questionnaire Website

Abstract:

The website focuses on automating the process of creating questionnaires for research, particularly in the social science domain. Instead of manually crafting each questionnaire for new research, the platform uses a templating system to generate them. This not only enhances efficiency but also ensures consistency across various studies.

Techs:

The cornerstone of this automation is the utilization of CSV files to define questionnaires. The CSV format is a universally recognized data representation, making it both accessible and easy to use. By using CSV as the defining structure, researchers can lay out their questions, answer options, and other related parameters in a structured manner.

Another technological highlight is the platform's ability to support "Random Question Sets." This feature ensures that, while the base questions remain consistent, there's an element of variability introduced, making the questionnaire dynamic and adaptable to different research needs.

Usage:

To use the website:

  1. Define your questionnaire in a CSV format. This involves listing out your questions, potential answers, and any other relevant details.
  2. If you wish to introduce variability, leverage the "Random Question Set" feature. This allows certain questions to be randomly selected from a pre-defined pool, introducing an element of unpredictability in the questionnaire.
  3. Once defined, the platform will use the templating system to generate HTML files for the questionnaire, ready to be deployed or integrated into web platforms.

See more usage details on GitHub: Questionnaire-Website Repository.
The demo website SocWebresearch

11/05/2023 posted in  Portfolios

Glass Material Rendering

Demo

Abstract

I present a low-cost glass material rendering solution for Unity3D. I address the challenges of real-time glass rendering, particularly the simulation of reflection and refraction effects. By utilizing MatCap textures and a flexible shader implementation, I provide an efficient and portable method for achieving realistic glass materials.

Motivation

Glass materials have always been challenging to render in real-time, especially on resource-constrained devices. This portfolio showcases the limitations of existing glass rendering techniques in popular console games like Final Fantasy VII Remake and Red Dead Redemption 2. I aim to overcome these limitations and offer a more accurate and visually appealing glass material rendering solution.

Problem

Glass materials involve two key components: reflection and refraction. Simulating these effects in real-time is computationally intensive, leading to suboptimal results on devices with limited performance capabilities. I tackle the challenge of achieving realistic glass refraction, which is crucial for accurately depicting the visual distortion caused by the thickness of the glass.

Code

The complete C# code for implementing the glass material rendering shader in Unity3D can be found on my GitHub repository. The code includes sections for handling environmental highlights reflection and glass refraction, along with the addition of normal details to enhance surface realism.

Results

The portfolio showcases real-time screenshots from Unity3D demonstrating the effectiveness of the glass material rendering solution. The screenshots display glass objects with accurate reflection and refraction effects, providing a visually appealing rendering outcome.

Discussion: More Advanced Usages

The portfolio goes beyond the basic glass material rendering and explores more advanced applications. It covers techniques for creating frosted glass, handling multiple layers of glass and liquids, and achieving a cracked ice effect on glass surfaces. These advanced usages demonstrate the flexibility and versatility of the implemented glass material rendering solution.

Caveats

It's important to note that this portfolio is not an academic research article but rather a practical implementation of glass material rendering in Unity3D. The solution focuses on visual aspects rather than complex algorithms or ray tracing techniques. The portfolio is intended to inspire and provide a starting point for developers looking to improve their glass material rendering in real-time scenarios.

References & Tutorials

More Details

05/05/2022 posted in  Portfolios

Audio Visualization

Demo

Check out the following interactive demos to see my audio visualization in action:

About Audio Visualization

Audio visualization is the art of representing sound waves visually, allowing us to perceive and understand the characteristics of audio in a graphical format. Through my portfolio, I explore the following key concepts:

  • Waves: Understanding the properties of sound waves, such as frequency and amplitude, and their representation as waveforms.
  • Sampling: Discretizing sound waves by sampling, determining sampling frequency and depth, and storing audio data in different formats.
  • Fourier Transform: Breaking down composite waveforms into simple waveforms using the Fourier transform, exploring frequency components and their magnitudes.

Portfolio Highlights

  • WebAudio API: Leveraging the power of WebAudio API to parse audio files, extract sample data, and perform real-time audio visualization.
  • Canvas: Utilizing the Canvas element to create interactive and dynamic visualizations, such as bar charts that react to the audio.
  • JavaScript: Implementing audio visualization algorithms and techniques using JavaScript, including Fourier transform, data modulation, and visualization rendering.

Conclusion

I am passionate about audio visualization and strive to create engaging and immersive experiences through the marriage of sound and visuals. With a solid understanding of audio concepts and expertise in technologies like WebAudio API and Canvas, I am equipped to create stunning visualizations that bring music and sound to life.

If you're interested in collaborating or exploring more about my work, feel free to reach out. Let's create captivating audio visualizations together!

More Details

01/09/2023 posted in  Portfolios

PSD2UMG

A Novel Solution to Automate UI Reconstruction from Photoshop Design to Unity and Unreal Engine

Demo

Abstract

PSD2UMG is a comprehensive workflow and toolset designed to streamline the process of converting Photoshop (PSD) designs into user interfaces (UI) in Unity 3D and Unreal Engine. By leveraging advanced algorithms and techniques, PSD2UMG significantly reduces manual labor and increases efficiency in UI reconstruction, enabling game developers to focus more on gameplay and design aspects. This paper presents the rationale, design, and application of PSD2UMG, highlighting its benefits in various stages of the game development process.

1. Introduction

The process of reconstructing UIs from Photoshop designs in game engines such as Unity and Unreal Engine has traditionally been time-consuming and labor-intensive. PSD2UMG addresses this issue by providing an automated workflow to convert PSD files into usable UI components in these game engines. The workflow includes three main stages:

  • Sensory Tree Generation
  • Tree Structure Encoding
  • Tree Similarity Calculation

2. Sensory Tree Generation

Sensory tree generation involves converting a PSD file into a tree structure that represents the design's hierarchical relationships. PSD2UMG's algorithm utilizes layer metadata to generate a sensory tree accurately.

3. Tree Structure Encoding

Inspired by Huffman encoding, PSD2UMG employs tree structure encoding to represent the tree structure as a string. This abstraction allows for efficient comparison of strings, specifically their prefixes, to determine relationships between nodes in the tree.

4. Tree Similarity Calculation

To evaluate the similarity between UI components, PSD2UMG introduces a tree similarity calculation formula. This metric ranges from 0 to 1, providing a quantitative basis for determining the similarity between different UI elements.

5. Application of PSD2UMG

PSD2UMG has been successfully implemented in both Unity 3D and Unreal Engine. The tool offers a simple and efficient way to reconstruct UIs from Photoshop designs, with the entire process taking less than a minute in most cases. This new workflow greatly reduces the manual labor involved in UI reconstruction and allows game developers to focus on other aspects of the development process.

6. Future Work and Extensions

Although PSD2UMG cannot be open-sourced due to company confidentiality, a technical solution will be provided for developers to follow through and realize the PSD2UMG system independently. This approach will allow the broader community to benefit from the workflow and techniques presented in PSD2UMG, fostering innovation and efficiency in the game industry ecosystem.

In conclusion, PSD2UMG presents a novel solution to automate UI reconstruction from Photoshop designs to Unity and Unreal Engine, greatly enhancing efficiency in the game development process. This innovative toolset has the potential to become an invaluable asset for developers, significantly reducing the time and effort required for UI creation and modification.

More Details

02/28/2022 posted in  Portfolios

Free Casonry

Demo

Video Demo

About

  • This is an independent, narrative and storytelling management mobile game based on Unity3D Engine.
  • Complete code in C# based Unity3D is at Github.

Overview

Players take on the role of cats and run the Cat Masons. The cats will conspire in the ancient European court to try to overthrow the human regime.

Prize

drawing
  • Tencent Minigame Project Gold Award, 2021.
  • Tencent Minigame Best Art Award, 2021.

Installation

Release Version 1.0.0

More Details

11/15/2021 posted in  Portfolios

Rehabilitation Dream

A Virtual Reality-based Rehabilitation System

Demo

Abstract

RehabDream is a virtual reality-based rehabilitation system designed for individuals with neurological disorders such as stroke, brain injury, Parkinson's disease, and aging-related movement impairments. The system aims to provide timely and effective task-oriented self-rehabilitation training by exploring the role of multi-sensory data channel stimulation in reshaping motor functions.

Innovations and Practicality

RehabDream is based on the exploration of the underlying principles of VR technology and its applications in healthcare. It addresses the development needs of the healthcare system and aging-related services in China by studying the role of multi-sensory data channel stimulation feedback in rehabilitation training, the development of adaptive intelligent virtual-reality scenarios, and the quantification of virtual-reality-based training systems.

The system comprises three components: a whole-body rehabilitation system for overall movement, a hand rehabilitation system for dexterity, and a virtual sensory muscle strength system for mobility. The system establishes a virtual twin by matching kinematic and physiological data, creating personalized training plans, and dynamically editing training scenes. The training plans focus on enhancing specific functional deficits, stimulating individuals to overcome movement limitations and generating feedback results to adapt the next training plan.

Conclusion

RehabDream is a digital solution that provides scientific and effective rehabilitation training for home, community, and institutional aging services. It supports the promotion of service-oriented elderly care models and offers technical support and platform support for addressing the challenges of aging-related movement impairments.

More Details

05/09/2020 posted in  Portfolios

Reinforcement Learning - Flappy Bird

05/02/2021 posted in  Portfolios

Package Delivery via Drone

Highlighted Technical Skills and Design Aspects

  1. Algorithm Design and Comparison: designed and compared the Dijkstra and ant algorithms.
  2. Mathematical Modeling: established a mathematical model of path optimization.
  3. Environment Analysis and Modeling:analyzed the drone flight environment and established an environment model based on the Voronoi diagram.
  4. Experimental Design: using real map data and creating control groups to test the algorithms.
  5. Web Server Visualization: visualized the results through a web server creating a map of the school area.

Abstract

In this project, I explored two different methods of using drones for package delivery: the refueling point model and the vehicle-drone composite delivery model. I focused on the latter, where I designed and compared different algorithms to find the most efficient route for drone deliveries. Through various scenarios, I found that while both the informed and uninformed algorithms have their pros and cons, the ant algorithm generally offers wider applicability.

Introduction

Online shopping has become a part of our daily lives, and it is supported by numerous algorithms that help in the delivery process, replacing human effort to a large extent. In this research, I delved into finding the most efficient algorithm for drone package delivery, a futuristic approach to solving the common vehicle routing problem. This problem involves determining the best routes for a set number of vehicles to deliver or collect packages, aiming to save time and effort. I explored different heuristic algorithms to find approximate optimal solutions for this problem, setting the stage for drone package delivery solutions.

Existing Solutions

  1. Refueling Point Model
    In the early stages of drone delivery development, researchers focused on how to extend the drone's coverage area and efficiency by establishing suitable refueling points. This approach involved creating mobile refueling methods and optimizing the location of these points to enhance the drone's continuous support capability. The researchers also looked into coordinating multiple drone distribution tasks and optimizing task allocation during emergency supply deliveries in disaster relief scenarios.

  2. Vehicle-Drone Joint Delivery Model
    A more recent approach involves combining drones with traditional delivery vehicles, using the latter as mobile drone bases. This model has been defined and explored through various problems and algorithms, aiming to find the most efficient solutions for different delivery scenarios. The researchers have developed heuristic algorithms, dynamic programming methods, and even genetic algorithms to solve complex task allocation problems in this model, focusing on minimizing delivery time and costs.

My Solution

In my project, I chose to work with the vehicle-drone joint delivery model. I assumed that all packages to be delivered are already at the package center in each city. The drones either pick up packages from customers and drop them at these centers or are scheduled to deliver packages from the centers to customers. My focus was on finding the shortest drone delivery path within a city, disregarding inter-city routes. I adopted two main algorithms for this: the Dijkstra algorithm, which follows a greedy strategy to find the shortest path between points, and the ant algorithm, which uses a path optimization model to find the best route through a series of iterative steps.

Approach Description

Dijkstra Algorithm

This algorithm operates on a principle of finding the shortest path from a starting point to various vertices in a graph. Initially, it assigns a path weight of zero to the origin and sets distances to other reachable vertices accordingly. The algorithm iteratively finds the shortest path to various points by comparing distances and updating them if a shorter path is found through a newly added vertex. Despite its efficiency in finding the shortest paths, it doesn't consider other costs and environmental changes.

Ant Algorithm

In contrast, the ant algorithm is designed to find an optimal path through a series of iterative steps that involve establishing a mathematical model of path optimization. This approach involves analyzing the drone flight environment and establishing an environment model based on the Voronoi diagram. The algorithm calculates the costs associated with various paths considering different threat levels and other parameters. It then uses an ant colony algorithm to plan the initial path for drones, considering pheromone concentrations and heuristic information on different paths. The algorithm undergoes several iterations to find the shortest path, with a provision for smoothing the initial path to achieve coordination.

Experiment Design

For the experiment, I used map data of the Minneapolis and Saint Paul campuses of the University of Minnesota, dividing them into two control groups to represent different delivery distances. I kept the customer and package information constant to maintain the credibility of the experiment and ran each algorithm three times to find an average answer. The performance of the algorithms was measured based on their running time and the length of the path they found, with the results visualized through a web server creating a map of the school area.

Analysis

In this section, I analyzed the results obtained from the experiments conducted using the Dijkstra and ant algorithms. I observed that the Dijkstra algorithm generally found shorter paths compared to the ant algorithm. However, the ant algorithm was more efficient in terms of running time, showcasing its potential in real-time applications where quick decisions are essential.

I also noted that the ant algorithm could find paths that avoid high-threat areas, making it a safer option for drone deliveries. This algorithm also showed a high degree of adaptability, adjusting to changes in the environment more effectively than the Dijkstra algorithm.

Conclusion/Summary and Future Work

In conclusion, my research project brought to light the potential of using drones for package delivery, focusing on finding the most efficient routes within a city. Through a detailed study of the Dijkstra and ant algorithms, I found that while the Dijkstra algorithm can find shorter paths, the ant algorithm stands out in terms of safety and adaptability, offering a promising avenue for future developments in drone delivery systems.

Looking ahead, I plan to further refine the ant algorithm to enhance its efficiency and to explore the integration of other heuristic algorithms to find even more optimal solutions. I also envision expanding this research to include inter-city routes, aiming to build a more comprehensive drone delivery network that can revolutionize the logistics and delivery industry.

Appendix

Package Delivery via Drone

12/21/2020 posted in  Portfolios

Science Visualization Everyday

Demo

Abstract

A lightweight communication method for exchanging interactive visual narratives

Design

  • Techniques for creating and exploring interactive lightweight scientific visual narratives
  • Techniques for managing and referencing previous visual narratives

System

  • Easily integratable underlying communication system
    • The system is built on top of emails (no need to set a separate server for this)
  • A protocol for exchanging interactive visual narratives for scientific visualization (flow and volume visualizations, for now)
    • Allows various types of visualization and communication applications to be linked.

In this project, I worked on various tasks related to science visualization. Some of the key highlights include:

  • Creating a Video File from the Story: Initially using the Unity API CameraScreenShot, I encountered limitations in capturing only the desired video content. To overcome this, I devised a solution using a sub-camera that moved along a defined path to capture specific scenes. I merged the captured screenshots into a video using the ffmpeg plugin, resulting in a seamless video presentation.

  • Integrating 360 Images into the Lite Viewer: I implemented the integration of 360-degree images into a lightweight viewer. By applying UV mapping algorithms, I successfully mapped the panoramic images onto a sphere, enabling an immersive 360-degree viewing experience. User interaction was achieved through smooth rotation using controller or mouse input.

  • Dynamic Annotation Feature: I implemented a dynamic annotation feature within the viewer. By utilizing a raycaster and mouse clicks, users could place annotations on specific points of interest in the visualization. The annotations were visually rendered using a separate shader, ensuring independence from the scene.

  • Additional Engineering Development Skills: In addition to the graphics-related tasks, I also developed various engineering skills. This included integrating Google APIs for uploading and downloading visualization metadata on Google Drive, implementing a listener for drag-and-drop functionality in the viewer across different platforms, and more.

More Details

05/09/2019 posted in  Portfolios