Chao https://chaofeng.design Chao Sun, 19 Jun 2022 01:33:56 +0000 https://chaofeng.design en Untitled page http://chaofeng.design/Untitled-page-1 Sun, 19 Jun 2022 01:33:56 +0000 Chao 426176 Murray Link http://chaofeng.design/Murray-Link Tue, 01 Mar 2022 01:52:48 +0000 Chao 420402  Home Murray Link Design System Design LanguageDesign SystemCreated with D-Shop at&nbsp;SAP 2022 Murray Link is a blockchain-based healthcare platform that aims to better facilitate the end-to-end organ transplant process. Collaborating with a small group of ambitious designers and engineers at D-Shop, SAP’s R&amp;D lab for emerging technologies, I led the creation of Murray Link’s design language and design system. <img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/3a51aec0393000d1815dcbaf78e33d10fd4ad737c219441350cced09186a75ff/UI.png" data-mid="1200987" border="0" />Typography The typography uses Inter, an opensource typeface project led by Rasmus Andersson. While Inter is a tried and proven type for computer screens, there are some features that we appreciate and work well for our audience: The generous X-height gives good aid in readibility and accessibility — these are crucial for health-care workers, whose day-to-day is fast-paced and requests efficiency.The wide range of font weights of the Inter family has allowed us to be expressive when designing for the displays and headlines, while maintaining consistencies with fonts used in actions and running texts. Like many other geometric neo-grotesque typefaces that inspired it, Inter speaks reliability as well as a sense of friendliness. The latter is a quality we seek particularly — we hope the UI would appear friendly at the first glance and therefore encourage UI interactions.<img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/5589db3729540299fb3a6460c6b5b4c869c700f3674d80771e14efa71194404f/Type-System.png" data-mid="1200988" border="0" data-scale="100"/> Type FamilyTypeface designed by Rasmus AnderssonInter on&nbsp;Google Fonts <img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/8a6ad7f51170241c2961ede1aa2053cd54b2d9634d4ec70fbeb7978c875390c0/Type-_UI.png" data-mid="1200989" border="0" />Type SystemThe letter spacings and line heights are adjusted for different text styles. As a result, the display texts can be expressive while maintaining their compactness. And the body and label texts can be readiable even when rendered in small sizes. Color The full range of color palettes of Murray Link are to ensure that the UI would appear neutral, quiet, and calming. While the foundation of the color system is largely muted, the brighter and more refreshing primary palettes are intended to evoke a sense of hopefulness. <img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/c652d0004f4f3e5277e11964a784b7a2da910b4f2918076f755afbdefd30a8ee/Colour_UI.png" data-mid="1200990" border="0" />Refreshing and Hopeful The primary palettes are to allow the key UI components to stand out and to appear affirmative. The refreshing container color, in addition, represents the our hope that Murray Link would help both the medical workers and patients involved in the organ transplant process. <img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/1c6b8d531676cee9da5b3e7a760bff3b7e67cb95c752ee22f278c82b6b8e3d31/Colour-1.png" data-mid="1200993" border="0" />Accent Colors The primary and secondary colors, respectively, are deployed for core UI components and less prominent ones. The tertiary colors were introduced to expand the core accent palettes for subtle but richer expressiveness. <img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/d99e76c7a37f14b5897c1f523868bf25a5fe28209d7fdcbe9c9d2f9288655dde/Colour-3.png" data-mid="1200992" border="0" /><img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/24a26194f026eb3b17b6c419a7ac461ad17062e91b13dea3ea9e976c29558c2e/Colour-2.png" data-mid="1200991" border="0" />Additional Colors a. Semantic colors for errors b. Neutral colors for surface, background, outline, text, and icons.&nbsp; Shape A rounded shape family is in use. A wide range of UI components — including search bars, buttons, and cards — all employed generous rounded shapes. This is to help create a visual workspace that appears safe, welcoming, and friendly.<img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/e067e3507911406d6674068b04f8ef85fe4faa7cfd4dbe71b4f0936826a3ba2b/Shape.png" data-mid="1200994" border="0" />Shape Scales The majority of the UI components are in generous rounded shapes. Icon The icon family is customized based on the updated SAP Horizon icons. We created a new collection of icons that are specific to the health-care use cases. In addtion, light and bold icon weights were added for richer visual variations.<img width="3840" height="1920" width_o="3840" height_o="1920" src_o="https://cortex.persona.co/t/original/i/58a3232d89d7577eb3a5fcdf5d9a012ae980c986603e5af9b25b7f2b18242da0/Icons_240_1.2.png" data-mid="1200996" border="0" /><img width="3840" height="1920" width_o="3840" height_o="1920" src_o="https://cortex.persona.co/t/original/i/299caffc3f613c62ca4fbf265556afd445b8907025579b86e114b38d49f17aa4/Icons_240_1.6.png" data-mid="1200997" border="0" /><img width="3840" height="1920" width_o="3840" height_o="1920" src_o="https://cortex.persona.co/t/original/i/39e056feb356de198dce6ab6054d7f710e99763d9eb4948c68ee88986b4f6021/Icons_240_2.png" data-mid="1200995" border="0" /> Adaptive Icons The icons are created to be adaptive. Additional weights (Light and Bold) are introduced to adapt to different UI scenarios. <img width="3840" height="1920" width_o="3840" height_o="1920" src_o="https://cortex.persona.co/t/original/i/4901185445dd3c6e7d7001259c4cb3e3048e53fa54bee1699d3fe7b00bc59d1c/Icon_Nav_2x.png" data-mid="1200998" border="0" />Applying Icon Weights In the bottom navigation bar, icons in selected and unselected states are of different weights. The more heavily weighted icon and text work as a combination to ensure the active option is sufficiently emphasized. Components We built upon the Material Design 3 components and designed a collection of customized UI components. These include action icon buttons, toast messages, a richer data table component, a versatile status indicator, as well as various charting components.<img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/69341d2da4a7e153b30164df69ad246e6024a70e1b06b8b217276a139a2a972e/Components_Dark.png" data-mid="1201001" border="0" />Customized Components - Action icon buttons - Toast message - Data table - Status Indicator <img width="3840" height="2160" width_o="3840" height_o="2160" src_o="https://cortex.persona.co/t/original/i/8a0a67d975e4488af29272d96aebf2cc835bff4692274b9c7bdc65dc1cdcf2c0/Chart_2x.png" data-mid="1200999" border="0" />ChartingThis is a bar chart instance. Further Info The design system documented above was built upon Google’s Material Design 3 guidelines. While designing this design system, we referenced Material Design 3 extensively and learned a great deal throughout the process. Therefore, we acknowledge that Material has been an instrumental foundation to the creation of our design system, and we appreciate Material’s open documentation and its support to the broader design community. Before this project kick-started, we had intended to create a lite design system. However, while it’s relatively simple, only a portion of the specifications are covered here — I have chosen to be selective and only highlighted the more original efforts. Collaborators This project has always been a team effort. This design system wouldn’t be completed without these wonderful people and their efforts: Ori Nevares, for his research and team leadership Lauren Low, for her wonderful prototypes Bea Ilagan, for her contribution and assistance to this design system Yifan Dai, for her motion designs  Home © 2022 Chao Feng  Home Murray Link Design System Design LanguageDesign SystemCreated with D-Shop at&nbsp;SAP 2022 Murray Link is a blockchain-based healthcare platform... Hanzi Studies http://chaofeng.design/Hanzi-Studies Mon, 13 Dec 2021 01:51:55 +0000 Chao 416234  Home Hanzi Studies Creative Coding Self initiated project 2020 - current Hanzi studies — a series of creative coding sketches that re-interpret, deconstruct and re-construct the Hanzi characters, building blocks of the Chinese and other estern asian languages. Study 01 Gate / ‘門’ Study 02 Seaweed / ‘藻’ Study 03 Wave / ‘波’ Study 04 Construct / ‘築’ Study 05 Heart / ‘心’ Study 06 Fungus / ‘菌’ Study 07 Field / ‘田’ Study 08 Field / ‘火’ Study 09 River / ‘川’ Study 10 Shadow / ‘影’ Study 11 Noise / ‘噪’ Study 12 Worm / ‘蟲’   Home © 2022 Chao Feng  Home Hanzi Studies Creative Coding Self initiated project 2020 - current Hanzi studies — a series of creative coding sketches that re-interpret,... life forms http://chaofeng.design/life-forms Tue, 08 Aug 2017 22:20:27 +0000 Chao 202487  Home Life Forms Creative Coding Commissioned by the New Forms Festival Original project: 2013 Re-created in 2021 Life Forms is an interactive &amp; audio-responsive visual system derived from simple artificial life forms. Employing a generative approach (noise and force field), Life Forms recognizes, records, and processes the gestural / bodily movements of the performers and environmental sounds, and further translates such dynamics into forms and motion. Visual System The original Life Forms project was commissioned by the New Forms Festival in 2013 as a live visual system that would later enrich the series of music performances on the festival. While the earlier visual planning of this work made reference to the visual identity of the NFF '13 festival, this project has been restored and update in 2021 to follow its previous trajectory and to explore new aesthetic possibilities. Control panel<img width="1920" height="1200" width_o="1920" height_o="1200" src_o="https://cortex.persona.co/t/original/i/8abc75e3d9d1d1f1398473b8c244a0fd8f8861ee3b8f7c4425851c87a2fdf9c4/UI_1.png" data-mid="1149253" border="0" /><img width="1920" height="1200" width_o="1920" height_o="1200" src_o="https://cortex.persona.co/t/original/i/ccf61c181a85039317bf9d71bafd0245638ce98d2615ad9d9e0baec88aa4c1d6/UI_2.png" data-mid="1149252" border="0" /> Excerpt 01 Primitives Excerpt 02 Rythms Excerpt 03 Flow Excerpt 04 Waves Excerpt 05 Electrics The Virtual Shadow When connected to a depth camera, the artificial life system could “perceive” the person nearby, and then direct the simple life forms within it to form a virtual shadow of the person. During the performances at the New Forms Festival, the musicians engaged such virtual shadows into their live sets—these&nbsp; shadows then functioned as extensions of both the musicians’ physical bodies and their musical performances.&nbsp;Installation Set-up<img width="1920" height="1200" width_o="1920" height_o="1200" src_o="https://cortex.persona.co/t/original/i/05430ade86023a692adb8ce4d59094813859ad3da71d85f5395ba6a4f03db3a4/blprt.png" data-mid="1148965" border="0" /> Still Sequence 01 <img width="1920" height="1080" width_o="1920" height_o="1080" src_o="https://cortex.persona.co/t/original/i/85bbd825d6291bcf0b8af486965a4c07014866610f77a3cc10a22851bcc61b75/LifeForms_Body_02_8516.png" data-mid="1145332" border="0" /><img width="1920" height="1080" width_o="1920" height_o="1080" src_o="https://cortex.persona.co/t/original/i/183ca76f063daed1c142597f470d9a7be64ad525410064f05f0cf15f7adce174/LifeForms_Body_02_8127.png" data-mid="1145331" border="0" /><img width="1920" height="1080" width_o="1920" height_o="1080" src_o="https://cortex.persona.co/t/original/i/3730e165768dad0f5146d94a2939df61ddefdebaaa99c8f1f3e8378c93473438/LifeForms_Body_02_8005.png" data-mid="1145330" border="0" /> Still Sequence 02 <img width="1920" height="1080" width_o="1920" height_o="1080" src_o="https://cortex.persona.co/t/original/i/519d27c1fe2308665b50d598f5b577fdff4f324c0bf87e384e154b622c7fb2dc/LifeForms_Body_01_1817.png" data-mid="1145350" border="0" /><img width="1920" height="1080" width_o="1920" height_o="1080" src_o="https://cortex.persona.co/t/original/i/bedd5489054fd6da6d097d711a775f65487ea7b045597fd26cd63d4de6b97aa4/LifeForms_Body_01_1740.png" data-mid="1145351" border="0" /> Info New Forms Media Society is a non-profit society and media arts organization founded in 2000 that nurtures and connects local and international arts, science and grassroots communities through the annual New Forms Festival. By promoting Canadian Artists in collaboration with the international arts and technology world, the NFF facilitates multimodal art works and engages in discussion on their role in our cultural environment. Since its inception, an integral element of the NFF is the recognition of independent and groundbreaking artists; the NFF aims to showcase and increase awareness of these artists and their work within our community and beyond by promoting them within a larger milieu. (link: New Forms Festival). <img width="621" height="932" width_o="621" height_o="932" src_o="https://cortex.persona.co/t/original/i/421bba03b1919b969b886f46b65535246188c82a7ac5186b0a900b54953ecfcf/blackPoster_621.png" data-mid="1145344" border="0" />Visual identity of NFF '13 (Post Projects 2013)  Home © 2022 Chao Feng  Home Life Forms Creative Coding Commissioned by the New Forms Festival Original project: 2013 Re-created in 2021 Life Forms is an interactive &amp;... pointcloud http://chaofeng.design/pointcloud Tue, 08 Aug 2017 21:17:07 +0000 Chao 202473  Home Point Cloud creative application &amp; interactive installation Collaborated with Judith Doyle for Nuit Blanche Toronto 2014 2014 Point Cloud is a pop-up interactive installation that perceives and reacts to the gestural and bodily movements of its interactors. Co-created with Toronto based artist Judith Doyle for Nuit Blanche Toronto 2014, the installation was set up exhibited at the lovely Queen Mother Cafe on Queen West, Toronto. // process  Interaction Installation @ Nuit Blanche Toronto 2014 This project was created in openframeworks &amp; processing.   Home  Home Point Cloud creative application &amp; interactive installation Collaborated with Judith Doyle for Nuit Blanche Toronto 2014 2014 Point Cloud is... ar http://chaofeng.design/ar Tue, 08 Aug 2017 20:55:22 +0000 Chao 202463 Augmented Reality Study  index creative application &amp; augmented reality 2014 An augmented reality application that mediates daily work space with abstract motion and forms. The visual feedback provided by the system indicates a situation, communicates a message, or evokes an affect of the current environment the user resides in. <img width="1280" height="727" width_o="1280" height_o="727" src_o="https://cortex.persona.co/t/original/i/2addcc589309b53ad42804bb1b38d8b24c02d7925bc585e460a952c7d77f9a6e/ar-13146_1280-1.jpg" data-mid="272347" border="0" /><img width="1280" height="727" width_o="1280" height_o="727" src_o="https://cortex.persona.co/t/original/i/2e45b3171bb4cc3014c8b59a6f4828b6ff3796b6da355f156a5c21b8f391153e/ar-16546_1280.jpg" data-mid="272345" border="0" /><img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/c53db3886b7aecc2d031f562ed69d3179bf773314341d3415f76028ed5a29258/ar-14513_1280.jpg" data-mid="272346" border="0" />Designed and created in processing.   index Augmented Reality Study  index creative application &amp; augmented reality 2014 An augmented reality application that mediates daily work space with... readermap http://chaofeng.design/readermap Tue, 08 Aug 2017 16:55:03 +0000 Chao 202399 Connected Ink  index Data Visualization2011 Reader Map is an interactive data visualization for collectives of web publications. It visualizes the meta data of and inter-connections within a collection of web feeds. With all feeds displayed in one view, the visualization helps the readers to understand which category each publication belongs to, the number of articles published in a previous period, as long as how often the publication updates. <img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/4902ccab93810fa5b58c7216f4500f3e169bdc0bed93d5b2f13658c48a1288a7/Sequence-05_6-2.gif" data-mid="272252" border="0" /> Design Every feed is represented by one corresponding square. The titles of the web publishers (such as news websites, research organizations, and blogs) are displayed above the squares.&nbsp;Different hues of color are used to distinguish the categories of the web feeds. And the transparency reflects the update frequency of the web publications. Web feeds in the same category are represented by squares with the same hue. Squares are also grouped by categories and gathered in allocated locations of the map. Layout The layout of this map is arranged by a force directed method. To visually make squares from same categories group together, the virtual “spring force” is added between each feed square and the node representing the category it belongs to.<img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/d86d787748ab2fd56d790d33f3d0b0febc5b391704ff042270383437c25c24c2/Sequence-05_1-2.gif" data-mid="272263" border="0" /> Visualizing publication evolvement The size of each square indicates the number of articles published by the corresponding publication within a specified period of time. <img width="600" height="600" width_o="600" height_o="600" src_o="https://cortex.persona.co/t/original/i/bf78321115a20aec7da97ef82ab14749c4e913dd3d356616255dd63f3f5c84ce/size_1_o.jpg" data-mid="272253" border="0" /><img width="600" height="600" width_o="600" height_o="600" src_o="https://cortex.persona.co/t/original/i/c5c867bf0771d606d25127a5e2dd89c7a729534c7f3d05fbec22d1e549ea3e88/size_2_o.jpg" data-mid="272254" border="0" /><img width="600" height="600" width_o="600" height_o="600" src_o="https://cortex.persona.co/t/original/i/1c6422b7d0b3184ce4526ceff32519f48d7cea53f9a0f590282f03a15c22220d/size_3_o.jpg" data-mid="272255" border="0" /> Visualizing similarity The similarity in contents is visualized through stroke weight&nbsp;to reflect the connections between different feeds. The similarity is decided based on the meta data of different feeds. The amount of the common labels is here used to reflect the similarity between different feeds.<img width="600" height="600" width_o="600" height_o="600" src_o="https://cortex.persona.co/t/original/i/043b360c4a1ab05ea78af29d093dae76f3431e84b4221e3066c4b3bcdde47ed6/pic-4173-001_o.jpg" data-mid="272256" border="0" /><img width="600" height="600" width_o="600" height_o="600" src_o="https://cortex.persona.co/t/original/i/045968d3f9c80e01b44740587b92b346daf39d37ae98baa785a5f38a3f24a60b/pic-3316_o.jpg" data-mid="272257" border="0" /> <img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/2031ba609fe0fecc71bf877cdea5490e2ce92377b46c287405662ffd013e2743/pic-2432_o.jpg" data-mid="272261" border="0" /><img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/957dec29c5599bf5aa0cfddd951626a0d893e6484de575ddf16712f32aa33208/pic-3755_o.jpg" data-mid="272260" border="0" /><img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/7df2d3fff88a536f43f9e17401928b1de77d80f2e16ecac451aa2c5040c775fa/pic-9560_o.jpg" data-mid="272262" border="0" /> Grouping and comparing publications This project was designed and implemented in processing.   index Connected Ink  index Data Visualization2011 Reader Map is an interactive data visualization for collectives of web publications. It visualizes the meta data... lighting http://chaofeng.design/lighting Mon, 07 Aug 2017 01:09:14 +0000 Chao 201963 Adaptive lighting system  index Design &amp; Development Co-designed with Chengyuan Wei for Smart vehicle project,&nbsp;Lab CCNT2010 Commissioned by lab CCNT, fellow designer Chengyuan Wei and I designed an in-car lighting system that adapts to the colour of the environment outside of the car. The lighting system detects the light and colour from the the surrounding environment and then adjusts the in-car lightings. Through making the lighting and colors to resemble those of the outside environment, we hope the driver and passengers could be “brought” closer to the environment that they pass by.&nbsp; process&nbsp; <img width="450" height="450" width_o="450" height_o="450" src_o="https://cortex.persona.co/t/original/i/a3ab8372078549d72e59a2f40400d29603f425275291e7ba505e162307f6f112/p68_o.jpg" data-mid="270908" border="0" /><img width="450" height="450" width_o="450" height_o="450" src_o="https://cortex.persona.co/t/original/i/452aa0b05777bf4efe6c163f86a837b609a48fe2ff40b304cade4ae61236d540/p85_o.jpg" data-mid="270909" border="0" />Surface lighting <img width="450" height="450" width_o="450" height_o="450" src_o="https://cortex.persona.co/t/original/i/dadda7540996b8afcc3de257e5a28628c3dd93298ef7edeff8eec80b86dd1d98/p75_o.jpg" data-mid="270910" border="0" /><img width="450" height="450" width_o="450" height_o="450" src_o="https://cortex.persona.co/t/original/i/90db909194361a7c68e03da3bf1ef2deb211c1446847cc250057c48ea5e01403/p74.jpg" data-mid="270911" border="0" /> In-car lighting   index Adaptive lighting system  index Design &amp; Development Co-designed with Chengyuan Wei for Smart vehicle project,&nbsp;Lab CCNT2010 Commissioned by lab... work http://chaofeng.design/work Thu, 27 Jul 2017 02:26:41 +0000 Chao 198605 Chao Feng about Designer and creative technologist working across product design, data visualization, and creative applications. selected&nbsp; /&nbsp; index  <img width="1920" height="1200" width_o="1920" height_o="1200" src_o="https://cortex.persona.co/t/original/i/82e666b4930d1be7cf25cd91de3cd1e55b2db8dd9ed15b95f74566c4e55d4b37/Hanzi.png" data-mid="1145059" border="0" />Hanzi Studies creative coding 2020 - Current <img width="1920" height="1200" width_o="1920" height_o="1200" src_o="https://cortex.persona.co/t/original/i/5f8945f53dcdb6f2c4aae931cef155ae449da0f0803725a700adf2e014a1a6cb/Form_Cover.png" data-mid="1149595" border="0" />Life Forms creative coding 2021 <img width="2500" height="1562" width_o="2500" height_o="1562" src_o="https://cortex.persona.co/t/original/i/70edace9939690313dc6083660caff1ff67dd03b79b63396300f963ee9c80d0b/Device_01_2500.jpg" data-mid="264239" border="0" />Cloud Computing Platform product design 2017 <img width="1440" height="900" width_o="1440" height_o="900" src_o="https://cortex.persona.co/t/original/i/0650177f750d6b0e8ea384bf3f91133dad570fd9ddf6ea91b0fb41294fc02d06/ML-Copy.jpg" data-mid="264250" border="0" /> Machine Learning Studio product design 2017 <img width="2560" height="1600" width_o="2560" height_o="1600" src_o="https://cortex.persona.co/t/original/i/16b18e5eac6a59fdb5a461b5b63ff81fbbf48f10ec028679926a2c1bba9c634a/wacom_thumb.jpg" data-mid="264244" border="0" /> Wacom Connected Ink motion &amp; creative application 2016 <img width="2560" height="1600" width_o="2560" height_o="1600" src_o="https://cortex.persona.co/t/original/i/f718a29b70f9f71dd35f96f21516009fa6db7b756cab660cc4bf7f621999927c/Artboard-Copy.jpg" data-mid="264255" border="0" /> The Anthropocene Prototype public installation &amp; research 2015 <img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/96bf2853f4588740d7cf79abbcdab8693db20771d63adcc4f1bb8e2275131ea5/point.png" data-mid="264253" border="0" />Point Cloud public installation 2015 <img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/39690e464797a612d1e28cfa0b672d254b7ee14e924ad78d833337d8c5922a16/ar-14513_1280_1280.jpg" data-mid="264256" border="0" />AR Study creative application 2015 <img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/fd0fcaed26e20024e899bea8ecec3b1dd03b841adc9054d99be31c18b9f937d9/pic-4761_o.jpg" data-mid="264254" border="0" /> Reader Map data visualization 2011<img width="1280" height="720" width_o="1280" height_o="720" src_o="https://cortex.persona.co/t/original/i/6a5ffdb40a43a5aab4661bd13dd1eb763866a0de67992ae707db2264585611fc/lighting_2.png" data-mid="264252" border="0" />Adaptive Lighting creative application 2010 © 2020 Chao Feng Chao Feng about Designer and creative technologist working across product design, data visualization, and creative applications. selected&nbsp; /&nbsp; index... the anthropocene prototype http://chaofeng.design/the-anthropocene-prototype Wed, 26 Jul 2017 22:20:44 +0000 Chao 198576  Home The Anthropocene Prototype prototyping creative coding 2015 A prototype installation and a creative application that simulates and investigates various scientific activities’ geographical impact on earth. &nbsp;more info  Client:&nbsp;Nuit Blanche Toronto <img width="3000" height="1993" width_o="3000" height_o="1993" src_o="https://cortex.persona.co/t/original/i/082eebf2711c52bb5b9f0ae7644503f56f06b2365d288c5bd8e26ad7f58da2e9/CoPerformance-65_3000.jpg" data-mid="264207" border="0" /> Excerpt of mobile interaction <img width="1600" height="1062" width_o="1600" height_o="1062" src_o="https://cortex.persona.co/t/original/i/79bd29e6052c834e20780f9860ad0f41173fd14368d0382777256e2ea1fe7e7f/CoPerformance-43_1600_c.jpg" data-mid="264204" border="0" />Excerpt of mobile interaction <img width="3000" height="1993" width_o="3000" height_o="1993" src_o="https://cortex.persona.co/t/original/i/6fd4f77e81ef590195bd43dd6559da3fa241ad0bd412116ee640c2be0802de34/CoPerformance-77-copy_3000.jpg" data-mid="264206" border="0" /><img width="1440" height="957" width_o="1440" height_o="957" src_o="https://cortex.persona.co/t/original/i/06f32372f4cf8ecd6508b678ceb6cc85c0bc9a8894414d928a02cffdc179d283/CoPerformance-81_1440.jpg" data-mid="264205" border="0" /> Excerpt of visualization &amp; app interaction Credits Design: Public Visualization Studio Web development: Design TennisCreative coding: Chao Feng   Home © 2022 Chao Feng  Home The Anthropocene Prototype prototyping creative coding 2015 A prototype installation and a creative application that simulates and investigates various...