atraylor – Final Project

For my final project I made a boredom simulator. Please, enjoy the fun that awaits you in this blandly furnished room with plenty of fun and exciting activities to entertain yourself with. If you become bored, that’s okay! Just click again and find another riveting thing to do to take your mind off the boredom! Along with engaging visuals, treat your weary mind with the wondrous sounds that accompany the many fascinating capabilities of this program. You won’t be disappointed…

atraylor final project

To open this project, I suggest using a local server because it contains several sound files.

To use the simulator, click on an object to entertain yourself, once you are done, click “i’m bored” to return to the room.

atraylor – Looking Outwards 12 – Section B

Two pieces that I’m inspired by are Blahblah by Vincent Morisset and JK Rowling’s old website from the 2000s (sadly it’s not up anymore, but here’s a link to a description). Blahblah is a “film for computer” and allows the viewer to interact with it and trigger events, but sometimes it’s hard to tell how much power the viewer has over the scenes. I admire that there is a clear direction and that it’s extremely engaging, and it is what the viewer makes it.

A still from Blabla

JK Rowling’s old website is similar and for a very different purpose. Her website was what you could discover in it. It started with her desk which had clickable objects that would take you somewhere where you could gather more information. One was a “room of requirement” like door that had different information or photos behind it depending on the day (which you could navigate to using a time turner).

I’m inspired by these projects because they use interactivity to explore ideas and information through directed narratives.


JK Rowling’s old website. Example of what the desk page looked like.
Interactive room example.



atraylor – Project Proposal – Section B

For my final project I want to make an interactive scene that isn’t exactly a game nor fully an animation. There will be a starting scene and by clicking on things in the scene it will change and trigger animation and sound. I’m also going to have these scenes be triggered by time as well. This way, user control is ambiguous. After each animation, the project will revert to the start scene.

I haven’t fully decided on the visuals, but I’m leaning towards using png files and creating a collage, rather than using p5 primitives to build imagery.

Through this project, I’m going to explore a simple narrative or premise through the use of imagery, sound, and interaction.

atraylor – Looking Outward 11 – Section B

For this post I chose a piece by Laurie Spiegel from her 1970-80s album The Expanding Universe called “East River Dawn.” I’m inspired by this piece because it sounds complex and coherent. I don’t know much about music arrangement, but her work sounds well composed. The Expanding Universe was made in the 70s while Spiegel worked at Bell Laboratories. She used synthesizers and other prototype generation systems. Her reasoning behind using computers for music is that they are an artistic means rather than an end. In addition to being a trailblazer in computer music, her work was included on the Voyager spacecraft’s “Sounds of Earth” section of it’s gold record.

atraylor – Project 11 – Section B


