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 = ampS.run(0.007,250);
	fre = freS.run(q,q);
	x = xSine.run(fre,amp);
	y = ySine.run(0.1,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() {

Wave.prototype.run = 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: http://pegjs.majda.cz/documentation#grammar-syntax-and-semantics-parsing-expression-types

'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>

GSD #000001 – PuzzleScript – Helping…

PuzzleScript is one fun language, you can do so much in so little time and it’s full of challenges that seem doable with time. As a language it seems you can easily spiff up prototype of games and play them right away. I also think it’s a good tool to make storyboards. With a little bit of reading the documentation it was easy to grasp simple game mechanics. Although if you want to make more complex games you might run into problems of remembering what you wrote and how each layer reacts with one another. I’ve seen great experiments on the forum in making gravity work to make a platform type game. It seems to be a game engine that offers more than just puzzle game making.

Here’s what I made. Link below images.puzzleScript01 puzzleScript02


CEI #000006 – Sine Wave Recursion Case Studies

Iterations on recursion. For this week I wanted to get the idea practicing recursion. In this study I put two sine waves as inputs for another sine wave. One was the amplitude sine wave and the other was the frequency sine wave.

This are images for version 1 and 2, I was curious what the numbers were doing. I found out that changing the numbers drastically changed the appearance of the polar rose and produced really beautiful geometry loops. I also played around with the graphics to firstly to present a serene atmosphere, then I moved on to use graphics as a means to show what geometries the sketch was drawing in a clear manner.
recursion_v01 recursion_v02 recursion_v02_1

I wanted to see the shapes of distorted ellipses being drawn and produced this version:

Then I upgraded the graphic and added keyboard interactivity to control the size of frequency and amplitude. And this is the video for it, below the video is the code.

Sine xSine;
Sine ySine;

Sine ampS;
Sine freS;

float num = 0.001;
float amp,fre;
float x, y;

float t;
float size;
float q;

void setup() {
  size(1280, 720);
  xSine = new Sine(0, 0, 0,width/2); 
  ySine = new Sine(0, 0, 0, height/2);
  ampS = new Sine(0,0,0,0);
  freS = new Sine(0,0,0,0);

void draw() {
//  x = xSine.run(0.01,100);
//  y = ySine.run(0.1,70);
  size =  map(noise(t),0,1,10,244);
  //color of dots 
  if(frameCount % (int)random(1,90) == 0 ) fill(size,0,0,200);
  if(frameCount % (int)random(1,100) == 0){  q = 0.01;}
  else q = 0.1;
  //change these numbers
  amp = ampS.run(num,250);
  fre = freS.run(q,q);
  x = xSine.run(fre,amp);
  y = ySine.run(0.1,amp);
  //float s = ampS.run(0.001,2);
  float sz = random(20);
  ellipse(x, y,sz, sz);

void keyPressed(){
  case UP:
  case DOWN:

class Wave {
  float freq, time, amp, off;

  Wave(float _time, float _freq, float _amp, float _off) {
    time = _time;
    freq = _freq;
    amp = _amp;
    off = _off;
  void update() {

  float run(float _freq, float _amp) {
    freq = _freq;
    amp = _amp;
    return wave();

  float wave() {
    return 0;

class Sine extends Wave {
  Sine(float t, float f, float a, float o) {
    super(t, f, a, o);

  float wave() {
    return sin(time)*amp+off;

CEI #000005 – Three Arcs in One

Here’s the final resulting variations of waves. They’re short but every combination of 3 waves are aesthetically pleasing. Each combination produce curves that are pencil-like with different stroke widths. The sketch starts off with a line being drawn in the middle to set the mood and then surprises the audience with organic looking lines.




//3 waves at a time
//alternates between sin and cos waves.

float x;
float y;
float t1=0;
float t2=0;
float t3=0;
float r = 100;
boolean tf = false;
float range;
int size = width;
int count = 0;

void setup() {
  size(720, 480);
  fill(11, 1);

void draw() {
  translate(width/2, 0);

  if (tf == false) {
    x = waveCos(2, size);
    y = t2;

  //the sin and cos waves alternations
  else {
    if (random(1)<5) {
      x = waveCos(1, size);
    else {
      x = waveSin(1, size);
    y = t1;

  ellipse(x, y, 2, 2);
  //increasing t

  if (y > height) {
    //restart every 3 waves
    if (count%5 == 0) {
      count = 0;
    fill(11, random(10,40));
    translate(width/2, height/2);
    range = random(1)*1.3;
    size = (int)(random(1)*width/3);
    tf = !tf;
    t1 = 0;
  println("count: "+count);

float waveSin(float f, float a) {
  return sin(f*t1)*a;

float waveCos(float _f, float _a) {
  return cos(_f*t3)*_a;

GSD #000000 – Peg Initiation

Ah woo hoo! Fun but frustrating

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


      returns an array of separate characters
      *   : 0 or more
      ?   : 0 or 1
      +   : 1 or more
      /   : or
      []  : any matching character

  start     = ('5'/'6')+
  start     = (fives / sixes)+
  fives     = '5'+
  sixes     = '6'+
  start     = digits+ { return ";)" }
  digits    = [0123456789a]
  start     = d:digits+ { return typeof d }
  digits    = [0123456789]
  operator   = [+-*/]
  start           = add / sub / mult / div
  add             = '(' add:addition {return add;}
  sub             = '(' sub:subtraction {return sub;}
  mult            = '(' mult:multiplication {return mult;}
  div             = '(' div:division {return div;}

  addition        = <!--'+' ' '* a:primary ' '* b:primary ' '* ')' {return a + b;} /-->
                    '+' a:primary+ space ')' {return a.sum()}
  subtraction     = '-' a:primary space b:primary+ ')' {return a - b;} /
                    '-' a:primary+ ')' {return -a.sum()}
  multiplication  = '*' a:primary space b:primary ')' {return a * b;}

  division        = '/' a:primary space b:primary ')' {return a / b;}

  primary         = objNum / add / sub / mult / div
  objNum          = space a:number {return a}
  number          = d:digit+ { return parseInt( d.join('')) }
  digit           = [0123456789]
  space           = [ ]*

<h3>Numbers Examples</h3>


  <code>(+            5          13 )</code>

  <code>(+ 4 5 5 5)</code>

  <code>(- 26 7 8)</code>

  <code>(+ 3 3 (+ 3 3))</code>

  <code>(+655 7566)</code>

  <code>(+7(+40 5))</code>

  <code>(+1(+2(+3(+4(+5(+6(+7(+8 9))))))))</code>


  <code>(-20 3)</code>

  <code>(-30(-10   (- 20 20)))</code>


  <code>(*2 4)</code>

  <code>(*3 (*3 3))</code>


  <code>(/6 2)</code>

  <code>(/5 (/5 (/3 9)))</code>

<h4>Combination of Operators</h4>

  <code>(-30 (/4 (*3 (+4 2))))</code>