MF #000000 – Beginnings, inspiration and prototype

Makerfaire! Yay! Vicci messaged me by surprise if I want in for the Makerfaire and said yes. For those who don’t know we did a Box Instrument Project together: link.

After hearing about doing instruments Vicci started motivating the team (a team of two the other being me) with tuning forks and metallic sounds. We got out to get a Tuning fork and bashed things with it. Then we went to Chinatown to get any metallic parts, but with no avail, though we did buy kitchenware, but they were a bit unfriendly to sound. Later on, I went out to get some metal sheets try cutting them and just made dangerous weapons out of it. However, it did lead us into the world of metal tone-wheels! These are the two video examples where we got direct inspiration.

(Awesome reference, this is the dude who made lsdj)

Wow- cool sounds! They basically made stand alone guitar pickups with a magnet on it. This is connected to a amp to listen to electromagnetism created by the motors and metal objects attached to it. And we get the whoosh-klink-metallic-drone-kewl sound!

So after a bit of small tinkering, a prototype instrument was born! Schematics and code will be updated later, I just need to get this post up so I feel like at ease since I thought it absolutely necessary to document. So here are photos of the setup followed by a video!

IMG_9004 IMG_9005 IMG_9007 IMG_9006

CEI #00000C – DSRlines Collaboration Designing Graphical Scenes

While struggling for coding efficiency as my computer was coming of age, I had to think of narrative as divided parts. I had to think beforehand about introductory scenes, and scenes that build up to the final climax. I sketched out a few in the start, the sketches show different scenes for different types of states. Some are more passive where others are dynamic (only in my mind) Then I had to code out some more and play out the scenes I could create and see which graphical scenes would correspond to which. I had to envision a style, try to code it and if the coding was different I had to match it to the style I had already sketched.

Also I made a written narrative so I can easily follow what graphics to create as I listened to the music. 1) It is structured with a grid and a soft sin wave form. Black on white Background. Normal Waves. 2) Grid disappears, Amplitude increases, Frequencies change, Addition of another wave. 3) Inverse Colors, add more subtle waves. 4) Rotation of grid, Grid on/off sequence. A play of creativity within rigidity. Increase in ellipse size. 5) Change one color of wave. Grid flickers. 6) Waves change a bit of forms: amp, freq, recursive. 7) Add mouse graph mountains, let it settle in. Play with waves. 8) Increase sizes, change color of waves and do the dragon dance. 9) Perhaps reverse out.

fin_0A fin_08 fin_09

The graphics are amazingly fun to play with, within its own boundaries. Highlight of the graphics will be the pink dragon in the white sky. The combination of exploring what visual ideas I had and using them on the computer created a space for creativity to sip in this visual project.

Designing graphical scenes after testing a few of the drawn sketches or sketches in the mind. It was time to mix match narrative that I have already written down, a storyboard of graphics to the actual coding. In short the narrative is a slow build up.

It is a play of creativity in rigidity. The story tells of the actions to be creative within rules. Through only grids, graphs, and sin waves we are able slowly build it into a creation story of the dances in the sky.
DSRlines – Tetragoon
Coding for Emotional Impact

CEI #00000B – DSRlines Collaboration Brainstorming

Went back to the sketches and found a few to study, I quickly tried a style DSRlines has on his recent album. There were simple sine waves and geometry with a grid on the back. So I went back to one sketch and modified it so it looks visually pleasing. I thought of an oscilloscope and perhaps the story of the music can start here. Perhaps in the beginning it be white then suddenly it inverses to allow the audience react to what more will come. Still haven’t received the sample music, but looking forward for it.fin_01

I later added modulating properties since it should be able to react the music either manually or automatically. Created a fading keystroke and made the one wave be 10% the amplitude of the other. I can imagine this as more of a VJ tool though. I hoping I can connect several keys for different wave forms and changing of graphic styles from background to the shape of the wave.

How the images are crisp, but the moving images not so. I started storyboarding different visualizations and how they come together. Allowing for change in variables becomes a fight between simplicity and complexity in visualization for storytelling. The more one has, the slower the program. Inefficiency of programming adds a layer of different effects, it is the comparison between control and malleability.
fin_04 fin_05

