xxxxxxxxxx
let sizeSlider;
let lastInput;
let input;
function setup() {
//createCanvas(windowWidth, windowHeight);
createCanvas(800, 800);
background('white');
penColor = 'red';
sizeSlider = createSlider(0, width / 2, width / 4);
sizeSlider.position(width / 2 - 200, windowHeight * 7 / 8);
sizeSlider.style("width", "400px");
lastInput = 0;
input = 0;
}
function draw() {
noStroke();
drawColorBar();
if (mouseIsPressed) {
if (mouseY < 20) {
//if mouse in color bar
changeColor();
} else {
fill (penColor);
ellipse(mouseX, mouseY, 20, 20);
}
}
/// rect to circle
lastInput = input;
input = sizeSlider.value();
if (lastInput != input) {
push();
fill(220);
noStroke();
rectMode(CENTER);
background(255);
rect(width / 2, height / 2, 800, 800, sizeSlider.value());
pop();
}
}
function changeColor() {
if (mouseX < width/6) {
penColor = 'red';
} else {
if (mouseX < width/3) {
penColor = 'orange'
} else {
if (mouseX < width/2) {
penColor = 'yellow';
} else {
if (mouseX < width/1.5) {
penColor = 'green';
} else {
if (mouseX < width/1.2) {
penColor = 'blue';
} else {
if (mouseX < width) {
penColor = 'purple';
} else {
}
}
}
}
}
}
}
function drawColorBar() {
fill ('red');
rect(0,0,width/6,20);
fill ('orange');
rect(width/6,0,width/6,20);
fill ('yellow');
rect(width/3, 0, width/6,20);
fill ('green');
rect(width/2, 0, width/6,20);
fill ('blue');
rect(width/1.5, 0, width/6, 20)
fill ('purple');
rect(width/1.2, 0, width/6,20);
}