xxxxxxxxxx
// USER INTERACTION
// This sketch includes examples of:
//
// - function keyPressed()
// - function mousePressed()
// - if (keyIsPressed)
// - if (mouseIsPressed)
// - translate()
// - rotate()
// - push() and pop()
// - random()
// - variables: width, height
// - variables: mouseX, mouseY
// - custom variables
// - custom if statements
//
//
//
//
// ---------------------------------
// GLOBAL VARIABLE SPACE -----------
let angle = 0;
let middleR;
let middleG;
let middleB;
let circleR;
let circleG;
let circleB;
let topR;
let topB;
let topG;
let bottomR;
let bottomG;
let bottomB;
let backgroundR;
let backgroundG;
let backgroundB;
let topY;
let bottomY;
// ---------------------------------
// MAIN FUNCTIONS ------------------
function setup() {
createCanvas(400, 400);
// MODES
angleMode(DEGREES);
rectMode(CENTER);
// COLORS
middleR = random(255);
middleG = random(255);
middleB = random(255);
circleR = random(255);
circleG = random(255);
circleB = random(255);
topR = random(255);
topB = random(255);
topG = random(255);
bottomR = random(255);
bottomG = random(255);
bottomB = random(255);
backgroundR = random(255);
backgroundG = random(255);
backgroundB = random(255);
topY = 10;
bottomY = 390;
// STROKE
noStroke();
}
function draw() {
background(backgroundR, backgroundG, backgroundB);
// MIDDLE COLOR
if(mouseIsPressed){
middleR = random(255);
middleG = random(255);
middleB = random(255);
}
fill(middleR, middleG, middleB);
// MIDDLE SHAPE
push();
translate(width/2,height/2);
rotate(angle);
rect(0,0,100,100);
angle++; //ADD 01 TO ANGLE
// angle+=10; //ADD 10 TO ANGLE
pop();
// TOP
fill(topR,topG,topB);
rect(width/2,topY,width,25);
// BOTTOM
fill(bottomR,bottomG,bottomB);
rect(width/2,bottomY,width,25);
// CIRCLE @ (mouseX,mouseY)
fill(circleR, circleG, circleB);
circle(mouseX, mouseY, 20);
}
// ---------------------------------
// INTERACTIVE FUNCTIONS -----------
function keyPressed(){
if(keyCode == UP_ARROW){
bottomY-= 10;
if(bottomY < 0){
bottomY = 390;
}
}
if(keyCode == DOWN_ARROW){
topY+= 10;
if(topY > height){
topY = 10;
}
}
}
function mousePressed(){
backgroundR = random(255);
backgroundG = random(255);
backgroundB = random(255);
}
// ---------------------------------
// ---------------------------------