Project 10: Visual Story Home Before The Storm – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

For my sonic visual story, my goal was to create a scene with simple shapes I was familiar with and I could control with my code easily and create a story with image and sound.

Visuals

I did some research online, about how artists created different scenes in P5.js (not with sounds, but only with visuals), so I could start thinking about the sequence of my story. I create simple sketches and planned which parts were non-moving and which were movable.

That helps me to categorise my code into smaller functions like function sun(); etc, and make the code as simple to comprehend as possible.

Story:

The general story was of a man trying to reach home before it is about to start raining. As cloud cover increases, he rushes home and rings the doorbell.

Sounds

I looked for short sound clips, not more than 03 seconds and successfully created a local server and preloaded them into the code.

Towards the final image

Initially, I was loading all the motion and sound simultaneously, meaning everything started at the same frameCount. But eventually I used my sketches to plan my story and have objects appear one after another. I also used the walking man from last week’s assignment, to learn how I was able to manage the variables of several objects and shapes, without having runtime errors. This was helpful to revisit, tweak the code from the old assignment and recontextualise it!

Process Video

In the initial version, my project was very noise and glitchy, but after several iterations, I was able to improve it significantly.

Mid-Process Trial Video:

Final Video after making edits:

var x;
var y;
var m = 0;
var frameCount = 0;
var sunY = 300;
var cloudX = 20;
var dir = 1;
var boing;
//walkimage code file
var character = []; //object
var walkImage = []; // an array to store the three images
function preload(){
sunrise = loadSound("http://localhost:8000/sunrise.wav"); boing = loadSound("http://localhost:8000/boing.wav"); pops = loadSound("http://localhost:8000/pop.wav"); doorbell = loadSound("http://localhost:8000/doorbell.wav"); whoosh = loadSound("http://localhost:8000/whoosh.wav"); //img = loadImage("http://i.imgur.com/svA3cqA.png"); // These URLs are for the individual walk cycle images, // stored in the imgur album http://imgur.com/a/85DTu var filenames = ["http://i.imgur.com/svA3cqA.png", "http://i.imgur.com/jV3FsVQ.png", "http://i.imgur.com/IgQDmRK.png", "http://i.imgur.com/kmVGuo9.png", "http://i.imgur.com/jcMNeGq.png", "http://i.imgur.com/ttJGwkt.png", "http://i.imgur.com/9tL5TRr.png", "http://i.imgur.com/IYn7mIB.png"]; for (var i = 0; i &lt; filenames.length; i++) { walkImage[i] = loadImage(filenames[i]); }
}
function makeCharacter(cx, cy, cdx, cdy) { //constructor function
char = {x: cx,
y: cy, //object properties
dx: cdx,
dy: cdy,
facingRight: true, //?
pos: 0,
stepFunction: stepCharacter,
drawFunction: drawCharacter,
}
return char;
}
function setup() {
createCanvas(600, 400);
background(53, 81, 98);
imageMode(CENTER);
//var tempy = 100;
var char = makeCharacter(100, 300, 5, 1);
character.push(char); //or is it walkImage[i]
useSound();
frameRate(8);
}
function soundSetup() {
boing.setVolume(0.01);
doorbell.setVolume(0.01);
pops.setVolume(0.01);
whoosh.setVolume(0.01);
//osc = new p5.Oscillator();
//osc.amp(0.25);
//osc.freq(midiToFreq(note));
//osc.start();
}
function draw() {
print(frameCount)
background(53, 81, 98);
if (frameCount >=30) { sun(); boing.play(); } noStroke(); scene(); fill(244,164,96); triangle(0, 400, 250, 200, 500, 400); door(); if (frameCount >= 80 &amp;&amp; frameCount &lt;= 100){ doorbell.play(); door(); } fill(240); rect(0, 350, 600, 400); if (frameCount >= 20){ noStroke(); cloud(); if (m == 500) { m --; } m += 1 ; whoosh.play(); } for (i = 0; i &lt; character.length; i++) { var char = character[i]; char.stepFunction(); char.drawFunction(); pops.play(); } if (this.x == 500) { this.x = 100; }
}
function scene() {
fill(244,164,96);
triangle(0, 400, 250, 200, 500, 400);
door();
}
function sun() {
var c;
noStroke();
//SUN c = color(255, 212, 0); fill(c); ellipseMode(CENTER); ellipse(100, sunY, 100); if (sunY > 100) { sunY--; }
}
function door() {
fill(255,0,0);
rect(500, 225, 80, 125)
}
function cloud(cloudX, y) {
fill(250);
ellipse(m+50,60,80,80);
ellipse(m+70,50,60);
//ellipse(120,50,30,30);
ellipse(m+120,65,70,70);
ellipse(m+30,50,80,80);
//rect(80,50,110,50, 20);
}
function stepCharacter() {
this.pos++;
this.x += this.dx;
if (this.pos == walkImage.length) { this.pos = 0 ; } if (this.x == 500){ this.pos -- ; }
}
function drawCharacter() {
//image(walkImage[this.pos], this.x, this.y);
if (this.x == 500) { //
this.x --;
image(walkImage[this.pos], 500, this.y);
} else { image(walkImage[this.pos], this.x, this.y); }
}

