xxxxxxxxxx
// student POC project done for a creative coding class where we had to visualise time in a new way.
// one of my ideas was to try and show how time is subjective, specifficaly when having intrusive and depressive thoughts.
// the ball bounces around and shrinks after each intruivse thought. The thoughts spawn randomly and time slows down for as for an unknown random period of time as well.
// the interactive and optimistic part of this code is that you can click away the intrusive thoughts. Fighting back makes your circle grow, corrects the time, and it make sthe thought go away.
// this is the first version of the program and I plan to improve on this in the future
// Enjoy!
//describe('A ball bouncing around the screen. Time stops and the ball slows down and shrinks everytime an intrusive thought pops out. To fight against the intrusive thoughts keep clicking with your left mouse button, untill the phrase is gone.');
// globals
let x = 0;
let y = 0;
let squareSize = 101;
let squareSpeedX = 1;
let squareSpeedY = 1;
let squareBorders = 100;
let textOpacity = 255;
let clockSpeed = 1;
let slowdownInterval = 2000; // Interval for slowdown to occur (in milliseconds)
let slowdownDuration = 5000; // Duration of the slowdown (in milliseconds)
let slowdownTimer = 0; // Timer to track the current slowdown time
let isSlowedDown = false; // Flag to indicate if the square and clock are currently slowed down
let slowedDownTime = new Date(); // Stores the time at which the slowdown occurred
let phrases; // Array to store the phrases from the JSON object
let displayedPhrase = "";
function preload() {
// Load the JSON file
phrases = loadJSON("phrases.json");
}
function setup() {
createCanvas(windowWidth, windowHeight);
describe('A ball bouncing around the screen. Time stops and the ball slows down and shrinks everytime an intrusive thought pops out. To fight against the intrusive thoughts keep clicking with your left mouse button, untill the phrase is gone.');
}
function draw() {
background(22);
if (!isSlowedDown && millis() > slowdownTimer + slowdownInterval) {
// Trigger a slowdown
isSlowedDown = true;
squareSpeedX = 0.2;
squareSpeedY = 0.2;
clockSpeed = 0; // Stop the clock
slowdownTimer = millis(); // reset clock
slowedDownTime = new Date(); // store time before "slowdown"
textOpacity = 255;
squareBorders -= 10;
squareSize -= 10;
let randomIndex = floor(random(phrases.phrases.length));
displayedPhrase = phrases.phrases[randomIndex];
}
if (isSlowedDown && millis() > slowdownTimer + slowdownDuration) {
// End the slowdown
isSlowedDown = false;
squareSpeedX = 1;
squareSpeedY = 1;
clockSpeed = 1;
slowdownTimer = millis() + slowdownInterval;
}
x += squareSpeedX;
y += squareSpeedY;
// screen collision
if (x <= 0 || x >= width - squareSize) {
squareSpeedX *= -1;
}
if (y <= 0 || y >= height - squareSize) {
squareSpeedY *= -1;
}
// characther
noStroke();
fill(90);
rect(x, y, squareSize, squareSize, squareBorders);
let time = new Date();
// only update the time if the clock is not slowed down
if (!isSlowedDown) {
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
let clock = hours + ":" + nf(minutes, 2) + ":" + nf(seconds, 2);
textAlign(CENTER);
textSize(24);
text(clock, width / 2, 50);
} else {
let hours = slowedDownTime.getHours();
let minutes = slowedDownTime.getMinutes();
let seconds = slowedDownTime.getSeconds();
let slowedDownClock = hours + ":" + nf(minutes, 2) + ":" + nf(seconds, 2);
textAlign(CENTER);
textSize(24);
text(slowedDownClock, width / 2, 50);
}
// phrase
if (displayedPhrase) {
textAlign(CENTER);
textSize(35);
let font = 'Verdana';
textFont(font);
let textColor = color(190);
fill(red(textColor), green(textColor), blue(textColor), textOpacity);
text(displayedPhrase, width / 2, height / 2);
}
}
function mouseClicked() {
squareSpeedX += 0.08;
squareSpeedY += 0.05;
squareSize += 0.1;
squareBorders += 0.01;
// text opacity
let opacityChange = 20;
textOpacity -= opacityChange;
textOpacity = constrain(textOpacity, 0, 255);
console.log(textOpacity);
}