How's everything going?

My name is Karen Peng 彭嘉颖.

In a beta mode at ITP NYU + Recurse Center.

Welcome to my lab! Let's play and have good fun.

p5.js webGL renderer

webGL renderer for p5.js

p5.js is an open source JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web.

Over summer 2015 I've been working on a Google Summer of Code project I proposed --- WebGL renderer.

I built a light-weight webGL renderer from scratch for p5.js, making webGL mode possible, with syntax remaining consistent with p5.js 2D mode and also Processing.

After the summer, basic webGL APIs in p5.js are implemented: cameras, geometries, lights, materials and texture, etc.

Documentations, examples and tutorials are provided for users.

It's already part of p5.js now, and it's being used as a teaching tool in ITP NYU.

Technology: webGL api, glsl, javascript, grunt

Github Repo

CitiBike Trip Visualization

citibike trip (9/1/2015 - 9/3/2015) visualization.

The Citi Bike system, operated by Motivate, features thousands of bikes at hundreds of stations across New York and Jersey City.

Citi Bikes are available 24/7, 365 days a year. Station locations are based on population and transit needs, and were selected through a participatory public input process.

This is a visualization of citibike amount changes in all the stations from 9/1/2015 to 9/3/2015, made in 6 days, work in progress.

It used an open source React wrapper for MapboxGL-js and overlay API.

Data source: citibike system data.

Technology: React.js, Mapbox, webGL, gulp, javascript

Source Code


Screen shoots

Where does our food come from?

A data visualization of U.S. imported food.

This is a data visualization of U.S. imported food from 1999 to 2014, made in 5 days.

The task was: given an excel sheet of dataset, to present them in a way that makes sense and allows exploration.

Through analysis, I found there're three dimensions in the data: year, category and country, hence I developed a multi-layer data visualization.

The project is structured in MVC, data is abstracted away from control and view, control is React.js components and view is highChart components.

The whole process is documented in detial in here.

Technology: gulp, browserify, React.js, HighCharts, ES6, javascript

Source Code


Screen shoots


A emotion & gesture-based arpeggiator and synthesizer.

motionEmotion uses the webcam to detect points of motion on the screen and tracks the user's emotion.

It draws triangles between the points of motion, and each triangle represents a note in an arpeggio/scale that is determined by the user's emotion.

It's a collaboration with Jason Sigal at NYC Music Hackathon.

I came up with the original idea, worked on graphics and motion detection, and Jason worked on sound design.

Technology: getUserMedia, web audio api, clmtrackr, Tone.js, canvas, javascript

Source Code

See my Experiment on ChromeExperiments.com


Google+ IO Display

An animation- and community-driven LED display for Google+ during Google I/O 2014.

For Google I/O 2014 I participated in the development and worked with my team to design and implement an animation- and community-driven LED display for Google+.

The display showcased Google's new Material Design brand styleguide and the newly released Google+ Stories feature.

As a technologist intern in Big Spaceship, I worked closely with visual designer and developer, worked out design concept, made prototypes and implemented code.

I'm responsible for:

* Helped with Node.js server to get Google+ feed in real time

* Designed and Implemented particle animation in different categories with C++ framework Cinder

Technology: Cinder, C++, Node.js, javascript

Case Study

Photo credit: Naim Sheriff, Thomas McCabe, Alexander Rea, Chris Fahey

It's running in 1:36 of this video :)

Testing with customized visual design for Big Spaceship internal use:


A url shortener.

Short.ly is a url shortener that I built in Recurse Center(FKA Hacker School).

It started as an exercise and I spent time on polishing it. Sorry that the domain isn't that short :p

It uses React.js for frontend and Node.js / express.js for backend.

Technology: javascript, React.js, Node.js, express.js, MongoDB, boothstrap css

Source Code



FPV Code

Two-player real-time coding game.

FPV Code is a two-player coding game.

In the game, you have to write instructions for your character to reach the target.

There are obstacles along the way and you are also competing with your friend against time. You can see your friend's code but there's no way to cheat.

It's like a visualization of for loop, in order to help people understand coding in more sense.


Technology: Three.js, ace editor, Node.js, web socket, webGL, canvas, javascript

Source Code

See my Experiment on ChromeExperiments.com


Yoda Newz

A site for querying newz from Yoda, also a twitter bot sending you newz.

Newz, Yoda tells you, yessssss.

Yoda Newz is a terminal like website, in which you can query news by date. Yoda will tell jokes sometimes.

It's also a twitter bot @yodanewz, which tweets a piece of newz every night.

So how does Yoda select news?

Hummm...it actually chooses between new york times, hacker news and reddit shower thoughts. No one knows which one he's gonna choose tonight!

All the newz are saved in a database for user to query from the website.

Technology: Node.js, mongoDB, ajax, a lot of APIs, css, javascript

Source Code



Yellow Tail

Magical multi-user drawing experience.

Watch your drawing comes to live!

Yellow Tail is a multi-player drawing experience. Use your touch-based device to draw anything, shake it and your drawing will move on your laptop. What's more, you could play with your friends, use your imagination and have good fun!

Technology: DeviceMotion events, Node.js, socket.io, canvas, javascript

Source Code

See my Experiment on ChromeExperiments.com


Drawing Script

Ridiculous Programming: draw like in the wild space, type like in a terminal.

This is an experiment about combining coding and drawing.

Use your free hand drawing as an value input, and then code on these drawings, to assign values to objects and make them animate.

Drawing is so free that the only limit is your imagination, coding is so rigid that it's all about order and logic. My curiosity leads me to experiment between these two.

Technology: peg.js, plt.js, canvas, javascript

Source Code



I'm still figuring out what to do with it, if you have any idea, don't hesitate to email me <3 !

Umipay Mobile App

An application which enables users to earn "money" in their virtual account and cash it into selected applications.

Umipay is a tool-typed application produced by Youmi Moblie Co. Ltd.

It mainly serves three functions: earning, storing and cashing "money" of virtual account. It connects with various android applications' account systems, thus users can have flexible choices on their "money" disposal.

It also provides users with different sorts of mini tasks to earn "money", such as downloading new applications and playing online games, making the earning process painless.

For users, it builds up a system for virtual currency circulation, and for developers and advertisers, it also creates a system of user volume circulation.

Working as an interaction designer, I contributed in research, concept development and interaction designing.

Role: Interaction design, User experience design and some information architect



The early concept design and wireframe for Umipay. Main functions were listed and organized by pages:

1.1 Pages list

1.2 Mini tasks to earn money

1.3 Applications try out

1.4 Applications sign in

1.5 Online games try out

1.6 Online games introduction

1.7 Official tasks

1.8 Phone recharge

1.9 Advertising check out

Further interaction design in flow paths between pages.

User experience and visual expression were highly considered in this procedure, and some of the original designs were adjusted.