var x;

var y;

var m = 0;

var frameCount = 0;

var sunY = 300;

var cloudX = 20;

var dir = 1;

var boing;

//walkimage code file

var character = []; //object

var walkImage = []; // an array to store the three images

function preload(){

sunrise = loadSound("http://localhost:8000/sunrise.wav"); boing = loadSound("http://localhost:8000/boing.wav"); pops = loadSound("http://localhost:8000/pop.wav"); doorbell = loadSound("http://localhost:8000/doorbell.wav"); whoosh = loadSound("http://localhost:8000/whoosh.wav"); //img = loadImage("http://i.imgur.com/svA3cqA.png"); // These URLs are for the individual walk cycle images, // stored in the imgur album http://imgur.com/a/85DTu var filenames = ["http://i.imgur.com/svA3cqA.png", "http://i.imgur.com/jV3FsVQ.png", "http://i.imgur.com/IgQDmRK.png", "http://i.imgur.com/kmVGuo9.png", "http://i.imgur.com/jcMNeGq.png", "http://i.imgur.com/ttJGwkt.png", "http://i.imgur.com/9tL5TRr.png", "http://i.imgur.com/IYn7mIB.png"]; for (var i = 0; i < filenames.length; i++) { walkImage[i] = loadImage(filenames[i]); }

}

function makeCharacter(cx, cy, cdx, cdy) { //constructor function

char = {x: cx,

y: cy, //object properties

dx: cdx,

dy: cdy,

facingRight: true, //?

pos: 0,

stepFunction: stepCharacter,

drawFunction: drawCharacter,

}

return char;

}

function setup() {

createCanvas(600, 400);

background(53, 81, 98);

imageMode(CENTER);

//var tempy = 100;

var char = makeCharacter(100, 300, 5, 1);

character.push(char); //or is it walkImage[i]

useSound();

frameRate(8);

}

function soundSetup() {

boing.setVolume(0.01);

doorbell.setVolume(0.01);

pops.setVolume(0.01);

whoosh.setVolume(0.01);

//osc = new p5.Oscillator();

//osc.amp(0.25);

//osc.freq(midiToFreq(note));

//osc.start();

}

function draw() {

print(frameCount)

background(53, 81, 98);

if (frameCount >=30) { sun(); boing.play(); } noStroke(); scene(); fill(244,164,96); triangle(0, 400, 250, 200, 500, 400); door(); if (frameCount >= 80 && frameCount <= 100){ doorbell.play(); door(); } fill(240); rect(0, 350, 600, 400); if (frameCount >= 20){ noStroke(); cloud(); if (m == 500) { m --; } m += 1 ; whoosh.play(); } for (i = 0; i < character.length; i++) { var char = character[i]; char.stepFunction(); char.drawFunction(); pops.play(); } if (this.x == 500) { this.x = 100; }

}

function scene() {

fill(244,164,96);

triangle(0, 400, 250, 200, 500, 400);

door();

}

function sun() {

var c;

noStroke();

//SUN c = color(255, 212, 0); fill(c); ellipseMode(CENTER); ellipse(100, sunY, 100); if (sunY > 100) { sunY--; }

}

function door() {

fill(255,0,0);

rect(500, 225, 80, 125)

}

function cloud(cloudX, y) {

fill(250);

ellipse(m+50,60,80,80);

ellipse(m+70,50,60);

//ellipse(120,50,30,30);

ellipse(m+120,65,70,70);

ellipse(m+30,50,80,80);

//rect(80,50,110,50, 20);

}

function stepCharacter() {

this.pos++;

this.x += this.dx;

if (this.pos == walkImage.length) { this.pos = 0 ; } if (this.x == 500){ this.pos -- ; }

}

function drawCharacter() {

//image(walkImage[this.pos], this.x, this.y);

if (this.x == 500) { //

this.x --;

image(walkImage[this.pos], 500, this.y);

} else { image(walkImage[this.pos], this.x, this.y); }

}

Note: I have not embedded the code, because the sounds are on local servers and I wasn’t able to load them into the p5.js web editor.

Visuals

Story:

The general story was of a man trying to reach home before it is about to start raining. As cloud cover increases, he rushes home and rings the doorbell.

Sounds

Towards the final image

Leave a Reply Cancel reply