xxxxxxxxxx
242
//declare left and right button variables
var x = 50;
var y = 320;
var d = 50;
var x2 = 500;
let leftButtonPressed=false;
let rightButtonPressed=false;
//declare slider variables
let barBlue = 0;
let barY = 0;
let topSliderX, midSliderX, bottomSliderX;
let sliderRadius = 15;
let barLeftX = 180;
let barWidth = 220;
let barRightX;
let topBarY = 320;
let barDistance = 30;
//declare ellipse variables
let ellipseX1, ellipseY1
let ellipseX2, ellipseY2
let ellipseSize = 70;
let ratio = 0.75;
let e1R, e1G, e1B;
let e2R, e2G, e2B;
let angle1;
let angle2;
let xDirection1, yDirection1;
let xDirection2, yDirection2;
let speed;
function setup() {
createCanvas(600, 400);
//Pick background colors randomly
r = random(255);
g = random(255);
b = random(255);
//initialize slider variables
barRightX = barLeftX + barWidth;
topSliderX = barLeftX;
midSliderX = barLeftX;
bottomSliderX = barLeftX;
//initialize ellipse variables
ellipseX1 = 50;
ellipseY1 = 50;
ellipseX2 = 350;
ellipseY2 = 50;
ellipseWidth = ellipseSize/ratio;
ellipseHeight=ellipseSize*ratio;
angleMode(DEGREES);
angle1 = 60;
angle2 = 30;
xDirection1 = cos(angle1);
yDirection1 = sin(angle1);
xDirection2 = cos(angle2);
yDirection2 = sin(angle2);
speed = 1;
e1R=random(255);
e1G=random(255);
e1B=random(255);
e2R=random(255);
e2G=random(255);
e2B=random(255);
}
function draw() {
//draw background
background(r, g, b);
fill(179,255,242);
rect(x, y, d, d);
//draw right background change button
fill(179,204,255);
rect(x2,y,d,d);
//reset slider variables
barY = 300;
barBlue = 0;
//draw slider bars
for (barY = topBarY; barY < (topBarY + 3 * barDistance); barY += barDistance) {
strokeWeight(5);
stroke(127, 127, barBlue);
line(barLeftX, barY, barRightX, barY);
barBlue += 127;
}
/*BENBEN:change slider button color failed
if (dist(topSliderX, topBarY, mouseX, mouseY) < sliderRadius)
{
noStroke();
fill(27, 127, 0);
circle(topSliderX, topBarY, 2 * sliderRadius);
}
if (dist(midSliderX, topBarY, mouseX, mouseY) < sliderRadius)
{
noStroke();
fill(27, 127, 127);
circle(midSliderX, topBarY, 2 * sliderRadius);
}
if (dist(bottomSliderX, topBarY, mouseX, mouseY) < sliderRadius)
{
noStroke();
fill(27, 127, 255);
circle(bottomSliderX, topBarY, 2 * sliderRadius);
}*/
//rollover square button color
if(mouseX>x && mouseX < x+d && mouseY > y && mouseY < y+d)
{ fill(204,229,255);
rect(x, y, d, d);
}
if(mouseX>x2 && mouseX < x2+d && mouseY > y && mouseY < y+d)
{ fill(204,255,255);
rect(x2, y, d, d);
}
//controrl slider movement
if (mouseIsPressed) {
//top slider circle
if (dist(topSliderX, topBarY, mouseX, mouseY) < sliderRadius) {
if (mouseX < barLeftX) {
topSliderX = barLeftX;
} else if (mouseX > barRightX) {
topSliderX = barRightX;
} else {
topSliderX = mouseX;
}
}
//middle slider circle
if (dist(midSliderX, topBarY + barDistance, mouseX, mouseY) < sliderRadius) {
if (mouseX < barLeftX) {
midSliderX = barLeftX;
} else if (mouseX > barRightX) {
midSliderX = barRightX;
} else {
midSliderX = mouseX;
}
}
//bottom slider circle
if (dist(bottomSliderX, topBarY + 2 * barDistance, mouseX, mouseY) < sliderRadius) {
if (mouseX < barLeftX) {
bottomSliderX = barLeftX;
} else if (mouseX > barRightX) {
bottomSliderX = barRightX;
} else {
bottomSliderX = mouseX;
}
}
}
//draw the slider circles
noStroke();
fill(127, 127, 0);
circle(topSliderX, topBarY, 2 * sliderRadius);
fill(127, 127, 127);
circle(midSliderX, topBarY + barDistance, 2 * sliderRadius);
fill(127, 127, 255);
circle(bottomSliderX, topBarY + 2 * barDistance, 2 * sliderRadius);
//control ellipse size
ellipseSize=(topSliderX-barLeftX)*0.3+70;
//control ellipse speed
speed=(midSliderX-barLeftX)*0.05+1;
//control ellipse direction & control ellipse color
e1R=(bottomSliderX-barLeftX)/2+r+50;
e1G=(bottomSliderX-barLeftX)/2+g-50;
e1B=(bottomSliderX-barLeftX)/2+b/2;
e2R=(bottomSliderX-barLeftX)/2+r-50;
e2G=(bottomSliderX-barLeftX)/2+g+50;
e2B=(bottomSliderX-barLeftX)/2+b*2;
if (ellipseX1 < ellipseWidth / 2 || ellipseX1 > width - ellipseWidth / 2) {
xDirection1 = -1 * xDirection1;
}
if (ellipseY1 < ellipseHeight / 2 || ellipseY1 > 300 - ellipseHeight / 2) {
yDirection1 = -1 * yDirection1;
}
if (ellipseX2 < ellipseWidth / 2 || ellipseX2 > width - ellipseWidth / 2) {
xDirection2 = -1 * xDirection2;
}
if (ellipseY2 < ellipseHeight / 2 || ellipseY2 > 300 - ellipseHeight / 2) {
yDirection2 = -1 * yDirection2;
}
//draw ellipse
//fill('white')
fill(e1R, e1G, e1B);
//ellipseHeight = ratio * ellipseWidth;
ellipseWidth = ellipseSize/ratio;
ellipseHeight=ellipseSize*ratio;
ellipse(ellipseX1, ellipseY1, ellipseWidth, ellipseHeight);
ellipseX1 = ellipseX1 + xDirection1 * speed;
ellipseY1 = ellipseY1 + yDirection1 * speed;
fill(e2R, e2G, e2B);
//fill('red');
//ellipseHeight = ratio * ellipseWidth;
ellipse(ellipseX2, ellipseY2, ellipseWidth, ellipseHeight);
ellipseX2 = ellipseX2 + xDirection2 * speed;
ellipseY2 = ellipseY2 + yDirection2 * speed;
//change background color when left button is pressed
if(leftButtonPressed) {
r = random(255);
g = random(255);
b = random(255);
leftButtonPressed=false;
}
//change ellipse shape when right button is pressed
if(rightButtonPressed) {
ratio= 1/ ratio;
rightButtonPressed=false;
}
}
function mousePressed() {
//change background color when button clicked
if (mouseX > x && mouseX < x + d && mouseY > y && mouseY < y + d) {
leftButtonPressed=true;
}
if (mouseX > x2 && mouseX < x2 + d && mouseY > y && mouseY < y + d) {
rightButtonPressed=true;
}
}