For my final project I wanted to incorporate my writing. I took a short story that I wrote and then broke it down into 15 different scenes. I looked at each scene and then decided on a strong image on each one like a picture book. From there I coded each scene as a separate function with helper functions to create each individual aspect. In some of the scenes I decided that I wanted there to be an interactive aspect so I coded other functions that were dependent on the mouse position. I thought that by making the writing more visual and because often times you have to read the story to know what’s animated in the scene the writing itself would become more enjoyable to non-readers.
Credit for the images and the song, none of which are my own:
I wanted to code the photo of the man in the door, but creating an accurate image that captured the emotion in the actor’s face was too difficult. Here is the link.
The next image is the high chair in the kitchen. Here is the link to the original image.
The third image is another that I wanted to code but found that using an image conveyed the emotion better. Here is the link.
The final image link.
The song is Styx’s Sail Away.
Screenshots from the project:
var tp; var f; var s; var t; var fo; var ff; var sx; var sv; var e; var n; var tn; var ev;
var tw; var tt; var ft; var ftn; var nb; var lb; var r = 232; var g = 14; var b = 199; var tp2;
var c = 0;
var sailaway; var henhand; var tris; var hc; var hen;
function preload() { //loads song for tenthScene
sailaway = loadSound('assets/CSA.wav');
henhand = loadImage('assets/Hen piano.jpg');
tris = loadImage('assets/Tris.png');
hc = loadImage('assets/hc.png');
hen = loadImage('assets/Hen.png');
}
function setup() { //creates canvas
createCanvas(800, 640);
background(178, 243, 250);
}
function draw() { //counts page flipping
if(c==0){
titlePage();
}
if(c == 1){
firstScene();
}
if(c ==2){
secondScene();
}
if(c == 3){
thirdScene();
}
if(c == 4){
fourthScene();
}
if(c == 5){
fifthScene();
}
if(c == 6){
sixthScene();
}
if(c == 7){
seventhScene();
}
if(c == 8){
eighthScene();
}
if(c == 9){
ninethScene();
}
if(c == 10){
tenthScene();
}
if(c == 11){
eleventhScene();
}
if(c == 12){
twelfthScene();
}
if(c == 13){
thirteenthScene();
}
if(c == 14){
fourteenthScene();
}
if(c == 15){
fifteenthScene();
}
if(c == 16){
titlePage();
c = 0;
}
}
function nextButton(){ //flips page to next page
nb = "next"
noStroke();
fill(255);
ellipse(775,610,50,60);
fill(0);
textFont("Georgia");
text(nb,760,610);
}
function lastButton(){ //flips page to last page
lb = "last"
noStroke();
fill(255);
ellipse(25,610,50,60);
fill(0);
textFont("Georgia");
text(lb,10,610);
}
function mousePressed(){ //counts clicks to align with page flipping
if(mouseX>=750 && mouseX <=800 && mouseY>=580 && mouseY<=640){
c = c +1;
}
if(mouseX>=0 && mouseX <=50 && mouseY>=580 && mouseY<=640){
c = c - 1;
}
if(c==10){
sailaway.play();
}
}
function houseT(){ //tristan's house
fill(130,26,5);
rect(150,300,500,300); //base of house
fill(48,15,4);
triangle(150,300,400,50,650,300); //roof
fill(92,15,46);
rect(360,450,80,150); //front door
fill(220,177,2);
ellipse(420,520,10,10); //doorknob
fill(60,100,60);
rect(170,320,50,70); //Ltopwindow
rect(580,320,50,70); //Rtopwindow
fill(199,234,232);
ellipse(400,380,100,100); //center window
fill(60,100,60);
rect(200,460,70,110); //Lbottomwindow
rect(530,460,70,110); //Rbottomwindow
}
function houseTanim(){ //Tristan's house animation
if(mouseX>=170 && mouseX <=220 && mouseY >=320 && mouseY<=390){
animOneLT();
fill(130,26,5);
rect(170,390,50,10); //keeps everything within the window
}
if(mouseX>=580 && mouseX <=630 && mouseY >=320 && mouseY<=390){
animOneRT();
}
if(mouseX>=200 && mouseX <=270 && mouseY >=460 && mouseY<=570){
animOneLB();
}
if(mouseX>=530 && mouseX <=600 && mouseY >=460 && mouseY<=570){
animOneRB();
}
}
function houseTanim2(){ //Tristan's house animation
if(mouseX>=170 && mouseX <=220 && mouseY >=320 && mouseY<=390){
animOneLT();
fill(130,26,5);
rect(170,390,50,10); //keeps everything within the window
}
if(mouseX>=580 && mouseX <=630 && mouseY >=320 && mouseY<=390){
animOneRT();
}
if(mouseX>=200 && mouseX <=270 && mouseY >=460 && mouseY<=570){
animOneLB();
}
if(mouseX>=530 && mouseX <=600 && mouseY >=460 && mouseY<=570){
animOneRB();
}
if(mouseX>=360 && mouseX <=440 && mouseY >=450 && mouseY<=600){
animDoor();
}
}
function animDoor(){
fill(128,211,182);
rect(360,450,80,150); //front door
fill(247,203,171);
rect(395,510,10,10); //Tris Neck
fill(214,192,12);
ellipse(400,500,30,30); //Tristan
fill(43,101,153);
rect(383,520,36,40); //Tris shirt
fill(153,197,228);
rect(383,560,13,40); //left leg of T jeans
rect(399,560,13,40); //right leg of T jeans
fill(162,88,4);
triangle(410,495,405,510,415,510); //hair
fill(225,175,119);
ellipse(410,510,20,20); //Orlando head
fill(255);
ellipse(405,510,5,5); //left eye
ellipse(415,510,5,5); //right eye
fill(98,187,205);
ellipse(405,510,3,3); //left eye
ellipse(415,510,3,3); //right eye
}
function animOneLT(){ //left top window inside window
fill(242,143,131);
rect(170,320,50,70); //Ltopwindow
//Jennifer
fill(72,15,8);
ellipse(195,365,40,60); //base of hair
fill(247,203,171);
ellipse(195,355,30,30); //base of face
fill(50,129,2); //eye color
ellipse(190,350,5,5); //left eye
ellipse(200,350,5,5); //right eye
push();
strokeWeight(2);
stroke(214,119,149);
line(190,360,200,360); //mouth
pop();
fill(247,203,171);
ellipse(195,380,10,20); //base of neck
fill(181,214,119);
rect(185,375,20,15); //shirt
}
function animOneRT(){ //right top window inside window
fill(236,231,231);
rect(580,320,50,70); //Rtopwindow
//shower
fill(161,151,151);
rect(603,320,5,21);
ellipse(605,340,25,10); //shower head
push();
stroke(89,144,194);
strokeWeight(3);
line(600,348,600,383); //water
line(605,348,605,383); //water
line(610,348,610,383); //water
pop();
}
function animOneLB(){ //left bottom window inside window
fill(128,171,211);
rect(200,460,70,110); //Lbottomwindow
//chair
fill(255);
ellipse(235,530,40,20); //seat of chair
push();
stroke(255);
strokeWeight(2);
fill(128,171,211);
rect(220,500,30,10); //back of chair
line(230,500,230,520);
line(240,500,240,520);
line(220,530,220,550); //chair back leg L
line(250,530,250,550); //chair back leg R
line(233,530,233,553); //chair front leg L
line(240,530,240,553); //chair front leg L
pop();
}
function animOneRB(){ //right bottom window inside window
fill(128,211,182);
rect(530,460,70,110); //Rbottomwindow
//chair
fill(255);
ellipse(555,530,40,20); //seat of chair
push();
stroke(255);
strokeWeight(2);
fill(128,211,182);
rect(540,500,30,10); //back of chair
line(550,500,550,520);
line(560,500,560,520);
line(540,530,540,550); //chair back leg L
line(570,530,570,550); //chair back leg R
line(553,530,553,553); //chair front leg L
line(560,530,560,553); //chair front leg L
pop();
}
function otherHouse(){
fill(0,0,100);
rect(600,300,100,75); //base
fill(255);
rect(640,350,20,25); //door
fill(48,15,4);
triangle(600,300,700,300,650,250); //roof
}
function otherHouseAnim(){
fill(255,195,0);
ellipse(580,420,70,90); //base of hair
fill(247,203,171);
ellipse(580,410,60,60); //base of face
fill(104,67,64);
ellipse(570,405,10,10); //left eye
ellipse(590,405,10,10); //right eye
fill(234,155,155);
ellipse(580,430,15,10); //mouth
fill(247,203,171);
rect(573.5,435,15,30); //neck
push();
strokeWeight(10);
stroke(247,203,171);
line(562.5,560,562.5,620); //left leg
line(602.5,560,602.5,620); //right leg
pop();
fill(243,160,210);
triangle(583,505,640,570,520,570); //bottom layer of skirt
fill(250,211,235);
triangle(583,505,640,560,520,560); //tulle layer
push();
strokeWeight(10);
stroke(247,203,171);
line(552.5,460,525,510); //left arm
line(612.5,460,640,510); //right arm
pop();
fill(243,160,210);
rect(552.5,455,60,80); //torso
}
function houseAnim(){ //Tristan's house animation
if(mouseX>=640 && mouseX <=660 && mouseY >=350 && mouseY<=375){
otherHouseAnim();
}
}
function otherCar(){ //superhero dad's car
fill(223,138,7);
rect(100,450,400,75); //bottom base of car
triangle(500,525,500,450,510,525); //bottom triangle of car
triangle(100,450,200,450,200,400); //left triangle
rect(200,400,275,50); //second tier rect
rect(475,400,25,50); //small rect, trunk
rect(200,350,225,50); //top rect
triangle(425,350,425,400,475,400); //top triangle
fill(0);
ellipse(200,525,80,80); //left tire
fill(0);
ellipse(425,525,80,80); //right tire
//windows
fill(214,253,254);
triangle(225,410,300,410,300,360); // left window
triangle(325,410,400,410,325,360);
//handles
push();
stroke(0);
strokeWeight(10);
line(300,425,300,435);
line(300,435,275,435);
line(275,435,275,425);
pop(); //left handle
push();
stroke(0);
strokeWeight(10);
line(400,425,400,435);
line(400,435,375,435);
line(375,435,375,425);
pop(); //right handle
}
function impala(){ //Hendrix's '67 chevy Impala
fill(0);
rect(100,400,600,100); //base of car
triangle(700,400,700,500,750,475); //trunkish part of car
rect(130,380,170,20); //left rect
triangle(300,380,300,400,325,400); //filler triangle
triangle(300,380,325,400,325,305); //windshield
rect(325,305,200,95); //top of car
triangle(525,305,525,400,550,355); //second tier standing triangle
triangle(525,400,550,355,700,400); //trunk
push();
stroke(103,110,121);
strokeWeight(3);
fill(0);
ellipse(250,500,100,100);
pop(); //left tire
push();
stroke(103,110,121)
strokeWeight(3);
fill(0);
ellipse(570,500,100,100);
pop(); //right tire
fill(225,235,233);
triangle(300,380,325,400,325,305); //part of windshield window
triangle(325,400,325,305,340,335); //part 2 of windshield window
triangle(355,325,355,390,340,390); //window part 1
rect(355,325,150,65); //window part 2
push();
strokeWeight(3);
stroke(103,110,111)
line(525,405,700,405); //back definition 1
line(525,404,500,420); //back definition 2
line(130,400,300,400); //front definition
line(325,403,325,480); //front vertical line
line(475,403,475,480); //back vertical line **
line(455,420,455,430);
line(455,430,430,430);
line(430,430,430,420); //handle
stroke(0);
strokeWeight(4);
line(465,325,465,390);
pop();
}
function AJ(){
fill(237,223,102);
ellipse(475,360,260,380); //base of hair
fill(247,203,171);
ellipse(475,340,200,250); //base of face
push();
stroke(237,223,102);
strokeWeight(50);
line(475,215,570,300); //bangs
//line(535,230,550,210);
pop();
fill(255); //whites of eyes
ellipse(440,320,40,40); //left eye
ellipse(510,320,40,40); //right eye
fill(157,217,250);
ellipse(430,320,20,20); //left eye color
ellipse(500,320,20,20); //left eye color
fill(r,g,b);
ellipse(475,170,40,40); //center of bow
triangle(495,170,530,130,530,210);
triangle(455,170,420,130,420,210); //bow
fill(250,219,157);
triangle(475,330,465,360,485,360); //nose
fill(250,164,157);
ellipse(475,400,40,20); //mouth
fill(247,203,171);
rect(440,450,60,70); //neck
fill(246,180,223);
ellipse(475,600,200,270); //shirt
}
function AJbow(){
if(mouseX>=455 && mouseX <=495 && mouseY >=150 && mouseY<=190){
r = r + random(0,15);
g = g + random(0,5);
b = b + random(0,10);
fill(r,g,b);
ellipse(475,170,40,40); //center of bow
triangle(495,170,530,130,530,210);
triangle(455,170,420,130,420,210);
}
}
function AJwindow(){
push();
stroke(255);
strokeWeight(10);
fill(199,234,232);
rect(20,20,760,600);
pop();
}
function trisHouse(){
fill(130,26,5);
rect(0,0,800,650); //base of house
fill(92,15,46);
rect(300,340,200,300); //door
fill(220,177,2);
ellipse(460,480,20,20); //doorknob
fill(199,234,232);
ellipse(400,80,200,200); //center window
fill(60,100,60);
rect(0,380,70,200); //Lwindow
rect(730,380,70,200); //Rwindow
}
function henHouse(){
fill(255);
rect(0,0,800,640);
image(tris,0,0,tris.width/2,tris.height/2);
}
function henHouseAnim(){
if(mouseX>=300 && mouseX <=500 && mouseY >=340 && mouseY<=640){
henHouse();
}
}
function doorway(){
push();
strokeWeight(5);
stroke(255);
fill(128,211,182);
rect(200,100,360,540); //door
pop();
fill(247,203,171);
rect(360,260,40,50); //Tris Neck
fill(214,192,12);
ellipse(380,200,130,130); //Tristan
fill(247,203,171);
ellipse(380,210,120,120); //Tris face
fill(43,101,153);
rect(310,290,150,200); //Tris shirt
fill(153,197,228);
rect(310,490,70,150); //left leg of T jeans
rect(390,490,70,150); //right leg of T jeans
push();
stroke(247,203,171);
strokeWeight(25);
line(310,290,210,100); //left arm
stroke(43,101,153);
line(310,290,235,150); //left arm sleeve
stroke(247,203,171);
line(472,293,472,450); //right arm
stroke(43,101,153);
line(472,293,472,420); //right arm sleeve
pop();
fill(255);
ellipse(360,200,20,20); //left eye
ellipse(400,200,20,20); //right eye
fill(147,70,45);
ellipse(360,200,10,10); //left eye
ellipse(400,200,10,10); //right eye
fill(247,143,128);
ellipse(380,240,30,20); //mouth
fill(222,101,165);
rect(330,575,30,30);
}
function doorwayAnim(){
if(mouseX>=300 && mouseX <=500 && mouseY >=340 && mouseY<=640){
fill(100,0,0);
rect(0,0,800,640);
doorway();
}
}
function table(){
fill(115,53,17);
quad(400,580,580,580,500,400,380,400); //top of table
push();
stroke(145,196,209);
strokeWeight(10);
line(403,580,577,580);
pop(); //legs of table
fill(145,196,209);
rect(400,580,35,80); //left leg
rect(545,580,35,80); //right leg
fill(132,179,192);
rect(545,587,10,80); //right leg shadow
}
function wall(){
fill(229,229,149);
quad(0,0,300,100,800,100,800,0); //ceiling
push();
stroke(229,229,149);
strokeWeight(10);
line(300,100,300,550); //left wall thing
line(0,640,300,550);
pop();
fill(120,138,146);
quad(0,640,300,550,800,550,800,640); //floor
}
function appliances(){
fill(145,196,209);
rect(300,400,500,150); //front of appliances
fill(178,107,4);
quad(300,400,800,400,800,370,350,370); //counter top
}
function stoveOven(){
fill(0);
rect(520,400,180,150); //front of stove
push();
stroke(185,182,177);
strokeWeight(3);
line(540,440,680,440);
line(540,440,540,425);
line(680,440,680,425); //handle
pop();
fill(185,182,177);
ellipse(555,415,10,10);
ellipse(595,415,10,10);
ellipse(635,415,10,10);
ellipse(675,415,10,10); //knobs
fill(210,207,202);
quad(520,400,700,400,720,370,540,370); //top of stove
push();
stroke(0);
strokeWeight(2);
fill(210,207,202);
ellipse(560,385,40,20); //outer ring of left stove top
ellipse(560,385,20,10); //inner ring of left stove top
ellipse(610,385,40,20); //outer ring of middle stove top
ellipse(610,385,20,10); //inner ring of middle stove top
ellipse(665,385,40,20); //outer ring of right stove top
ellipse(665,385,20,10); //inner ring of right stove top
pop();
}
function kitchenD(){ //kitchen door
push();
strokeWeight(3);
stroke(115,53,17); //doorframe
fill(145,196,209);
quad(10,637,10,300,90,320,90,610);
pop();
fill(220,177,2);
ellipse(20,480,20,20); //doorknob
}
function barbieHouse(){
fill(223,100,195);
rect(200,600,50,40); //base of barbie house
triangle(200,600,250,600,225,580); //roof of barbie house
}
function barbieHouseAnim(){
if(mouseX>=200 && mouseX<=250 && mouseY>=600 && mouseY<=640){
//covers old house
fill(120,138,146);
rect(200,600,50,40); //base of barbie house
triangle(200,600,250,600,225,580); //roof of barbie house
// new barbie house
fill(223,100,195);
rect(450,500,50,40); //base of barbie house
triangle(450,500,500,500,475,480); //roof of barbie house
}
}
function windowK(){
push();
strokeWeight(3);
stroke(115,53,17);
fill(125,223,110);
rect(397,250,306,103);
pop();
fill(178, 243, 250);
rect(400,252,302,52); //sky
}
function windowAnim(){
if(mouseX>=400 && mouseX<=702 && mouseY>=252 && mouseY<=355){
fill(68,174,252);
rect(400,252,302,103); //window shade
}
}
function platePancake(){
fill(255);
ellipse(480,530,50,50);
push();
stroke(145,196,209);
strokeWeight(3);
ellipse(480,530,35,35);
pop(); //decorative edging
}
function kitchenT(){
wall();
appliances();
stoveOven();
image(hc,220,370,hc.width/5,hc.height/5);
table();
platePancake();
kitchenD();
barbieHouse();
windowK();
}
function platePancakes(){
fill(255);
ellipse(150,600,100,80);
push();
stroke(145,196,209);
strokeWeight(3);
ellipse(150,600,80,60);
pop(); //decorative edging
}
function trisHen(){
fill(100,0,0);
rect(0,0,800,640);
push();
stroke(255);
strokeWeight(10);
fill(128,211,182);
rect(300,40,300,620);
pop(); //door frame
fill(92,15,46);
rect(0,40,300,600); //door
fill(247,203,171);
ellipse(480,220,150,150); //Hendrix
push();
translate(520,180);
rotate(PI/3.8);
fill(26,24,22); //hair color
ellipse(0,0,130,50); //pompadour hair
pop();
rect(380,225,50,75);//Tris Neck
fill(214,192,12);
ellipse(400,200,150,150); //Tristan
fill(43,101,153);
rect(350,300,150,200); //shirt
push();
stroke(247,203,171);
strokeWeight(25);
line(350,300,410,400); //left arm
line(500,300,450,400); //right arm
stroke(0);
strokeWeight(25);
line(350,300,400,383); //L leather jacket
line(500,300,457,386); //R leather jacket
pop();
fill(98,187,205);
ellipse(500,235,10,10); //left eye Hendrix
ellipse(530,240,10,10); //right eye Hendrix
push();
stroke(242,143,131); //lip color
strokeWeight(5);
line(490,270,510,275); //mouth
pop();
fill(153,197,228);
rect(350,500,65,140); //left leg of T jeans
rect(435,500,65,140); //right leg of T jeans
}
function TrisHenDAnim(){
if(mouseX>=300 && mouseX <=500 && mouseY >=340 && mouseY<=640){
trisHen();
}
}
function trisOrlando(){
fill(247,203,171);
rect(380,225,50,75);//Tris Neck
fill(214,192,12);
ellipse(400,200,130,130); //Tristan
fill(43,101,153);
rect(350,300,150,200); //shirt
fill(153,197,228);
rect(350,500,65,140); //left leg of T jeans
rect(435,500,65,140);
fill(162,88,4);
triangle(500,205.5,465,240,535,240); //hair
fill(225,175,119);
ellipse(500,260,85,85); //Orlando head
fill(229,217,106);
ellipse(500,350,70,100); //body
push();
stroke(225,175,119);
strokeWeight(30);
line(400,300,500,300); //arm
stroke(229,217,106);
line(420,300,500,300); //arm
line(500,400,410,400); //leg in Onesie
pop();
fill(255);
ellipse(480,260,20,20); //left eye
ellipse(520,260,20,20); //right eye
fill(98,187,205);
ellipse(480,260,10,10); //left eye
ellipse(520,260,10,10); //right eye
}
function legos(){
fill(234,20,16);
rect(500,500,150,80); //front of red lego
fill(213,18,15);
quad(500,500,650,500,730,480,580,480); //top of red lego
fill(206,25,23);
quad(730,480,650,500,650,580,730,540); //side of red lego
fill(249,242,29);
rect(200,300,200,80);//front of yellow block
fill(227,221,28);
quad(200,300,400,300,480,250,280,250); //top of yellow block
fill(216,210,16);
quad(400,300,480,250,480,310,400,380); //side of yellow block
fill(43,104,243);
rect(50,450,100,50); //front of blue block
fill(42,98,227);
quad(50,450,150,450,200,425,100,425); //top of blue block
fill(28,85,216);
quad(200,425,150,450,150,500,200,470); //side of blue block
}
function guitar(){
fill(231,194,102);
ellipse(150,400,200,300); //first half of guitar body
ellipse(250,400,200,280); //first half of guitar body
fill(50,30,1);
ellipse(250,400,80,80); //thing
fill(206,125,1);
rect(290,380,350,40); //neck of guitar
push();
stroke(231,194,102);
strokeWeight(2);
line(200,390,645,390); //strings
line(200,395,645,395); //strings
line(200,400,645,400); //strings
line(200,405,645,405); //strings
line(200,410,645,410); //strings
pop();
fill(206,125,1);
rect(640,370,80,60); //tuning block
}
function Orlando(){
fill(240,241,241);
quad(0,0,400,0,400,400,0,800); //wall
fill(240,241,241);
quad(800,640,800,0,400,0,400,500); //second wall
fill(255);
rect(300,0,200,500); //back wall
fill(120,138,146);
quad(0,640,800,640,500,500,300,500); //floor
fill(162,88,4);
triangle(400,220,450,290,350,290); //hair
fill(229,217,106);
ellipse(400,400,120,170); //body
fill(225,175,119);
ellipse(400,300,100,100); //head
fill(255);
ellipse(385,290,20,20); //left eye
ellipse(415,290,20,20); //right eye
fill(98,187,205);
ellipse(385,290,10,10); //left eye
ellipse(415,290,10,10); //right eye
push();
stroke(229,217,106);
strokeWeight(15);
line(360,340,300,300); //left arm
line(445,340,505,300); //right arm
strokeWeight(25);
line(360,455,360,520); //left leg
line(440,455,440,520); //right leg
pop();
}
function titlePage(){ //cover page
fill(87,137,213);
rect(0,0,800,640);
tp = "A Chance"
tp2 = "An interactive story: scroll over the pages and see what happens! (Hint: look for all caps)"
fill(255);
push();
textSize(70);
textFont("Georgia");
text(tp, 400, 300, 800, 100); // Text wraps within text box
textSize(30);
text(tp2, 100, 450, 620, 140); // Text wraps within text box
pop();
nextButton();
}
function firstScene(){
fill(178, 243, 250);
rect(0,0,800,640);
f = "Hendrix stood in front of the house he’d never been in before with dread " + //main text 1
"churning in his stomach. The house looked like a cookie cutter kind of place " +
"with mint green SHUTTERS and petunias in the garden bed out front. A fall wreath " +
"hung on the dark maroon door, and a pink bicycle with training wheels stood " +
"proudly on the black top driveway.";
fill(125,223,110);
noStroke();
rect(0,440,800,200); //grass
houseT();
houseTanim();
fill(0);
textSize(14);
textFont("Georgia");
text(f, 10, 10, 100, 640); // Text wraps within text box
nextButton();
lastButton();
}
function secondScene(){
fill(178, 243, 250);
rect(0,0,800,640);
s = "He felt out of place in his beaten leather jacket, tight black jeans, and " + //main text 2
"grey t-shirt. The businessman superhero father buckling a six year old girl into " +
"the car at the house next DOOR stared at him through the window with a furrowed brow. " +
"Hendrix could feel his disapproval rest on his shoulders. He fiddled with the stacks " +
"of cold, worn, metal rings on his fingers then twisted the braided leather bracelets, " +
"rope wristband, Puka bead bracelet, and heavy black watch on his wrists. He made sure that " +
"the clasps of his necklaces rested on the back of his neck."
noStroke();
fill(3,102,4);
rect(0,360,800,200); //grass
fill(103,110,111);
rect(0,500,800,140); //road
push();
stroke(214,218,218);
strokeWeight(50);
line(670,375,250,500); //pathway
pop();
otherCar();
otherHouse();
houseAnim();
fill(0);
textSize(14);
textFont("Georgia");
text(s, 10, 10, 790, 200); // Text wraps within text box
nextButton();
lastButton();
}
function thirdScene(){
fill(178, 243, 250);
rect(0,0,800,640);
t = "The air was dry and crisp around him. Dead leaves danced over the still green grass " +
"and the neighborhood’s cul-de-sac. He ran a hand through his ebony black hair that he’d " +
"easily coiffed into a pompadour earlier in the morning. He’d stood in front of the hotel’s " +
"mirror and appraised himself carefully. His eyeliner from the day before lingered under his " +
"eyes. As he stood in front of his car, he tried to gather his courage. He wiped his sweaty " +
"palms on the thighs on his jeans and wiped the mud off the bottom of his black combat boots." +
"He dropped his head to watch his feet. His hand’s shaking made his rings clink together."
noStroke();
fill(125,223,110);
rect(0,210,800,280); //grass
fill(184,188,187);
rect(0,490,800,150); //road
fill(130,26,5);
rect(160,0,420,270); //back of house
fill(60,100,60);
rect(180,135,50,80); //L window
rect(510,135,50,80); //R window
fill(92,15,46);
rect(330,130,100,140); //front door
impala();
fill(0);
textFont("Georgia");
text(t, 10, 10, 740, 105); // Text wraps within text box
nextButton();
lastButton();
}
function fourthScene(){
fill(100,0,0);
rect(0,0,800,640);
fo = "Finally, he forced himself to walk up to the door of the perfect house. As he neared " +
"he could hear the high-pitched shrieks of laughter through the walls, and the sounds of " +
"little feet on tile. As he lifted a hesitant and heavy hand, he heard a little girl’s voice " +
"say, “Daddy, there’s someone at the door!” She sounded like a girl who'd wear a BOW." +
"“Is there? Well while Daddy answers the door, you should go help Mama dress Orlando, ok, AJ?” " +
"Hendrix balked at the sound of the deep voice behind the door. Was it when he was thirteen " +
"when he heard that voice last? Seventeen? He scratched the back of his neck and then readjusted " +
"the fall of his shirt. His left leg shook a little restlessly as he waited. The lock clicked and " +
"then the door swung open."
AJwindow();
AJ();
AJbow();
fill(100,0,0);
rect(260,625,350,20);
push();
stroke(255);
strokeWeight(10);
line(360,620,600,620); //window pane over AJ
line(400,20,400,620); //vertical window pane
line(20,350,780,350); //horizontal window pane
pop();
fill(0);
textSize(15);
textFont("Georgia");
text(fo, 28, 25, 753, 150); // Text wraps within text box
nextButton();
lastButton();
}
function fifthScene(){
trisHouse();
henHouseAnim();
ff = "“Hendrix.”"
fill(0);
push();
textSize(45);
textFont("Georgia");
text(ff, 30, 30, 790, 100); // Text wraps within text box
pop();
nextButton();
lastButton();
}
function sixthScene(){
fill(100,0,0);
rect(0,0,800,640);
sx = "His brother stood in the doorway like a statue. One hand gripped the edge of the door " +
"and the second hung limply by his side. His broad shoulders pulled at the dark blue shirt " +
"he was wearing, but he looked less muscular than Hendrix remembered. He had on blue jeans " +
"with a spot of pink paint and grey socks, but his wedding ring was smartly polished. " +
"“Uh, hi, Tristan.”"
trisHouse();
doorwayAnim();
fill(255);
textSize(16);
textFont("Georgia");
text(sx, 10, 10, 790, 100); // Text wraps within text box
nextButton();
lastButton();
}
function seventhScene(){
trisHouse();
sv = "Tristan stared at him for another minute with an unreadable expression still standing in the DOOR. Hendrix started " +
"to shift his weight from foot to foot. Maybe, he thought sourly, he could run away and pretend " +
"this had never happened. Just as he was about to turn to leave, he was surprised as the full " +
"weight and force of his brother hit him. He stared at his brother’s back as he slowly hugged " +
"him back. Against his back, he felt more than heard Tristan say, “It’s really good to see you.”" +
" “Yeah, yeah. You too,” he said. His twenty-something brother smelled like baby powder."
TrisHenDAnim();
fill(252,241,68);
textSize(14);
textFont("Georgia");
text(sv, 10, 10, 290, 630); // Text wraps within text box
nextButton();
lastButton();
}
function eighthScene(){
fill(253,252,179);
rect(0,0,800,640);
e = "Tristan pulled away and then shyly stepped away from the door. “Come on in, yeah. I’ll go get " +
"some food. How’s that sound? I think there’re some pancakes left.” Hendrix stepped in the door and " +
"followed Tristan through the house to the kitchen. His brother’s dirty blond hair was cut short, " +
"and his shoulders sagged a little with fatigue. “So you’re what? A business guy or something like " +
"that? Accountant?” “Naw, I’m,” Tristan picked up a pink BARBIE HOUSE from the middle of the floor " +
"and put it on the kitchen table next to the highchair. “I’m a music teacher.” “You’re kidding me,” " +
"Hendrix laughed. He shoved his hands into his pockets and looked for a chair at the table that wasn’t " +
"covered in Cheerios. The kitchen was full of dirty dishes, children’s toys, paper, markers, baby bibs, " +
"and pacifiers. There were piles of little shoes by the backdoor that led to the backyard, and a " +
"toddler’s puffed coat was tossed on the floor. The kitchen itself was painted a bright and creamy " +
"yellow and had big WINDOWS letting in the sun. Tristan glanced over at him from the stove where " +
"pancakes were cooling on a cooling rack. His eyes had rings under them and the start of crow’s feet. " +
"His face looked old. “What’s wrong with that?” “It’s a cop out.” “No, that’s not being reasonable. " +
"I can’t be part of a rock band and be a good dad and husband. Take off that jacket, will you? " +
"Get comfortable.”"
kitchenT();
barbieHouseAnim();
windowAnim();
fill(0);
textSize(12);
textFont("Georgia");
text(e, 10, 10, 790, 220); // Text wraps within text box
nextButton();
lastButton();
}
function ninethScene(){
fill(253,252,179);
rect(0,0,800,640);
n = "It was habit that made Hendrix take his jacket off immediately and try to appear more comfortable " +
"in the chair. There were drawings taped on the stainless steel refrigerator and Crayola markers scattered " +
"on the floor around it. “Looks…nice,” Hendrix said, pointing to the drawings. Tristan smiled, showing off " +
"the canine teeth that he’d gotten “vampire caps” surgically applied to when he was nineteen. “Yeah, AJ – Alison " +
"Jennifer. Jennifer for her mama. She’s a great little artist, isn’t she?” Hendrix pulled a tight smile across his face, “Yep.” " +
"“So.” Tristan dropped into the chair across from Hendrix, not seeming to mind the Cheerio dust that crunched under " +
"him. “How’ve you been, Hen? It’s been, what, five years?” “Don’t call me Hen. It’s Hendrix now.” Hendrix " +
"leveled his blue eyes at Tristan who put a plate of Mickey Mouse shaped pancakes in front of him. He dropped " +
"his eyes down to the dirty tabletop and blew a heavy breath out of his nose. “I’m twenty-one now so yeah, five years.” " +
"Suddenly Hendrix smiled widely, “Remember when you made these pancakes for me?”"
fill(229,228,227);
rect(425,0,375,640); //refridgerator
push();
stroke(113,112,111);
strokeWeight(5);
line(425,200,800,200); //line making freezer and fridge
strokeWeight(15);
line(455,250,455,640); //fridge handle
pop();
image(hen,0,0,hen.width,hen.height);
fill(115,53,17);
fill(13,125,125);
textSize(16);
textFont("Georgia");
text(n, 450, 20, 350, 640); // Text wraps within text box
nextButton();
lastButton();
}
function tenthScene(){
fill(100,0,0);
rect(0,0,800,640);
tn = "Tristan laughed nervously. He absently pushed a clunky toy car across the table. When laughter came from " +
"upstairs, his hazel eyes looked up at the ceiling and he smiled absently. “You’re twenty-one now and about to go " +
"pursuing the old dream?” “Yeah. The old dream you bailed on,” Hendrix said sharply. “I’ve got a band. We’re making " +
"a demo with a record label. We’re going to be big like Nirvana.” “I’m sure, Hen.” “You’re not too old yet to come too,”" +
"Hendrix said. He took a bite of the pancake, ripping Mickey Mouse’s ear off. He talked while he chewed, “I mean, get " +
"your wife to take care of the – the kiddos and hop on the road. You can hit the gym and get back into shape. You " +
"don’t have to look like a…dad anymore.” “Hend-” “Yeah, you love your kids and your wife, whatever.” " +
"Hendrix sighed and bounced nervously his leg under the table. On top of it his right hand started playing " +
"Styx’s Come Sail Away. Tristan watched his long lithe fingers. In his head he could hear the piano with Hendrix’s " +
"own little twist on the song."
image(henhand,0,0,800,640);
fill(255);
textSize(14);
textFont("Georgia");
text(tn, 10, 10, 790, 200); // Text wraps within text box
nextButton();
lastButton();
}
function eleventhScene(){
fill(100,0,0);
rect(0,0,800,640);
ev = "“I do,” Tristan smiled. “But, Tris,” Hendrix said earnestly, leaning forward on his knobby elbows. He didn’t " +
"register how quickly and easily his old nickname for Tristan rolled off his tongue. “You could still do it. This is " +
"what you’ve wanted. We need a guitarist.” “This is why you’re here?” Tristan leaned back in his chair, his arms " +
"crossing over his chest. “You need a guitarist?” “No, I mean-” “Hen, you were supposed to be the best man at my wedding " +
"but you didn’t show, and I haven’t seen you since. Now you show up here to get me to go on some kind of crazy trip without " +
"even saying anything?” Tristan stood up and ran his hand through his hair. He laughed but without humor, like he was trying " +
"to keep his calm. “You haven’t even met my kids, Hen, and Orlando is named for you.” “My name’s not Orlando.”" +
"The muscles in Tristan’s jaw tightened, “His name is Hendrix Orlando. We call him Orlando because you haven’t " +
"been around. …And Jen doesn’t really like you either. She didn’t want to name him after you.” “Oh.” " +
"“Yeah, but I insisted. You’re my brother, of course I had to name him for you.” Tristan took a second of " +
"silence before saying carefully, “Hen, I can’t go with you.”"
guitar();
fill(255);
textFont("Georgia");
text(ev, 10, 10, 790, 200); // Text wraps within text box
nextButton();
lastButton();
}
function twelfthScene(){
fill(100,0,0);
rect(0,0,800,640);
tw = "“You promised me that we were going to be a band. We were going to make music and change the goddamn world!” " +
"“I have a family, Hen. I’m not leaving them.” “What am I then, Tris?” Hendrix slammed his fist down on the table " +
"and stood up. The chair’s legs rattled against the tile of the kitchen floor. “I’m supposed to be family too!” " +
"“Daddy! Daddy!” Tristan scooped up the toddler running towards him in a diaper and yellow onesie. He had light " +
"brown hair and clear blue eyes. He had a pacifier in one chubby hand and his father’s t-shirt in the other. “Hey, " +
"Orlando, what’s your name?” Tristan looked down at Orlando proudly and then tickled his son’s stomach. “Come on, " +
"Orlo, what’s your full name?” “Hendrix Orlando,” the two year old said proudly. He buried his head against his " +
"father’s neck and starting playing with his ear. “Yeah, that’s right buddy. Now why don’t you go play with your " +
"Legos, okay?” Tristan put his son down and then faced Hendrix. “I have a chance here.” Hendrix scoffed, “To drown " +
"in dirty diapers and kids’ drool, sure. You wanted to be a star, Tris, and you can be. Come on.”"
Orlando();
fill(0);
textFont("Georgia");
text(tw, 10, 10, 790, 200); // Text wraps within text box
nextButton();
lastButton();
}
function thirteenthScene(){
fill(0);
rect(0,0,800,640);
tt = "“Hen, Dad ran out on us. I’m not running out on them,” Tristan gestured to Orlando who was happily banging " +
"Legos together and giggling. “You ran out on me! It was your job to look out for me.” “I got married.” But " +
"Tristan’s voice was quiet, and he wouldn’t look Hendrix in the eyes. “Whatever.” From upstairs, the sound " +
"of water running for a shower filled the silence. Hendrix glanced watched Orlando as he played with his " +
"Legos, trying to figure out the best way to fit them together. Every once in a while he reached for his Sippy cup. " +
"“…My stuff looks good on you.” “You recognized it? I mean you left it all in your room when you…got married.” " +
"Hendrix twisted a ring on his finger. “Yeah, it works for you. Looks good.” “Thanks. Any chance I can say goodbye " +
"to Orlando before I go?” Tristan motioned for him to go ahead. He kept a watchful eye as Hendrix squatted " +
"down next to the two year old. They had the same eyes. “Hey, Orlando, I’m your Uncle Hendrix.” Orlando continued playing with his colored blocks obliviously."
legos();
fill(255);
textFont("Georgia");
text(tt, 10, 10, 790, 200); // Text wraps within text box
nextButton();
lastButton();
}
function fourteenthScene(){
fill(253,252,179);
rect(0,0,800,640);
ft = "After a moment’s pause, Hendrix carefully lifted a necklace off from around his neck. The pendent " +
"was large and some kind of old symbol. He looked up at Tristan before he carefully put the necklace " +
"around Orlando’s neck. The toddler took notice and started chewing on it, giving his father a wide " +
"toothy smile. Tristan crossed to them and then scooped Orlando up. “Hey, buddy, look at that. Look " +
"at what Uncle Hendrix gave you!” To Hendrix he said, “You sure you want to part with that?”" +
"He shrugged, “Yeah. Whatever. It was yours to begin with anyway. I’ve got to go.”" +
"Tristan grinned and bounced Orlando on his hip. He had stubble coming in on his jaw. " +
"Orlando ran a hand over it and then screamed with delight. “You could stay, you know.”"
trisOrlando();
fill(0);
textSize(14);
textFont("Georgia");
text(ft, 10, 10, 790, 200); // Text wraps within text box
nextButton();
lastButton();
}
function fifteenthScene(){
fill(178, 243, 250);
rect(0,0,800,640);
ftn = "Hendrix shook his head. “No. You’re right; you have a chance here, and mine’s somewhere else. " +
"Say hi to Jen for me. ...And tell her I’m sorry too.” “Sure.” “I am, you know. I mean, I guess " +
"leaving wasn’t easy for you either,” Hendrix mumbled, turning to walk out the door. Louder, he asked, " +
"“Can I, uh, come visit again?” “I’d like that,” Tristan said, cuddling his son tighter. " +
"Orlando sighed against Tristan’s shoulder. He waved bye-bye to Hendrix, reaching out with a " +
"small fat hand like he wanted to go with him. “Okay.”"
fill(125,223,110);
noStroke();
rect(0,440,800,200); //grass
houseT();
houseTanim2();
fill(0);
textFont("Georgia");
text(ftn, 10, 10, 130, 640); // Text wraps within text box
nextButton();
lastButton();
}
]]>One of my inspirations for my final project comes in the form of online kids’ books. I have young cousins who are learning how to read. Instead of practicing how to read with paper books they I did, they instead are learning how to read online. Education.com has many books online that help kids learn how to read. While I want to add an interactive aspect and my story will not be for small children, I realized that this approach to reading might make adults who may not like to read enjoy it more.
For the interactive part, I remembered a game from back when I was in fourth grade Spanish class. It was Jumpstart Spanish and I remembered how the game made me want to learn Spanish. Conceptually it was similar to clicking and dragging which are things that I want to incorporate to make reading fun.
I’d like to do a final project that is an interactive story. I’m a creative writing major with a background in fine arts so I’d like to take a story of mine and then make it into an interactive experience using some sketches of mine and incorporating the whole thing into an interactive program. For example, when the right side of the screen is clicked the scene would change like the flipping of a book page. Similarly when the left side of the screen is clicked the scene would change back to the previous page. Within each screen the text of the story of the scene would be displayed and then the various elements within each screen would be interactive. For example, if a character moves in the text then the character could be dragged by the mouse from one location to another. I haven’t worked out which story I am going to use or if I’m going to use one already existing and the amount of text per page yet, but I’m hoping that it will have maybe a fairytale book feel to it.
I really enjoyed this project. I liked being able to add in the color changing functions because it added variety and made the turtle design a bit more engaging. sketch
var turtle;
var startFrame;
var r = 235;
var g = 200;
var b = 200;
var x = 300;
var y = 300;
function setup() {
createCanvas(600, 600);
background(0);
x = mouseX;
y = mouseY;
turtle = makeTurtle(430,100);
turtle.setColor(color(r,g,b));
stroke(r,g,b);
fill(r,g,b);
turtle.setWeight(1);
turtle.penDown();
frameRate(10);
}
function draw(){
for (var i = 0; i < 100; i++) {
if(i %2){
r = r - random(0,.08);
g = g - random(.03,.06);
b = b - random(.01,.2);
}
turtle.setColor(color(r,g,b));
turtle.forward(90);
turtle.right(80.5);
turtle.forward(60);
if (i % 50 === 0) {
turtle.forward(200);
}
}
}
function mousePressed(){
background(0);
r = random(0,255);
b = random(0,255);
g = random(0,255);
}
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;}
I really liked Sony’s Evans-bot. An animated robot that creates songs, it is given a series of constraints for melody and harmony, a primary chord to work off of, and then a few backup chords. These constraints are called on a “leadsheet,” described by the creator as “monophonic melodies with underlying chord sequence, “in the style ” of arbitrary composers, or corpora.”
I really like this project especially because the music is programmed to sound like a particular style of a composer like George Gershwin or Irving Berlin. I’m a big Gershwin and Berlin fan so I enjoyed hearing trademarks of their music within the program. I’m not sure how a computer would’ve been programmed to create such a thing, but I highly enjoyed it and trying to reason through a potential code.
]]>
Anne Spalter is a digital mixed media artist. She was a math major undergrad at Brown University and then earned an MFA in painting from the Rhode Island School of Design (RISD). In the 1990s she founded the digital fine arts program at both Brown University and RISD. Her piece, Waves: Sunrise, looks like paint being marbled together but is actually generated from a computer program. Unfortunately, I couldn’t find specifics on how exactly Spalter generated the piece. To me, though, it looks like Spalter created pools of color and then constantly changed the pools’ size and shapes in order to create the mixing, marbling effect. She might have also put in a threshold to be sure that one pool of color never filled up more than a certain amount of the canvas to ensure that she had a dynamic image at every moment.
Two captures from Waves: Sunrise
My project was inspired by Les Miserable’s famous barricade scene: Enjolras is on the wagon riding through France and passing by the buildings in the city. I used a photo to render Enjolras and the French flag (copyright disclaimer, I don’t own either image used in the program). This is Chris Durling as Enjolras of Melborne’s production of Les Mis. Link to production.
Here is a shot from the 2012 Les Mis movie’s barricade scene and a screenshot of Ramin Karimloo as Enjolras in the West End’s 2004 Les Mis revival. It’s hard to see but Karimloo is on top of a wagon similar to the one I created.
//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-10
var buildings = [];
var img;
var inloc = "http://i.imgur.com/yxe5I2n.png";
var ig;
var loc = "http://i.imgur.com/uOmk2ms.png";
var x = 200;
var y = 200;
var rotS=0;
var terrainSpeed = 0.00008;
var terrainDetail = 0.005;
function preload() {
img = loadImage(inloc);
ig = loadImage(loc);
}
function setup() {
createCanvas(600, 400);
frameRate(10);
for (var i = 0; i < 10; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
}
function draw() {
background(35,58,70);
rotS=rotS-8;
fill(1,82,28);
stroke(1,82,28)
beginShape();
for (var w = 0; w < width; w++) {
var t = (w * terrainDetail) + (millis() * terrainSpeed);
var a = map(noise(t), 0,1, 0.5, height);
vertex(w, a);
vertex(width,height);
vertex(0,height);
}
endShape();
updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();
addNewBuildingsWithSomeRandomProbability();
fill(100);
noStroke();
rect(0,height-80,width,100);
push();
translate(250,50);
scale(-1,1);
image(ig, 0,0,img.width/8,img.height/8);
pop();
image(img,250,80, img.width/10, img.height/10); //Enjolras
wagon();
}
function wagon(){
fill(59,35,31); //makes main of wagon
strokeWeight(0);
rect(x,y,250,100);
ellipseMode(CENTER);
stroke(42,25,22); //outter rim of L wheel
strokeWeight(4);
noFill();
ellipse(x,y + 100,100,100);
fill(59,35,31);
ellipse(x,y + 100,25,25); //center of L wheel
push();
translate(x,y+100);
rotate(rotS);
stroke(42,25,22);
strokeWeight(4);
line(0,0,0,-50); //spokes of the L wheel
line(0,0,0,50);
line(0,0,50,0);
line(0,0,-50,0);
pop();
stroke(42,25,22); //outter rim of R wheel
strokeWeight(4);
noFill();
ellipse(x+250,y + 100,100,100);
fill(59,35,31);
ellipse(x+250,y + 100,25,25); //center of R wheel
push();
translate(x+250,y+100);
rotate(rotS);
stroke(42,25,22);
strokeWeight(4);
line(0,0,0,-50); //spokes of the R wheel
line(0,0,0,50);
line(0,0,50,0);
line(0,0,-50,0);
pop();
strokeWeight(15);
stroke(59,35,31);
line(x,y + 25, x-100, y +25);
}
function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
}
}
function removeBuildingsThatHaveSlippedOutOfView(){
// If a building has dropped off the left edge,
// remove it from the array. This is quite tricky, but
// we've seen something like this before with particles.
// The easy part is scanning the array to find buildings
// to remove. The tricky part is if we remove them
// immediately, we'll alter the array, and our plan to
// step through each item in the array might not work.
// Our solution is to just copy all the buildings
// we want to keep into a new array.
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep; // remember the surviving buildings
}
function addNewBuildingsWithSomeRandomProbability() {
// With a very tiny probability, add a new building to the end.
var newBuildingLikelihood = 0.007;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}
// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}
// draw the building and some windows
function buildingDisplay() {
var floorHeight = 20;
var bHeight = 300;
fill(188,185,184);
strokeWeight(0);
stroke(0);
push();
translate(this.x, height - 40);
rect(0, -bHeight, this.breadth, (bHeight+ this.put));
fill(139,165,163);
rect(this.pos, -bHeight+this.place, 30, 50);
fill(140,149,115);
rect(this.pos,-bHeight+this.put,this.wide,this.tall);
stroke(2);
fill(137,115,132);
rect(this.pos, -bHeight+this.set, this.wide,this.tall);
pop();
}
function makeBuilding(LocationX) {
var bldg = {x: LocationX,
breadth: 50,
speed: -1.0,
nFloors: round(random(2,8)),
move: buildingMove,
wide: random(10,30),
tall: random(10,50),
pos: random(0,13),
place: random(10,50),
put: random(75, 150),
set: random(170, 200),
display: buildingDisplay}
return bldg;
}I had a lot of fun with this project once I got the preliminaries set up. I started out thinking that I wanted to have an image recreated by pixilation when the mouse scrolled over the image. But then I realized that that wouldn’t work because of the constant mouse movement. So I decided to create a more fun portrait. The subject’s last name is displayed mainly opaque and then the picture is displayed with a spotlight on top of it. I spent a lot of time on this image but I still want to continue working on it.
beginning
after one movement with the mouse
after scrolling over the image multiple times
//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Assignment-09-B
var img;
var inloc = "http://i.imgur.com/XTKXPpa.png";
var distThreshold = 20;
var underlyingImage;
function preload() {
img = loadImage(inloc);
underlyingImage = loadImage(inloc);
underlyingImage.loadPixels();
}
function setup() {
createCanvas(400,300); //sets up on the background image
image(img,0,0);
filter(POSTERIZE,2);
}
function draw(){
for (var y = 0; y < height; y +=40){
for (var x = 0; x < width; x +=40) {
if (nearMouse(x, y, distThreshold)) {
var c = underlyingImage.get(mouseX,mouseY);
stroke(c); //the stroke color is determined on the pixel underneath
strokeWeight(1); //creates the last name of the subject, Khalouf
textSize(45);
fill(255,255,255,20);
text("Khalouf", x,y);
push();
image(underlyingImage, 0, 0, underlyingImage.width / 8, underlyingImage.height / 8);
var x = constrain(mouseX, 0, img.width - 1); //redraws the image based on mouse X and Y
var y = constrain(mouseY, 0, img.height - 1);
// get a subrectangle from image. x and y (upper left corner)
// should be within the image.
var smaller = img.get(x, y, 100, 100);
image(smaller,x, y, 120, 120);
fill(255,255,255,40);
ellipseMode(CORNERS); //puts a "spotlight" on the center of the image
noStroke();
strokeWeight(0);
ellipse(x,y,x+120,y+120);
pop();
}
}
}
}
function nearMouse(x, y, d) {
return dist(x, y, mouseX, mouseY) < d;
}
I really like Alison’s choice of Moritz Stefaner’s Project Ukko. I agree with her assessment that it is very user friendly. The visualization of the wind patterns through tilt, thickness of line, and color is very easy for anyone to read and also does not demand extensive time because it is so accessibly done. Originally when I just saw the still of the project and hadn’t yet read Alison’s review or checked out the webpage, I had thought that it was a piece of artwork because it looked so artful. I really appreciated that Stefaner found a way to make a mathy area accessible to humanities students and to give beauty to what might not seem beautiful on the surface.
Jake Barton, the founder of Local Projects, “an experience design and strategy firm for museums, brands and public spaces in New York” (Wikipedia), gave a thought-provoking presentation called “Like Falling in Love” at Eyeo 2012. After graduating from Northwestern University with a degree in performance studies, Barton started designing sets on Broadway then worked for Ralph Applebaum Associates then finally founded Local Projects.
Barton works on making installations and public spaces relatable to visitors/viewers through technology. Though not highly discussed in his Eyeo speech, Barton was co-leader of the team that figured out how to list the names of the 9/11 victims on the new memorial. Instead of going alphabetically, he and his team found a way to list the victims through personal connections. As mainly a humanities, writing, student, I’m very interested in the ways that technology can bring people together and make things like art and perceptions more accessible to everyone.
When he presents, Barton is confident. He goes chronologically through the production of a project, sometimes even discussing the failed ideas. He gives multiple real life examples and uses visual aids. I’d like to learn to be as relaxed while presenting as Barton appears to be.
]]>