Category: Section C

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;
*/
}

ablackbu-Final Project

For my final project I made a game called Meteor Flyer. You can play a version below but some effects are missing. For the best performance, download the game in the “PLAY” link below.

To play, the user:

  1. Navigates a UFO with their mouse through a meteor field.
  2. When the mouse is close to the meteors, they grow.
  3. UFO can shoot a meteor and break it by the user clicking the mouse.
  4. If the UFO makes it to the bottom of the canvas, the player wins
  5. if the UFO hits a meteor, the player loses.
  6. the colors can be changed with the “ENTER” key.
  7. The instructions can be shown by holding down the “SHIFT” key.

Please download the file and use the local file to access the html file to play!!

***********

PLAY ******

***********

 

Here are some snapshots of a winning game and a losing game.

Winning Game:

____________________________________________

Losing Game:

 

Like I said before, this version on WordPress is scaled and some effects don’t work. For the best performance, download the game in the “PLAY” link above.

sketch

var bubbles = [];
var colCount = 0;
var loseF = false;
var rocketX = 300;
var rocketY = 80;
var ropeX = 300;
var ropeY = 80;
var len = 150; //length of array
var on = false;
var gettime;

//pop sound
var sound1;

//background colors
var a = ("#292b29");
var b = ("#fbf49c");
var c = ("#f69b9c");
var d = ("#a3bfe4");
var e = ("#a9dbcf");
var f = ("#9a97ca");
var back = [a, b, c, d, e, f];

//bubble colors
var ba = ("#a5a5a5");
var bb = ("#918c60");
var bc = ("#7a3f42");
var bd = ("#4f5863");
var be = ("#67827b");
var bf = ("#474769");
var bub = [ba, bb, bc, bd, be, bf];

//text colors
var ta = ("#292b29");
var tb = ("#a5a5a5");
var tex = [ta, tb]


function preload() {
    // load sound and image files
    //sound1 = loadSound('sounds/pop.wav');
    mouse1 = loadImage("https://i.imgur.com/vWALILY.png")
}

function setup() {
    createCanvas(600, 600);
    textFont("Courier")
    //set up bubbles object
    for (var i = 0; i < len; i++){
        bubbles[i] = {
            
            x:random(0, width) , 
            y:random(80, height) , 
            diam:random(10, 55) , 
            pointx : 0,
            pointy : 0,
            //make the bubbles
            display : function(){
                stroke(back[colCount]);
                fill(bub[colCount]);
                ellipse(this.x, this.y, this.diam);
            }
        }
    }
}

function draw() {
    background(back[colCount]);
    if(frameCount > 400){
            on = true
    }
    
    for (var i = 0; i < len; i++){
        //display bubbles
        bubbles[i].display();
        //move bubbles to make them shake
        
        if(on == true){
            bubbles[i].x += random(-1,1);
            bubbles[i].y += random(-1,1);
        }
        if(on == false){
            bubbles[i].x += 0
            bubbles[i].y += 0
        }  

        strokeWeight(.5);
        stroke(bub[colCount]);
        //create a line from the mouse to the bubbles if they are 100 pix away
        if(dist(bubbles[i].x, bubbles[i].y, mouseX,mouseY) < 100){
            line(bubbles[i].x, bubbles[i].y, mouseX,mouseY);
            
            //increase bubbles size if the line connects them
            //stop increasing at 150 pix
            if(frameCount > 400){
                if (bubbles[i].diam <= 150){
                    bubbles[i].diam += .3;
                }
            }   
        }
        //test if the rocket is touching a bubble
        var roc = dist(mouseX, mouseY-50, bubbles[i].x, bubbles[i].y);
        if(frameCount > 400){
            if(roc <= 15 + bubbles[i].diam/2){
                loseF = true      
            }
        }

        //if shift is held down, pause the game
        if (keyIsDown(SHIFT)){
            on = false
        }
    }
    
    //if shift is held down the instructions pop up
    if (keyIsDown(SHIFT)){
        on = false
        instructions();
    }

    //put instructions up for a few seconds when page reloads
    if(frameCount > 30 & frameCount < 400){
        //show where to put mouse flashing
        if(frameCount % 10){
            fill("green");
            strokeWeight(0);
            ellipse(ropeX, ropeY, 40, 40, 20)
            //mouse image
            push();
            scale(.08);
            image(mouse1, ropeX * 12.3, ropeY * 12);
            pop();
        }
        instructions();
    }

    //make rocket
    rocket();
    
    //winning message if rocket makes it accross
    if(rocketY >= height + 35){
        end();
    }
    
    //losing message if rocket hits a bubble
    if(loseF == true){
        noLoop();
        lose();
    }

    //countdown
    if(frameCount < 400){
        ticker();
    }

    if(mouseIsPressed){
        var gettime = frameCount
    }
    
    //make beam lasers when pressing on a bubble
    if(frameCount >= gettime & frameCount < gettime + 3){
        strokeWeight(3)
        stroke("red");
        line(ropeX - 5, ropeY, rocketX - 5, rocketY - 50); 
        line(ropeX + 5, ropeY, rocketX + 5, rocketY - 50); 
    }
}