A study for a collaboration with a musician: A Visualization Brainstorming. The visual storytelling of a music depends on the music and how many systems of variations one can add and manipulate. The different wave forms, the weight of the wave, the background grid’s existence: all the little things add value to the storytelling of the music. There is also a tension between efficient programming and controllable items.

I’ve set up a few parameters and tried to work out how simplicity and complexity plays out in storytelling.
DSRlines – Cirkelsegment

Playing with recursive properties: for one wave I started to meddle around with the frequency input. The frequency is in itself a sine wave where the output number fluctuates. With different variables changing the look of the waves, it becomes hard to predict what’s controlling what. Because of the unfamiliarity it is hard direct the visualization. Rather than manually controlling it perhaps it would work better with set frequency input waves and divide them into groups of piano, allegro, forte so it becomes easier to represent the music.

Also love these graphical images of the layered waves, they become a landscape in themselves. It would be rather awesome to be able to have different waves at different z-axis or have the screen extend over a few screens. All these ideas of control & simplicity to make a mathematical space landscape is working out pretty well. However, I fear that I am getting close to the threshold of the writers’ block.



CEI #000009 – Out of Control Voices

At a certain point I forgot that I was in ITP place to have fun and experiment. I’ve been doing homework to show rather than to think, being afraid of failure and of not understanding. This post will be more honest than the other ones.

I’ve been wanting to re-learn curves and waves, but this is going about a bit too fast. I’m trying to make the cubes I have rotate in a certain manner with the voices class, but it’s confusing adding different classes together. I tried with one cube, with a bit of success. I also wanted to use three js with p5, but I think I’ve been dis-concentrated.

cube_voice_01 cube_voice_02

Understanding how to manipulate all of them together is a big challenge now. I’m trying to put it within the arrayList cubes, but just having weird little simulations. I have results but not control over them.

I want to have an ArrayList of cubes rotating in a spiral motion where the color and size fluctuates. Like this diagram, where the orange line is the pathways of the cubes. The path wave has a curve where the amplitude increases then decreases. The x and z orientation of the cubes are constantly in rotating motion and the size of the cubes are also in a sin or cosine wave.


And yet I’m running into a problem where when I try to toggle the voices the x or z coordinates for all the cubes resets to zero. Maybe I shouldn’t have erased the curve class. I’m trying to make sense of it, but not recognizing patterns are confusing me, so I may need to go back and go step by step.

cube_voice_05 cube_voice_04 cube_voice_06

CEI #000008 – Waves, Curves and Electrons

In this week’s Coding for Emotional Impact! “Quantum waves”! I was roaming around the web when I saw this image:

I don’t know the specifics except that the device is using quantum mechanics to weigh the mass of an electron. Then I started looking at quantum physics in Youtube. It was interesting to know that waves were a way to express the the existence of particles. The behaviors of small particles were express through combination of waves and etc on things I don’t really understand that well. The above image reminded me of Laura’s sketch (link here) and I thought: “The waves and the curves maybe the future!”

Anyhow, I started exploring 3D environments again through looking at Laura’s sketch and thought to study the movement of objects in space. The additional dimension created a confusion on how the sketch would look visually if each dimension had a wave property so I made it simple to be a pipe.

cubes_v05 cubes_v06

The y-movements of the cubes slowly escalate simulating a property of something out there doing its thing. Later on I started playing with curves and adding them to the movement and found out that there is still a pipe but not circular anymore, I was thinking about the quantum mechanics at this point and was excited if there was anything that looked like it. It was comforting to trick myself to believe that these confusing path these cubes were taking might have a actual reference in real life. (And I thought it originally looked like DNA samples)

cubes_v07 cubes_v02 cubes_v03 cubes_v04

Since this code is a bit long and want to get hang of how the github link would look like the code for these will be on my github repository! Go to the CEI folder if you want the normal circular pipe version.

Hmm, I just realized I didn’t play with timing with curves…

GSD# 000004 – More thoughts on DialScript

Here are my thoughts trails of my own language, when I awoke in the middle of the night and had to write it down since I knew I was going to forget it.

P:<-adding a dialogue?. //or moving between dialogues

