ICM – Week 5 Assignment

This week, my class was expected to represent our comfort in defining our own functions and creating objects. After some practice, I felt very comfortable using these tools – and utilized some old code that I had used to make balloons float, to make a pattern of multiple bubbles floating. This was satisfying because I had initially struggled with making multiple balloons float, and I was able to overcome this obstacle and apply it in a new animation. I also learned how to add audio and gifs into my animation, I look forward to using these skills in future projects.

I ran into two interesting issues. First, for whatever reason, I could not get Adobe Photoshop to represent the color I had generated for my background in the background of my seaweed images. Second, I wanted to try and generate a realistic water ripple pattern and was not able to find any examples written in JavaScript. In the future, I’d like to see if there is a way I could interface different languages in a similar manner to p5.serialport.js (used to communicate with Arduino).

Below is a video of my final animation:

Below is the code I used:

let x;
let y;
let speedX;
let speedY;
let d ;
let gif_loadImg;
let gif_createImg;

let b1 = {
  x: 0,
  y: 25,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b2 = {
  x: 50,
  y: 40,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b3 = {
  x: 100,
  y: 60,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b4 = {
  x: 125,
  y: 91,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b5 = {
  x: 150,
  y: 84,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b6 = {
  x: 400,
  y: 93,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b7 = {
  x: 450,
  y: 101,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b8 = {
  x: 500,
  y: 30,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b9 = {
  x: 3700,
  y: 74,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b10 = {
  x: 420,
  y: 24,
  speedX: 3,
  speedY: 5,
  d: 5
};
let b11 = {
  x: 400,
  y: 300,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b12 = {
  x: 450,
  y: 250,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b13 = {
  x: 500,
  y: 275,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b14 = {
  x: 370,
  y: 274,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b15 = {
  x: 420,
  y: 244,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b16 = {
  x: 42,
  y: 24,
  speedX: 3,
  speedY: 5,
  d: 5
};
let b17 = {
  x: 24,
  y: 300,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b18 = {
  x: 45,
  y: 250,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b19 = {
  x: 65,
  y: 275,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b20 = {
  x: 37,
  y: 274,
  speedX: 3,
  speedY: 5,
  d: 5
}

let b21 = {
  x: 90,
  y: 244,
  speedX: 3,
  speedY: 5,
  d: 5
};

let bg = {
  r: 62,
  g: 96,
  b: 167
}

function clearCanvas(r, g, b) {
  background(r, g, b);
}

function drawBubble(x, y, d, bubbleColor) {
  fill(bubbleColor);
  circle(x, y, d);
}

function initializeBubble(b1) {
  b1.x = width / 18;
  b1.y = height / 2;
  b1.speedX = b1.speedX + random(-1, 1);
  b1.speedY = -1;
  b1.d = 5;
}

function updateBubble(b1) {
  b1.x = b1.x + random(-1, 1);
  b1.y = b1.y - 1;
  if (b1.y < 0) 
  b1.y = height; 
}
  
// drew gif insertion concept from https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z
function preload() {
  gif_loadImg = loadImage("fishes.gif");
  gif_createImg = createImg("fishes.gif");
  song = loadSound('dive.mp3');
  img1 = loadImage('seaweed.png');
  img2 = loadImage('seaweed3.png');
}

function setup() {
  createCanvas(550, 390);
    initializeBubble(b1);
}

function mousePressed() {
  if (song.isPlaying()) {
    // .isPlaying() returns a boolean
    song.stop();
  } else {
    song.play();
  }
}
function draw() {
  clearCanvas(bg.r, bg.g, bg.b);
  gif_createImg.position(155, 0);
  image(img1, 0, 200);
  image(img2, 350, 200);

//b1
drawBubble(b1.x, b1.y, b1.d, 255);
  updateBubble(b1);
  
//b2
drawBubble(b2.x, b2.y, b2.d, 255);
  updateBubble(b2);  

//b3
drawBubble(b3.x, b3.y, b3.d, 255);
  updateBubble(b3);    

//b4
drawBubble(b4.x, b4.y, b4.d, 255);
  updateBubble(b4);    
  
//b5
drawBubble(b5.x, b5.y, b5.d, 255);
  updateBubble(b5);    
  
//b6
drawBubble(b6.x, b6.y, b6.d, 255);
  updateBubble(b6);    
  
//b7
drawBubble(b7.x, b7.y, b7.d, 255);
  updateBubble(b7);    
  
//b8
drawBubble(b8.x, b8.y, b8.d, 255);
  updateBubble(b8);    
  
//b9
drawBubble(b9.x, b9.y, b9.d, 255);
  updateBubble(b9);    
  
//b10
drawBubble(b10.x, b10.y, b10.d, 255);
  updateBubble(b10);  

//b11
drawBubble(b11.x, b11.y, b11.d, 255);
  updateBubble(b11);    
  
//b12
drawBubble(b12.x, b12.y, b12.d, 255);
  updateBubble(b12);    
  
//b13
drawBubble(b13.x, b13.y, b13.d, 255);
  updateBubble(b13);    
  
//b14
drawBubble(b14.x, b14.y, b14.d, 255);
  updateBubble(b14);

//b15
drawBubble(b15.x, b15.y, b15.d, 255);
  updateBubble(b15);

//b16
drawBubble(b16.x, b16.y, b16.d, 255);
  updateBubble(b16);    
  
//b17
drawBubble(b17.x, b17.y, b17.d, 255);
  updateBubble(b17);    
  
//b18
drawBubble(b18.x, b18.y, b18.d, 255);
  updateBubble(b18);    
  
//b19
drawBubble(b19.x, b19.y, b19.d, 255);
  updateBubble(b19);

//b20
drawBubble(b20.x, b20.y, b20.d, 255);
  updateBubble(b20);

//b21
drawBubble(b21.x, b21.y, b21.d, 255);
  updateBubble(b21);   
}