Author: jdbrown@andrew.cmu.edu

Jdbrown – Final Project – iRony

To begin typing, begin typing.

My final project is a Braille typing interface. Since hardly anyone who can see can read Braille, and hardly anyone who can read Braille can see, It’s meant to be used as a venting system – like writing a letter you’ll never send. The program allows typing of all letters and some punctuation (i.e. question mark, space, enter keys). Once one has typed enough, the program will reset the canvas and repeatedly erase what the user has written. “Delete” will reset the canvas / program.

irony

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Final Project: Braille Writing: "Irony"
// Section C

var dotSize = 8;        // size of Braille dots
var dotX = 10;          // x co-ordinate of each dot
var dotY = 10;          // y co-ordinate of each dot
var dotDis = 10;        // distance between dots;
var t1;                 // turtle object
var counter = 0;        // counter for "transition" function
var back = 0;           // background variable
var col = 0;            // color variable
var spd = 0.5;          // speed variable

function setup () {

    createCanvas (480, 500);
    background (255);

}

function draw () {

    transition(); // function erases the canvas, erases typed input periodically
    
}

function transition() {

    if (counter < 20) {                 // if the user has entered fewer
        col = 0;                        // than 20 letters, dot color is black
    } 

    if (counter > 20 & col < 240) {    // if the user has entered more than
        col += 0.5;                     // 20 letters, dot color lightens
    }

    if (counter > 20) {                 // if the user has entered more than
        col += 1;                       // 20 letters, dot color lightens
    } 

    if (col > 200) {                    // if the dot color is whitish,
        background(back += 1);          // de-draw the background, lighter
        col = 255;                      // dot color is black.
    } 

    if (back >= 255) {                  // if the background is white,
        col = 1;                        // dot color is black
        back -= 0.25;                   // background darkens
    }

    if (counter >= 150) {
        background (255);
        col = 0;
        noLoop();
    }
}

function keyPressed() {

    var t1 = makeTurtle (dotX, dotY);
    print (keyCode);

    if (keyIsPressed) {     // when a key is pressed, increase the counter;
        counter += 1;       // move the Turtle over to mimic space between letters.
        print (counter);
        dotX += 26;
    }

    if (keyCode == 8) {     // when the delete key is pressed, 
        background (255);   // clear the canvas and reset the turtle position.
        dotX = 10;          // clear the counter back to 0;
        dotY = 10;
        counter = 0;
        draw();
    }

    if (dotX > (width - 5)) {   // when the dotX goes beyond the canvas, reset it to keep it on
        dotY += 45;
        dotX = 10;
    }
    if (dotY > (height - 5)) {  // if tying goes beyond the canvas, fix it.
        dotY = 10;
        dotX = 10;
        background(255);
    }
    if (keyCode == 32) {    // creating a space w/ spacebar;
        makeSpace(t1);
    }
    if (keyCode == 65) {
        makeA(t1);
    }
    if (keyCode == 66) {
        makeB(t1);
    }
    if (keyCode == 67) {
        makeC(t1);
    }
    if (keyCode == 68) {
        makeD(t1);
    }
    if (keyCode == 69) {
        makeE(t1);
    }
    if (keyCode == 70) {
        makeF(t1);
    }
    if (keyCode == 71) {
        makeG(t1);
    }
    if (keyCode == 72) {
        makeH(t1);
    }
    if (keyCode == 73) {
        makeI(t1);
    }
    if (keyCode == 74) {
        makeJ(t1);
    }
    if (keyCode == 75) {
        makeK(t1);
    }
    if (keyCode == 76) {
        makeL(t1);
    }
    if (keyCode == 77) {
        makeM(t1);
    }
    if (keyCode == 78) {
        makeN(t1);
    }
    if (keyCode == 79) {
        makeO(t1);
    }
    if (keyCode == 80) {
        makeP(t1);
    }
    if (keyCode == 81) {
        makeQ(t1);
    }
    if (keyCode == 82) {
        makeR(t1);
    }
    if (keyCode == 83) {
        makeS(t1);
    }
    if (keyCode == 84) {
        makeT(t1);
    }
    if (keyCode == 85) {
        makeU(t1);
    }
    if (keyCode == 86) {
        makeV(t1);
    }
    if (keyCode == 87) {
        makeW(t1);
    }
    if (keyCode == 88) {
        makeX(t1);
    }
    if (keyCode == 89) {
        makeY(t1);
    }
    if (keyCode == 90) {
        makeZ(t1);
    }
    if (keyCode == 191) {
        makeQuestion(t1);
    }
    if (keyCode == 13) {
        dotY += 45;
        dotX = 10;
    }
}

