Click: Play/Pause. ⇅ mouse: Change speed. ⇄ mouse: Pan audio. Move eyes left and right!
xxxxxxxxxx
var leafHeight = 60;
var leafWidth = leafHeight/2;
var spacing = leafHeight + leafHeight/6;
function preload() {
song = loadSound('my_girls.mp3');
}
function setup() {
createCanvas(windowWidth, windowHeight);
song.loop();
song.pause();
}
function mousePressed() {
if ( song.isPlaying() ) { // .isPlaying() returns a boolean
song.pause(); // .play() will resume from .pause() position
background(255,0,0);
} else {
song.play();
background(0,255,0);
}
}
function draw() {
clear();
var panning = map(mouseX, 0, windowWidth,-1.0, 1.0);
song.pan(panning);
var speed = map(mouseY, 0.1, windowHeight, .85, 1.15);
speed = constrain(speed, 0.85, 1.15);
song.rate(speed);
var warmHue = map(mouseY, 0, windowHeight, -150, 150);
var colorMorphBg = (sin(frameCount/15)*10);
background(45+colorMorphBg+warmHue,60+colorMorphBg+warmHue,150+colorMorphBg-warmHue);
translate(0,-leafWidth);
leafColony();
}
function leafColony(){
/*this checks if the window is long or tall, then
decides how many leaves it will make based off of that.
i need to figure out a clearer reason why this works*/
var ratio = windowWidth/windowHeight;
var maxLeaves;
if (ratio >=1) {
maxLeaves = windowWidth*2 / spacing;
} else {
maxLeaves = windowHeight*2 / spacing;
}
for (var i=0; i<=maxLeaves; i++) { //this one handles the first row
for (var j=1; j<=maxLeaves; j++) { //this one handles repeating the first row
push();
translate(j*-spacing, 0); //this offsets each row to the left by one leaf
individualLeaf(i, j);
//noLoop(); //this halts the drawing process. comment this out if you want flashing colors.
pop();
}
}
}
function individualLeaf(xpos, ypos){
ellipseMode(CENTER); //this makes sure the rotations don't start at a corner
translate(spacing + xpos*spacing, ypos*spacing) //this is to create the rows
rotate(radians(90 - (30*xpos)))//this is to rotate individual leaves AND borders
noFill(); //the borders begin!
strokeWeight(leafHeight/6);
strokeCap(SQUARE); //makes sure one color doesn't overlap another like with a circular cap
arc(0, 0, leafWidth, leafHeight, PI/2, PI + PI/2); //same shape as the ellipse!
stroke(255) //makes the second stroke white. black is the initial value!
arc(0, 0, leafWidth, leafHeight, PI + PI/2, PI/2);
//below are the green parts of the leaves.
//i've commented out a code that makes some random, warm colored leaves.
var red = random(15);
var green = random(15);
var blue = random(15);
//fill(255, green, blue);
var coldHue = map(mouseY, 0, windowHeight, -150, 150);
fill(135+red-coldHue,190+green,70+blue+coldHue);
noStroke();
ellipse(0, 0, leafWidth, leafHeight);
}