![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
//Chuong Truong;
//cbtruong;
//cbtruong@andrew.cmu.edu;
//Section B;
//The Overall Story of this program is that of fall;
//Leaves are falling off of trees, the sun is getting whiter;
//The air is getting frostier;
//And the birds are seen more actively flying;
//I included no custom sound and instead wanted to portray a scene;
//That was described with a song;
//initial empty array that will hold leaf objects;
var leaves = [];
//variables for the sun's green and blue values which change;
var sunG = 238;
var sunB = 82;
//initial empty array for birds;
var birds = [];
//function of the leaf object that allows it to fall;
function leafFall (){
//stops each leaf from falling off the canvas;
//if it has not reached that point, it will continue to fall until it does;
if (this.f == true){
if (this.y > height-17){
this.y = height-5;
}
else {
this.y += random(30, 60);
}
}
//if met, this condition causes the leaf to fall;
//this randomization occurs to allow for the tree and leaves to be more lifelike;
//as not all leaves fall off immediately;
else if (floor(random(200)) == 25){
this.y += random(30);
this.x += random(-15, 15);
this.f = true;
}
return this.y;
}
//function that draws the leaves;
function drawLeaf(){
//this switch and case allows for color variance for the leaves;
//the colors are those of fall;
switch(this.col){
case 0: fill(237, 164, 23); break;
case 1: fill(167, 159, 15); break;
case 2: fill(233, 134, 4); break;
case 3: fill(223, 57, 8); break;
case 4: fill(201, 30, 10); break;
}
rectMode(CENTER);
push();
translate(this.x, this.y);
rotate(radians(45));
rect(0, 0, 15, 15);
pop();
}
//function that makes leaves;
function leaf(lx, ly, cPreset){
//the leaf object constructor;
l = {x: lx, y: ly, orgY: ly, col: cPreset, f: false,
drawFunction: drawLeaf, fallFunction: leafFall};
return l;
}
function makeLeavesOnTrees (x, y){
//for loops create the leaves on the trees themselves;
//the leaves' x and y are dependent on the tree's x and y;
//the first row is 17 and then decreases by 1 as the row gets closer to the tree's x;
//as the row gets closer, the leaves' initial x and y increase;
//this variable allows the leaves to center as each row of them becomes less;
//it is initalized again to allow for the top row to be centered correctly;
//like it was before the nested for loops below change it;
var centeringX = 80;
//the starting number of leaves for each row
var leavesRowNum = 17;
//these nested for loops creates the leaves and gives them their inital x and y;
//the inner loop creates the leaves for each row, giving them the x, y, and colorPreset;
//the outer loop controls the leaves' y, as it decreases, a new row will not only be drawn;
//but that row's total number of leaves decreases, and the centering of them is centered;
//the loops repeat until only 5 leaves are left and they are closest to the tree's x and y;
for (var j = 120; j > -10; j-= 10){
for (var i = 0; i < leavesRowNum; i++){
var l = leaf(x-centeringX + i*10, y-j, floor(random(5)));
leaves.push(l);
}
//the leaves row number decreases to make each row have less leaves;
leavesRowNum--;
//the centering is decreased to make sure the row, as it becomes less in number;
//is centered correctly to the tree's x;
centeringX -= 5;
}
}
//this function creates bird objects;
function bird (bx, by){
//bird object constructor;
b = {x: bx, y: by, orgY: by, flyFunction: birdFly, drawFunction: drawBird};
return b;
}
//function that allows the bird to fly;
function birdFly (){
this.x -= 10;
if (this.x < 0){
this.x = width - 20;
}
if (this.y > this.orgY + 20 ){
this.y -= 5;
}
else {
this.y += 5;
}
}
//this draws the bird;
function drawBird(){
fill(36, 143, 190);
circle(this.x, this.y, 20);
fill(30);
circle(this.x, this.y, 5);
fill(131, 67, 51);
triangle(this.x-15, this.y, this.x - 10, this.y - 2, this.x - 10, this.y+2);
stroke(0);
line(this.x - 15, this.y, this.x - 10, this.y);
fill(16, 123, 170);
push();
rectMode(CORNER);
translate(this.x, this.y);
rotate(270);
rect(0+5, 0 - 12, 15, 10);
rect(0+5, 0 + 4, 15, 10);
pop();
}
function setup() {
createCanvas(700, 500);
frameRate(10);
useSound();
frameRate(3);
//calls the makeLeavesOnTree function to create the leaves pattern;
//on each tree dependent on the trees' location;
makeLeavesOnTrees(125, 390);
makeLeavesOnTrees(350, 390);
makeLeavesOnTrees(575, 390);
//calls the bird function and creates the bird objects;
for (var i = 0; i < 7; i++){
var bD = bird(random(100, 600), random(70, 120));
birds.push(bD);
}
}
//I kept the same sound setup from the assignment because I liked the sounds;
function soundSetup() {
osc = new p5.Oscillator();
osc.amp(0.25);
osc.setType('sine');
osc.start();
}
function draw() {
//this creates the background of a blue sky and green grass;
background(154, 211, 222);
noStroke();
rectMode(CORNER);
fill(24, 136, 39);
rect(0, 475, 700, 5);
fill(14, 146, 49);
rect(0, 480, 700, 20);
//calls the drawTree function to draw trees;
drawTree(125, 390);
drawTree(350, 390);
drawTree(575, 390);
//this for loop updates and draws each leaf in the leaves array;
for (var i = 0; i < leaves.length; i++){
var l = leaves[i];
l.fallFunction();
l.drawFunction();
}
//calls the clouds function to make clouds;
drawClouds(125, 80);
drawClouds(325, 130);
drawClouds(525, 105);
//draws the sun;
//this if statement allows for the sun to slowly change colors;
if (!(sunG == 250 & sunB == 193)){
sunG += 1.2/5;
sunB += 11.1/5;
}
noStroke();
fill(255, sunG, sunB);
circle(600, 75, 100);
print(leaves.length);
//draws the birds;
for (var o = 0; o < birds.length; o++){
var b = birds[o];
b.flyFunction();
b.drawFunction();
}
//I turned the code from the assignment into a function;
musicPlayer(pitches, durations);
}
//function that draws the trees without the leaves;
function drawTree (x, y){
fill(191, 75, 25);
rectMode(CENTER);
rect(x, y, 20, 205);
push();
translate(x - 40, y - 40);
rotate(radians(-30));
rect(0, 0, 10, 150);
pop();
push();
translate(x + 40, y - 40);
rotate(radians(30));
rect(0, 0, 10, 150);
pop();
push();
translate(x - 30, y - 70);
rotate(radians(-30));
rect(0, 0, 8, 100);
pop();
push();
translate(x + 30, y - 70);
rotate(radians(30));
rect(0, 0, 8, 100);
pop();
push();
translate(x - 20, y - 90);
rotate(radians(-30));
rect(0, 0, 5, 80);
pop();
push();
translate(x + 20, y - 90);
rotate(radians(30));
rect(0, 0, 5, 80);
pop();
push();
translate(x - 5, y - 100);
rotate(radians(-30));
rect(0, 0, 3, 60);
pop();
push();
translate(x + 5, y - 100);
rotate(radians(30));
rect(0, 0, 3, 60);
pop();
rect(x, y - 105, 2, 40);
}
//this function creates the clouds and draws them;
function drawClouds (x, y){
fill(243, 242, 231);
ellipse(x, y, 80, 50);
ellipse(x + 20, y + 10, 80, 40);
ellipse(x - 40, y + 10, 80, 30);
ellipse(x - 10, y + 20, 70, 50);
}
//I used the same code from the assignments to make the music;
//arrays for the pitches and durations;
//also count variables for the index and frameCount;
//finally, the boolean rest is added to account for rests in the music;
//I changed the pitches and went with a simple 1 beat per note;
var pitches = [ 64, 64, 62, 64, 64, 62, 0, 62, 64, 66, 65, 67, 65, 0,
60, 60, 62, 66, 65, 64, 62, 68, 68, 65, 64, 62, 62 ];
var durations = [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var indexTracker = 0;
var frameCount = 0;
var rest = false;
//I turned the code that creates the music with different notes and beat durations into a function;
//the function takes a note array and a corresponding note duration array;
function musicPlayer (noteArray, noteDurationArray){
//code for the piano to play;
//this sets the frequencies of the oscillator to the MIDI pitches;
osc.freq(midiToFreq(noteArray[indexTracker]));
//checks for when the note's duration is over and acts accordingly;
if (frameCount > noteDurationArray[indexTracker]){
//this checks for whether the tune has been completely played;
//if it has been, then the program and oscillator ends;
if (indexTracker + 1 == noteArray.length) {
//print(frameCount);
//print(indexTracker);
osc.stop();
noLoop();
}
//if it has not been completely played, then the next note will play;
//with the frameCount reset to 0;
else {
print(frameCount);
indexTracker++;
//after the indexTracker is increased;
//it checks to see if the new note is a rest;
//if it is, then it deals according;
//it also turns on the oscillator after a rest;
if (noteArray[indexTracker] != 0){
if (rest == true) {
osc.start();
rest = false;
}
}
else if (noteArray[indexTracker] == 0){
rest = true;
osc.stop();
}
}
frameCount = 0;
}
else {
frameCount++;
}
print(noteArray[indexTracker]);
}
Instead of making 4 sounds, I used the same code from the assignments to make a song that I felt fit what I wanted to show, a scene of Fall. That scene has birds flying, leaves falling, and a sun that becomes whiter and whiter to fit the upcoming Winter.