//Section B
//Project 11
var frames = [];
var current = 0;
var numFrames = 7;
var x = 0;
var y = 0;
var t1;
var t2;
var t3;
var t4;
var t5;
var t6;
var t8;
function preload(){
    var filenames = [];
    filenames[0] = "";
    filenames[1] = "";
    filenames[2] = "";
    filenames[3] = "";
    filenames[4] = "";
    filenames[5] = "";
    filenames[6] = "";
    filenames[7] = "";

    for(var i = 0; i < filenames.length; i++){
function setup() {
    createCanvas(274, 274);
         t1 = makeTurtle(width/2, height/2);
         t2 = makeTurtle(width/3, height/2);
         t3 = makeTurtle(50, 50);
         t4 = makeTurtle(100, 60);
         t5 = makeTurtle(50, 50);
         t6 = makeTurtle(150, 50);
         t7 = makeTurtle(50, 50);
         t8 = makeTurtle(50, 50);
     current = (current + 1) % numFrames;
     image(frames[current], 0, 0); //background image

function draw() {
    current = (current + 1) % numFrames;
  // image(frames[current], 0, 0);
    //getting color from frames
    var framepixcolor = frames[current].get(t1.x, t1.y);
    var valueAtPix = brightness(framepixcolor);
    //turtles drawing lines color of the moving gif
    var a = mouseX;
    var b = mouseY;
    t1.turnToward(a, b, 10);
    framepixcolor = frames[current].get(t2.x, t2.y);
    valueAtPix = brightness(framepixcolor);
    t2.turnToward(a, b, 3);
    framepixcolor = frames[current].get(t3.x, t3.y);
    valueAtPix = brightness(framepixcolor);
    t3.turnToward(a, b, random(8,10));
    framepixcolor = frames[current].get(t4.x, t4.y);
    valueAtPix = brightness(framepixcolor);
    t4.turnToward(a, b, random(1, 10));
    framepixcolor = frames[current].get(t5.x, t5.y);
    valueAtPix = brightness(framepixcolor);
    t5.turnToward(a, b, random(7, 10));
    framepixcolor = frames[current].get(t6.x, t6.y);
    valueAtPix = brightness(framepixcolor);
    t6.turnToward(a, b, random(4, 10));
    framepixcolor = frames[current].get(t7.x, t7.y);
    valueAtPix = brightness(framepixcolor);
    t7.turnToward(a, b, random(2, 10));
    framepixcolor = frames[current].get(t8.x, t8.y);
    valueAtPix = brightness(framepixcolor);
    t8.turnToward(a, b, random(2, 10));



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) {

function turtlePenDown() {
    this.penIsDown = true;

function turtlePenUp() {
    this.penIsDown = false;

function turtleGoTo(x, y) {
    if (this.penIsDown) {
      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;

For this assignment I wanted to use the turtles to reveal a gif, but I realized that that wasn’t the best method. I ended up having them draw values based on the brightness of the gif frames on a still from the gif. The result is a coffee cup infested with worms.

atraylor – Project 10 – Section B


//Project 10, Section B

var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't','u', 'v', 'w', 'x', 'y', 'z', 'A', 'B',
'C', 'D', 'E', 'F','G', 'H', 'I', 'J', 'K','L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S','T','U','V', 'W', 'X', 'Y', 'Z'];
var symbols = ['!', '@', '#', '$', '%', '^', '&', '*', ')','(', '_', '-', '=',
'+', '~', '`', '[', ']', '{', '}', '|', '.', ',', '<', '>', '/', '?'];
var characters = [];
var grawlix = [];

function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(height);
        characters[i] = makeChar(rx, ry); //populate screen
    for(var i = 0; i < 10; i ++){
        var ry = random(width);
        var rx = random(height);
        grawlix[i] = makeGrawlix(rx, ry);

function draw() {

function updateAndDisplayChar(){
    for(var i = 0; i < characters.length; i++){ //draw and update characters
function characterDeath(){ //kill characters that go off screen
    var liveCharacters = [];
    for(var i = 0; i < characters.length; i++){
        if(characters[i].x + 50 > 0) {
    characters = liveCharacters; //remember live

function addRanProbChar(){ //make more of the characters appear
    var prob = 0.1;
    if (random(0,1) < prob){
        characters.push(makeChar(width, random(height)));

function charMove(){ //moving across screen
    this.x += this.speed;
function charDraw(){
    fill(this.charCol, 0, 0);
    text(this.symbol, this.x, this.y);


function makeChar(birthlocationx, birthlocationy){
    var char = {'x': birthlocationx,
        'y': birthlocationy,
        'charCol': pickColor(),
        'speed': pickSpeed(),
        'symbol': pickCharacter(),
        'csize':(-1 * pickSpeed() * 10),
        'move': charMove,
        'draw': charDraw}
    // char.move = charMove;
    // char.draw = charDraw;
    return char;
function pickCharacter(){
    return letters[int(random(letters.length))];
function pickColor(){
    return int(random(100, 255));

function pickSpeed(){
    return random(-1, -5);


function updateAndDisplayGraw(){
    for(var i = 0; i < grawlix.length; i++){
function grawlixDeath(){
    var liveGrawlix = [];
    for(var i = 0; i < grawlix.length; i++){
        if(grawlix[i].gx + 50 > 0) {
    grawlix = liveGrawlix; //remember live
function addRanProbGraw(){
    var prob = 0.07;
    if (random(0,1) < prob){
        grawlix.push(makeGrawlix(width, random(height)));

function grawMove(){
    this.gx += this.gspeed;

function grawDraw(){
    var frame = frameCount % 27; // go through all the symbols
    fill(this.grawCol, 0, 0);

function makeGrawlix(birthlocationx, birthlocationy){
    var graw = {'gx':birthlocationx,
        'grawCol': pickGrawColor(),
        'gspeed': pickGrawSpeed(),
        'gsize': (-1 * pickGrawSpeed() * 10),
        'move': grawMove,
    return graw;

function pickGrawColor(){
    return random(100, 255);

function pickGrawSpeed(){
    return random(-1, -5);


For this project, I wanted to do something that would feel dimensional. I ended up making flying letters. I think I would have liked to add more material flying by, but I settled for the amount present for simplicity.

atraylor – Looking Outward 10 – Section B

For this post I chose a [domestic] by Mary Flanagan which is a conceptual art piece in a first person video game space. It is a virtual experience exploring the traumatic memory of a house fire using fragmented language and images. The space has odd scales and perspective and an obvious computer/video game appearance. [domestic] for these reasons it doesn’t follow regular video game conventions in emulating reality. Players can shoot coping mechanisms at the walls covered in text and images that describe the event. The piece explores the role of narrative and memory in the space of video games.

An example of the imperfect perspective and scaling in the game.

I admire this piece because it makes nontraditional narrative the main focus of the piece. There really aren’t any traditional storytelling techniques and there few interactions the player can do. I find this interesting because it takes one of the essential aspects of games and takes it to the extreme without making what some might call a “walking game”. This game is also from 2003 and makes me wonder what a game like this would look like now.

Mary Flanagan has a PhD from St Martins, University of the Arts in London and is a professor at Dartmouth College. She is an artist, a writer, a poet, an inventor and a designer. Her work focuses on the human experience and human desire often implemented in games, installations, computer viruses, and interactive texts.

A still from the game showing the combination of text and imagery in the space.


atraylor – Looking Outward 09 – Section B

For this post, I want to respond and add to my classmate’s post on the Disney short Paperman, directed by John Kahrs. I saw this video discussing the computer graphics and techniques a while back, and thought it would give more context to how the 3d and 2d images are combined.

I really love this short because hand drawn animation has a certain charm which is hard to replicate with cg (really, this goes for most practical effects when they are well executed). What the original post didn’t mention is that not all of the 2d lines or effects were drawn frame by frame. Disney used software to compute in-betweens on key frames which acted like 3d blend shapes, tangents to place lines, and motion vectors to determine texture placement.

atraylor – Project 09 – Section B


//project 09
//Section B

var face = "";
var imScale = 10;
var offset = [];
var step = [];
function preload(){
    currentImage = loadImage(face);
function setup() {
    createCanvas(480, 480);
    for(var i = 0; i < 2400; i++){
        offset.push(random(-2, 2));
        step.push(random(-100, 100));
function draw() {
    // currentImage.loadPixels();
    // Render the current image to the canvas.
    image(currentImage, 0, 0);

    for (var y = 0; y < currentImage.height; y++){ // y location of pixels
        for (var x = 0; x < currentImage.width; x++) { // x location of pixels
            var index = (x + y * currentImage.width) * 4; // to analyze the rgba values in the pixels

            var p = []; // the pixel array
            p[0] = currentImage.pixels[index]; // r
            p[1]= currentImage.pixels[index+1]; // g
            p[2] = currentImage.pixels[index+2]; // b
            p[3] = currentImage.pixels[index+3]; // a

            var brightP = brightness(p);
            //draw "pixels"
            rect(x* imScale + noise(offset[x]), y* imScale + noise(offset[y]), imScale, imScale);
            offset[x] += step[x];
            offset[y] += step[y];


Here is a digital portrait of me and my sister, or my sister and me? We’re two years apart but people, to our confusion, always think we’re twins. We did a face-swap one day and it was hilarious: we didn’t seem to change at all.

atraylor – Looking Outwards 08 – Section B

For this post, I watched Chris Sugrue‘s lecture. She is a visual artist, designer and programmer who creates digital interactive installations. She has a Masters of Fine Arts in Design from Parsons School of Design and currently teaches at Parsons Paris, in France. Sugrue’s art is self described as playful, and mainly comprises of light and interaction.

Someone using Delicate Boundaries.

I’m inspired by her work because it focuses on immersing the viewer/user in the interaction and in the world that she has created. Her project Delicate Boundaries is interesting to me because it bridges the gap between the screen and the real world through an illusion where bugs emerge from the screen and onto your arms when it’s touched. I like the life that she gave to the virtual bugs as they swarm your hand desperate to escape. Her other projects, like Memory of Form and Matter and Base 8, also use illusions like Pepper’s ghost to integrate digital imagery in to the physical world.

A still from Memory of Form and Matter