## William Su – Project 11 – Landscape

``````// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 11

var terrainSpeed1 = 0.0002;
var terrainDetail1 = 0.0007;

var terrainSpeed2 = 0.0002;
var terrainDetail2 = 0.001;

var terrainSpeed3 = 0.0003;
var terrainDetail3 = 0.005;

var c1, c2;

function draw() {
ellipse(mouseX, mouseY, 30, 30);
}

function setup() {
createCanvas(480, 480);
c1 = color(255, 204, 0); //Gradient Sky
c2 = color(255);
frameRate(30);
}

function draw() {
fill(255, 251, 130);
ellipse(width/2, height/2 - 40, 40, 40); //Sun
water3(); //Distant water
DrawBoat(); //Fixed Boat
water2(); //Middle Water
water1(); //Near Water
}

function setGradient(c1, c2) {
// noprotect
noFill();
for (var y = 0; y < height; y++) {
var inter = map(y, 0, height, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, y, width, y);
}
}

function water1() {
noStroke();
fill(90, 200, 250);
beginShape();
for(var x = 0; x < width; x++){
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0, 2, 400, 300);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}

function water2() {
noStroke();
fill(72, 150, 200);
beginShape();
for(var x = 0; x < width; x++){
var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
var y = map(noise(t), 0, 1, 330, 300);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}

function water3() {
noStroke();
fill(60, 200, 250);
beginShape();
for(var x = 0; x < width; x++){
var t = (x * terrainDetail3) + (millis() * terrainSpeed3);
var y = map(noise(t), 0, 2, 250, 200);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}

function DrawBoat() { //Boat
push();
fill(150,75,0);
rect(width/2,height/2,5,60);
pop();

noStroke();
push();
fill(250);
triangle(width/2 - 30, height/2 + 50, width/2 + 2, 220, width/2 + 30, height/2 + 50);
pop();

push();
fill(140);
arc(width/2, height/2 + 60, 100, 80, 0, PI, CHORD);
pop();
}

``````

I decided to make a generative landscape of the ocean. I made 3 wave “layers” and had a fixed object in the horizon.

## Sarah Kang-Looking Outwards-11

Filipa Valente is both a practicing architect and experiential designer with experience in major firms and studios. After completing her architectural studies at the Bartlett School of Architecture in London, she went on to obtain her Masters in Media Art and Architecture at SciArc in Los Angeles.

Valente’s project “Liminoid Garden”, in collaboration with the Heidi Duckler Dance Theatre, was an interactive machine assemblage between the city, its users, and the environment. I was particularly drawn to this project because of how the installation was able to respond to real-time environmental data from the city, engaging the audience by promoting awareness. Another cool factor is the interaction between the dancers and the installation and the resulting data visualizations.

## Sarah Kang-Project 11 – Landscape

``````//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-11-landscape

var m1Speed = .001
var m1Detail = .005
var m2Speed = .002
var m2Detail = .01
var m3Detail = .005

var firework = [];
var firework2 = [];

function setup() {
createCanvas(480, 480);
//initial set of pink fireworks
for (i = 0; i < 12; i++) {
var fireworkX = random(width);
var fireworkY = random(0, 240);
firework[i] = makeFirework(fireworkX, fireworkY);
}

//initial set of orange fireworks
for (i = 0; i < 8; i++) {
var firework2X = random(width);
var firework2Y = random(0, 240);
firework2[i] = makeFirework2(firework2X, firework2Y);
}

frameRate(20);
}

function draw() {
background(0);

fireworks();
fireworks2();

m1();
m2();

noStroke();
fill(94, 94, 115);
rect(0, 400, 480, 80);

m3();

}

function m1() {
//back mountain range
stroke(20, 21, 54);
beginShape();
for(var x = 0; x < width; x++) {
var t = (x * m1Detail) + (millis() * m1Speed);
var y = map(noise(t), 0, 1, 200, 340);
line(x, y, x, 400);
}
endShape();
}

function m2() {
//front mountain range
stroke(28, 29, 82);
beginShape();
for(var x = 0; x < width; x++) {
var t = (x * m2Detail) + (millis() * m2Speed);
var y = map(noise(t), 0, 1, 240, 380);
line(x, y, x, 400);
}
endShape();
}

function m3() {
stroke(34, 34, 43);
beginShape();
for(var x = 0; x < width; x++) {
var t = (x * m3Detail) + (millis() * m2Speed);
var y = map(noise(t), 0, 1, 400, 480);
line(x, y, x, 400);
}
endShape();
}

function drawFirework() {
noStroke();
fill(255, 230, 238);
push();
translate(this.x2, this.y2);

for (let i = 0; i < 12; i ++) {
ellipse(0, 20, 3, 25);
rotate(PI / 5);
}

pop();
}

function makeFirework(xlocation, ylocation) {
var makeFire = {x2: xlocation,
y2: ylocation,
fireworkX: random(0, width),
fireworkY: random(0, 240),
speed: -2.0,
move: moveFirework,
draw: drawFirework}
return makeFire;
}

function moveFirework() {
this.x2 += this.speed;
if (this.x2 <= -20) {
this.x2 += 500;
}
}

function fireworks() {
//pink fireworks
for(i = 0; i < firework.length; i++) {
firework[i].move();
firework[i].draw();
}
}

function drawFirework2() {
noStroke();
fill(255, 176, 97);
push();
translate(this.x2, this.y2);

for (let i = 0; i < 12; i ++) {
ellipse(0, 30, 3, 40);
rotate(PI / 5);
}

pop();
}

function makeFirework2(xlocation, ylocation) {
var makeFire2 = {x2: xlocation,
y2: ylocation,
firework2X: random(0, width),
firework2Y: random(0, 240),
speed: -2.0,
move: moveFirework2,
draw: drawFirework2}
return makeFire2;
}

function moveFirework2() {
this.x2 += this.speed;
if (this.x2 <= -20) {
this.x2 += 500;
}
}

function fireworks2() {
//orange fireworks
for(i = 0; i < firework2.length; i++) {
firework2[i].move();
firework2[i].draw();
}
}``````

For this project, I wanted to make a nighttime landscape and incorporate a colorful fireworks show.

## Sammie Kim – Project 11 – Landscape

``````//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 11

var xPos = 100;
var yPos = 50;
var size = 70;
var backgroundPic;
var clouds = [];

var backgroundURL = "https://i.imgur.com/EMQBV3U.jpg"
}

function setup() {
createCanvas(480, 480);
frameRate(10);
//initial clouds first appears anywhere across the canvas
for (var i = 0; i < 1; i++) {
var startX = random(0, width/3);
clouds[i] = createClouds(startX);
}
}

function draw() {
background(0);
image(backgroundPic, 0, 0);
noStroke();
//call the functions below
sun();
mountain();
darkOcean();
ocean();
//show clouds
updateClouds();
removeClouds();
}

function sun() {
fill('#f29849');
circle(xPos, yPos, size);
xPos = xPos + 0.5;
if (xPos > width + size/2){
xPos = 0;
}
}

function updateClouds() {
//constantly calling the clouds
for (var x = 0; x < clouds.length; x++){
clouds[x].move();
clouds[x].draw();
}
}

function removeClouds() {
//create an array for keeping clouds on screen
//if x location is greater than 0, then push x values into the cloud array
var cloudsOnScreen = [];
for (var i = 0; i < clouds.length; i++) {
if (clouds[i].x > 0) {
cloudsOnScreen.push(clouds[i]);
}
}
clouds = cloudsOnScreen;
}

var probability = 0.004;
//a new cloud is drawn at the width when it is greater than a certain probability
if (random(0, 1) < probability) {
clouds.push(createClouds(width));
}
}

