Language ReCreation

You can see the individual projects and interact with their code in a live editor by visiting my codpen page.

WE ALL DESERVE A SAFE SPACE TO BECOME OURSELVES

An experiment in programming language; expressive, demonstrative language. A fluid language that takes shape and makes meaning. This is a poem I wrote with the help of chroma.js for color and velocity.js for motion.

Press the boxes to start poem.

<iframe height='400' scrolling='no' title='Everything We Are-Morphing Poem' src='//codepen.io/Daniel_Silber-Baker/embed/oeGbWM/?height=400&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/oeGbWM/'>Everything We Are-Morphing Poem</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe>

Transformative Constellations

I have always wanted an interface to explore the relationships between us, our words, and the world. The interactive diagram is made using Cytoscape.js, which is a graph-theory (a.k.a. network) library written in JavaScript. The simple UI is constructed using CSS Grid Layout.

Each node can be dragged and rearranged, as can the constellation as a whole.

<iframe height='583' scrolling='no' title='Interactive Constellation Diagram CSS Grid Layout' src='//codepen.io/Daniel_Silber-Baker/embed/eGOjZw/?height=583&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/eGOjZw/'>Interactive Constellation Diagram CSS Grid Layout</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe></iframe>

IMAGINING THE SHADOW CAST BY OUR WORDS

Playing with movement and meaning. Radiating colors and their corresponding constellation of feeling. Using chroma.js and velocity.js to do most of the heavy lifting.

Press buttons above wonderland to change color theme

<iframe height='453' scrolling='no' title='programming language wonderland' src='//codepen.io/Daniel_Silber-Baker/embed/jLJLqK/?height=453&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/jLJLqK/'>programming language wonderland</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe>

Transformative Language

Velocity.js and Particles .js to create an interactive environment in honor of the goddess Octavia Butler.

Hover and press on letters and particles to interact.

<iframe height='562' scrolling='no' title='thesis_transformativeLanguage_youChange' src='//codepen.io/Daniel_Silber-Baker/embed/wJVbpJ/?height=562&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/wJVbpJ/'>thesis_transformativeLanguage_youChange</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe>

Interactive Audre Lorde Reflection Activity

This a kind of proof of concept for interactive activities that use vue.js to manage real time user input, and then produce a manipulatable environment for users to engage with their own thoughts and lives as a site of reflection and transformation. In this instance the interactive canvas is produced using raphael.js.

Type your responses to the prompt questions and then press the ‘re-create’ button to generate an interactive canvas.

<iframe height='723' scrolling='no' title='vueJS_RaphaelJS_transformation_of_silence' src='//codepen.io/Daniel_Silber-Baker/embed/oBJjGM/?height=723&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/oBJjGM/'>vueJS_RaphaelJS_transformation_of_silence</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe>