Coding Art

Lesson 11 - Drawing Lines That Erase

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)
}

Explanation of the setup!:

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

Next we can actually start drawing with the draw function

function draw() {
	strokeWeight(6);
  if (mouseIsPressed) {
		strokeWeight(20);
    stroke('rgb(220, 220, 220)');
  } else {
stroke(random(0,360), 70, 90);
  }

    line(mouseX, mouseY, pmouseX, pmouseY);
}

Explanation of the draw function!!:

function draw() { // tells the computer we are making the art now
   strokeWeight(6); // makes the thickness of our lines 6 pixels
  if (mouseIsPressed) { // if the mouse is pressed we want this to happen
  strokeWeight(20); // we want the thickness of our lines to be 20 pixels
    stroke('rgb(220, 220, 220)'); // we want the lines to be the same color of our background making it erase
  } else { // otherwise if we don’t press our mouse we want something else to happen
stroke(random(0,360), 70, 90); // in this case we want our lines to be random colors of the rainbow
  }

    line(mouseX, mouseY, pmouseX, pmouseY); // we want the lines to follow our mouse
}

Final Code for this Lesson!

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

function draw() {
	strokeWeight(6);
  if (mouseIsPressed) {
		strokeWeight(20);
    stroke('rgb(220, 220, 220)');
  } else {
stroke(random(0,360), 70, 90);
  }

    line(mouseX, mouseY, pmouseX, pmouseY);
}

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

Your Finished Product Should Look Something Like This!