function moveClouds() {
//making clouds move to the left
this.x -= this.speed;
}

function makeClouds() {
//drawing the cloud with ellipses overlapping one another
noStroke();
fill('#7297a6');
ellipse(this.x - 10, this.y, this.width, this.height);
ellipse(this.x + 30, this.y, this.width, this.height);
ellipse(this.x, this.y + 5, this.width, this.height);
ellipse(this.x - 30, this.y + 5, this.width, this.height);
}

function createClouds(cloudX) {
//creating object for cloud's characteristics
var cloud = {x: cloudX,
y: random(25, 75),
width: 50,
height: 50,
speed: 0.7,
move: moveClouds,
draw: makeClouds}
return cloud;
}

function ocean() {
var oceanSpeed = 0.0003; //speed of terrain
var oceanDetail = 0.001; //smoothness
fill('#50abbf');
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * oceanDetail) + (millis() * oceanSpeed);
var y = map(noise(t), 0, 1, height/2, height);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}

function mountain() {
var oceanSpeed = 0.0004; //speed of terrain
var oceanDetail = 0.007; //smoothness
fill('#6C671F');
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * oceanDetail) + (millis() * oceanSpeed);
var y = map(noise(t), 0, 1, 0, height);
vertex(x, y);
}
vertex(width, height);
vertex(0,  height);
endShape();
}

