For this weeks post, I decided to look at Allison Burtch’s project, Mic Jammer. In collaboration with Eric Rosenthal, Burtch created a small device that can mute people’s microphones. It works by emitting a high ultrasonic noise that is inaudible to human ears but can be heard by microphones.
Mic Jammer
I found this project interesting because of how relevant it is. Burtch describes the purpose of Mic Jammer as being like taping over your webcam, but for audio and microphones. Personally, I find that there is a growing fear of being watched through my webcam, but I never considered the possibility of being listened to through the microphone and this brings up that second possibility.
The product itself is in the beginning stages of being designed and Burtch as well comments on the fact that the next step is to collaborate with a product designer to re-engineer and design the product. I find it really interesting how the product was also designed around the iphone, specifically the iphone 4/5 and later iphone 6 when it came out. It considers the placement of the microphones (on the bottom for iphone 4/5 and two on top and two on bottom for iphone 6), trying to find best way to hit and aim for the microphones.
I was inspired by Van Gogh’s Starry Night painting. I thought it would be interesting to see what his painting would look like if it was animated, since he painted a sky with wind that was painted with the intention of motion. I made each aspect of the painting into different functions, so they would be easier to place when each part was complete. I utilized many for loops in order to achieve his brush stroke affect. All in all, I think my code provides insight into what the wind in his painting would look like if it could be animated.
One of Claudia Hart’s many Installations featuring “The Dolls House”
Claudia Hart is a computational fine artist that turns photographs into digital moving art. Originally from New York, New York, she attended school at New York University earning a BA in art history in 1978. She then studied architecture at the Columbia University Graduate School of Architecture and earned her MS is 1984. After exhibiting with the Pat Hearn Gallery, she received an NEA Fellowship in 1989 and moved her practice to Europe where she spent ten years and received many awards and fellowships such as the Kunstfond Bonn, the Stiftung Luftbruekendank Grant, and the Arts International Foundation Grant.
One of her many projects that I found notable portrayed one of her major themes: the blend of technology and nature. The piece is titled “Noh-timeGarden” and it is the third in a series of instillations. These works feature two side by side screens that portray nature in the form of animation. In this particular piece, she portrays a garden from two different points of views that are moving towards one another. Utilizing algorithms and a computer, she is able to digitize nature realistically enough that it appears three dimensional, although it still has the smoothness and perfection of being computationally rendered – seen in the smooth ground and perfectly green pointed leaves. I really admire her ability to make a social statement of nature and technology through her art.
The Breathing Column is an architecture prototype by Caitlin Morris. It is a large installation that reacts to nearby people by turning, expanding and contracting in a lifelike fashion. The prototype is from 2010- I was not able to find a video of the finished installation. In any case, it is an interesting combination of architecture and computing that challenges the perception of buildings as static.
var terrainSpeed = 0.0008;
var terrainDetail = 0.008;
var fiX = 450;
var fi2X = 500;
var fi3X = 475;
var scooba;
var scoobaX = 450
function preload() {
scooba = loadImage('https://i.imgur.com/8HhJZHY.png')
}
function setup() {
createCanvas(400, 200);
}
function draw() {
background(70,200,250);
//draw terrain
terrain();
//draw sub
sub();
//draw fish
fish();
//sand
fill(226,226,176)
rect(0,height-20,width,20)
//scooba diver
scoobaD();
}
function terrain() {
noFill();
beginShape();
stroke(40,120,40)
strokeWeight(2)
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, 0, height);
vertex(x, y);
//terrain
push();
fill(40,120,40);
ellipse(x,y+25,20,20); //thick black hill
ellipse(x,y+55,10,10); //thin black hill
stroke(20,80,18);
strokeWeight(1);
if(x%2){
line(x,y,x,y+200) //white lines
}
pop();
}
endShape();
}
function sub() {
//sub
push();
rotate(random(-.01,.01));
strokeWeight(0);
fill('yellow');
rect(170,100,70,35,15); //body
rect(185,89,30,30,5); //top
rect(150,107,15,20,3); //tail
rect(162,112,10,10); //connector
rect(190,85,5,10); //airtube
ellipse(225,117.5,43,35); //nose
fill(200);
//windows
ellipse(188,115,12,12);
ellipse(205,115,12,12);
ellipse(223,115,12,12);
fill(100);
//inside windows
ellipse(188,115,9,9);
ellipse(205,115,9,9);
ellipse(223,115,9,9);
pop();
}
function fish() {
var fiS = 3.5;
var fi2S = 2;
var fi3S = 3;
strokeWeight(0);
fill(0);
//fish1
ellipse(fiX,50,25,10);
triangle(fiX+10,50,fiX+16,45,fiX+16,55);
fiX = fiX-fiS;
if(fiX < 0){
fiX = 450;
}
//fish2
ellipse(fi2X,60,25,10);
triangle(fi2X+10,60,fi2X+16,55,fi2X+16,65);
fi2X = fi2X-fi2S;
if(fi2X < 0){
fi2X = 500;
}
//fish3
ellipse(fi3X,70,25,10);
triangle(fi3X+10,70,fi3X+16,65,fi3X+16,75);
fi3X = fi3X-fi3S;
if(fi3X < 0){
fi3X = 475;
}
}
function scoobaD(){
var scoobaS = 3.5;
push();
scale(.6);
translate(50,10);
image(scooba,scoobaX,0);
//move scooba across screen
scoobaX = scoobaX - scoobaS;
if(scoobaX < -150){
scoobaX = 550;
}
pop();
}
For this project I wanted to play off of the Beatles’ song “Yellow Submarine.” I used some code from the example to generate the landscape which I then manipulated to create details in the underwater mountains. The sub in the middle is rotating a tenth of a degree every frame to create a turbulent look. fish and a scuba diver go past at randomly generated speeds.
What I learned while doing this project is that making separate functions for each part and then calling them in the draw function is a great way to change code and manipulate it.
For this project, the first thing that came to mind for a landscape was a sky with a sun, grass and people. It was a fairly simple and straight forward idea. To embellish it, I added some clouds and mushrooms. I used simple shapes to create the various objects: people, mushrooms, clouds.
I made slight differences in the height and y placement of the people, mushrooms and ground to create more depth and also layered the light clouds and dark clouds with the sun to add more depth. There are some randomized variables such as the colors of the dresses, and various sizes of things.
The Carnegie Museum of Natural History has a door which opens up to the section of mystery. Each time a person opens that door, an animal is seemingly holographically displayed in a room, along with its species name and the sound it produces.
A woman named Caroline Record was at the forefront of this project. The creation of the section of mystery encompassed four different phases: design, media collection, creating software, and fabrication. The design phase consisted of simply designing a space as well as incorporated a glass that created the holographic effect. After, Record and her team collected images of 30 different species using a 3-D scanner, in which she was able to use to reproduce models of the animals featured in the exhibit. Then, Record designed her own software that allowed the computer to sense when the doors open and closed, switching out the animals so that each time the door opens, a different animal is shown inside. While coding, Record was able to fix more of the lighting and sound problems to generate an even more realistic effect of the animal displayed. I am interested in the design process behind the section of mystery since I actually had the opportunity to see it just about a week ago.
//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-10-Landscape
var flowers = [];
var boatX = 440;
var boatY = 280;
var floatHeight;
function setup() {
createCanvas(480, 480);
frameRate(10);
// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
var ry = random(height);
flowers[i] = makeFlower(rx, ry);
}
frameRate(10);
}
function draw() {
background(252, 220, 255);
drawMountains();
drawWater();
drawBoat();
displayHorizon();
updateAndDisplayFlowers();
removeFlowersThatHaveSlippedOutOfView();
addNewFlowersWithSomeRandomProbability();
}
function updateAndDisplayFlowers(){
// Update the flower's positions, and display them.
for (var i = 0; i < flowers.length; i++){
flowers[i].move();
flowers[i].display();
}
}
function removeFlowersThatHaveSlippedOutOfView(){
var flowersToKeep = [];
for (var i = 0; i < flowers.length; i++){
if (flowers[i].x + flowers[i].stemThickness > 0) {
flowersToKeep.push(flowers[i]);
}
}
flowers = flowersToKeep; // remember the surviving flowers
}
function addNewFlowersWithSomeRandomProbability() {
// With a very tiny probability, add a new flower to the end.
var newFlowerLikelihood = 0.01;
if (random(0,1) < newFlowerLikelihood) {
flowers.push(makeFlower(width));
}
}
// method to update position of flower every frame
function flowerMove() {
this.x += this.speed;
this.y += this.speed;
}
// draw the flower and some windows
function flowerDisplay() {
var floorHeight = -5;
var stemHeight = this.nFloors * floorHeight;
push();
translate(this.x, height - this.offset);
//draw stems
fill(210);
rect(0, 0, this.stemThickness, stemHeight);
translate(this.stemThickness/2, stemHeight);
//draw flowers here
for (var i = 0; i < 100; i++) {
var g = random(0, 100);
var b = random(0, 100);
noStroke();
fill(206, g, b);
ellipse(0 , 10, 5, 30);
rotate(PI/5);
}
pop();
}
function makeFlower(birthLocationX, birthLocationY) {
var flwr = {x: birthLocationX,
y: birthLocationY,
floatHeight: random(10, 100),
stemThickness: 5,
speed: -1.0,
nFloors: round(random(5, 10)),
offset: random(10, 40), //allows stems to be drawn at various points
move: flowerMove,
display: flowerDisplay}
return flwr;
}
//horizon that flowers are on
function displayHorizon(){
noStroke(0);
fill(81, 64, 137);
rect(0, height - 100, width, height - 100);
}
function drawWater() {
var waterSpeed = 0.00009;
var waterDetail = 0.0005;
beginShape();
fill(209, 211, 255);
noStroke();
for (var xWater = 0; xWater < width; xWater++) {
var tWater = (xWater * waterDetail) + (millis() * waterSpeed);
var yWater = map(noise(tWater), 0,1, 180, 280);
vertex(xWater, yWater);
//make it draw to edge of canvas
vertex(0, height);
vertex(width, height);
}
endShape();
}
function drawMountains() {
var mountainSpeed = 0.0005;
var mountainDetail = 0.008;
//Background Mountains
beginShape();
fill(101, 101, 202, 150);
noStroke();
for (var xMount = 0; xMount < width; xMount++) {
var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
var yMount = map(noise(tMount), 0,1, 20, 100);
vertex(xMount, yMount);
vertex(0, height);
vertex(width, height);
}
//foreground mountains
endShape();
beginShape();
fill(204, 204, 255, 150);
noStroke();
for (var xMount = 0; xMount < width; xMount++) {
var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
var yMount = map(noise(tMount), 0,1, 80, 180);
vertex(xMount, yMount);
vertex(0, height);
vertex(width, height);
//stagger mountain edges
mountainDetail = .01;
}
endShape();
}
function drawBoat() {
//post and sail
stroke(255);
strokeWeight(2);
fill(255);
line(boatX, boatY, boatX, boatY - 50);
triangle(boatX, boatY - 50, boatX + 30, boatY -10, boatX, boatY - 5);
fill(153, 51, 0);
noStroke();
arc(boatX, boatY, 80, 50, TWO_PI, PI);
boatX -= 1;
//var constrainY = constrain(boatY, 180, 280);
//reset boatX so it can repeat when it goes over edge of canvas
if (boatX < -40) {
boatX = width;
}
}
For this project, I wanted to create a mountainscape because I find those peaceful to look at especially when going through the terrible stress of school in general. My image probably could’ve been pushed further but I had a lot of difficulty understanding what characteristics could automatically be defined within an objet and how those elements interacted with one another so just getting my landscape to this point was a success for me.
//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-10-Landscape
var flowers = [];
var boatX = 440;
var boatY = 280;
var floatHeight;
function setup() {
createCanvas(480, 480);
frameRate(10);
// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
var ry = random(height);
flowers[i] = makeFlower(rx, ry);
}
frameRate(10);
}
function draw() {
background(252, 220, 255);
drawMountains();
drawWater();
drawBoat();
displayHorizon();
updateAndDisplayFlowers();
removeFlowersThatHaveSlippedOutOfView();
addNewFlowersWithSomeRandomProbability();
}
function updateAndDisplayFlowers(){
// Update the flower's positions, and display them.
for (var i = 0; i < flowers.length; i++){
flowers[i].move();
flowers[i].display();
}
}
function removeFlowersThatHaveSlippedOutOfView(){
var flowersToKeep = [];
for (var i = 0; i < flowers.length; i++){
if (flowers[i].x + flowers[i].stemThickness > 0) {
flowersToKeep.push(flowers[i]);
}
}
flowers = flowersToKeep; // remember the surviving flowers
}
function addNewFlowersWithSomeRandomProbability() {
// With a very tiny probability, add a new flower to the end.
var newFlowerLikelihood = 0.01;
if (random(0,1) < newFlowerLikelihood) {
flowers.push(makeFlower(width));
}
}
// method to update position of flower every frame
function flowerMove() {
this.x += this.speed;
this.y += this.speed;
}
// draw the flower and some windows
function flowerDisplay() {
var floorHeight = -5;
var stemHeight = this.nFloors * floorHeight;
push();
translate(this.x, height - this.offset);
//draw stems
fill(210);
rect(0, 0, this.stemThickness, stemHeight);
translate(this.stemThickness/2, stemHeight);
//draw flowers here
for (var i = 0; i < 100; i++) {
var g = random(0, 100);
var b = random(0, 100);
noStroke();
fill(206, g, b);
ellipse(0 , 10, 5, 30);
rotate(PI/5);
}
pop();
}
function makeFlower(birthLocationX, birthLocationY) {
var flwr = {x: birthLocationX,
y: birthLocationY,
floatHeight: random(10, 100),
stemThickness: 5,
speed: -1.0,
nFloors: round(random(5, 10)),
offset: random(10, 40), //allows stems to be drawn at various points
move: flowerMove,
display: flowerDisplay}
return flwr;
}
//horizon that flowers are on
function displayHorizon(){
noStroke(0);
fill(81, 64, 137);
rect(0, height - 100, width, height - 100);
}
function drawWater() {
var waterSpeed = 0.00009;
var waterDetail = 0.0005;
beginShape();
fill(209, 211, 255);
noStroke();
for (var xWater = 0; xWater < width; xWater++) {
var tWater = (xWater * waterDetail) + (millis() * waterSpeed);
var yWater = map(noise(tWater), 0,1, 180, 280);
vertex(xWater, yWater);
//make it draw to edge of canvas
vertex(0, height);
vertex(width, height);
}
endShape();
}
function drawMountains() {
var mountainSpeed = 0.0005;
var mountainDetail = 0.008;
//Background Mountains
beginShape();
fill(101, 101, 202, 150);
noStroke();
for (var xMount = 0; xMount < width; xMount++) {
var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
var yMount = map(noise(tMount), 0,1, 20, 100);
vertex(xMount, yMount);
vertex(0, height);
vertex(width, height);
}
//foreground mountains
endShape();
beginShape();
fill(204, 204, 255, 150);
noStroke();
for (var xMount = 0; xMount < width; xMount++) {
var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
var yMount = map(noise(tMount), 0,1, 80, 180);
vertex(xMount, yMount);
vertex(0, height);
vertex(width, height);
//stagger mountain edges
mountainDetail = .01;
}
endShape();
}
function drawBoat() {
//post and sail
stroke(255);
strokeWeight(2);
fill(255);
line(boatX, boatY, boatX, boatY - 50);
triangle(boatX, boatY - 50, boatX + 30, boatY -10, boatX, boatY - 5);
fill(153, 51, 0);
noStroke();
arc(boatX, boatY, 80, 50, TWO_PI, PI);
boatX -= 1;
//var constrainY = constrain(boatY, 180, 280);
//reset boatX so it can repeat when it goes over edge of canvas
if (boatX < -40) {
boatX = width;
}
}
//Isadora Krsek
//Ikrsek@andrew.cmu.edu
//Section C
//Project 10: Landscape
//"When Pigs Fly"
var morningStars = [];
var terrainZoom = 0.0099;
var waterZoom = 0.0005;
var terrainSpeed = 0.0004;
var mistZoom = 0.004;
var pigsThatFly = []; // An array to store the images
var pigX; // The last X location of the character
var pigY; // The last Y location of the character
var targetX; // The X goal, from the user's click
var targetY; // The Y goal, from the user's click
var track = (0); //to keep track fo index in array "pigsThatFly"
var theX; //the current x location of character
var theY; //the current y location of character
function preload(){
// These URLs are for the individual walk cycle images,
// stored in the imgur album http://imgur.com/a/85DTu
var filenames = [];
filenames[0] = "https://i.imgur.com/yHI2wXX.png";
filenames[1] = "https://i.imgur.com/yHI2wXX.png"
filenames[2] = "https://i.imgur.com/Z5T1eCI.png";
filenames[3] = "https://i.imgur.com/xPr6ucE.png";
filenames[4] = "https://i.imgur.com/knjfg9E.png";
filenames[5] = "https://i.imgur.com/uh2mgbF.png";
filenames[6] = "https://i.imgur.com/k76ZBzT.png";
filenames[7] = "https://i.imgur.com/nfG9mkZ.png";
filenames[8] = "https://i.imgur.com/UXGbXhS.png";
filenames[9] = "https://i.imgur.com/UXGbXhS.png";
filenames[10] = "https://i.imgur.com/yHI2wXX.png";
// PUT CODE HERE TO LOAD THE IMAGES INTO THE frames ARRAY,
for(var z=0; z < filenames.length; z++) {
pigsThatFly.push(loadImage(filenames[z]));
}
}
function setup() {
createCanvas(640, 240);
imageMode(CENTER);
frameRate(35);//natural rate
// Initialize the character and target positions.
pigX = width / 2;
pigY = height / 2;
targetX = pigX;
targetY = pigY;
//# which allows for new star to appear
StarProb = 20;
//morningStars inital amount
for (var i = 0; i < 22; i++) {
morningStars[i] = new Star(random(width));
}
}
function draw() {
background(255);
noStroke();
gradientBack();
drawStars();
drawMount();
drawWater();
drawPig();
}
function drawStars(){
//when random # is smaller than probability then new start occurs
if (StarProb > random(0,100)) {
morningStars.push(new Star(width));
}
for (var i = 0; i < morningStars.length; i++) {
morningStars[i].move(); //update star array
morningStars[i].display();
if (morningStars[i].x < 0) { //if star goes out of boundary, remove it
morningStars.splice(i, 1);
}
}
}
function drawMount(){
//first mountain
push();
fill(0, 180);
beginShape();
noStroke();
for (var x = 0; x < width; x++) {
var t = (x * terrainZoom) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, height/2, height*3/4);
vertex(x, y);
}
vertex(width, height);
vertex(0,height);
endShape();
pop();
}
function drawWater(){
//water
//water main
push();
fill(173,216,255,100);
beginShape();
noStroke();
for (var x = 0; x < width; x++) {
var t = (x * waterZoom) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, height/2, height*3/4);
vertex(x+.2, y+70);
}
vertex(width, height);
vertex(0,height);
endShape();
pop();
//water layers
fill(173,216,255,115);
beginShape();
for (var a = 0; a < width; a++) {
var b = (a * waterZoom) + (millis() * terrainSpeed);
var c = map(noise(b), 0,1, height/2, height*3/4);
vertex(a+.2, c+75);
}
vertex(width, height);
vertex(0,height);
endShape();
pop();
beginShape();
for (var d = 0; d < width; d++) {
var e = (d * waterZoom) + (millis() * terrainSpeed);
var f = map(noise(e), 0,1, height/2, height*3/4);
vertex(d+.2, f+80);
}
vertex(width, height);
vertex(0,height);
endShape();
pop();
}
function drawPig(){
// PUT CODE HERE TO MOVE THE CHARACTER TOWARDS THE TARGET
var dx = targetX - pigX;
var dy = targetY - pigY;
var distanceFromCharacterToTarget = sqrt(dx*dx + dy*dy);
//control how character moves toward target
theX = lerp(pigX,targetX,.15);
theY = lerp(pigY,targetY,.15);
//keep looping through the images continuously/seamlessly
if (track >= pigsThatFly.length){
track = 0;
}
// PUT CODE HERE TO DISPLAY THE CHARACTER, CYCLING THROUGH THE FRAMES.
// WHEN YOU GET THAT WORKING, FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT.
//if the current x location is smaller than the last x location, it will be walking left
if (theX < pigX){
push();
scale(-1,1);//flip image
image(pigsThatFly[track],theX*-1,theY); //you multiply the X-coordinate by -1 so it walks in the right direction
pop();
}
//otherwise if it's larger, it will be walking right
else if (theX >= pigX){
push();
image(pigsThatFly[track],theX,theY);
pop();
}
//re-fresh values of pigX & pigY (which keep track of last place of character)
pigX = theX;
pigY = theY;
//cycle through the walking images
track = track + 1
}
function gradientBack(){
//Create gradient color for the background
topGrad = color(117, 118, 195); //top gradient
bottomGrad = color(250, 207, 194); //bottom gradient
//gradient color steps
var gradientSteps = (height);
var gradientSteps2 = (30);
for (var i = 0; i <= gradientSteps; i++) { //for each gradient strip
fill(lerpColor(topGrad, bottomGrad, i/height)); //fill color inerpolation
rect(0, (i/height * height) - (1/height * height), width, 1/height * height); //use the color draw boxes
}
//other gradient
/*
for (var q = 0; q <= gradientSteps2; q++) { //for each gradient strip
var sizeHeight = ((1/height * height)/2);
noStroke();
fill(lerpColor(topGrad2, bottomGrad2, q/gradientSteps2),80); //fill color inerpolation
rect(0, (q/height * height) - sizeHeight +195, width, sizeHeight); //use the color draw boxes
fill(lerpColor(topGrad3, topGrad2, q/gradientSteps2),80);
rect(0, (q/height * height) - sizeHeight+164, width, sizeHeight);
}
*/
}
function mousePressed() {
targetX = mouseX;
targetY = mouseY;
}
//generate morningStars
function Star(xLocation){
var randoOpa = random(80,180); //have the brightness of stars vary
var randoSize = random(.5,2); //have star size vary
this.x = xLocation;//controlled above by random width
this.y = random(1, 180); //range for stars to appear
this.speed = (-1.5); //speed
this.move = function() {
this.x += this.speed; //move the stars
}
this.display = function() {
//draw the stars here
fill(255,255,255,randoOpa);
ellipse(this.x, this.y,randoSize,randoSize);
}
}
This time around I wanted to do something a little more fun than usual. I had some trouble deciding on what I wanted to do, but eventually decided to just do a pig flying across the water in the early early morning (early enough when you can still see stars). The reason why is because I was inspired by the phrase “when pigs fly”, but not in the traditional sense of the phrase. I was more interested in where pigs would go and what they would do when they fly – why would pigs fly? So I ended up deciding a pig would take the time to go on an early morning flight, beneath the glow of the stars at dawn.
I wanted to do something humorous and beautiful and this is the result.
Also, fun fact:
If you click on the screen, the pig will move to your mouse location.
//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project 10
var fish1;
var fish2;
var fish1X = 500;
var fish1Y = 150;
var fish2X = -200;
var fish2Y = 100;
var fish3X = 650;
var fish3Y = 200;
var fish4X = 700;
var fish4Y = 60;
var fish5X = 540;
var fish5Y = 40;
var fishWidth = 40;
var fishHeight = 30;
function preload() {
fish1 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263089/fish-3.png");
fish2 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263085/1475323265.png");
fish3 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263089/fish-3.png");
fish4 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263089/fish-3.png");
fish5 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263089/fish-3.png");
}
function setup() {
createCanvas(500,300);
frameRate(100);
}
function draw(){
background(18,27,180);
drawSand();
drawFish();
}
//drawing sea floor
var terrainSpeed = 0.0005;
var sandFloor = 0.010;
function drawSand() {
noStroke();
fill(170,150,120);
beginShape();
for (x=0; x < width; x++) {
var t = (x*sandFloor) + (millis()*terrainSpeed);
var y = map(noise(t), 0, 1, 220, 270);
vertex(x, y);
vertex(0,height);
vertex(width,height);
}
endShape();
}
function drawFish() {
image(fish1, fish1X, fish1Y, fishWidth, fishHeight);
fish1X -= random(1,2);
fish1Y -= random(-0.5,0.5);
if (fish1X < -fishWidth) {
fish1X = 500;
}
image(fish2, fish2X, fish2Y, fishWidth, fishHeight);
fish2X += random(0,0.5);
fish2Y += random(-0.5,0.5);
if (fish2X > 700) {
fish2X = -100;
}
image(fish3, fish3X, fish3Y, fishWidth, fishHeight);
fish3X -= random(0,2);
fish3Y -= random(-0.5,0.5);
if (fish3X < -fishWidth) {
fish3X = 650;
}
image(fish4, fish4X, fish4Y, fishWidth, fishHeight);
fish4X -= random(1,2.5);
fish4Y -= random(-1,1);
if (fish4X < -fishWidth) {
fish4X = 700;
}
image(fish5, fish5X, fish5Y, fishWidth, fishHeight);
fish5X -= random(1,2.5);
fish5Y -= random(-1,1);
if (fish5X < -fishWidth) {
fish5X = 540;
}
}
I wanted to create an ocean floor. At first, I was only going to draw the orange fishes going to the left. However, I decided to add more. Drawing the terrain was definitely the most difficult part of the process, but I had learned a lot from it.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
