Blog | NY | Hafiyyandi

Hafiyyandi

creative tech

about

designs

contact

Magic Windows & Comp. Typo | AR Typographic Sculpting

Magic Windows & Comp. Typo | AR Typographic Sculpting

Concept https://www.hafiyyandi.com/single-post/2018/11/27/Magic-Windows-Final-Idea https://www.hafiyyandi.com/single-post/2018/12/04/Magic-Windows-Comp-Typo-Final-Pt1 How the App Works Setup: a server that serves default drawing commands from LeagueGothic-Regular.otf. Based on Allison's modify every glyph example. App is initialized Get device's location name, detect plane, check database Draw location name on top of detected plane using spheres & lines. User can select a sph

Magic Windows & Comp. Typo | Final Prototype

Magic Windows & Comp. Typo | Final Prototype

Concept Read the conceptualizing process here. TLDR: I was inspired by Zach Lieberman & the unique physicality afforded by AR to make a typographic sculpting app. User 1 —> Site specific AR-artifact <— User 2 Technicalities ...to figure out: Create a database of a font's glyphs using opentype.js Get location of device Draw AR spheres & lines based on glyph commands & location “Sculpt” the letters using AR interaction Upload the new coordinates + location to a database So far

Magic Windows | Final Idea

Magic Windows | Final Idea

Conceptualizing Going into concepting what the final assignment would be, I have several criteria for the implementation. As with the midterm assignment, I want the final experience to not only make sense in AR, but also is unique to AR because it can't be told otherwise. So the end AR product should... take advantage of scale and the ability to virtually manipulate it be site-specific, and have spatial & physical experience as its main mode of interaction I was also inspired

Comp. Typo | Deformed Font Generator

Comp. Typo | Deformed Font Generator

In the spirit of faux-brutalism trend in graphic design, I made a deformed font generator (source). You can deform all of the glyphs in the typeface and download it as a new font file (go to source if download button does not work). Initially, I wanted to write my own glyph transformation / deformation code. My first idea was to make the glyphs wider, and to do that I used this code to detect a horizontal line: if (isModded){ //if previously it's drawing a horizontal line

Comp. Typo | Final Final Draft.jpg

Comp. Typo | Final Final Draft.jpg

This week's concrete poetry is brought to you by the haunting memories of working in an advertising agency, where time and human bodily limits just seem to stretch and s t r e t c h and S T R E T C H . . . . . . . (Source code here & here) !! Note: The sketches don't render correctly on iframes. Please click on the source links to see the proper form! I use 'transform: scale (width, height)' to stretch out the words. In each iteration of for loop, the stretch becomes bi

Comp. Typo | Hanzi-ish(?)

Comp. Typo | Hanzi-ish(?)

I use a lot of trendy bold-but-sleek sans-serif typefaces in my graphic design work because (a) I’m a sucker for trends, and (b) I like the silhouette the letters make. So, for this assignment, I wanted to make letters that are as graphical. I also wanted to make something that feels organic because I just don’t like hard corners in my letterforms. I started out drawing a squiggly line. beginShape(); curveVertex(10, 26); curveVertex(15, 25); curveVertex(30, 26); curveVertex(4

Featured Posts

Recent Posts

Search By Tags

No tags yet.