function darkOcean() {
var oceanSpeed = 0.0004; //speed of terrain
var oceanDetail = 0.001; //smoothness
fill('#254f6a');
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * oceanDetail) + (millis() * oceanSpeed);
var y = map(noise(t), 0, 1, height/3, height);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}
``````

This project was challenging as I had to keep in mind about the different objects that are shown on canvas and making them move. Imagining a space with ocean and mountain, I wanted to bring out a happy, peaceful mood through the overall warm colors. Overlapping the ocean terrains, I attempted to make an image of waves flowing past. The biggest challenge for me was creating the clouds to appear in the sky using objects. It was difficult having to think about multiple factors and constraints all at once, so I did it in a step by step manner—creating the cloud shape first with function, then calling it inside the object, and finally using other functions to add more properties.

## Monica Chang – Project 11 – Generative Landscape

``````//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project 11 - Generative Landscapes

//LANDSCAPE DESCRIPTION:
// SURPRISE! THERE IS HIDDEN LAVA BEHIND THE FIRST TERRAIN!

var tethered = [];
var terrainSpeed = 0.0008;// speed of orange terrain and middle terrain
var terrainSpeedThree = 0.0007; // speed of very back mountain
var terrainDetail = 0.008;
var terrainDetailTwo = 0.001;
var terrainDetailThree = 0.02; //smoothness of the terrains

function setup() {
createCanvas(480, 480);
frameRate(20);
//initial lava
for (i = 0; i < 30; i++) {
var tx = random(width);
var ty = random(300, height);
tethered[i] = makeTethered(tx, ty);
}
}

function draw() {
//lavendar background
background(236, 225, 250);

//arranging the landscape elements(three terrains, lava spots)
renderTerrainTwo(); // middle, low-opacity mountain
renderTerrainThree(); // third mountain in the very back

updateAndDisplayTethered(); //hidden lava behind the front terrain

renderTerrainOne(); // first terrain int he very front

}

function displayTethered() {
//drawing the "tethered" lava
noStroke(); //no outline
fill(255, 11, 5); //red tethered coat color
push();
translate(this.x0, this.y0); //locate lava body at x0, y0
ellipse(5, 5, 10, 5); //tethered lava body
pop();
}

function makeTethered(birthLocationX, birthLocationY) {
var theTethered = {x0: birthLocationX,
y0: birthLocationY,
tx: random(0, width),
ty: random(300, height),
speed: -3.0,
move: moveTethered,
display: displayTethered}
return theTethered;
}

function moveTethered() {
this.x0 += this.speed; //speed of lava moving
if (this.x0 <= -10) { //new lava appears at the right as they disappear to the left
this.x0 += width + 10;
}
}

function updateAndDisplayTethered() {
for(i = 0; i < tethered.length; i++) {
tethered[i].move();
tethered[i].display();
}
}

function renderTerrainThree(){
// drawing the terrain in the back
noStroke();
fill(51, 16, 84);
beginShape();
for (i = 0; i < width; i++) {
var t = (i * terrainDetailThree) + (millis() * terrainSpeedThree);
//terrains y coordinate
var y = map(noise(t), 0, 1.5, height / 8, height);
//keep drawing terrain
vertex(i, y);
}
//terrain constraints
vertex(width, height);
vertex(0, height);
endShape();
}

function renderTerrainTwo() {
// drawing terrain number two(in the middle)
noStroke();
fill(71, 11, 6, 200); //low-opacity color of maroon
beginShape();
for(var a = 0; a < width; a++){
var b = (a * terrainDetail) + (millis() * terrainSpeed);
var c = map(noise(b), 0, 1, 0, height / 4);
vertex(a, c);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);

}

function renderTerrainOne() {
//drawing the terrain in the very front
noStroke();
fill(235, 64, 52);
beginShape();
for(var x = 0; x < width; x++){
var t = (x * terrainDetailTwo) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, 0.55, height + 100);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);

}

``````

I was originally inspired by the horror film, ‘Us’, which was released this year and wanted to illustrate the “Tethered”. However, they ended up looking more like lava due to the color so I ended up creating a landscape with holes of lava. This project was really fun and helpful in making me understand objects better.

## Mihika Bansal – Project 11 – Landscape

``````//Mihika Bansal
//mbansal@andrew.cmu.edu
//Section E
//Project 9

var bubbles;
var move = 5;
var cx = 100; //starting location of clouds
var cy = 100;
var clouds = [];
var ripples = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

function setup() {

createCanvas(480, 480);
frameRate(4); //slowed down for ripples

//initial display of clouds
for(var i = 0; i < 3; i++){
var cX = random(width);
var cY = random(75, 150);
clouds[i] = makeClouds(cX, cY);

}

}

function draw() {
background("#F05353");

//draw sun
noStroke();
fill("#F7915B");
ellipse(width / 2, height / 3, 125, 125);

var mountain1 = mountains("#E2BE9A", height * 0.20, height * 0.65, 4); //backmost mountain
var mountain2 = mountains("#EFAD6C", height * 0.37, height * 0.65, 2); // middle ground mountains
var mountain3 = mountains("#EF8F30", height * 0.50, height * 0.65, 3); //foreground mountains

//draw ocean
noStroke();
fill("#006160");
rect(0, height * 0.65, width, height * 0.35);

//draw sun reflection
noStroke();
fill(250, 103, 71, 100);
arc(width / 2, height * 0.65, 125, 125, 0, PI, OPEN);

//draw ripples that are changing like waves
noStroke();
fill(171,209,197, 100);
for(var i = 0; i < 6; i ++){
var xR = random(-205, 205);
var yR = random(10, 125);
var w = random(50, 100);
var h = random(5, 10);

ellipse(width / 2 + xR, height * 0.65 + yR, w, h);
}

update();
removeClouds();

}

function update(){ //update all the clouds
for(var i = 0; i < clouds.length; i++){
clouds[i].move();
clouds[i].display();
}
}

function removeClouds(){ //checks to see where clouds are and changes positions accordingly
var cloudKeep = [];
for(var i = 0; i < clouds.length; i++){
if(clouds[i].x + 25 > 0){ // cloud is 50 wide, so 25 is point from center
cloudKeep.push(clouds[i]);
}
}
clouds = cloudKeep; //keep only clouds still on screen
}

function addCloud(){ //randomly adds clouds at intervals
var newCloud = 0.03;
if(random(0,1) < newCloud){
var cloudY = random(75, 150);
clouds.push(makeClouds(480, cloudY));
}
}

function cloudMove(){ // move the clouds
this.x += this.speed;
}

function cloudDisplay(){ //draw the clouds
fill("#FFD79E");
noStroke();
ellipse(this.x, this.y, 90, 15);
ellipse(this.x - 25, this.y - 10, 35, 30);
ellipse(this.x, this.y - 20, 40, 40);
ellipse(this.x + 20, this.y - 15, 35, 30);

}

function makeClouds(cloudLocX, cloudLocY){ //cloud object definition
var cloud = { x: cloudLocX,
y: cloudLocY,
speed: -5,
move: cloudMove,
display: cloudDisplay}

return cloud;
}
function mountains(color, min, max, noiseS) {

noStroke();
fill(color);
noiseSeed(noiseS);

beginShape();
for(var x = 0; x < width; x++){
var t = (x * terrainDetail + (millis() * terrainSpeed));
var y = map(noise(t), 0, 1, min, max);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();

}

``````

This project was very fun to do. I was inspired by the mountain terrain that was shown in the deliverable section. I immediately thought to the serene sunset nights that a person could see when they are on a cruise ship. So I worked with this color palette and recreated an ocean scene with ripples in the ocean, a setting sun, and mountain ranges.

## Claire Lee – Project 10 – Sonic Sketch

``````/*
Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-10
*/

// I'm using one of my grace days for this project!

var bearUrls = [
"https://i.imgur.com/BOQ7Bt9.jpg",
"https://i.imgur.com/uhBjJf4.jpg",
"https://i.imgur.com/UK6rJXn.jpg",
"https://i.imgur.com/UsOhg2L.jpg" ]

var bearBrown;
var bearPolar;
var bearBlack;
var bearPanda;

var bearBrownSound;
var bearPolarSound;
var bearBlackSound;
var bearPandaSound;
//setting the global variables

}

