Coding Art

Lesson 2 - Colorful Circles

Today We Will Start Our Journey into Making Art with Code

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(220);
    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(220); //  sets the background color, 0-255 black to white/in between is grey
    colorMode(HSB); // HUE, SATURATION AND BRIGHTNESS - the color, intensity of that color, how light or dark that color is
    noStroke(); // no borders on circles
}

Next we can actually start making our random circles with the draw function

function draw() {
    fill(random(0,360), 70, 90);
    ellipse(random(width), random(height), random(20, 40));
}

Explanation of the draw function!!:

function draw() { // now we tell the computer we are going to start making the art
      fill(random(0,360), 70, 90); // what color the inside of the circles will be, first random sets the random color of color, 70 is a saturation which just means that its from grey to a bright color, 90 is the brightness (0-100 0 is always black)
      ellipse(random(width), random(height), random(20, 40)); // just means we will draw an oval, in this case a circle, setting the width and height to random means where the circle will land on the canvas is random, and then we will get a random size circle between 20 and 40 pixels
  }

Final Code for this Lesson!

function setup() {
    createCanvas(400, 400);
    background(220);
    colorMode(HSB);
    noStroke();
}
function draw() {
    fill(random(0,360), 70, 90);
    ellipse(random(width), random(height), random(20, 40));
}

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

Your Finished Product Should Look Something Like This!