Coding Art

Lesson 4 - The Erasing Circles

Before we start let’s introduce 4 things needed to make our Art

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

First we have to get some things ready with the setup function!

function setup() {
	createCanvas(400, 400);
	background(255);
	colorMode(HSB);
	noStroke();
}

Explanation of the setup!:

function setup() {  //  what gets run first when you hit the play button, sets background color, color mode etc.
  createCanvas(400, 400); // creates our picture frame like a canvas that you paint on
  background(255); //  sets the background color, 0-255. 0 is black and 255  white anything in between is gray
  colorMode(HSB); // HUE, SATURATION AND BRIGHTNESS - the color, intensity of that color, how light or dark that color is
  noStroke(); // no borders on our circles
}

Next we can actually start drawing with the draw function

 function draw() {
  if (mouseIsPressed) {
    fill('rgb(255, 255, 255)');
  } else {
fill(random(0,360), 70, 90);
  }
  ellipse(mouseX, mouseY, 50, 50);
}

Explanation of the draw function!!:

function draw() {  // tells the computer we are making the art now
  if (mouseIsPressed) { // if the mouse is pressed then we want something to happen
    fill('rgb(255, 255, 255)'); // in this case we want to make the circles white (this is the RGB code for white)
  } else { // otherwise if the mouse isn’t pressed we want something else to happen
fill(random(0,360), 70, 90); // in this case we want our circles to be random colors of the rainbow
  }
  ellipse(mouseX, mouseY, 50, 50); // we want out circles to follow our mouse
}

Final Code for this Lesson!

function setup() {
	createCanvas(400, 400);
	background(255);
	colorMode(HSB);
	noStroke();
}

function draw() {
  if (mouseIsPressed) {
    fill('rgb(255, 255, 255)');
  } else {
fill(random(0,360), 70, 90);
  }
  ellipse(mouseX, mouseY, 50, 50);
}

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

Your Finished Product Should Look Something Like This!