
![BuzzFeed Eko](/media/buzzfeed.png)

Creating interactive video content with BuzzFeed.


BuzzFeed by eko

Website for open-source image editor Glimpse.


Glimpse


<div class="videoWrapper"><video autoplay muted loop playsinline><source src="/videos/msdv-keynotes_zach-krall_v03.mp4" type="video/mp4"/></video></div>

Promotional design for the MS Data Visualization department's end of year keynotes at Parsons School of Design.

Motion graphics were used throughout the event's livestream.

<div class="videoWrapper"><iframe id="ls_embed_1592865097" src="https://livestream.com/accounts/1369487/events/9101448/player?width=640&height=360&enableInfoAndActivity=true&defaultDrawer=&autoPlay=true&mute=false" width="640" height="360" frameborder="0" scrolling="no" allowfullscreen> </iframe></div>

Early design experiments used marquee wrapped geometries.

<div class="videoWrapper"><video autoplay muted loop playsinline><source src="/videos/msdv-keynotes_zach-krall_v00.mp4" type="video/mp4"/></video></div>

<div class="videoWrapper"><video autoplay muted loop playsinline><source src="/videos/msdv-keynotes_zach-krall_v01.mp4" type="video/mp4"/></video></div>


Promotional graphics for MS Data Visualization department


Data Visualization Keynotes


![Phase Mask](/media/phase-mask_zach-krall_cover.png)

<div class="videoWrapper"><video autoplay muted loop playsinline><source src="/videos/phase-mask_zach-krall_00.mp4" type="video/mp4"/></video></div>


Phase Mask

Machine Learning Model using Kim Petras's Lyrics


Pim Ketras


![FZT-8050](/media/IMG_2609.jpg)

The FZT-8050 is a fictional super computer built in the late 70s that is capable
of analyzing frequencies connected to future events.

![FZT-8050](/media/Copy-of-IMG_9490_1.jpg)

The machine listens for a question to answer and responds once an electrical
circuit is closed through a glove made of copper fabric.

![FZT-8050](/media/Copy-of-IMG_9493.jpg)

Using a StyleGAN model trained on spectrograms from audio recorded at a ringing 
rock site in Upper Black Eddy, Pennsylvania, the computer plays a recording and 
displays a spectrograph shape.

![FZT-8050](/media/Copy-of-IMG_9520_1.jpg)


FZT-8050


Face filters created in 2019 as part of the Instagram Developers Beta Program.

<div class="videoWrapper"><video autoPlay muted loop playsInline><source src="/videos/instagram_face-filter_zach-krall_math.mp4" type="video/mp4"/></video></div>

<div class="videoWrapper"><video autoPlay muted loop playsInline><source src="/videos/instagram_face-filter_zach-krall_sparkle.mp4" type="video/mp4"/></video></div>


Instagram Face Filters


![Outfront Media / MTA Map Experiments](/media/outfront-media_zach-krall_IMG_0778.jpg)

