xxxxxxxxxx
75
let input, button, color, blank;
var x = 250
var y = 250
var xVel = 2
var yVel = 3
function setup() {
createCanvas(500, 500);
input = createInput();
input.position(0,0);
button = createButton('change color (red, blue, yellow, etc. or "reset")');
button.position(0,20);
button.mousePressed(change);
}
function draw() {
background(100);
noStroke();
if (color == 'blue') {
fill(0, 0, 255) } // using RGB color codes
if (color == 'red') {
fill(255, 0, 0) } //using RGB color codes
if (color == 'green') {
fill(0, 255, 0) } // using RGB color codes
if (color == 'yellow') {
fill(255, 255, 0) } // using RGB color codes
if (color == 'magenta') {
fill('magenta') } // using CSS color codes
if (color == 'maroon') {
fill('maroon') } // using CSS color codes
if (color == 'reset') {
fill('#ffffff') } // using six-digit hexidecimal codes (white)
if (color == 'black') {
fill('#000') } // using three-digit hexidecimal codes
if (color == 'brown') {
fill('saddlebrown') }
if (color == 'cyan') {
fill('cyan') }
if (color == 'swamp green') {
fill(0,255,0,75) } // using RGBA color codes
if (color == 'dark green') {
fill(0,100,0) }
if (color == 'orange') {
fill('orange') }
if (color == 'rainbow.RB') {
fill(x/2,0,y/2) }
if (color == 'rainbow.RG') {
fill(x/2,y/2,0) }
if (color == 'rainbow.GB') {
fill(0,x/2,y/2) }
if (color == 'pink') {
fill('#ff69b4') }
if (color == 'purple') {
fill(150, 0, 255) }
ellipse(x, y, 50, 50);
x += xVel;
if (x >= 475) {
xVel = -xVel }
if (x <= 25) {
xVel = -xVel }
y += yVel;
if (y >= 475) {
yVel = -yVel }
if (y <= 25) {
yVel = -yVel }
}
function change() {
const hue = input.value();
color = hue;
input.value("");
}