Hiroshi KOI.
Design Engineer.
.log is a personal project that records another side of nulldesign.jp—one that began with Flash. Created around 2013, it emerged as its creator, who had been working with Flash, responded to a changing web landscape shaped by the rise of the iPhone and began learning JavaScript. The project was conceived, designed, built, and published by one person. Over roughly three to six months, it accumulated experiments and studies as a continuing log.
The name nulldesign.jp had originally been created for Flash work. The phrase “the another side of nulldesign.jp” expresses an intention to explore a direction different from the one the name had initially represented. The creator had already grown tired of front-end work before starting with Flash and had not expected to return to it so deeply. For that reason, .log was kept separate from the public face of nulldesign.jp: it was a space for side projects, learning, and experimentation rather than a central body of work.
At the time, JavaScript on the web was commonly used for supporting tasks such as form validation and string manipulation. The idea of using it to create interactive expression was not yet widespread. .log explored a different relationship with JavaScript from that of the markup engineer of the period. Rather than using code simply to supplement a page’s functionality, the project considered web content as something that could be touched, moved, and watched over time.
The site does not center on a single dataset or theme. Its entries include ideas that arose spontaneously, as well as expressions that had been discussed or requested during the Flash era and were reconsidered through JavaScript. Images, shapes, motion, space, and typography appear across a varied collection of studies. Rather than presenting a polished portfolio with a uniform standard of finish, .log places different trials side by side as a record of learning through the exchange between technology and expression. Canvas-based work was also introduced as part of that process.
The works were developed in a vanilla environment without frameworks and published on a rental server. A key premise was that they should be viewable and usable on smartphones. Whereas earlier web interactions often assumed a mouse, smartphones foregrounded direct gestures such as flicking. .log approached the web as something that could be handled with the fingertips. This was not merely a matter of adapting layouts for smaller screens, but an experiment in changing the very idea of interaction.
The site was not intended as a portfolio actively promoted outside the company. It functioned primarily as a place for self-directed learning, internal sharing, and evaluation. At the time, it repeatedly drew surprised reactions from engineers within the company. .log is both a record of adapting to a changing web technology landscape and an archive of a period spent re-exploring post-Flash expression by hand.
metrogram is an independent project that visualizes trains running through Tokyo’s subway network and the sense of human movement generated by their operation on a two-dimensional screen. Created during the autumn of 2014 and released in September of that year, the project was produced entirely by one person—from concept and design to data collection, preparation, implementation, and publication.
The project was inspired by a two-dimensional subway visualization previously created in Flash by a senior colleague at the creator’s workplace. The sense that such a work could be made had existed for some time, but collecting and handling route and timetable information felt too substantial a task to undertake in private time. In September 2014, transportation-related open data was expected to be released. However, rather than have the project appear to have become possible only because of that release, the creator began by gathering the necessary data independently from information already available on the web.
At its core, metrogram offers a way to observe Tokyo’s subway system as a whole—something difficult to grasp in daily use. Based on routes, stations, and timetables, it recreates the positions of trains within a single screen. Local, express, and limited-express services are given subtly different visual treatments. The work does not use direct passenger-flow data. Instead, the varying speeds and stopping patterns of trains moving through the network suggest the presence of people travelling across the city. Some web media noticed these small distinctions and wrote about them, an especially memorable response for the creator.
Technically, metrogram was made as a study in Canvas, a technology the creator had not previously used. It was developed in vanilla JavaScript without a framework, with an intentionally lightweight and direct structure encompassing both the visualization and its data handling. The work was published on a rental server. Its data reflects the subway network as of September 2014 and does not claim to reproduce current conditions accurately. Rather than a real-time transit service, metrogram is a simulation that uses collected and prepared information to reveal the temporal structure of urban transportation.
Although the later 3D version received more attention, the creator personally feels a stronger attachment to this 2D work. Three-dimensional space expands the possibilities for expression, but there is a limit to how much information people can take in at once. On a display, showing less information can sometimes make movement and rhythm easier to perceive. metrogram does not attempt to explain every complexity of the subway system. Instead, it quietly arranges only the essential elements, creating a perspective from which to watch the flow of the city.
metrogram3D is an independent project that visualizes the movement of Tokyo’s subway trains—and the sense of human flow that surrounds them—in a three-dimensional space. Created during the winter of 2014, it was conceived, designed, data-prepared, and implemented by a single creator.
The project grew out of metrogram, an earlier 2D work that visualized train movement across a subway map. For metrogram3D, the premise was deliberately simple: add one more axis. By extending the relationship between time and location, previously expressed in two dimensions, into a space with depth, the work offers another way to observe a familiar urban system. While it became an opportunity to explore new technology, the intention was not complexity for its own sake, but to reveal the everyday operation of the subway from an unfamiliar perspective.
Tokyo’s subway was chosen because it is a vast and highly precise system that supports daily life while remaining largely invisible beneath the city. Rail lines connecting stations, trains moving according to their timetables, and the implied presence of people travelling with them all coexist in a continuous rhythm. Bringing these elements into a single field of view makes it possible to sense an aspect of the city that is difficult for an individual passenger to perceive.
The work is based on subway timetable information published on the web, manually transcribed and edited for use in the project. Its data source and structure are shared with the earlier 2D version. Although the result may evoke a real-time view, it does not use live location data; rather, it is a simulation that reconstructs train positions at a given time from prepared timetable data. The project predates an era in which such work would be readily associated with open data. It began with the more hands-on process of reading available information and restructuring it into data for visual expression.
metrogram3D was built with WebGL and Three.js, initially as a study in Three.js. The timetable data was edited and used as JavaScript. A static JSON format was also possible, but since the work would ultimately be handled in JavaScript, the project adopted a structure that kept the data and its processing within the same environment. The development setup used vanilla JavaScript without a framework, and the work was published on a rental server. At the time, the creator’s workplace had also identified WebGL as an area for research and development, making this a fitting subject to pursue outside working hours.
metrogram3D was not intended as a web experience for receiving information. It asks for neither interaction nor frequent updating. Instead, it was conceived as something closer to a screensaver: a work that can simply be left running and watched. By quietly visualizing the hidden operation of the city, it creates a space on the web for time spent looking—for its own sake.
SkyNet is an independent project that visualizes aircraft moving through Japanese airspace. Created around 2018–2019, it was produced entirely by one person, who handled the concept, design, data acquisition and preparation, implementation, and publication. Using flight schedules available at the moment of access, the work simulates the state of the sky above Japan.
The project began as a return to WebGL. At the time, the creator was working in a research and development division, primarily creating digital experiences with Unity, but was preparing to move back to a web-focused team. Looking for a way to regain familiarity with WebGL, the creator explored open data and discovered that airline schedules could be accessed. Following earlier work on ground transportation, attention turned to the sky.
SkyNet uses aviation data from JAL and ANA. In addition to daily flight schedules, real-time information was available, which suggested a wider range of possibilities for the work. Rather than simply replaying a fixed timetable, the project could work with conditions that changed according to when the data was retrieved. Through the movement of flights on screen, it offers a view of the density and scale of air traffic over Japan—something rarely visible in everyday life.
Air traffic alone, however, can be difficult to situate spatially. To provide a point of reference, the work incorporates Japanese coastline data, rendered as line segments. The entire coastline is constructed as a single mesh, preserving a detailed outline while making the relationship between aircraft and the ground easier to understand. Rather than functioning as a map that adds more information, the coastline serves as a visual anchor for reading movement in the sky.
The project was built with WebGL and Three.js, published on a rental server, and developed without a framework. To avoid merely repeating the approach of earlier work, SkyNet introduced experiments with time-scale control and layered post-processing effects. Accelerating or slowing time makes it possible to observe not only individual flights, but also the overall flow of the sky at different densities. These visual layers were intended not simply to explain data, but to turn it into an experience.
SkyNet also extends an ongoing exploration of visualizations built around time and space. At the same time, the process made the creator aware that repeatedly approaching similar subjects can lead to patterns confined by a single person’s perspective. As similar commissions and opportunities became more common, it became important to find different outcomes rather than answer the same question with the same form. SkyNet is therefore both a visualization of aviation data and an experiment in searching for the next mode of expression.