Coding Art

Lesson 18 - Changing Colors of Clicking Circles

JavaScript- Coding language that makes things interactive

Function- Set of Steps that tells the computer how to do or make something

Variables- giving a name to a value so that we can easily call upon that name and get that value quicker

If,Then Statement- IF this happens THEN i want this to happen, ELSE i want something else to happen

Since we're building from the last lesson we just add on after draw function!

function keyPressed() {
 print(key);
 if (key == 'R') {
   fill(255,0,0);
  } else if (key == 'G') {
   fill(0, 255, 0);
  } else if (key == 'B') {
   fill(0,0,255);
  }
}

Explanation of the this function!:

function keyPressed() { // when we press a key on the keyboard we want something to happen
 print(key); // making which keys we can press
 if (key == 'R') { // if we press the R key the color is red
   fill(255, 0, 0);
  } else if (key == 'G') { // if we press the G key the color is green
   fill(0, 255, 0);
  } else if (key == 'B') { // if we press the B  key the color is blue
   fill(0, 0, 255);
  }
}

Final Code for this Lesson!

function setup() {
    createCanvas(400, 400);
}

var diameter = 30;

function draw() {
    if (mouseIsPressed) {
        ellipse(mouseX, mouseY, diameter);
      }
}
function keyPressed() {
print(key);
if (key == 'R') {
 fill(255,0,0);
} else if (key == 'G') {
 fill(0, 255, 0);
} else if (key == 'B') {
 fill(0,0,255);
}
}

Hint! *Press Run and Scroll Up to See What You Made*

Your Finished Product Should Look Something Like This!