function setup() {
createCanvas(480, 120);
useSound();
}

function soundSetup() { // setup for audio generation
bearBrownSound.setVolume(1);
bearPolarSound.setVolume(1);
bearBlackSound.setVolume(1);
bearPandaSound.setVolume(1);
}

function draw() {
image(bearBrown, 0, 0, width/4, height);
image(bearPolar, width/4, 0, width/4, height);
image(bearBlack, width/2, 0, width/4, height);
image(bearPanda, 3*width/4, 0, width/4, height);
//divides canvas into quarters and sets different image for each
}

function mousePressed() {
if (mouseX > 0 & mouseX < (width/4)) {
bearBrownSound.play();
} else {
bearBrownSound.pause();
}
// brown bear sound

if (mouseX > (width/4) & mouseX < (width/2)) {
bearPolarSound.play();
} else {
bearPolarSound.pause();
}
// polar bear sound

if (mouseX > (width/2) & mouseX < (3*width/4)) {
bearBlackSound.play();
} else {
bearBlackSound.pause();
}
// black bear sound

if (mouseX > (3*width/4) & mouseX < width) {
bearPandaSound.play();
} else {
bearPandaSound.pause();
}
//panda bear sound
}

``````

I decided to do bears (with the addition of some unexpected sounds) because I wanted to make a group of cute characters with some unity. I had a lot of fun making the visuals for this project, and it was really interesting to learn how to manipulate sound files and work on a local server.

## Sammie Kim— Looking Outwards—11

Angela Washko is a digital artist who creates experimental games and entertainment that often revolves around feminist themes. One project that really stood out to me is called The Game, which won the Impact Award at Indiecade. As a feminist video game, this project presents an “exploration of consent and the politics, tactics and practices of the male pick-up artist and seduction community.” The format resembles a dating simulator, where players experience several seduction techniques deriving from instructional books and seduction coaches (pickup artists. The pickup gurus attempt to seduce the player, where six prominent coaches try to gain the player’s attention at a bar—an opportunity for players to explore the complex social behavior and psychology behind dating, as well as experience being a femme-presenting individual exploring this difficult and risky path. I found this game to provoke a reflective process step by step, as it allows us to virtually explore and manipulate, while simultaneously complicit in the frequent dehumanizing behavior. This game is unique as it’s composed entirely of scenarios moving on, providing a digital narrative that satirizes this convoluted system of power and desire in the world of contemporary sex and dating.

Link to the artist’s website:  https://angelawashko.com/section/437138-The-Game-The-Game.html

## Katrina Hu – Project 10 – Sonic Sketch

``````/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project10_SonicSketch*/

var eyeSize1 = 10;
var mouthWidth1 = 30;
var eyeSize2 = 10;
var mouthWidth2 = 30;
var eyeSize3 = 10;
var mouthWidth3 = 30;
var eyeSize4 = 10;
var mouthWidth4 = 30;

var evilLaugh;
var womanLaugh;
var maniacalLaugh;
var childLaugh;

evilLaugh.setVolume(0.5);

womanLaugh.setVolume(0.5);

maniacalLaugh.setVolume(0.5);

childLaugh.setVolume(0.5);
}

function setup() {
createCanvas(480, 120);
}

function soundSetup() {

}

