var sessionLength = 25,
sessionLengthSetter = 25,
breakLength = 5,
state = 0,
time = 0,
startTime = 0,
timeDifference = 0,
pieStart = 270,
pieEnd = 630,
hours = 0,
minutes = 0,
seconds = 0,
radius = 0,
targetRadius = 0,
restRadius = 0,
minRadius = restRadius - restRadius / 2,
maxRadius = restRadius,
k = .1,
dampening = 0.75,
velocity = 0,
locationX,
locationY,
mouseIn = false;
var mp3 = 'http://soundbible.com/grab.php?id=1690&type=mp3';
var audio = new Audio(mp3);
function setup() {
var myCanvas = createCanvas(windowWidth, windowHeight);
frameRate(30);
myCanvas.parent('myContainer');
locationX = width / 2;
locationY = height / 2;
restRadius = min(height, width) - 15;
minRadius = restRadius - restRadius / 2;
maxRadius = restRadius;
ellipseMode(CENTER);
noStroke();
}
function draw() {
clear();
fill(235);
//rules for mouse location to influence springy circle radius
if (dist(locationX, locationY, mouseX, mouseY) * 2 < minRadius) {
mouseIn = true;
}
if (dist(locationX, locationY, mouseX, mouseY) * 2 > minRadius && dist(locationX, locationY, mouseX, mouseY) * 2 < maxRadius && mouseIn == false) {
targetRadius = dist(locationX, locationY, mouseX, mouseY) * 2;
var force = k * (targetRadius - radius);
velocity = dampening * (velocity + force);
radius += velocity;
} else {
var force = k * (restRadius - radius);
velocity = dampening * (velocity + force);
radius += velocity;
}
if (dist(locationX, locationY, mouseX, mouseY) * 2 > maxRadius) {
mouseIn = false;
}
//initial state
if (state === 0) {
ellipse(locationX, locationY, radius, radius);
fill(0, 215, 255);
$("#timeDisplay").html("POMODORO TIME");
}
//session timer state
if (state === 1) {
timeDifference = millis() - startTime;
pieStart = map(timeDifference, 0, time, 270, 630);
arc(width / 2, height / 2, radius, radius, radians(pieStart), radians(pieEnd), PIE);
//time display calculation
var duration = moment.duration(time - timeDifference);
hours = duration.humanize();
//hours = floor((time - timeDifference) / 3600000);
// minutes = floor(((time - timeDifference) / 60000) % 60);
// seconds = floor(((time - timeDifference) / 1000) % 60);
$("#timeDisplay").html("work for
" + hours);
if (time - timeDifference <= 0) {
audio.play();
state = 2;
time = breakLength * 60000;
//record the current time
startTime = millis();
}
}
//break timer state
if (state === 2) {
timeDifference = millis() - startTime;
pieStart = map(timeDifference, 0, time, 270, 630);
arc(width / 2, height / 2, radius, radius, radians(pieStart), radians(pieEnd), PIE);
//time display calculation
var duration = moment.duration(time - timeDifference);
hours = duration.humanize();
//hours = floor((time - timeDifference) / 3600000);
//minutes = floor(((time - timeDifference) / 60000) % 60);
//seconds = floor(((time - timeDifference) / 1000) % 60);
$("#timeDisplay").html("take a break for
" + hours);
if (time - timeDifference <= 0) {
audio.play();
state = 1;
time = sessionLength * 60000;
//record the current time
startTime = millis();
}
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
locationX = width / 2;
locationY = height / 2;
restRadius = min(height, width) - 15;
minRadius = restRadius - restRadius / 2;
maxRadius = restRadius;
}
//-----selectors for click events-----
//plus btn session length
$("#slp").click(function() {
sessionLength++;
$("#sl").html(sessionLength);
})
//minus btn session length
$("#slm").click(function() {
sessionLength--;
if (sessionLength < 0) {
sessionLength = 0;
}
$("#sl").html(sessionLength);
})
//plus btn break length
$("#blp").click(function() {
breakLength++;
$("#bl").html(breakLength);
})
//minus button length
$("#blm").click(function() {
breakLength--;
if (breakLength < 0) {
breakLength = 0;
}
$("#bl").html(breakLength);
})
//--start btn code--
$("#start").click(function() {
$("#menu").animate({
top: '-550px'
}, 1200);
$("#closeBtn").animate({
top: '5px',
left: '5px'
}, 1200);
state = 1;
//set time to a number of milliseconds
sessionLengthSetter = sessionLength;
time = sessionLength * 60000;
//record the current time
startTime = millis();
})
//--close btn code--
$("#closeBtn").click(function() {
if (state === 1 || state === 2) {
state = 0;
//sessionLength = 25;
$("#sl").html(sessionLength);
$("#menu").animate({
top: '0px'
}, 1200)
$("#closeBtn").animate({
top: '-40px'
}, 1200)
}
})