Interactive Caribbean: Creative Coding

Interactive Caribbean is a creative coding project I did in collaboration with Vale Caro Rojas during the workshop "Creative Coding" at the Copenhagen Institute of Interaction Design, where we both got a scholarship.

The Code for this project was done using JavaScript on p5.

Project done during August of 2021.

The main objective of the project was to create a graphical animated composition by abstracting a landscape, a folkloric aspect, or even a traditional food, something that we found representative from the culture of our country, Costa Rica.

We took inspiration from the tropical forest of Limón, a province of Costa Rica located in the Caribbean side of the country.

Elements from the tropical forest and ideas from Paula´s previous illustrations.

Color palettes from the elements.

Ideas of how the different elements could look like to then code each element.

The project also includes music created using Blocs Wave.

Music created in Blocs Wave.

Recording of how the project looks like in p5.

Use this to access the original project on p5, click here.

Code

let myImage;
let mySound;
let congoSound;
let congoSoundvol=0.0
//rain
let rainH = 10;
let rainW = 2;
let rainY;
let rainX = 5;
let rainCount = 20;

//leaf
let leafW = 70;
let leafH = 20;
let leafY1, leafY2, leafY3, leafY4, leafY5;
let leafX1 = 30;
let leafX2 = 200;
let leafX3 = 500;
let leafX4 = 700;
let leafX5 = 900;
let leafSpeed1 = 1;
let leafSpeed2 = 0.7;
let leafSpeed3 = 1.3;
let leafSpeed4 = 1.1;
let leafSpeed5 = 1;
let leafColor;

//caimito
let caimitoSize = 100;
let stemH;
let stemW;
let stemPlace;
let caimitoX = 350;
let caimitoY;
let growPoint = 40;
let growPoint2 = 100;
let growPoint3 = 150;
let growPoint4 = 175;
let breakPoint = 75;
let offset = 10;

let isFalling = false;

//howler monkey
let congoSize1;
let congoSize2;
let congoSize3;
let congo1X = 900;
let congo1Y = 200;
let congo2X = 800;
let congo2Y = 500;
let congo3X = 200;
let congo3Y = 800;
let fills;

function preload() {
myImage = loadImage("forest.png");
mySound = loadSound("sound.wav");
congoSound = loadSound("congo sound.mp3");
}

function setup() {
createCanvas(1000, 1000);
mySound.loop(undefined, undefined, 0.5);
congoSound.loop(undefined, undefined, congoSoundvol);

//rain
rainY = random(0, 8);

//leaf
leafY1 = random(255);
leafY2 = random(255);
leafY3 = random(255);
leafY4 = random(255);
leafY5 = random(255);

//caimito
rectMode(CENTER);
stemPlaceY = 5;
stemH = caimitoSize / 5;
stemW = stemH / 1.5;
caimitoY = stemPlaceY + caimitoSize * 0.7;

caimitoSize = 30;

//howler monkey
fills = [
color(18, 17, 31, 150),
color(76, 73, 73, 150),
color(109, 109, 109, 150),
color(164, 91, 98, 150),
color(164, 91, 98),
];
}

function draw() {
background(myImage, 50);

//rain
stroke(161, 234, 234, 250);
fill(161, 234, 234, 200);
for (let rainSpace = 0; rainSpace < rainCount; rainSpace = rainSpace + 1) {
ellipse((rainX + rainSpace * width) / rainCount, rainY, rainW, rainH);
rainY = rainY + random(0, 150);

if (rainY > height) {
rainY = random(0, 100);
rainX = random(0, width);
}
}

//caimito
noStroke();
fill(63, 29, 36);
//stemH = caimitoSize / 5;
rect(caimitoX, stemPlaceY, stemW, stemH);
fill(168, 72, 94); //rojo
circle(caimitoX, caimitoY, caimitoSize);

if (isFalling == false) {
fill(168, 72, 94); //rojo
circle(caimitoX, stemPlaceY + caimitoSize * 0.3, caimitoSize / 2);
} else {
caimitoY += 3;
}

if (caimitoSize < breakPoint) {
caimitoY = stemPlaceY + caimitoSize * 0.7;
caimitoSize += 1;
}

if (caimitoSize > growPoint) {
fill(210, 220, 106);
circle(caimitoX + offset, caimitoY - offset, caimitoSize / 2);
}

if (caimitoY > height) {
caimitoSize = 100;
stemPlaceY = 5;
stemH = caimitoSize / 5;
stemW = stemH / 1.5;
caimitoY = stemPlaceY + caimitoSize * 0.7;

caimitoSize = 0;
isFalling = false;
}

//howler monkey
//congo1
fill(240, 229, 228, 150);
noStroke();
congoSoundvol=0.5
congoSize1 = 150 - dist(mouseX, mouseY, congo1X, congo1Y);
if (100 - dist(mouseX, mouseY, congo1X, congo1Y) < 30) {
congoSize1 = 30;
}

for (let i1 = 0; i1 < fills.length; i1++) {
// fill(fills[i1])
//for (size = 0; size < 5; size++) {
ellipse(congo1X, congo1Y, (congoSize1 / 3) * i1);
}
//congo2
fill(240, 229, 228, 150);
noStroke();
congoSize2 = 200 - dist(mouseX, mouseY, congo2X, congo2Y);
if (180 - dist(mouseX, mouseY, congo2X, congo2Y) < 50) {
congoSize2 = 50;
}
for (let i2 = 0; i2 < fills.length; i2++) {
// fill(fills[i2])
//for (size = 0; size < 5; size++) {
ellipse(congo2X, congo2Y, (congoSize2 / 3) * i2);
}
//congo3
fill(240, 229, 228, 150);
noStroke();
congoSize3 = 300 - dist(mouseX, mouseY, congo3X, congo3Y);
if (300 - dist(mouseX, mouseY, congo3X, congo3Y) < 100) {
congoSize3 = 100;
}
for (let i3 = 0; i3 < fills.length; i3++) {
// fill(fills[i3])
//for (size = 0; size < 5; size++) {
ellipse(congo3X, congo3Y, (congoSize3 / 3) * i3);
}
//leaf
noStroke();
fill(70, 103, 68);
ellipse(leafX1, leafY1, leafW, leafH);
fill(107, 129, 68);
ellipse(leafX2, leafY2, leafW, leafH);
fill(197, 177, 88);
ellipse(leafX3, leafY3, leafW, leafH);
fill(70, 103, 68);
ellipse(leafX4, leafY4, leafW, leafH);
fill(197, 177, 88);
ellipse(leafX5, leafY5, leafW, leafH);
leafY1 = leafY1 + leafSpeed1;
leafY2 = leafY2 + leafSpeed2;
leafY3 = leafY3 + leafSpeed3;
leafY4 = leafY4 + leafSpeed4;
leafY5 = leafY5 + leafSpeed5;

if (leafY1 > height) {
leafY1 = 0;
}
if (leafY2 > height) {
leafY2 = 0;
}
if (leafY3 > height) {
leafY3 = 0;
}
if (leafY4 > height) {
leafY4 = 0;
}
if (leafY5 > height) {
leafY5 = 0;
}
}

//caimito
function mouseClicked() {
if (dist(mouseX, mouseY, caimitoX, caimitoY) < caimitoSize / 2) {
isFalling = true;
}
if (dist(mouseX, mouseY, congo1X, congo1Y) < congoSize1) {
congoSound.loop(undefined, undefined, congoSoundvol)
congoSoundvol=0.5
}

}

Interactive Caribbean: Creative Coding

Owner

Interactive Caribbean: Creative Coding

Creative Fields