function draw() {
noStroke();
//blue background
fill(204, 224, 255);
rect(0, 0, 120, 120);
fill(74, 143, 255);
ellipse(60, 60, 100, 100);
fill(0);
ellipse(40, 40, eyeSize1);
ellipse(80, 40, eyeSize1);
fill(255, 255, 255);
ellipse(40, 38, eyeSize1 / 3);
ellipse(80, 38, eyeSize1 / 3);
fill(189, 100, 87);
arc(60, 60, mouthWidth1, 30, 0, PI, CHORD);
//yellow background
fill(255, 252, 204);
rect(120, 0, 120, 120);
fill(255, 246, 82);
ellipse(180, 60, 100, 100);
fill(0);
ellipse(160, 40, eyeSize2);
ellipse(200, 40, eyeSize2);
fill(255, 255, 255);
ellipse(160, 38, eyeSize2 / 3);
ellipse(200, 38, eyeSize2 / 3);
fill(189, 100, 87);
arc(180, 60, mouthWidth2, 30, 0, PI, CHORD);
//pink background
fill(255, 204, 204);
rect(240, 0, 120, 120);
fill(255, 90, 82);
ellipse(300, 60, 100, 100);
fill(0);
ellipse(280, 40, eyeSize3);
ellipse(320, 40, eyeSize3);
fill(255, 255, 255);
ellipse(280, 38, eyeSize3 / 3);
ellipse(320, 38, eyeSize3 / 3);
fill(189, 100, 87);
arc(300, 60, mouthWidth3, 30, 0, PI, CHORD);
//green background
fill(222, 255, 214);
rect(360, 0, 120, 120);
fill(138, 255, 138);
ellipse(420, 60, 100, 100);
fill(0);
ellipse(400, 40, eyeSize4);
ellipse(440, 40, eyeSize4);
fill(255, 255, 255);
ellipse(400, 38, eyeSize4 / 3);
ellipse(440, 38, eyeSize4 / 3);
fill(189, 100, 87);
arc(420, 60, mouthWidth4, 30, 0, PI, CHORD);
}

function mousePressed() {
//play sound if pressed in blue box
if(mouseX <= 120) {
eyeSize1 = random(8, 15);
mouthWidth1 = random(40, 55);
evilLaugh.play();
}
//play sound if pressed in yellow box
if(mouseX > 120 & mouseX <= 240) {
eyeSize2 = random(8, 15);
mouthWidth2 = random(40, 55);
womanLaugh.play();
}
//play sound if pressed in pink box
if(mouseX > 240 & mouseX <= 360) {
eyeSize3 = random(8, 15);
mouthWidth3 = random(40, 55);
maniacalLaugh.play();
}
//play sound if pressed in green box
if(mouseX > 360 & mouseX <= 480) {
eyeSize4 = random(8, 15);
mouthWidth4 = random(40, 55);
childLaugh.play();
}

}

``````

The sounds play when you click on the various 4 faces. Each face has a different laugh, and the facial features change as you click on them as well.

## Alec Albright – Project 10 – Sonic Sketch

I am using one of my grace days on this assignment

``````// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 10

var margin = 150;
var radius = 30;
var r = 0;
var g = 0;
var b = 0;
var rotation = 0;
var sine; // sine oscillator
var sineAmp; // sine amplitude
var sineFreq; // sine frequency
var sawtooth; // sawtooth oscillator
var sawtoothAmp; // sawtooth amplitude
var sawtoothFreq; // sawtooth frequency
var square; // square oscillator
var squareAmp; // square amplitude
var squareFreq; // square frequency

function setup(){
createCanvas(640, 480);
angleMode(DEGREES);
useSound();
}

function soundSetup() { // setup for audio generation
// making sine
sine = new p5.Oscillator();
sine.setType("sine");
sine.start();

// making sawtooth
sawtooth = new p5.Oscillator();
sawtooth.setType("sawtooth");
sawtooth.start();

// making square wave
square = new p5.Oscillator();
square.setType("square");
square.freq(440);
square.start();
}

