orange4glace

A Web application that allows users to create mockups of various box shapes on the web.

Users can add images to apply textures. When they input desired sizes, it generates a real-time layout and mockup that match those dimensions.
It provides basic features such as screen navigation, zoom in/out, image movement, resizing, and cropping/stretching functions.

A custom XML shceme is used to represent layout with various lengths.
It can contain numbers, variables, and various formulas like min, max, sin, cos, find intersction of lines, tangent to a circle, etc..

The application creates layout dynamically by parsing the formula.
Some techniques are used to optimize a performance for parsing XML.

Also the XML contains many other informations like default size, size constraints, timeline for animating mockup and so on.

The texture of edge of box are drawn smoothly so the folding parts of the box feels natural.

A completed layout can be exported as a PDF including vector graphics and mockup screen can be exported as a screenshot.

A web application that visualizes genetic data as a radial binary tree has been packaged with Electron to be used as a program on PC and Mac.

It provides screen control functions such as moving, zooming in/out, and rotating, as well as the ability to upscale the entire screen and save it as a high-resolution (10,000 x 10,000) image file.

A web application that visualizes large-scale genetic data in a cell structure.

In addition to basic screen manipulation, it provides functions such as data filtering, reordering, and row addition.

Due to the slow speed of computers at the time, special attention was paid to optimizing the rendering process.

A toy web project visualizing an epidemic spread simulation model

A toy project created after watching 3Blue1Brown's Simulating an epidemic video

Based on the SIR model, you can simply simulate the process of epidemic spread by manipulating various variables related to epidemics.

WebGL 2.0 was used, and essential optimizations for simulating and rendering large amounts of data were included.

A toy web application for creating keyframe-based skeletal animation

ProcessingJS was used for rendering, and features such as data export and import are available.

This is the first web application I created.

Premiere Pro-style video editing program

Developed as a personal hobby project, it provides basic timeline editing / video effects / video playback functions.

Olive is a version implemented using Electron as a base, along with modern web technologies such as React / WebGL / OffscreenCanvas / AudioWorklet / FFMPEG, and C++ native modules.

Nlive is a version that reimplements the same content based on C++ Qt.

This is a toy project created over two days based on the requirements of a thumbnail creation toola, one of the themes of NAVER 2020 HACKDAY.

The Angular framework was used, and the canvas can be resized, moved, zoomed in, and zoomed out.

Shapes can be resized and rotated, images can be flipped horizontally and vertically, and text can have its font and color changed.

The order between each shape (layer) can be adjusted, and Undo and Redo functions are provided.

Three types of filters can be applied, and WebAssembly was used for filter application to ensure fast performance.

This is a web module that implements charts, tables, shapes, etc. that can be used in PowerPoint on the web.

Each element can be resized / rotated, etc. HTML5 Canvas was used for rendering.

AngularJS is used, allowing for two-way data binding.

This is a web application that allows editing of color subtitle sections for video content.

You can apply a single color or pattern color to each section. Color sections can be grouped, and grouped sections can be saved as presets for use.

It provides functions such as copy, paste, undo, and redo.

This is a web application that allows editing of subtitle sections to be applied to video content.