function makeA (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeB (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
    t1.penUp();
}

function makeC (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

}

function makeD (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeE (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

}

function makeF (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeG (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeH (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeI (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeJ (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeK (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeL (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeM (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeN (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeO (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeP (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeQ (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeR (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeS (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeT (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeU (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeV (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeW (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeX (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeY (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeZ (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeSpace (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeQuestion (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?

function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;


/*function TEMPLATE (t1) {

    t1.setColor(0);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

}

    Keycodes for letters:
    a = 65, b = 66, c = 67, d = 68
    e = 69, f = 70, g = 71, h = 72,
    i = 73, j = 74, k = 75, l = 76,
    m = 77, n = 78, o = 79, p = 80,
    q = 81, r = 82, s = 83, t = 84,
    u = 85, v = 86, w = 87, x = 88,
    y = 89, z = 90;
    */
    
    /*noStroke();
    fill (0);

    ellipse (dotX, dotY, dotSize, dotSize);         // top left;
    ellipse (dotX * 2, dotY, dotSize, dotSize);     // top right;
    ellipse (dotX, dotY * 2, dotSize, dotSize);     // mid left;
    ellipse (dotX * 2, dotY * 2, dotSize, dotSize); // mid right;
    ellipse (dotX, dotY * 3, dotSize, dotSize);     // bottom left;
    ellipse (dotX * 2, dotY * 3, daotSize, dotSize); // bottom right;

    //ellipse (10, 10, 10, 10); // defining the top left;
    //ellipse (20, 10, 10, 10); // defining the top right;
    //ellipse (10, 20, 10, 10); // defining the mid left;
    //ellipse (20, 20, 10, 10); // defining the mid right;
    //ellipse (10, 30, 10, 10); // defining the bottom left;
    //ellipse (10, 30, 10, 10); // defining the bottom right;
*/
}

Jdbrown – Looking Outwards 12

In moving forward with sound installation as a genre, I’ve been looking at several installations. The two which come to mind are Sound Forest, by the Graduate School of Media Design, Keio University, and Rainforest, by David Tudor. Both of these pieces deal with capacitance and physical objects which resonate and become a part of the space, and that’s a quality of installation work that interests me. I’m wondering how I might be able to incorporate interaction with my installation, and perhaps by working on my final project, I may be able to get a sense of how that might be done.

 

 

Jdbrown – Final Project Proposal

I’m working on a sound installation for next semester, and I’d like to use this project to create an interactive draft of the installation. The basic concept is a bunch of phones hanging from the ceiling, playing back snippets of “final conversations” that I’ve amassed from a Google Survey through social media. The overall project will be a small animated scene which plays sound when clicked, etc. Part of what I love about P5 is the drawing aspect, so I’m going back to the start and drawing the scene, using the computational elements I’ve learned along the way to make it stylish.

Jdbrown – Project 11 – I Like Turtles (Mosaic)

sketch

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 11: Turtle Fun

// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?

function setup () {
    createCanvas (480, 480);
    background (0);

    var t1 = makeTurtle(270, 120);
    var t2 = makeTurtle(255, 160);
    var t3 = makeTurtle(330, 340);
    var t4 = makeTurtle(30, 280);

    for (var i = 0; i < 1000; i++) {
        
        makeMoz(t1);    // makes the mini-med sized pattern;
        makeMaz(t2);    // makes the smallest patter;
        makeMax(t3);    // makes the largest pattern;
        makeThing(t4);  // makes the larger-med sized pattern
    }
}

function makeThing (t4) {

    t4.forward(10);
    t4.left(45);
    t4.forward(25);
    t4.left(90);
    t4.forward(50);
    t4.left(135);
    t4.forward(75);
    t4.left(180);
    t4.forward(150);
    t4.right(45);
    t4.forward(50);
    t4.right(90);

}


function makeMax (t3, a1) {

    t3.forward(200);
    t3.left(90);
    t3.forward(180);
    t3.left(90);
    t3.forward(160);
    t3.left(45);
    t3.forward(140);
    t3.left(90);
    t3.forward(120);
    t3.left(90);
    t3.forward(100);
    t3.left(45);
    t3.forward(80);
    t3.left(90);
    t3.forward(60);
    t3.left(90);
    t3.forward(40);
    t3.left(45);
    t3.forward(20);
    t3.left(90);
}

function makeMoz (t1) {
   
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(45);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(45);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(45);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(45);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
    t1.right(45);
    t1.forward(50);
    t1.right(90);
    t1.forward(50);
}

function makeMaz (t2) {

    t2.forward(25);
    t2.right(90);
    t2.forward(25);
    t2.right(45);
    t2.forward(25);
    t2.right(90);
    t2.forward(25);
    t2.right(90);
    t2.forward(25);
    t2.right(90);
    t2.forward(25);
    t2.right(45);
    t2.forward(25);
    t2.right(90);
    t2.forward(25);
    t2.right(90);
    t2.forward(25);
    t2.right(90);
    t2.forward(25);
    t2.right(45);
    t2.forward(50);
    t2.right(90);
    t2.forward(50);
    t2.right(90);
    t2.forward(50);
    t2.right(90);
    t2.forward(50);
    t2.right(45);
    t2.forward(50);
    t2.right(90);
    t2.forward(50);
    t2.right(90);
    t2.forward(50);
    t2.forward(50);
    t2.right(90);
    t2.forward(50);
    t2.right(45);
    t2.forward(50);
    t2.right(90);
    t2.forward(50);
}

function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(255),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

There’s something simplistic and beautiful about these turtle designs. I’ve chosen to go a simpler route and just explore the shapes turtles can effortlessly create. I really enjoy these mosaic-shapes.

Jdbrown – Looking Outwards 11 – Sound Art

I’m a really big fan of sound art that deals with wearable technology and the body’s role in music-making. Using surface transducers (little machines which vibrate at a frequency depending on their input, i.e. little vibrating circles that turn surfaces into speakers), the Human Harp is an example of an instrument that incorporates gesture as well as space into its performative practice.

It’s a fairly simple set-up, but it’s one of the projects that has most inspired me.

Josh

 

Jdbrown – Project 10 – Magic

I took a rather simple approach to this project – none of the ideas I came up with was more interesting than this experiment that I made:

sketch 

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 10 - Landscape

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 10 - Landscape

// Simple demonstration of the noise() function. 
// Change these for different effects:

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var i;

function setup() {
    createCanvas(480, 480);
    frameRate(30);
}
 
function draw() {
    
    background(255);
    beginShape(); 
    fill(0, 100);

    for (var i = 0; i < width; i++) {
        var t = (i * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(i, y + 200); 
    }

    for (var i = 0; i < width; i++) {
        fill (0);
        var t = (i * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, -1, 0, height);
        vertex(i, y + 400); 
        fill(0, 10)
        noStroke();
        rect (i, y + 800, i, y + 100);
    }

    endShape();
    drawSun();
}

function drawSun() {
    // making the sun and its lines

    var S = second();
    var H = hour();
    var M = minute();

    //drawLines();

    push ();
    stroke (255);
    strokeWeight (2.5);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 320, 320, radians (0), radians (45));
    arc (0, 0, 320, 320, radians (55), radians (100));
    arc (0, 0, 320, 320, radians (110), radians (155));
    arc (0, 0, 320, 320, radians (165), radians (210));
    arc (0, 0, 320, 320, radians (220), radians (265));
    arc (0, 0, 320, 320, radians (275), radians (310));
    arc (0, 0, 320, 320, radians (320), radians (350));

    fill (255, 100, 120);
    ellipse (0, 0, 200 + (H * 3), 200 + (H * 3));   // draws the sun
    fill (255);
    ellipse (0, 0, S + 75, S + 75);     // draws the white ball in the sun, growing every second
    pop ();

    push ();
    stroke (255);
    strokeWeight (1.5);
    translate (width, 0);
    rotate (radians (S * -6));
    fill (0, 0);
    arc (0, 0, 300, 300, radians (0), radians (45));
    arc (0, 0, 300, 300, radians (55), radians (100));
    arc (0, 0, 300, 300, radians (110), radians (155));
    arc (0, 0, 300, 300, radians (165), radians (210));
    arc (0, 0, 300, 300, radians (220), radians (265));
    arc (0, 0, 300, 300, radians (275), radians (310));
    arc (0, 0, 300, 300, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();

    push ();
    stroke (255);
    strokeWeight (1);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 280, 280, radians (0), radians (45));
    arc (0, 0, 280, 280, radians (55), radians (100));
    arc (0, 0, 280, 280, radians (110), radians (155));
    arc (0, 0, 280, 280, radians (165), radians (210));
    arc (0, 0, 280, 280, radians (220), radians (265));
    arc (0, 0, 280, 280, radians (275), radians (310));
    arc (0, 0, 280, 280, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();
    
}

Jdbrown – LookingOutwards 10 – Les Artistes Females

About a month ago, CMU greeted several innovators in the field of computational design and robotics for a research symposium on smart design and the trajectories of computer-aided architecture / modeling practices. It was a pretty interesting event, and I got to hear five panelists discuss their research areas, and even though my work has nothing to do with computational design, I enjoyed the symposium.

One of the presenters was a woman by the name of Madeline Gannon, a roboticist whose work explores biological models for computer-aided design and mechanical installation. The image I most closely associate with Gannon is that of her interacting with Mimus, her 1,200kg industrial robot arm-thing. Mimus was exhibited at a robotics installation earlier this year and attracted the attention of gallery-goers both young and old.

She has also done work with “painter tools” for 3D printing interfaces, called Reverb. Modeled after squids, these long, drapy tendrils can be layered onto a 3D-scanned torso model to create immediately wearable, intricately geometric shapes with relative ease.

Overall, her work is very interesting, and it’s fun to see her build bonds with these massive hunks of steel and bloodlust. I’ve always been a fan of bio-based design, and her research areas have a solid blend of pragmatic technical expertise and curiosity for the living world.
To see more of Gannon’s work, explore her website.

Jdbrown – Looking Outwards 9 – Browns & Lozano-Hemmer

For the first interesting piece someone else has posted, I chose this work, posted by “HDW” and created by Daniel Browns. His work is really interesting – in particular this cover artwork that he did for William Gibson’s republished books. One of my favorite styles of geometric art is the “sprawling city” genre, used in Inception and Dr. Strange. So when I saw Browns’s work, I got very excited.

Another piece that I found interesting was Rafael Lozano-Hemmer’s work on this algorithm that randomly deletes 1–10 friends from your Facebook profile, once installed. What’s interesting to me about this piece is its simplicity – the concept being, “would you notice the absence of this person if they were deleted without your knowledge?” It’s an interesting interrogation into modern friendships – what does it mean if you never notice one of your friends missing? This piece starts to ask that question.

Josh

 

JDBROWN – Project 7 – C U R V E S

Curve

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Project 7: Curves
// Section C

function setup () {
    createCanvas (480, 480);
    background (0);
}

function mousePressed () {
    background (0);
}


function draw () {

    stroke (255);
    strokeWeight (2.5);

    // defining variables for drawing line-heavy shapes;
    // linking x variables with the mouseX parameter;

    var x1 = mouseX;
    var y1 = 40;
    var x2 = mouseX;
    var y2 = 440;
    var xMid = width / 2;
    var yMid = height / 2;

    // drawing the spikey, Masonic symbol thing;

    stroke (mouseX / 2 + 20, mouseX / 2, mouseY / 3);
    line (x1, yMid, x2, yMid);
    line (xMid, yMid / 4 - 30, xMid, yMid - 40);
    line (xMid, yMid - 40, xMid - 180, yMid + 180);
    line (xMid, yMid - 40, xMid + 180, yMid + 180);
    line (xMid, yMid - 210, xMid + 180, yMid + 180);
    line (xMid, yMid - 210, xMid - 180, yMid + 180);
    line (x1, yMid, xMid, yMid - 150);
    line (x2, yMid, xMid, yMid - 150);
    line (x1, yMid, xMid, yMid - 80);
    line (-x2 + 480, yMid, xMid, yMid - 80);

    // drawing the inverse (upside-down version);

    stroke (mouseY / 2, 0, mouseX / 3);
    line (x1, yMid, x2, yMid);
    line (xMid, yMid / 4 - 30, xMid, yMid + 40);
    line (xMid, yMid + 40, xMid + 180, yMid - 180);
    line (xMid, yMid + 40, xMid - 180, yMid - 180);
    line (xMid, yMid + 210, xMid - 180, yMid - 180);
    line (xMid, yMid + 210, xMid + 180, yMid - 180);
    line (-x1 + 480, yMid, xMid, yMid + 150);
    line (-x2 + 480, yMid, xMid, yMid + 150);
    line (-x1 + 480, yMid, xMid, yMid + 80);
    line (x2, yMid, xMid, yMid + 80);
    fill (255);

    ellipse (width/2, height/2, 30, 30);

    // drawing the circles which comprise the central diamond shape;

    push();

    translate (width/2, height/2);
    rotate (radians (mouseX));

    fill (255, 25);
    ellipse (-240, -240, 600, 600);
    ellipse (-240, height - 240, 600, -600);
    ellipse (width - 240, -240, 600, 600);
    ellipse (width - 240, height - 240, 600, 600);

    pop ();

    // drawing circles on the fringes, to increase dimensionality;

    push ();

    translate (width/2, height/2);
    rotate (radians (mouseY));

    fill (0, 25);
    ellipse (-240, -240, 300, 300);
    ellipse (-240, height - 240, 300, -300);
    ellipse (width - 240, -240, 300, 300);
    ellipse (width - 240, height - 240, 300, 300);

    pop ();

    // drawing smaller fringe circles to increase trippiness;

    push ();

    translate (width/2, height/2);
    rotate (radians (mouseX));

    fill (0, 25);
    ellipse (-240, -240, 150, 150);
    ellipse (-240, height - 240, 150, -150);
    ellipse (width - 240, -240, 150, 150);
    ellipse (width - 240, height - 240, 150, 150);

    pop ();

    // small white circles! Why not!

    push ();

    translate (width/2, height/2);
    rotate (radians (mouseX));

    fill (255);
    ellipse (-240, -240, 80, 80);
    ellipse (-240, height - 240, 80, -80);
    ellipse (width - 240, -240, 80, 80);
    ellipse (width - 240, height - 240, 80, 80);

    pop ();

}

I was interested in the petal-ish curve shapes, since I didn’t quite understand how to translate a lot of the more complicated algebraic maths into code.

Jdbrown – Looking Outwards 7 – Data Visualization

Here is a piece that I found a while ago – it’s a progressive visualization of all nuclear detonations since 1945 on the world map. It’s a very stark piece of work, especially given the accompanying soundtrack. While most of these detonations are tests, there’s something unsettling about the “co-ordinate-like visuals,” as if you’re in the room where they’re deciding whether or not to drop the bombs.

From what I can tell, the data set is comprised of dates and locations, with the geographic co-ordinates mapped onto a flat surface, then the algorithm goes through the timeline, and each time it hits a node corresponding to a bomb’s explosion, it draws a little reticle on the location of the explosion.

http://digg.com/video/nuclear-bomb-data-visualization