function draw(){
background("white");
fill(r, g, b);

// mapping angle of rotation to mouseY
// as mouse moves up and down, shapes rotate
rotation = map(mouseY, 0, height, 0, 360);

// drawing hexagons with specified margin and rotation
// center
push();
translate(width / 2, height / 2);
rotate(rotation);
pop();
// circle around center hexagon
for(let i = 0; i < nvertex; i +=1){
// finding exactly where the hexagon at hand is located
// sin tells us where the y coordinate is
var centerY = sin(angle) * margin;
// cos tells us where the x coordinate is
var centerX = cos(angle) * margin;
// now draw the vertex at hand
// setting up rotation for each individual hexagon
push();
translate(width / 2 + centerX, height / 2 + centerY);
rotate(rotation);
pop();
// add the next portion of the angle
angle = angle + (360 / 6)
}

// scaling mouseX to use the whole screen for size
// as mouse moves right, shapes get bigger
radius = map(mouseX, 0, width, 20, 70);

// as mouse moves right, more red, more sine/less sawtooth
r = map(mouseX, 0, width, 0, 255);
// amplitude form 0 to 1
sineAmp = map(mouseX, 0, width, 0, 1);
sine.amp(sineAmp);
// amplitude from .8 to 0 (bigger amplitude on left side)
sawtoothAmp = map(mouseX, 0, width, .2, 1);
sawtooth.amp(1 - sawtoothAmp);

// as mouse moves down, more blue
b = map(mouseY, 0, height, 0, 255);
// as mouse moves left, more green
g = 255 - map(mouseX, 0, width, 0, 255);

// frequency changes depending on whether we're in top half or bottom half
if (mouseY <= height / 2) {
// sine goes from 440 to 1760 Hz (2 octaves) if we're in the top half
sineFreq = constrain(map(mouseY, 0, height / 2, 440, 1760), 440, 1760);
sine.freq(sineFreq);

// sawtooth frequency stabilizes at minumum value
sawtooth.freq(110);
} else {
// sawtooth goes from 110 to 440 Hz (2 octaves) if we're in the bottom half
sawtoothFreq = constrain(map(mouseY, height / 2, height, 110, 440), 110, 440);
sawtooth.freq(sawtoothFreq);

// sine frequency stabilizes at maximum value
sine.freq(1760);
}

// if mouse is pressed, square wave can be changed
if (mouseIsPressed) {
// frequency mapped to the average of mouseX and mouseY, can go from 110 to 440 Hz
squareFreq = constrain(map((mouseX + mouseY) / 2, 0, 640, 110, 440), 110, 440);
square.freq(squareFreq);

// amplitude mapped to the distance from the center of x axis
squareAmp = constrain(map(mouseX - (width / 2), -320, 320, 0, .8), 0, .8);
square.amp(squareAmp);
}

// margin depends on mouseX, keeping same distance throughout
margin = map(mouseX, 0, width, 50, 150);
}

// 6 vertices, as a hexagon has
var nvertex = 6;
// angle we're working at (when we get to TWO_PI, we're done)
var angle = 0;

function hexagon(x, y, radius){
// draw a hexagon at (x, y) using beginShape()
beginShape();
// find each vertex's specific location
for(let i = 0; i < nvertex; i += 1){
// finding exactly where the vertex at hand is located
// sin tells us where the y coordinate is
var vertexY = y + sin(angle) * radius;
// cos tells us where the x coordinate is
var vertexX = x + cos(angle) * radius;
// now draw the vertex at hand
vertex(vertexX, vertexY)
// add the next portion of the angle
angle += (360 / 6)
}
// connect beginning and end points
endShape(CLOSE)
}

``````

For this assignment, I added sonic features to my Project 3 – Dynamic Drawing. I added a sine wave oscillator, a sawtooth wave oscillator, and a square wave oscillator. The mappings for the amplitude and frequency of these oscillators are as follows:

1. As the mouse moves from left to right, the sine wave amplitude increases and the sawtooth wave amplitude decreases.
2. As the mouse moves from top to bottom on the top half of the screen, the sine wave frequency gets higher (scaling up to two octaves).
3. As the mouse moves from top to bottom on the bottom half of the screen, the sawtooth wave frequency gets higher (scaling up to two octaves).
4. As the average of mouseX and mouseY increases, so does the frequency of the square wave.
5. The closer to the middle of the x-axis the mouse is, the louder the square wave becomes.

Note: the square wave can only be adjusted if the mouse is pressed!!

This process was very interesting in testing harmonic balances in my dynamic drawing, as manifested by these mappings. I certainly see a lot more dimensionality in my drawing now because of the added sound layers!