Coding Art

Lesson 17 - 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

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

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

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
}

Then we add a Variable!

var diameter = 30;

Exaplanation of Variable!

var diameter = 30; // creates a variable equal to 30

Next we can actually start drawing with the draw function

function draw() {
    if (mouseIsPressed) {
        ellipse(mouseX, mouseY, diameter);
      }
}

Explanation of the draw function!!:

function draw() { //  tells the computer we are making the art now
    if (mouseIsPressed) { // if the mouse is pressed we want something to happen
        ellipse(mouseX, mouseY, diameter); // in this case we want a circle to be made wherever we press that is equal to the variable diameter which is equal to 10
      }
}

Final Code for this Lesson!

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

var diameter = 30;

function draw() {
    if (mouseIsPressed) {
        ellipse(mouseX, mouseY, diameter);
      }
}

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

Your Finished Product Should Look Something Like This!