1.P:>> //moving to its next and previous dialogue
//from arraylist “1″
//using >> or <<
//this will be our moving left or right
//for a turing machine

//We can imagine dialogues to have these direction options

//Then we can compare dialogues in character to change dialogues within another character


match 1.P: with 0.A: //or "=1.P:+0.A:" which has to be ["=",[1,"P"],"+",[0,"A"]]

//might be,

Q: -0.P:. -with. -0.A:.
match Q:
0.Q:>> //within the first object increase number of 0 to 1
match Q:


match Q:) //loops til end of “P:” and adds 0.A:

//then we can make variable names for the numbers

//Loop with brackets or parenthesis
//”length”function for number of dialogues in a character
//”(length)” function that loops around all dialogues in character one by one.

((length).P: with (length).A:)
//might be

Need to review turing machine and its basics
to add its idea here. But if I do is it really what I want to create? Does a programming be turing complete?

GSD# 000003 – Scribbles about languages

The sketch/jump/brainstorm/pitch.

#1 – During a talk with Aaron on the subway, I jokingly talked about a programming language that would post embarrassing status updates on your Facebook for every mistake you made. It was a programming language that is not tolerable of mistakes in its syntax.

#2 – Always have been curious about dialogues. I’m especially fond of point-and-click games where the dialogue mattered the most. I was thinking of a programming language/script that would facilitate dialogue between characters.

The delve/spelunking/mine

#1 – So what does it mean to make mistakes? What would come out if we thought about a programming language that is intolerable to mistakes? If the user can’t make any mistakes at all: what would happen? They’d be confused and javascript somewhat does it. Then how about a language that has a grammar structure that can not be mistaken in anyway. Where the order of expressions doesn’t matter as long as it’s in the line. What is the difference between <+9 4> and <9+4 > or < 49+>? Why not let all of these be the same result since all the components are the same. How would the computer know to differentiate code lines? Do we need code lines to find errors if errors are intolerable? How about making a packets system where the computer only checks packets of coding. How about we let the coding be interpreted by the computer on its own.

#2 – What if there is only two systems that check and talk to each other? A interpreter based on dialogues. There is two columns of code dialogue interchanging expressions and gathering data like a conversation. Although I really just wanted to make a literal dialogue script. Every string without quotation becomes a character and everything right to it becomes its dialogue. The break would let the computer sort the dialogues by number where the top most lines are first and the latter are later. A dialogue system where you write all possible dialogue and just choose numbers to represent them on the actual reading script.

Jake “Good Morning.”
“Time is beloved.”
“Mind is being blown by the cat videos of the past.”
Charles “Good ‘Morrow”
“System of a down and kisses with a chocolate twist.”

Jake 2 Charles 0,1 Jake 0

DialogueScript the beginnings

After much pondering, I thought the best next step was actually just go at it making the dialogue based script. I do believe that it won't be Turing Complete, but I would get to think about the structure of the language more in depth. Now I have differentiated between a character and dialogue structure and two expressions that puts the data in the right array format. Now to start parsing data and take some actions. Below is the genesis of the script. (Ignore the miniLisp)

  start                         = first / second+ / character / dialogue+
  character                     = s:string+ space ":" space { return s.join('').toUpperCase(); }
  first                         = c:character d:dialogue+
  second                        = n:number "." c:character break {return [n,c]}
  dialogue                      = "-" space s:string+ space "." space (enter/space) {return s.join('')+"." }

  string                        = [^\-.:]

  number                        = d:digit+ space { return parseInt( d.join('') ) }
  digit                         = [0123456789]
  break                         = "," / space 
  enter                         = [\n\t]* { return undefined }
  space                         = [ ]* / !. { return undefined }
  mandatory_space               = [ ]+ / !. { return undefined }

These parse into Arrays and MiniLisp.eval evaluates them

aa This This is the begninning -I am the powerful wizard. am I a wizard -this is the end. -I work suck it. -I absoulty works. -amp worth it. -the things we see. -does this make sense.

These work

-Even the longest string gets turned into a single string a dialogue item. 4 8: -4 5 6fgh. John: Js:-am it. Js : - am at . John: -The things. -The time. -The helpless. -I am a gonner. Ko: -this is sparta . -no this is athens. 4.Jn:

