Project Hangul #1 – The mimetic words of Hangul

projects | May 19, 2013 | 1 Comment   
RUNNING ON IPAD
LOGO
DESIGN

a

DESCRIPTION
Hangul is the Korean alphabet. Instead of being written sequentially, like English, Hangul is grouped into blocks that represent individual syllables. In this way, it can be used to write most sounds.
The Mimetic Words of Hangul is an art project that attempts to visually represent onomatopoeic and mimetic words according to their meaning.
The project was made using HTML5, especially Canvas, and it works beautifully on both desktop and tablet.
URL
http://mimetic.cmiscm.com
CREDIT
Solo work
A special thank you to Justin Earley who helped with the English copy.

Tags: , , , ,

[JS] cm-rotate.js

study | April 4, 2013 | 2 Comments   

ABOUT
Rotate js using CSS translate3d and transition
     • No dependencies
     • Works in all major browsers that support CSS translate3d or transition (IE9+)
     • Works on tablet PC
     • MIT License
EXAMPLE
http://cmiscm.github.com/cm-rotate.js/
DOWNLOAD FROM GITHUB
https://github.com/cmiscm/cm-rotate.js
USAGE
Download the js file and include it in your html.

     <script type="text/javascript" src="CMRotate.js"></script>

Add CMRotate.init function in your Javascript code.

     /**
     * Background image Array for each Plane
     */
    var backgroundImages = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg", ...];
 
    /**
     * init
     *
     * div - DIV element ID
     * tw - Plane Width
     * th - Plane Height
     * ty - Y position distance from bottom
     * gap - Gap between each Plane
     * radius - Circle Radius
     * bg - Background image Array
     * fn - Mouse click function on each Plane
     */
    CMRotate.init('rotate-div', 200, 300, 100, 12, 600, backgroundImages, clickFn);
 
    /**
     * Click function
     */
    function clickFn(no) {
        alert('click no - ' + (no + 1));
    }
DISPOSE
Remove all events and requestAnimationFrame

     CMRotate.dispose();
LICENSE
Copyright (c) 2013 Jongmin Kim
Licensed under the MIT license.

Tags: ,

Form Follows Function

projects | January 22, 2013 | 14 Comments   
FFF ON IPAD
DESIGN

DESCRIPTION
Form Follows Function is a collection of interactive experiences. Each experience has its own unique design and functionality.
All the experiences are created in HTML5, the site works beautifully on both desktop and tablet.
Form Follows Function demonstrates the power of the browser and current technology, while also pushing the boundaries of what is possible.
 
I had an interesting episode of Wiper Typography section.
The design and interaction was already finished in my head, but I didn’t have any idea about how to make the actual Javascript code. After two days, when I woke up in the morning, I suddenly got an idea about the code. I then made it 30 minutes flat.
For the reason, it’s my favorite section of the project.
 
This project isn’t just a collection of HTML5, it’s also a collection of my favorite things.
I love Vincent van Gogh, Rene Magritte, Andy Warhol, Space Time, Golden Ratio, Minimal Design, and Typography.
For example, “Plant Trees” was inspired by Rene Magritte’s “Empire of Light”. The drawing is single paradoxical combination of day and night. The trees in my project are dark at daylight, but bright and colorful at night.
URL
http://fff.cmiscm.com
CREDIT
Solo work

Tags: , , , ,