![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/09/stop-banner.png)
Final
var anxiety; //sound for computer anxiety
var sing; //sound for birds singing
var doorclose; //sound for door closing
var alarm; //sound for the clock
var squish; //sound for the virus
var drawer;
function preload() { //loading sounds
anxiety = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/Anxiety.wav");
sing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/birds.wav");
doorclose = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/doorclose.m4a");
alarm = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/clock.wav");
squish = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/squish.wav")
drawer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/drawer.wav")
}
function soundSetup() {
//setting the volume for each sound
anxiety.setVolume(1);
sing.setVolume(0.2);
doorclose.setVolume(1);
alarm.setVolume(1);
squish.setVolume(1);
drawer.setVolume(1);
}
var virus = []; //array of "germs"
var painted = []; //paint on the wall
var x = [];
var y = [];
var reliefBubbles = [];
var landscape = []; //array that creates hills
var rock = []; //array that creates rock
var trees = []; //trees on the close side of the road
var trees2 = []; //trees on the far side of the road
var cars = []; //cars on the road
var flocks = []; //flocks of birds
var bx = 180; //bird coordinates and
var by = 180;
var bdx = 0;
var bdy= 0;
var textX = 100; //the scrolling text on the TV
var germShot = -1; //which germ has been "shot" with the syringe
var r = 40; //radius of clock
var theta = 0; // angle of rotation (starting) for clock
var c = 10; //to move the chart
var count = -10; //to control where the germs "stop" on the screen
var EamonnX = 100; //The x location of me as I walk
var opacity = 255;
var size = 10;
var noiseParam = 0;
var noiseStep = 0.03; //extremity of the slopes
function setup() {
createCanvas(400,300);
background(220);
frameRate(5)
noStroke();
fill(136,238,143); //first scene background
rect(0,0,400,height);
t1 = makeTurtle(380,200); //constructing turtles for the computer anxiety
t2 = makeTurtle(380,200);
t3 = makeTurtle(380,200);
t4 = makeTurtle(380,200);
t5 = makeTurtle(380,200);
//setting the color and weight
t1.lowerPen();
t1.setColor(color(0));
t1.setWeight(random(1,3));
t2.lowerPen();
t2.setColor(color(0));
t2.setWeight(random(1,3));
t3.lowerPen();
t3.setColor(color(0));
t3.setWeight(random(1,3));
t4.lowerPen();
t4.setColor(color(0));
t4.setWeight(random(1,3));
t5.lowerPen();
t5.setColor(color(0));
t5.setWeight(random(1,3));
noStroke();
for(var i=0;i<=width/5;i++){ //creating hills
var n= noise(noiseParam); //picks value 0-1
var value = map(n,0,1,150,250); //scales it to the canvas size
landscape.push(value); //adds to array
noiseParam+=noiseStep; //moves to the right for the next point in the array
}
for(var i=0;i<=width/5;i++){ //creating rocks
var n2= noise(noiseParam); //picks value 0-1
var value2 = map(n2,0,1,250,300); //scales it to the canvas size
rock.push(value2); //adds to array
noiseParam+=noiseStep; //moves to the right for the next point in the array
}
//plotting the starting objects
for (var i = 0; i < 30; i++){
var Tx = random(width);
var Ty = random(280,height);
trees[i] = makeTree(Tx,Ty);
}
for (var i = 0; i < 30; i++){
var Tx2 = random(width);
var Ty2 = random(240,260);
trees2[i] = makeTree(Tx2,Ty2);
}
for (var i = 0; i < 2; i++){
var Fx = random(width);
var Fy = random(0,200);
flocks[i] = makeFlock(Fx,Fy);
}
for (var i = 0; i < 10; i++){
var Cx = random(width);
cars[i] = makeCar(Cx);
}
useSound();
}
function draw() {
//storyboard for the animation
if(frameCount > 0 & frameCount<=100){
openingScene();
}
if(frameCount>100 & frameCount<=200){
anxiety.stop();
sceneTwo();
}
if(frameCount==100){
squish.play();
}
if(frameCount>200 & frameCount<=380){
sceneThree();
squish.stop();
}
if(frameCount==200){
alarm.play();
}
if(frameCount>380){
alarm.stop();
sing.play();
finalScene();
}
if(frameCount==380){
sing.play();
}
if(frameCount>1000){
sing.stop();
}
}
function openingScene(){
Window(100,50); //drawing the room
bed(0,200);
chair(270,190);
laptop(350,210);
Eamonn(295,160);
if(frameCount>20){ //initializing the computer anxiety
push();
computerAnxiety();
pop();
}
if(frameCount==20){
anxiety.play();
}
desk(340,210);
bird();
fill(255); //white
rect(147.5,50,5,150); //frames
rect(100,122.5,100,5);
}
//functions for the first scene
function Window(x,y){
push();
translate(x,y);
fill(155,245,245); //light blue
rect(0,0,100,150); //glass
fill(255); //white
rect(47.5,0,5,150); //frames
rect(0,72.5,100,5);
pop();
}
function bed(x,y){
push();
translate(x,y);
fill(10,95,193); //dark blue
rect(0,0,100,height,10); //beds
rect(200,0,200,height,10);
pop();
}
function chair(x,y){
push();
translate(x,y);
fill(255); //white
rect(0,0,8,110); //chair
rect(0,55,55,8);
rect(55,55,8,60);
pop();
}
function desk(x,y){
push();
translate(x,y);
fill(236,188,75); //yellow-brown
rect(0,0,75,100);
fill(131,92,3); //dark brown
rect(-227,0,75,100)
fill(166,123,21); //light brown
rect(-220,10,60,30);
fill(131,92,3); //dark brown
ellipse(-190,25,10,10); //knob
if(mouseX>110 & mouseX<180 && mouseY>220 && mouseY<250 && mouseIsPressed){ //if mouse is pressed on drawer, open it
fill(0); //black
rect(-217,10,54,30); //inside of drawer
fill(166,123,21);
rect(-220,20,60,30);
fill(131,92,3);
ellipse(-190,35,10,10); //knob
}
pop();
}
function laptop(x,y){
push();
translate(x,y);
fill(150); //gray
rect(1,-2,30,3); //laptop keyboard
quad(30,0,30,3,43,-20,41,-23); //screen
pop();
}
function Eamonn(x,y){
push();
translate(x,y);
fill(0); //black
rect(-10,65,65,20,10); //legs
rect(35,65,20,75,10);
fill(186); //gray
rect(32,130,30,10,10); //shoe
fill(255,220,200); //beige
ellipse(2,0,29); //head
rect(-2,0,8,20); //neck
fill(242,201,69); //golden brown
ellipse(-6,0,13,27); //hair
ellipse(4,-10,27,10);
fill(176,58,58); //maroon
rect(-13,20,30,60,15); //shirt
fill(176); //gray
push();
rotate(radians(-80)); //reaching out to laptop
rect(-40,5,15,50,15); //arm
pop();
fill(255,220,200); //beige
ellipse(47,41,15); //head
pop();
}
function bird(){
push();
if(mouseX>90 &mouseX<190 &&mouseY>50 &&mouseY<190){ //is mouse is on window, show bird
bdx = mouseX-bx; //"easing" the bird
bdy= mouseY-by;
bx = bx + 0.1*bdx;
by = by + 0.1*bdy;
fill(138,102,18); //dark brown
triangle(bx,by-5,bx,by+5,bx+20,by+random(-5,5)); //wings
triangle(bx,by-5,bx,by+5,bx-20,by+random(-5,5));
fill(213,99,12); //red brown
triangle(bx+1,by-13,bx+1,by-8,bx+11,by-10); //beak
fill(182,139,54); //dark brown
ellipse(bx,by,12,15); //head
fill(138,102,18); //light brown
ellipse(bx,by-10,10,10);
}
pop();
}
function computerAnxiety(){
var EamonnHeadX = 295; //coordinates of my head
var EamonnHeadY = 160;
t1.forward(random(1,3)); //move at varying speeds
t2.forward(random(1,3));
t3.forward(random(1,3));
t4.forward(random(1,3));
t5.forward(random(1,3));
t1.turnToward(EamonnHeadX, EamonnHeadY, 80); //move toward my head
t2.turnToward(EamonnHeadX, EamonnHeadY, 20);
t3.turnToward(EamonnHeadX, EamonnHeadY, 50);
t4.turnToward(EamonnHeadX, EamonnHeadY, 60);
t5.turnToward(EamonnHeadX, EamonnHeadY, 70);
t1.left(random(-1, 1)); //to make the movement erratic
t2.left(random(-1, 1));
t3.left(random(-1, 1));
t4.left(random(-1, 1));
t5.left(random(-1, 1));
}
function sceneTwo(){
fill(255,200,104); //orange
rect(0,0,width,height); //background
Television(70,50);
fill(161,105,9); //brown
rect(45,235,300,100); //desk
chart(135,65);
TVAnxiety();
syringe();
if (mouseIsPressed & (germShot > -1)) { //if mouse is pressed on germ, remove it from array
virus.splice(germShot,1);
}
}
function Television(x,y){
push();
translate(x,y);
stroke(0);
strokeWeight(10);
fill(166,250,255); //light blue
rect(0,0,250,150); //screen
rect(115,150,10,20); //stand (stroke color)
rect(25,175,200,5); //stand
fill(252,49,49); //red
noStroke();
rect(5,115,240,15); //news banner
textSize(10);
fill(255); //white
text("CORONAVIRUS RISING IN US",textX,127);
textX-=5; //move text
if(textX<5){ //reset text if reaches end of TV
textX = 100;
}
pop();
}
function chart(x,y){
push();
translate(x,y);
fill(255); //white
strokeWeight(2);
stroke(0);
rect(0,0,120,90); //chart background
line(10,20,10,80); //axis
line(10,80,100,80);
fill(255,0,0); //red
textSize(20);
text("CASES", 30,20);
strokeWeight(5);
var ttl = makeTurtle(12,78); //create a turtle
ttl.setWeight(5);
ttl.setColor(color(255,0,0)); //red
ttl.left(45); //making graph line
ttl.forward(30);
ttl.right(90);
ttl.forward(15);
ttl.left(90);
ttl.forward(c);
c+=2 //chart is going up
pop();
}
function TVAnxiety(){
if(frameCount % 4 == 0){ //every 4 frames, make new germ
virus.push(makeGerm(200,150));
}
for(var i=0;i<virus.length;i++){ //move and show germs
virus[i].show();
virus[i].move();
}
count+=1;
}
function makeGerm(startX,startY){ //germ constructor
var germ = {x: startX,
y:startY,
dx: random(-10,10), //speeds
dy:random(-10,10),
breadth:random(20,40), //width of germ
color:color(0),
moving:true,
show: showGerm,
move: moveGerm
}
return germ;
}
function showGerm(){ //germ drawing
push();
fill(6,158,31); //dark green
ellipse(this.x,this.y,this.breadth,this.breadth); //germ body
var t=makeTurtle(this.x,this.y) //make a turtle for each germ
t.setWeight(5);
t.setColor(color(6,158,31)); //dark green
for(var i=0;i<7;i++){ //creating the "spikes"
t.forward(this.breadth-5); //one spike
t.raisePen();
t.back(this.breadth-5); //going back to center, turning
t.right(60);
t.lowerPen();
}
pop();
}
function moveGerm(){
if(this.moving==true){ //move germ diagonally
this.x += this.dx;
this.y += this.dy;
}
if(this.x>width - count || this.x<0+count || this.y>height-count || this.y<0+count){ //if it hits a boundary, defined by a count
this.moving=false;
}
}
function syringe(){
push();
rectMode(CENTER);
translate(mouseX,mouseY);
rotate(radians(45));
fill(220); //light gray
rect(0,0,20,50); //bottle
rectMode(CORNER);
rect(-5,25,10,5); //cap
rect(-10,25,20,2);
fill(247,131,236); //pink
rect(-10,0,20,25); //syringe liquid
strokeWeight(2);
stroke(220); //gray
line(0,-25,0,-50); //needle
pop();
}
function sceneThree(){
fill(250,240,191); //beige
rect(0,0,width,height); //background
paint();
clock(300,100);
fill(164,115,1); //brown
rect(0,250,width,height); //floor
fill(245,217,152); //white-beige
rect(width-20,0,20,height); //wall
table(180,160);
fill(121,61,2); //dark brown
rect(375,115,5,155); //door(closed)
push();
frameRate(20)
if(frameCount<=320){ //animating me walking
if(frameCount%4 ==0){ //alternating animations
EamonnWalk(EamonnX,130);
}else{
EamonnStand(EamonnX,130);
}
EamonnX+=2 //moving me
}
if(frameCount>=320 & frameCount<340){ //reaching out to the door
arm();
EamonnStand(335,130);
}
if(frameCount>330 & frameCount<360){
fill(121,61,2); //dark brown
rect(315,115,60,155); //door(open)
fill(232,219,108); //gold
ellipse(325,200,9,9); //knob
}
if(frameCount==310){
doorclose.play();
}
pop();
}
//functions for scene three
function EamonnStand(x,y){
push();
translate(x,y);
fill(255,220,200); //beige
ellipse(0,0,29); //head
rect(-4,0,8,20); //neck
fill(242,201,69); //golden brown
ellipse(-6,0,13,27); //hair
ellipse(4,-10,27,10);
fill(176,58,58); //maroon
rect(-13,20,25,60,15); //shirt
fill(0); //black
quad(-13,70,12,70,9,130,-10,130); //leg
fill(176); //gray
rect(-8,20,15,50,15); //arm
fill(255,220,200); //beige
ellipse(-1,70,15); //hand
fill(186); //gray
rect(-13,130,30,10,10); //shoe
pop();
}
function EamonnWalk(x,y){
push();
translate(x,y);
fill(255,220,200);
ellipse(0,0,29);
rect(-4,0,8,20);
fill(242,201,69);
ellipse(-6,0,13,27);
ellipse(4,-10,27,10);
fill(176,58,58);
rect(-13,20,25,60,15);
fill(0);
quad(-13,70,12,70,-5,130,-24,130); //legs
quad(-13,70,12,70,25,130,5,130);
fill(176)
rect(-8,20,15,50,15);
fill(255,220,200)
ellipse(-1,70,15)
fill(186,186,186);
rotate(radians(5)); //rotated shoes
rect(-15,130,30,10,10);
rotate(radians(-10));
rect(-7,130,30,10,10);
pop();
}
function arm(){
push();
fill(176);
rotate(radians(-35));
rect(180,320,15,50,15); //arm reaching out to door
pop();
fill(255,220,200); //beige
ellipse(366,196,15); //hand
}
function clock(x,y){
push();
translate(x,y);
var shake = random(-3,3); //to shake the clock
fill(0);
ellipse(0+shake,0+shake,50,50); //clock
fill(255);
ellipse(0+shake,0+shake,r,r);
frameRate(20);
var clockX = r/2 * cos(radians(theta));
var clockY = r/2 * sin(radians(theta));
stroke(0);
line(0+shake, 0+shake, clockX, clockY); //clock hand
theta +=10; //turn the hand
pop();
}
function table(x,y){
push();
translate(x,y);
fill(121,61,2); //brown
rect(0,0,60,70); //body
rect(0,70,10,30); //legs
rect(50,70,10,30);
pop();
}
function paint(){ //draw function for paint object
push();
x.push(mouseX); //draw a line to where the mouse is
y.push(mouseY);
for (var i=0; i < x.length-1; i++) {
strokeWeight(map(mouseY,0,height,0,10)); //chamge stroke weight with y position
stroke(color(random(255),random(255),random(255))); //change color randomly
line(x[i],y[i],x[i+1],y[i+1]); //draw line from one position to next (mouse positions)
}
pop();
}
//functions for the final scene
function finalScene(){
sunset(2);
fill(255,252,229); //white-yellow
ellipse(200,200,50,50); //sun
hills();
fill(189); //gray
rect(0,260,width,20); //road
removeFlock();
newFlock();
removeCar();
newCar();
//showing and moving objects
for(var i=0;i<trees2.length;i++){
trees2[i].show();
}
for(var i=0;i<cars.length;i++){
cars[i].show();
cars[i].move();
}
for(var i=0;i<trees.length;i++){
trees[i].show();
}
for(var i=0;i<flocks.length;i++){
flocks[i].show();
flocks[i].move();
}
fill(240,221,159,60); //opaque orange
rect(0,0,width,height); //create haze
rocks();
relief();
Eamonn3(260,200);
textSize(20);
fill(0,0,255);
text("THE END",300,100);
}
function sunset(size) {
var green=215;
var blue=238;
var red=141
for (var y = size/2; y < height + 50; y += size) { //nested loop for grid
for (var x = size/2; x < width + 50; x += size) {
fill(red,green,blue);
rect(x, y, size, size);
}
red += (200/(width/size)); //create gradient
green +=(100/(height/size));
blue -=(50/(height/size));
}
}
function makeTree(startX,startY){ //tree constructor
var tree = {x: startX,
y:startY,
breadth:5,
color: color(random(130,200),random(100,150),0),
show: showTree
}
return tree;
}
function showTree(){
push();
translate(this.x, this.y); //appear at width,280
fill(121,90,5); //gray
rect(0,-20,this.breadth,20); //draw railing markers
fill(this.color);
ellipse(2,-30,20,20); //leaves
pop();
}
function removeCar(){ //remove car from array once out of sight
var carsToKeep = [];
for (var i = 0; i < cars.length; i++){
if (cars[i].x > 0) {
carsToKeep.push(cars[i]);
}
}
cars = carsToKeep;
}
function newCar() { //create a new car at a given probability
var newCarChance = 0.05;
if (random(0,1) < newCarChance) {
cars.push(makeCar(width)); //create new car at the edge
}
}
function moveCar(){
this.x += this.speed; //mpve cars
}
function showCar(){
push();
noStroke();
translate(this.x, 260);
fill(this.color)
rect(0,-7,this.breadth,this.height); //body of car
if(this.speed>0){
rect(25,0,10,10); //car facing right
}else{
rect(-10,0,10,10); //car facing left
}
fill(0); //black
ellipse(5,10,10,10); //wheels
ellipse(25,10,10,10);
pop();
}
function makeCar(startX){
var car = {x: startX,
breadth:25,
height:random(15,20),
speed: random(-5,5),
color: color(random(0,255),random(0,255),random(0,255)),
move: moveCar,
show: showCar
}
return car;
}
function moveFlock(){
this.x += this.speed; //move horizontally
this.y -= this.speed/2;
}
function removeFlock(){
var flocksToKeep = [];
for (var i = 0; i < flocks.length; i++){
if (flocks[i].x > 0) {
flocksToKeep.push(flocks[i]);
}
}
flocks = flocksToKeep;
}
function newFlock() {
var newFlockChance = 0.01;
if (random(0,1) < newFlockChance) {
flocks.push(makeFlock(0,random(0,200)));
}
}
function showFlock(){
push();
stroke(0);
translate(this.x,this.y);
for(var i=0;i<this.numBirds;i++){
line(0+(2*i)+random(-1,1),0+(2*i),5+(2*i),5+(2*i)); //wings of birds
line(5+(2*i),5+(2*i),10+(2*i),0+(2*i)+random(-1,1));
}
pop();
}
function makeFlock(startX,startY){
var flock = {x: startX,
y: startY,
numBirds: random(3,7),
speed:2,
move: moveFlock,
show: showFlock
}
return flock;
}
function hills(){
beginShape();
noStroke();
fill(60,131,67); //green
for (i=0;i<width/5; i++){
curveVertex(i*5,landscape[i]) //creates slopes by connecting two points
curveVertex((i+1)*5,landscape[i+1]);
}
curveVertex(width,height); //stable values that create the green fill
curveVertex(0,height);
endShape(CLOSE); //end shape and fill it
}
function rocks(){
beginShape();
noStroke();
fill(129); //gray
for (i=0;i<width/5; i++){
curveVertex(i*5,rock[i]) //creates slopes by connecting two points
curveVertex((i+1)*5,rock[i+1]);
}
curveVertex(width,height); //stable values that create the gray fill
curveVertex(0,height);
endShape(CLOSE); //end shape and fill it
}
function relief(){
if(frameCount % 10 == 0){ //every 4 frames, make new Bubble
reliefBubbles.push(makeBubble(260,200));
}
for(var i=0;i<reliefBubbles.length;i++){ //move and show Bubbles
reliefBubbles[i].show();
reliefBubbles[i].move();
}
}
function makeBubble(startX,startY){ //bubble constructor
var bubble = {x: startX,
y:startY,
opacity:255,
size:10,
show: showBubble,
move: moveBubble
}
return bubble;
}
function showBubble(){
push();
fill(220,this.opacity); //light gray
ellipse(this.x,this.y,this.size,this.size); //germ body
pop();
}
function moveBubble(){
this.size+=1; //grow bubbles
this.opacity-=3; //fade
}
function Eamonn3(x,y){
push();
translate(x,y);
fill(255,220,200); //beige
ellipse(0,0,40,40); //head
rect(-8,12,15,15); //neck
fill(242,201,69); //golden brown
ellipse(0,-2,38,35); //hair
push();
fill(0);
rotate(radians(50)); //legs in criss cross
rect(63,0,25,70,15);
rotate(radians(-100));
rect(-87,0,25,70,15)
pop();
fill(176,58,58);
rect(-23,25,45,70,15);
pop();
}
function mousePressed(){
if(frameCount<100){ //play drawer sound if mouse is pressed on drawer
if(mouseX>110 & mouseX<180 && mouseY>220 && mouseY<250){
drawer.play();
}
}
germShot = -1;
for (var i = 0; i < virus.length; i++) {
var d = dist(mouseX, mouseY,
virus[i].x, virus[i].y)
if (d < virus[i].breadth) { //if clicked within a given germ
germShot = i; //pass this index to the splice function
}
}
}
//turtle code, courtesy of Tom Cortina
function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penDown: true,
color: color(128),
weight: 1,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
lowerPen: turtleLowerPen, raisePen: turtleRaisePen,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}
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 turtleLowerPen() {
this.penDown = true;
}
function turtleRaisePen() {
this.penDown = false;
}
function turtleGoTo(newx, newy) {
if (this.penDown) {
stroke(this.color);
strokeWeight(this.weight);
line(this.x, this.y, newx, newy);
}
this.x = newx;
this.y = newy;
}
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;
this.angle %= 360;
}