The flow of a dialogue

narrator: -It was dark in the woods, the sun was a little overwhelmed and nothing gave way to surprise the characters were getting into. p1: -The event are murky. -I don't understand you. -Bugger off will yah!. p2: -C'mon remember it back. -I understand you though. -Sensitive bastards. 1.p1: 2.p2:,0.narrator:

CEI #000007 – Visual Timing (Control surprise through timing, setting up chapters with pacing)

Building up from the last project, I wanted to have a visual project or a piece that showed all the different wave forms that was created without jeopardizing each form. All the visually rich wave forms that were created were stunning and it was about showing several of them without letting the audience guess what would come out next.
Screen Shot 2014-03-22 at 2.45.45 PM

Screen Shot 2014-03-22 at 2.46.42 PM

I love to create visual images and videos that are visually rich in their own manners. Images are images and videos are videos there is some communication, but one does not do justice for the other. This exercise helps with transitioning one image to another without the lost of its graphical flow.

The pacing of the whole drawing procedure is constant, I believe it to be around 29 a grave. But because of the forms of the waves and the changes in frequency one may think that is faster at certain points because you can’t seem to detect the returning point. Most of the change of wave forms occurs when the circle hits the middle point, It repeats that change in visual forms four times to create an anticipation and also a connection between forms. However, in the second to last form I change that rule (fake out) and try to catch the audience off-guard. Also I give a abrupt yet peaceful finale of just stopping the drawing process. So the audience views the piece as a static image.

Repeating a certain timing structural rule four times defines a boundary. Changing that timing rule about a 10%-20% off creates that surprise since it is a transition state for audience to think about adjusting to this new rule or not. As long as the pacing is the same the audience enjoys the fact that they have something to anticipate under the time pacing rule. With this established pacing one can throw small changes with the same pacing and timing. A small drastic change can be also be achieved through changing the timing a little bit to make it surprising and let the audience be awoke. For changing pacing I’d rather think that is used to make a whole different chapter of timing rules and believe it shouldn’t be used as to surprise audience but rather set a new rule to make the audience anticipate little surprises again.


var xSine;
var ySine;
var ampS;
var freS;
var amp;
var fre;
var x;
var y;
var t;
var size;
var q;
var count = 0;