Visual experiment of a dynamic MTA subway map. Using [Outfront Media's Live Boards](https://www.outfrontmedia.com/media/digital/liveboards), the application uses p5.js to illustrate hotspots in the transit system.

Creating drawings using GeoJSON of all 472 NYC subway stations.

![Outfront Media / MTA Map Experiments](/media/mta_drawings.png)

What would it look like to plot heat maps of activity within the subway system?

![Outfront Media / MTA Map Experiments](/media/mta_slide_2.png)


Outfront Media / MTA Map Experiments


![Slime Futures](/media/IMG_2117.jpg)

The work aims to investigate how computer models assess and understand an individual.

![Slime Futures](/media/IMG_2237.jpg)

Since future predictions are created out of data from the past, identity becomes a feedback loop.

![Slime Futures](/media/IMG_2044.jpg)

This cancellation of time creates a hauntological condition by employing the past as a means to move towards the future.

![Slime Futures](/media/IMG_2062.jpg)

If it were possible to view this data, accumulated overtime and visible from multiple vantage points, what would it look like?


Slime Futures


![](/media/oxbow_01.png)

![](/media/oxbow_02.png)

![](/media/oxbow_03.png)

![](/media/oxbow_04.png)

![](/media/oxbow_05.png)


The Oxbow School Recruitment Keynote


2018-2019 Academic Year

![](/media/sva-recruitment_01.png)

2017-2018 Academic Year

![](/media/sva-recruitment_02.png)

2016-2017 Academic Year

![](/media/sva-recruitment_03.png)


SVA Recruitment Presentation


![Bandwidth (Unique Forms of Continuity)](/media/bandwidth.jpg)


Bandwidth (Unique Forms of Continuity)


![Away Status](/media/away-status_zach-krall_01.jpg)

![Away Status](/media/away-status_zach-krall_02.jpg)

<div class="videoWrapper"><iframe src="https://player.vimeo.com/video/125755378?color=ffffff&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>


Away Status

Chroma Cleanse 2.0


Archival Inkjet Print, Plexiglas, Fluorescent Lighting, Found Computer Units.

[DIS Magazine](http://dismagazine.com/discussion/73272/benjamin-bratton-machine-vision/)

![Inside Cyber Command](/media/inside-cyber-command_zach-krall_01.jpg)

![Inside Cyber Command](/media/inside-cyber-command_zach-krall_02.jpg)

![Inside Cyber Command](/media/inside-cyber-command_zach-krall_03.jpg)

![Inside Cyber Command](/media/inside-cyber-command_zach-krall_04.jpg)


Inside Cyber Command


![](/media/camp-by-walmart_01.png)

Implemented interactive React components in original video content for Camp by 
Walmart Activity, a virtual summer camp housed within the Walmart iOS and
Android applications.

![](/media/camp-by-walmart_02.png)

Inside the application, an interactive original series ca nbe selected from the 
*what's new* menu.

![](/media/camp-by-walmart.png)

The video node logic for each episode was built out using eko's proprietary 
video editor using React.js to manage the game play state and components used 
for on-screen decision actions.

![](/media/camp-by-walmart_03.png)


Camp by Walmart Activity


<div class="videoWrapper"><video autoplay muted loop playsinline><source src="/videos/schrock_01.mp4" type="video/mp4"/></video></div>

Personal website for Roddy Schrock. The site content is displayed with Vue.js and Kirby CMS.

Text color is animated by placing a WebGL shader ontop of the website container.

<div class="videoWrapper"><iframe width="400px" height="300px;" src="/widgets/roddy-schrock/index.html" style="border:0;" scrolling="no"></iframe></div>

<div class="videoWrapper"><video autoplay muted loop playsinline><source src="/videos/schrock_02.mp4" type="video/mp4"/></video></div>


Roddy Schrock


![Leandra Medine x MANGO Slot Machine](/media/mango_zach-krall_01.jpg)

As part of an event experience designed by DE–YAN. I implemented a custom slot machine application using React and Electron.

<div class="videoWrapper" style="padding-bottom:70%;"><video autoplay muted loop playsinline><source src="/videos/mango_zach-krall_electron.mp4" type="video/mp4"/></video></div>

![Leandra Medine x MANGO Slot Machine](/media/mango_zach-krall_02.jpg)


React.js slot machine for retail experience.


Leandra Medine x MANGO


p5snap is a command-line interface that creates and saves snapshots of a p5 sketch.

<a class="dib ba bw--thin b--black br2 near-black link ph2 pv1 hover-bg-near-black hover-white" href="https://github.com/zachkrall/p5snap">GitHub</a> <a class="dib ba bw--thin b--black br2 ml3 near-black link ph2 pv1 hover-bg-near-black hover-white" href="https://npmjs.com/package/p5snap">NPM</a>

## installation

with `npm`:

```shell
npm -g install p5snap
```

## usage

to start p5snap, provide a relative file path and the number of images that should be saved

```shell
p5snap <FILE-PATH> -n <NUMBER-OF-IMAGES>
```

for example:

```shell
p5snap ./mySketch.js -n 20
```

will create:<br/>
• mySketch_0.png<br/>
• mySketch_1.png<br/>
• mySketch_2.png<br/>
• ...<br/>
• mySketch_19.png

![](/media/p5snap_example.png)

### as a module

you can bring p5snap into your existing node.js build tools by importing the snap module.

for example:

```
const path = require('path')
const snap = require('p5snap/modules/snap.js')

snap({
  sketch_path: path.resolve(__dirname, './mySketch.js'),
  output_path: path.resolve(__dirname),
  width: 1920,
  height: 1080,
  instance: false,
  filename: 'mySketch',
})
```

### instance mode

if your sketch is written as a p5 instance, you can use the `--instance` flag to execute **p5snap** in instance mode

instance mode does not require `new p5()`

## limitations

**p5snap** currently only saves a single `<canvas/>` context. If your p5 drawing uses or draws DOM elements, it will not be included in the image.

## contributing

Contributions, issues and feature requests are welcome.<br/>Feel free to check [issues](https://github.com/zachkrall/p5snap/issues/) page if you want to contribute.

## license

Copyright © 2020 [Zach Krall](https://zachkrall.com).<br/>This project is [MIT](https://github.com/zachkrall/p5snap/blob/master/LICENSE) licensed.


p5snap is a command-line interface that creates and saves snapshots of a p5 sketch.


p5snap


artloop is an Electron app that cycles through a folder containing web based projects.

<a class="dib ba bw--thin b--black br2 near-black link ph2 pv1 hover-bg-near-black hover-white" href="https://github.com/zachkrall/artloop">GitHub</a> <a class="dib ba bw--thin b--black br2 near-black link ph2 pv1 hover-bg-near-black hover-white ml3" href="https://artloop.now.sh">artloop.now.sh</a>

![](/media/artloop_zach-krall_01.png)

artloop was experimentally installed as a digital display at Parsons School of Design in the Design + Technology department. A Raspberry Pi connected to an HD display at Parsons would automatically start artloop once it was turned on.

![](/media/artloop_zach-krall_02.jpg)


artloop is an Electron app that cycles through a folder containing web based projects.


Recent Work

Camp by Walmart Activity

Roddy Schrock

Leandra Medine x MANGO