2021

Design Research, Interactive Web Experiences, Creative Coding

SAMPLER 2

Overview

Sampler2 is collection of mini projects about digital materials based on the research questions proposed by ArtCenter Media Design Practices faculty Elise Co.

Major Research Questions

  1. What is the digital material applied to? What’s the relationship between the material and the form/object that it forms?
  2. What is the relationship between “materiality” and “digital” or “physical”? Not everything digital is a material–or is it? What is the relationship between digital media and simulation of factors from the physical world that makes something feel “real” or “material”?
  3. Hypothesis: “attention” is a fundamental force upon digital materials in an information- and media- base society. How can we engage with this force explicitly in forms?

The four projects included: The Material Loop, Dioramas, Material and the Body, and Attention as a Material Force. You can find full documentation HERE.

I worked on The Material Loop and Dioramas, and here is the work I did for both projects.

The Material Loop

The Material Loop is a web catalog for users to interact with, browse through, and experience digital materials. My Contribution:

  1. Generated digital materials
  2. Created wireframes and user flows
  3. Co-designed and co-developed the website

The work is led by Elise and done in collaboration with Mavis, Isabelle and Martin. Watch a video of Material Loop ⬇️ or you can enter The Loop.

Pattern Generators

We also build pattern generators with p5.js and OpenGL. Below are the results of our experimentation.

Pattern generated by pattern generator 01

Pattern generated by pattern generator 02

Pattern generated by pattern generator 03

Pattern generated by OpenGL

Dioramas

Digital dioramas allow the users to curate, play, and interact with digital materials through simulations. My Contribution:

  1. Experimented with digital materials with p5.js, Blender and Unity
  2. Created 3D models in Blender
  3. Designed and coded Diorama 3 with Three.js
  4. Co-developed user flows and interactions

Diorama 3: Floating Islands is designed by me and executed by me, Nanyi and Elise. Watch a video of Floating Island or turn on your webcam and play with diorama