function setup() {
	xSine = new Wave(0,0,0,width/2);
	ySine = new Wave(0,0,0,height/2);
	ampS = new Wave(0,0,0,0);
	freS = new Wave(0,0,0,0);

function draw() {

	size = random(244);//map(noise(t),0,1,10,244);
	if(random(1) < 0.5) {

	//25 about a second
	if(count < 500){
	 q = 0.1;
	//right random looking
	else if(count < 625){
	 q = 1;

	else if(count < 825){
	 q = 0.5;

	else if(count < 900){
	 q = 0.8;
	//right side, smooth curve
	else if(count < 1350){
	 q = 0.05;
	//black out and flashes
	else if(count < 1900){
	 q = 0.001;
	//this is it, galaxy
	else {
	 q = 0.08;

	amp =,250);
	fre =,q);
	x =,amp);
	y =,amp);

	var sz = random(8);
	//no more movement
	if(count > 2700){
	 x = width/2;
	 y = height/2;



var Wave = function (t, f, a, o) {
	this.t = t;
	this.f = f;
	this.a = a;
	this.o = o;

Wave.prototype.update = function() {
} = function(_f,_a) {
	this.f = _f;
	this.a = _a;
	return this.wave();

Wave.prototype.wave = function() {
	return Math.sin(this.t)*this.a+this.o;

GSD# 000002 – MiniLisp

Using Peg to write a language using recursion is both confusing and satisfying. It took a while before figuring out using the MiniLisp function itself on itself again to solve the problem of nested arithmetic. Oh how beautiful is the simplicity of it all. Now I’m having a great time trying to figure out conditionals. The problem I have is that it is looking at the word “if” I think I’m gonna change into a a single symbol. Nope all solved, just needed to re-pass the objects after the conditional keyword as two objects. (Except the multiple I wonder if I should pass everything as an array)

I got most of the things working except the multiple adding. I’m missing something simple I can feel it. Here’s the code.

<script src="../js/sugar.js"></script>
<script src="../js/peg.js"></script>
<script src="../js/plt.js"></script>

<title>Parsing Data Structures</title>

<script type="text/javascript">
  PLT.refresh = false;

     MiniLisp is the name of the language we are designing
     this is the JavaScript object that will contain all of
     the functions and data that will make the language work
  var MiniLisp = {
      eval is short for evaluate. It is the function that will
      take as input the parsed array and implement the behavior
      of the language
    eval: function(parsed_array) {
      // if the first item in the parsed array is '+', perform addition

      var a = parsed_array[1];
      var b = parsed_array[2];

      //multiple arguments, bad bad solution
      if(parsed_array.length > 3 && parsed_array[0] == '+' ){
          return parsed_array.sum();

      if(parsed_array[0] == '?'){

        var a = MiniLisp.eval(a);
        var b = parsed_array[2];
        return a?b[0]:b[1];

      if(b instanceof Array){
        var b = MiniLisp.eval(b);        

      if(parsed_array[0] == '<'){
        return a < b;

      if(parsed_array[0] == '>'){
        return a > b;

      if(parsed_array[0] == '='){
        return a == b;

      if(parsed_array[0] == '+'){
        return a + b;

      if(parsed_array[0] == '-'){
        return a - b;

      if(parsed_array[0] == '*'){
        return a * b;

      if(parsed_array[0] == '/'){
        return a / b;

      else {
        // throw is how you generate an error in JavaScript
        throw new SyntaxError("Unrecognized operator '" + parsed_array[0] +"'!")




Full documentation:

'x'   : match the literal character 'x'
[xyz] : match one of the literal character 'x', 'y', or 'z'
x+    : match x 1 or more times
x*    : match x 0 or more times
x?    : match x 0 or 1 times
!x    : match anything but the match x
x/y   : match x or y, trying in that order
v:x   : assign the result of the match x to the variable v


  start                         = o:(operation/comparison/conditional) { return MiniLisp.eval( o ) }

  operation                     = '(' space op:operator space args:expression+ ')' space { return [ op ].concat(args) }
  operator                      = '+' / '-' / '/' / '*'

  comparison                    = '(' space op:comparator space args:expression+ ')' space { return [ op ].concat(args) }
  comparator                    = '<' / '>' / '='

  conditional                   = '(' space co:condition space a:comparison space args:expression+ ')' space 
                                  { return [ co ].concat([a],[args])} 

  condition                     = 'if' {return ('?')}
  expression                    = operation / number

  number                        = d:digit+ space { return parseInt( d.join('') ) }
  digit                         = [0123456789]

  space                         = [ ]* / !. { return undefined }
  mandatory_space               = [ ]+ / !. { return undefined }

<h3>These parse into Arrays and MiniLisp.eval evaluates them</h3>
<code>(+ 1 2)</code>
<code>(+ 7 13)</code>

<h3>Homework: Make the other operators work</h3>
<code>(- 1 2)</code>
<code>(- 7 13)</code>
<code>(* 1 2)</code>
<code>(* 7 13)</code>
<code>(/ 1 2)</code>
<code>(/ 7 13)</code>

<h3>Homework: Make nesting work</h3>
<code>(+ 7 (+ 30 5))</code>
<code>(- 100 (+ 29 29))</code>
<code>(* 2 (+ 2 3))</code>

<h3>Extra: Make multiple arguments work</h3>
<code>(+ 20 20 30 40 50)</code>
<code>(* (- 10 5) (+ 20 20 30 40 50))</code>

<h3>Extra: Make comparisons work</h3>
<p><em>These should evaluate to true</em></p>
<code>(< 18 90)</code>
<code>(> 78 12)</code>
<code>(= 50 50)</code>

<p><em>These should evaluate to false</em></p>
<code>(< 5 4)</code>
<code>(> 100 200)</code>
<code>(= 50 51)</code>

<h3>Extra: Make conditionals work</h3>
<p><em>This should evaluate to 5</em></p>
<code>(if (< 0 8) 5 9)</code>

<p><em>This should evaluate to 9</em></p>
<code>(if (> 0 8) 5 9)</code>