function mousePressed(){   
    for (var i = 0; i < len; i++){
        var g = dist(mouseX, mouseY, bubbles[i].x, bubbles[i].y);
        //if you click on an bubble it pops
        if(g <= bubbles[i].diam/2){
            bubbles[i] = bubbles[len - 1];
            len -= 1;

            //pop sound plays
            //sound1.play();
        }
    }
}

function keyPressed(){
    //if the enter key is pressed, the color of the porgram changes
    //so that the colors cycle through from the array
    if (keyCode == ENTER)  {
        colCount ++;
        if(colCount == 6){
            colCount = 0;
        }
    }
}

function instructions(){
    rectMode(CENTER);
    textAlign(CENTER);
    
    //instrucitons text
    fill(255);
    rect(width/2, height/2 + 5, 420, 150, 20);
    fill(tex[5*frameCount%2]);
    
    textSize(10);
    text("Place Mouse Here --->", ropeX - 90, ropeY + 6);

    textSize(18);
    text("LEAD THE UFO THROUGH THE METEORS", width/2, height/2 - 30);
    text("REACH THE BOTTOM WITHOUT CRASHING", width/2, height/2 - 10);
    
    fill("#292b29");
    textSize(14);
    text("Click to destroy meteors", width/2, height/2 + 20);
    
    textSize(10);
    text("Press 'ENTER' to change colors", width/2-100, height/2 + 55);
    fill("#a3bfe4")
    textSize(10);
    text("Hold 'SHIFT' to pause", width/2+100, height/2 + 55);  
}

//make UFO
function rocket(){
    if(frameCount > 400){
        rocketX = mouseX
        rocketY = mouseY
        ropeX = mouseX
        ropeY = mouseY
    }
    strokeWeight(.5)
    stroke("black");
    line(ropeX, ropeY, rocketX, rocketY-50); 
    stroke(255);
    fill(200);
    ellipse(rocketX, rocketY-50, 30, 30);
    fill(180);
    ellipse(rocketX, rocketY-50, 15, 15);
}

//winning message
function end(){
    background("green");
    noLoop()
    fill("white");
    textSize(20);
    text("YOU WON!", width/2, height/2);
}

//losing message
function lose(){
    background("red");
    textSize(20);
    fill("white");
    text("YOU lOSE!", width/2, height/2);
    textSize(15);
    text("ctrl + R to restart game", width/2, height/2 + 25);
}

//countdown to the start
function ticker(){ 
    fill(255);
    textSize(40)
    text(floor(6 - (frameCount / 80)), 300, 150);
}

yuchienc-haewanp-Final

Overview

Hae Wan and my project in it’s original state cannot be displayed on wordpress because it uses the p5.gui library that isn’t included. We’ve made a modified version with p5 sliders that doesn’t include the full capabilities. Please scroll down to see that, but we would like the attached file to be what is graded. As per instruction of TA’s, we’ve included screenshots of how it works as well as a link to the video. Please download the packaged file below:

yuchienc-sectionC-haewanp-secionA-final

and run the index.html file. There’s no need to setup any servers; the p5.gui library is included. Simply type in any message you want in the “message” box and play around with the parameters to customize your text!

Here is a video of how it works:

https://vimeo.com/246549917

Running the index.html file in a browser with the gui created by p5.js library

Showing how text can be resized

Showing different color palettes

Type of letter randomly changes when parameters are adjusted

Size of type can be resized

The vertical height of the canvas adapts to amount of text and can be used to create a pattern.

Demo

To interact with this demo, please type a few letters (don’t use spaces or backspace or punctuation) and play with the sliders!

sketch

var aSlider;
var bSlider;
var unit;
var padding;
var message = [];
var fontA = {'A': a_a, 'B': a_b, 'C': a_c, 'D': a_d, 'E': a_e, 'F': a_f,
 			 'G': a_g, 'H': a_h, 'I': a_I, 'J': a_j, 'K': a_k, 'L': a_l, 
 			 'M': a_m, 'N': a_n, 'O': a_o, 'P': a_p, 'Q': a_q, 'R': a_r,
 			 'S': a_s, 'T': a_t, 'U': a_u, 'V': a_v, 'W': a_w, 'X': a_x,
 			 'Y': a_y, 'Z': a_z
 			}; //storing all functions of the haewan's font into an object];

function setup() {
    createCanvas(480, 480);
    noStroke();
    aSlider = createSlider(0, 100, 50);
    aSlider.position(330, 405);
    bSlider = createSlider(0, 100, 0);
    bSlider.position(330, 455);
}

function draw() {
    background(250);
    
    fill('#ef4131');
    text('SIZE', 325, 390);
    text('PADDING', 325, 440);
    
    unit = aSlider.value();
    padding = bSlider.value();
    for (i = 0; i < message.length; i++) {
        var cur = message[i];
        typeletter(cur, i);
    }
}

function typeletter(ltr, i) {
    fontA[ltr](unit * i + padding*i, 0);        
};


function keyPressed() {
    message.push(key);
    print(key);
}

////////////////////////////////////////////////////
/////////////////////TYPEFACE///////////////////////
////////////////////////////////////////////////////


function a_a(x, y) {
    trngl(x + unit / 2, y, unit, 3)
    trngl(x + unit / 2, y, unit, 4);
    crcl(x + unit / 2, y + 2 * unit / 3, unit / 3);
}

function a_b(x, y) {
    hlf_crcl(x, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    hlf_crcl(x, y + 7 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x + unit / 6, y, unit, 'v');
}

function a_c(x, y) {
    hlf_crcl(x, y + unit / 2, unit, HALF_PI);
    crcl(x + unit / 2, y + unit / 2, unit / 3);
}

function a_d(x, y) {
    rctngl(x, y, unit, 'v');
    hlf_crcl(x - unit / 6, y + unit / 2, unit, -HALF_PI);
}

function a_e(x, y) {
    rctngl(x + unit * 0.15, y, unit, 'v');
    crcl(x + unit * 0.7, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.5, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.85, unit * 0.3);
}

function a_f(x, y) {
    rctngl(x + unit * 0.15, y, unit, 'v');
    crcl(x + unit * 0.7, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.5, unit * 0.3);
}

function a_g(x, y) {
    hlf_crcl(x, y + unit / 2, unit, 0);
    hlf_crcl(x, y + unit / 2, unit, HALF_PI + QUARTER_PI);
}

function a_h(x, y) {
    rctngl(x, y, unit, 'v');
    crcl(x + unit * 0.5, y + unit * 0.5, unit * 0.3);
    rctngl(x + 2 * unit / 3, y, unit, 'v');
}

function a_I(x, y) {
    rctngl(x + unit / 3, y, unit, 'v');
}

function a_j(x, y) {
    rctngl(x + unit / 2, y, 2 * unit / 3, 'v');
    hlf_crcl(x, y + 2 * unit / 3, 2 * unit / 3, 0);
}

function a_k(x, y) {
    trngl(x + unit / 3, y, unit, 2);
    trngl(x + unit / 3, y, unit, 4);
    rctngl(x, y, unit, 'v');
}

function a_l(x, y) {
    rctngl(x, y, unit, 'v');
    crcl(x + unit * 0.55, y + unit * 0.85, unit * 0.3);
}

function a_m(x, y) {
    trngl(x, y, unit, 4);
    trngl(x + unit / 2, y, unit, 4);
}

function a_n(x, y) {
    trngl(x, y, unit, 4);
    rctngl(x + unit / 2, y, unit, 'v');
}

function a_o(x, y) {
    crcl(x + unit / 2, y + unit / 2, unit);
}

function a_p(x, y) {
    hlf_crcl(x - unit / 6, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x, y, unit, 'v');
}

function a_q(x, y) {
    crcl(x + unit / 2, y + unit / 2, unit);
    trngl(x + unit / 2, y + unit / 2, unit / 2, 4);
}

function a_r(x, y) {
    trngl(x + unit / 3, y + unit / 2, unit / 2, 4);
    hlf_crcl(x - unit / 6, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x, y, unit, 'v');
}

function a_s(x, y) {
    hlf_crcl(x + unit * 0.11, y + unit * 0.4, 3 * unit / 4, HALF_PI + QUARTER_PI);
    hlf_crcl(x - unit * 0.11, y + unit * 0.6, 3 * unit / 4, TWO_PI - QUARTER_PI);
}

function a_t(x, y) {
    rctngl(x + unit / 3, y, unit, 'v');
    crcl(x + unit * 0.15, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.85, y + unit * 0.15, unit * 0.3);
}

function a_u(x, y) {
    rctngl(x, y, unit / 2, 'v');
    rctngl(x + 2 * unit / 3, y, unit / 2, 'v');
    hlf_crcl(x, y + unit / 2, unit, 0);
}

function a_v(x, y) {
    trngl(x + unit / 2, y, unit, 1)
    trngl(x + unit / 2, y, unit, 2);
    crcl(x + unit / 2, y + unit / 3, unit / 3);
}

function a_w(x, y) {
    trngl(x, y, unit, 2);
    trngl(x + unit / 2, y, unit, 2);
}

function a_x(x, y) {
    trngl(x + unit / 2, y, unit, 1);
    trngl(x + unit / 2, y, unit, 2);
    trngl(x + unit / 2, y, unit, 3);
    trngl(x + unit / 2, y, unit, 4);
}

function a_y(x, y) {
    rctngl(x + unit / 3, y + unit / 3, 2 * unit / 3, 'v');
    hlf_crcl(x, y, unit, 0);
}

function a_z(x, y) {
    push();
    translate(x + unit / 2, y + unit / 2);
    rotate(HALF_PI);
    trngl(unit/6, - unit / 2, unit, 1);
    pop();
    rctngl(x, y, unit, 'h');
    rctngl(x, y + 2 * unit / 3, unit, 'h');
}

/////////SHAPES TO DRAW///////////
 
function trngl(x, y, h, d) {
    fill(239, 65, 49);
    beginShape();
    vertex(x, y);
    vertex(x, y + h);
    if (d % 2 == 0) {
        vertex(x + h / 2, y + h * (2 % d) / 2);   
    } else {
        vertex(x - h / 2, y + h * (2 % d) / 2);
    }
    endShape();    
}

function crcl(x, y, r) {
    fill(255, 230, 0);
    ellipse(x, y, r, r);
}

function rctngl(x, y, h, d) {
    fill(46, 49, 150);
    if (d == 'v') {
        rect(x, y, unit / 3, h);
    } else {
        rect(x, y, h, unit / 3);
    }

}

function hlf_crcl(x, y, r, d) {
    fill(236, 0, 140);
    arc(x + unit / 2, y, r, r, d, d + PI);   
    
}

Reflection

We split up the work by each of us designing our own typeface (denoted in comments). Rules and patterns are common in design of typefaces– you’ll notice that there is symmetry between lowercase “d”s, “p”s, “b”s and “q”s, so it was fun applying that idea of repetition to something computational. Bettina focused on writing the code for the GUI and how to compute the spacing for moving letters to new lines, have the canvas height grow with the type, etc. (the draw() and typeletter() functions, the fontB{} functions) And then Haewan focused on the fontA{} functions, and the revised version with p5 sliders so that something can be displayed on WordPress.

ashleyc1-Section C-Final Project

RULES:

-Use the mouse (either by pressing or moving around) to interact with animations

-Click any key to cycle through different animations (click within the canvas first if not working because wordpress is weird)

Note: If file is opened through google browser, mouse isn’t limited on first animation and they all generally run smoother

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Final Project - Type in Motion

/////////////////////////////////////
// MAIN  CONTROL //
///////////////////////////////////

var index = 0;

//global var for images
var revealImg;
var twinkleImg;
var eraseImg;
var sprayHintImage;
var sprayOverlayImage;

function preload() {

//load all the images
revealImg = loadImage("https://i.Imgur.com/giFSIcI.jpg?1");
twinkleImg = loadImage("https://i.imgur.com/hqn6Cv9.jpg?1");
eraseImg = loadImage("https://i.imgur.com/VO4buSz.png");
sprayHintImage = loadImage("https://i.imgur.com/P6LkUET.jpg");
sprayOverlayImage = loadImage("https://i.imgur.com/dr6JWoH.png");

}

function setup() {

    createCanvas(480, 180);
    background(0);

    //index that cycles through animations
    //call each animations' setups 
    //depending on index number
    if(index == 0){
        revealSetup();
    }

    if(index == 1){
        twinkleSetup();
    }

    if(index == 2){
        eraseSetup();
    }

    if(index == 3){
        spraySetup();
    }
}


function draw() {

    //call each animations' draw depending on index number
    if(index == 0) {
        revealDraw();
    }

    if(index == 1){
        twinkleDraw();
    }

    if(index == 2){
        eraseDraw();
    }

    if(index == 3){
        sprayDraw();
    }

}

// Cycles through animations every time 
//any key is pressed
function keyPressed(){

    index = (index + 1)%4;

    setup();

}

////////////////////////////////////////////
// REVEAL  ANIMATION //
///////////////////////////////////////////

//var that will spell out reveal
var revealCircles; 
var revealDots;


function revealSetup(){
    
    //Draw a black rectangle for every animation 
    //because we need to make sure the animations 
    //restart without actually calling setup 
    //and messing everything up
    fill(0);
    rect(0, 0, 480, 180);

    revealCircles = [];
    revealDots = [];

    // iterate through pixels
    image(revealImg, 0, 100);
    revealImg.loadPixels();
    
    for(var i = 0; i < 2 * revealImg.width; i++) {
        for(var j = 0; j < revealImg.height; j++) {

            var revealIndex = i * 2 + (j * revealImg.width)*8;
            
            //locate the dark pixels of underlaying image
            //where there is dark, make a revealCircle
            if (revealImg.pixels[revealIndex] < 200){

                revealDots.push(createVector( i / 2, j * 2));
            }
        }
    }

        var num_circles = 0;
    
    //draw certain number of revealCircles every frame
    while (num_circles < 400){
        
        var c = revealCreateCircle();
    
        if (c) {

            revealCircles.push(c);
            num_circles++;

        }
    }
}


function revealDraw(){

    background(0);
  
    //draw the revealCircles
    for(var i = 0; i < revealCircles.length; i++) {
      
        var x = revealCircles[i].x;
        var y = revealCircles[i].y;
        var r = revealCircles[i].r;

    //calculate distance around mouse
    //any space within radius will be drawn and shown
    var d = dist(x, y, mouseX, mouseY);

    if (d  < 90) {
        //center image
        push();
        scale(.5, .5);
        translate(150, 0);
        revealCircles[i].show();
        pop();

        }
    }
}

//While creating a new revealCircle
//Do not create one inside existing one
function revealCreateCircle(){

    var x;
    var y;
    
    // find a random position to create a revealCircle
    var position = int(random(0, revealDots.length));

    x = revealDots[position].x;
    y = revealDots[position].y;

    var valid = true;

    for (var i = 0; i < revealCircles.length; i++) {

        //Don't draw inside another revealCircle
        // If generated already drawn revealCircle, redo
        if (dist(x, y, revealCircles[i].x, revealCircles[i].y) <= revealCircles[i].r) {

            valid = false;
            break;
        }
    }

    //if no revealCircle drawn at spot, draw one 
    if (valid) {

        return new revealCircle(x, y, width, height);
    }

    return false;
}

//define the circles
function revealCircle(xPos, yPos, gwidth, gheight){

    this.x = xPos;
    this.y = yPos;
    this.r = 8;

    this.width = gwidth;
    this.height = gheight;

    //controls the look of the revealCircles 
    //randomizes color when mouse is pressed
    this.show = function(){

        fill(255);
        noStroke();
        strokeWeight(1);
        ellipse(this.x, this.y, this.r);

        }
}


////////////////////////////////////////////////
//  TWINKLE   ANIMATION //
///////////////////////////////////////////////

//var that will spell out twinkle
var twinkleCircles;
var twinkleDots;


function twinkleSetup(){
    
    fill(0);
    rect(0, 0, 480, 180);

    twinkleCircles = [];
    twinkleDots = [];
    
    // iterate through pixels
    //image(twinkleImg, 0, 100);
    twinkleImg.loadPixels();
    
    //locate the dark pixels of underlaying image
    //where there is dark, make a twinkleCircle
    for(var i = 0; i < 2 * twinkleImg.width; i++) {
        for(var j = 0; j < twinkleImg.height; j++) {

            var twinkleIndex = i * 2 + (j * twinkleImg.width)*8;
            
            if (twinkleImg.pixels[twinkleIndex] < 200){

                twinkleDots.push(createVector( i / 2, j * 2));
            }
        }
    }

    var num_circles = 0;
    
    //draw certain number of twinkleCircles every frame
    while (num_circles < 300){
        
        var c = twinkleCreateCircle();

        if (c) {

            twinkleCircles.push(c);
            num_circles++;

        }

    }
    
    //draw the twinkleCircles
    for(var i = 0; i < twinkleCircles.length; i++) {
      
        var x = twinkleCircles[i].x;
        var y = twinkleCircles[i].y;
        var r = twinkleCircles[i].r;

        //center image
        push();
        scale(.6, .6);
        translate(50, 80);
        twinkleCircles[i].show();
        pop();
        
    }
}


function twinkleDraw(){

    //if mouse pressed, "redraw" circles
    //so that color is randomized
    if(mouseIsPressed) {
        for(var i = 0; i < twinkleCircles.length; i++) {
      
            var x = twinkleCircles[i].x;
            var y = twinkleCircles[i].y;
            var r = twinkleCircles[i].r;

            //center image
            push();
            scale(.6, .6);
            translate(50, 80);
            twinkleCircles[i].show();
            pop();

        }
    }
}

//While creating a new twinkleCircle
//Do not create one inside existing one
function twinkleCreateCircle(){

    var x;
    var y;
    
    // find a random position to create a twinkleCircle
    var position = int(random(0, twinkleDots.length));

    x = twinkleDots[position].x;
    y = twinkleDots[position].y;

    var valid = true;

    for (var i = 0; i < twinkleCircles.length; i++) {

        //Don't draw inside another twinkleCircle
        // If generate already drawn twinkleCircle, redo
        if (dist(x, y, twinkleCircles[i].x, twinkleCircles[i].y) <= twinkleCircles[i].r) {

            valid = false;
            break;
        }
    }

    //if no twinkleCircle drawn at spot, draw one 
    if (valid) {

        return new twinkleCircle(x, y, width, height);
    }

    return false;
}

//define twinkleCircles
function twinkleCircle(xPos, yPos, gwidth, gheight){

    this.x = xPos;
    this.y = yPos;
    this.r = 8;

    this.width = gwidth;
    this.height = gheight;

    //controls the look of the twinkleCircles 
    //randomizes color when mouse is pressed
    this.show = function(){

        stroke(255);
        strokeWeight(1);

        //start out as empty twinkleCircles
        var value = 0;
        fill(value);

        //change the color every time mouse is pressed
        if (mouseIsPressed) {

        value = random(0, 255);

        fill(value, value, value);

        }

        ellipse(this.x, this.y, this.r);

        }
}


////////////////////////////////////////////
// ERASE  ANIMTATION //
///////////////////////////////////////////

//var for erase animation
var eraseLastMinute;
var eraseCurrentMinute;

//eraseIndex for animations
var eraseIndex = 0;


function eraseSetup() {
    //scale(.5, .5);
    
    fill(0);
    rect(0, 0, 480, 180);
    eraseImg.loadPixels();

    eraseLastMinute = minute();
    
    //make for loop to control how many images we are making
    for (i = 0; i < 50; i++) {

        image(eraseImg, random(-50, 800), 
            random(-50, height), 100, 43);

    }
}

function eraseDraw() {

    fill(0);
    noStroke();
    ellipse(mouseX, mouseY, 30, 30);

    //call setup and reset every minute
    eraseCurrentMinute = minute();

    //if a minute has passed, call setup and generate 
    //different arrangement of words
    if (eraseLastMinute != eraseCurrentMinute) {

    eraseSetup();

    }
}

///////////////////////////////////////////
//  SPRAY  ANIMATION //
//////////////////////////////////////////

var sprayDots; 

function spraySetup() {

    fill(0);
    rect(0, 0, 480, 180);
    noCursor();   
    noStroke();   
  
    sprayDots = [];

}

function sprayDraw() {

    image(sprayHintImage, 50, 100);
    sprayHintImage.resize(300, 100);

    background(0);
  
    var position = createVector(mouseX, mouseY);

    //if mouse is pressed, draw a bunch of sprayCircles
    //that move toward the overlaying image
    if (mouseIsPressed) {
    var target = sprayFindPixel();    
    var spraydot = new sprayDot(position, target);

    sprayDots.push(spraydot);

    //allow user to draw a bunch of dots
    if (sprayDots.length > 2000) sprayDots.shift();    

    }  
          //draws the sprayDots
          for (var i = 0; i < sprayDots.length; i++) {

            //make sure sprayDots align with hint image
            push();
            translate(100, 50);
            sprayDots[i].update();
            sprayDots[i].draw();
            pop();

        }   

            //call image of Spray outline
            image(sprayOverlayImage, 100, 50);
            sprayOverlayImage.resize(300, 100);
}

//calculate where the underlying image is dark
//and then draw a spraydot overtop
function sprayFindPixel() {

var x;
var y;

    for (var i = 0; i < 200; i++) {

        x = floor(random(sprayHintImage.width));
        y = floor(random(sprayHintImage.height));
    
        if (red(sprayHintImage.get(x, y)) < 255) break;

  }

  return createVector(x, y);

}

//create sprayDots and define characteristics
function sprayDot(position, target) {

    this.position = position;
    this.target = target;
    this.diameter = random(10, 20);

}

sprayDot.prototype.update = function() {   
  
    this.position = 
    p5.Vector.lerp(this.position, this.target, 0.1);

};

sprayDot.prototype.draw = function() { 
  
    //color of sprayDots
    fill(255);
    ellipse(this.position.x, this.position.y, this.diameter, this.diameter);

};

For this project, I was interested in creating interactive animations that allowed type to be dynamic. I wanted the user to interact with the text based on the actions the words described (erase = erase the words). This project was super challenging and I wish I had more time to generate more interactive animations but I’m overall satisfied with it because I like exploring how to make type more dynamic that I can now use within my own art and design practice.

eeryan + yoonyouk_Final Project

sketch

// Erin Ryan and Yoon Young Kim
// eeryan@andrew.cmu.edu
// yoonyouk@andrew.cmu.edu
// Section C and Section E
//FINAL PROJECT - water animation


//HOME PAGE VARIABLES
//STARTING CODE WITH HOME PAGE
var animation = 0;
//text position variables
var textStart1 = 0;
var textStart2 = 140;
var textStart3 = 280;
var textStart4 = 420;
var textSpace = 140;

//RAINFALL ANIMATION VARIABLES
var numClicks = 0; 
var fall = false; //starting the animation off
var water = [];
var xr; //x position of water droplets

//COHESION ANIMATION VARIABLES
var move = false;
var drop1; //first water object 
var drop2; //second water object 
var opacity = 100; //variable to deal with changing opacity of fills and strokes of different water objects

//RIPPLE ANIMATION VARIABLES
var rx;
var ry;
var diam;

//SPLASH ANIMATION VARIABLES
var SPLASH = [];
var droplets = [];
var dropX = -50; //x coordinate of the water drop
var dropY = 0; // y coordinate of the water drop
var splashpoint = 150;
var numClick = 0;
var explodeTime;
var timeElapsed;
var splashed = false;

function preload(){
    var splashImgs = [];
    //img links of the splash droplets
    splashImgs[0] = "https://i.imgur.com/Aau3BBu.png";
    splashImgs[1] = "https://i.imgur.com/C156jX4.png";
    splashImgs[2] = "https://i.imgur.com/nnR9v06.png";

    //cycling images by pushing into SPLASH array
    for(var i = 0; i<3; i++){
        SPLASH.push(loadImage(splashImgs[i]));
    }
}

function setup() {
  createCanvas(400, 300);
  //object declaration for cohesion animation
  drop1 = makeDrop(120, height / 2, 100);
  drop2 = makeDrop(width - 120, height / 2,100);
  //pushes raindrop objects into the array water
  for(var i = 0; i < 300; i++){
    xr = random(0, width); 
    water.push(makeRain(xr, 20, 5, 0)); 
  }
}

function draw() {
  //default page
  if(animation === 0){ 
    background(173, 212, 255);
    textSize(20);
    fill(255, 255, 255);
    textFont("Courier New")
    text("let's play with water!", width / 2 - 130, 100);
    menuText(200);
  }
  //ripple animation
  if(animation == 1){ 
    background(238, 252, 255);
    noStroke();
    fill(80, 130, 200);
    textFont("courier", 16);
    textAlign(CENTER);
    text("click to touch the water...", width / 2, 30); // creates text guiding user to press a key
    ripple(rx, ry);
    if(diam < 550){
      diam += 1; //circle expands
      opacity -= 0.4; //circle becomes less opaque as it expands
    }
    menuText(275);
  }
  //splash animation
  else if(animation == 2){
    background(238, 252, 255);
    noStroke();
    fill(80, 130, 200);
    textFont("courier", 16);
    textAlign(CENTER);
    text("click to splash water droplets", width / 2, 30); // creates text guiding user to press a key
    fill(26, 133, 192);
    if(dropY > 0 & dropY < splashpoint){
        droplet(dropX, dropY);
        dropY++;
    }
    if(dropY == splashpoint){
        splashed = true;
        if(explodeTime == null){
          explodeTime = frameCount;  
        }
    }
    if(splashed == true){
        timeElapsed = frameCount - explodeTime;
    for(var i = 0; i < 12; i++){
        if(timeElapsed == i){
            imageMode(CENTER);
            image(SPLASH[floor(i / 4)], dropX, dropY);
            }
        }
    }
    menuText(275);
  }
  //rain code animation
  else if(animation == 3){ 
    background(238, 252, 255);
    fill(80, 130, 200);
    textFont("courier", 16);
    textAlign(CENTER);
    text("click once for to make it rain...", width / 2, 30); // creates text guiding user to press a key
    text("click again for clear skies", width / 2, 55);
    if(fall){ 
      for(var i = 0; i < water.length; i++){
        water[i].render();
        water[i].fall();
      }
    }
    menuText(275);
  }
  //cohesion animation
  else if(animation == 4){ 
    background(238, 252, 255);
    textAlign(CENTER);
    noStroke();
    fill(80, 180, 200);
    textFont("courier", 16);
    text("click to see cohesion...", width / 2, 30);
    drop1.render();
    drop2.render();
    if(dist(drop1.x, drop1.y, drop2.x, drop2.y) > 0 & move){// if the two objects are not on top of each other and move == true
      drop1.x++;                                            // move the two drops towards each other and lessen the opacity of their strokes
      drop2.x--;
      opacity -= 1.3;
    }
    menuText(275);
  }
}
    
function keyTyped(){ // assigns a different value to the variable animation based on the key pressed
    if (key == 'r'){ 
      animation = 1;
    }
    if (key == 's'){ 
      animation = 2;
    } 
    if (key == 'u'){ 
      animation = 3;
    }                                             
    if (key == 'c'){ 
      animation = 4;
    } 
    
}

function menuText(posY){ //makes menu scroll with instructions
    noStroke();
    fill(80, 130, 200);
    textSize(10);
    text("press R for ripples", textStart1, posY);
    text("press S for splash", textStart2, posY);
    text("press U for rain", textStart3, posY);
    text("press C for cohesion", textStart4, posY);
    textStart1++;
    textStart2++;
    textStart3++;
    textStart4++;
    if(textStart1 > width){
        textStart1 = -140;
    }    
    if(textStart2 > width){
        textStart2 = -140;
    }
    if(textStart3 > width){
        textStart3 = -140;
    }
    if(textStart4 > width){
        textStart4 = -140;
    }
}

function mousePressed(){
  //variable reset for ripple code
  diam = 0;
  opacity = 100;
  rx = mouseX;
  ry = mouseY;
  if(animation == 2){
    numClick++;
    dropX = mouseX;
    dropY = 1;
    splashpoint = mouseY;
  }

  //rain
  if(animation == 3){
    numClicks++;
    if(numClicks%2 == 1){
      fall = true;
    }
    else{
      fall = false;
    }
  }

  //cohesion
  if(animation == 4){
    move = true;
  }
}

function ripple(px, py){ //draws ripples
  noFill();
  strokeWeight(2.5);
  stroke(0, 0, 255, opacity);
  ellipse(px, py, diam, diam);
  strokeWeight(2);
  ellipse(px, py, diam / 2, diam / 2);
  strokeWeight(1.5);
  ellipse(px, py, diam / 4, diam / 4);
}

function droplet(x, y){
  fill(26, 133, 192);
  //using the map function in order to expand the drop as it moves down
  var xmap = map(dropY, 0, height, 5, 15);
  var ymap = map(dropY, 0, height, 10, 30);
  noStroke();
  beginShape();
  curveVertex(x, y);
  curveVertex(x, y);
  curveVertex(x - xmap, y + ymap);
  curveVertex(x, y + ymap + xmap);
  curveVertex(x + xmap, y + ymap);
  curveVertex(x, y);
  curveVertex(x, y);
  endShape();    
}

//object implementation for cohesion animation
function drawDrop(){ //draws water drop for cohesion animation
  stroke(80, 130, 200, opacity);
  strokeWeight(3);
  fill(230, 242, 255);
  ellipse(this.x, this.y, this.w, this.w);
  noStroke();
}

function makeDrop(posX, posY, diam){//make water drop object for cohestion animation
  var drop = {x:posX, y:posY, w:diam, render:drawDrop};
  return drop;
}

//object implementation for rain animation
function makeRain(px, py, diam, velocity){ //make rain object
  var raindrop = {x:px, y:py, d:diam, v:velocity, render: drawRain, fall:rainFall};
  return raindrop;
}

//draws raindrop
function drawRain(){
  noStroke();
  fill(0, 10, 150, 60);
  ellipse(this.x, this.y, this.d, this.d);
  triangle(this.x - (this.d)/2, this.y, this.x, this.y - 5, this.x + (this.d)/2, this.y);
}

function rainFall(){
  this.v = random(0,8); //randomizess velocity variable
  this.y += this.v; //adds velocity to current y value of each rain drop objects so they'll fal at different speeds
  if(this.y >= height){ //resets rain drops to the top once it hits the bottom of the page
    this.y = 0;
  }
}

For this project, I collaborated with Erin Ryan from Lab section C to make a series of four water-based animations using different animation, interactive, and object oriented techniques. We coded the four interactive animations and the home screen separately, then used a series of conditionals to allow the user to toggle between different animations. We tried to establish cohesive visual language through use of color and simple shapes.

 

Initial sketches of water animations

aerubin-LookingOutwards-12-Section-C

Steve Reich – “Clapping Music”

Steve Reich is a contemporary composer that works with generative music. Generative music is music that is ever-different and changing, and that is created by a system. One of Steve Reich’s most famous pieces is “Clapping Music,” (linked above) where he created a rhythm and overlays the same rhythms on top, but one or more eighth notes apart from the original version. The interest and music is created from how the same rhythms interact with each other depending on how much time is spaced in between the two rhythms. The video above shows the rhythm which can be counted as “one two three, one two, one, one two” in which the commas are counted as rests. When shift is called, the rhythm is shifted one eighth note apart from the original and the distance increases until they are both in unison by the end of the clip.

Francis Dhomont – “Citadel Interieure”

Francis Dhomont is a composer in the late 1900’s that focused on composing music that drew from natural sounds. This technique is called Musique concrète which is music created by everyday sounds such as people talking or drawers closing and any sound that we would not normally associate with music production. Utilizing this technique for composition sometimes leads to the final piece to lack melody, harmony, rhythm, and meter. However, this music can tell stories that cannot be told with typical instruments.
His piece “Citadel Interieure,” (linked above) tells a story of a denied reality in a Subterranean Labyrinth, which would be difficult to create the same effect with standard instruments, even with a full orchestra. His innovative compositions evoke new specific emotions that opened new boundaries in the field of music.

Click here to learn more about Generative Music
Click here to learn more about Musique Concrète

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.

myoungsh-project12-Proposal-PhotoEditor

For my final project, I want to expand on the work I did in week 9. I will create a photo editor. An editor that applies a multitude of filters to different aspects of the images. It will load an image of the correct size, provide multiple options for editing through a panel of interactive buttons, and will re-display the edited image. Different buttons will edit the composition, color, pixels, and any other edits I can come up with or code. I plan to create a blur function. A black and white filter. A duotone filter with an attached color editor. A pixelating function. And possibly more I will come up with in the process, this is all I know I can code right now.

I want to also focus on creating a clean and successful UI in p5js to successfully support the code. Something simple but powerful that I will also create descriptive icons to describe the different possible edits that can be made to the image.

eeryan-LookingOutwards-12

For my project I was looking at twitter bots: specifically art bots and poetry bots.

Tweet by @pixelsorter

@pixelsorter is an art bot that utilizes pixel sorting. The pixels of a base image are sorted and rearranged according to some value of the pixels, such as how much green is in each pixel, to create a new composition.

tweet by @a_quilt_bot

@a_quilt_bot is a bot that takes images submitted by followers and recreated them by editing visually similar photo snippets of fabric into place, creating what looks like the submitted image were it made into a quilt.

I’m interested in this kind of art because I think it makes use of a medium (in this case twitter) in a way that the medium wasn’t intended for originally. I view these projects as starting points, and want to include a generative element in addition to reorganization of the original content.

Other inspiration!

Nonsense Haikus, Using the Tweets of Donald Trump

http://botpoet.com/