Coding Art

Lesson 16 - Vertical Lines

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);
    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(400, 400); // creates our picture frame like a canvas that you paint on
  colorMode(HSB); // HUE, SATURATION AND BRIGHTNESS - the color, intensity of that color, how light or dark that color is
}

Then we add a Variable!

var i = 5;

Exaplanation of Variable!

var i = 5; // makes the variable i have a value of 5

Next we can actually start drawing with the draw function

function draw() {
    stroke(random(0,360), 100, 100);
    var startX = i;
    var startY = 0;
    var endX = i ;
    var endY = height ;
    line(startX, startY, endX, endY);
    i = i + 10;
    }

Explanation of the draw function!!:

function draw() { //  tells the computer we are making the art now
    stroke(random(0,360), 100, 100); // we want each line to be a different color of the rainbow
    var startX =  i; // creates a variable equal to the variable i which equals 5
    var startY = 0; // creates a variable that is equal to 0
    var endX = i ;  // creates a variable equal to the variable i which equals 5
    var endY =height; // creates a variable equal to the height of the canvas
    line(startX, startY, endX, endY); // creates the line

    i = i + 10;  // adds a new line 10 pixels down each time
    }

Final Code for this Lesson!

function setup() {
    createCanvas(400, 400);
    colorMode(HSB);
}
var i = 5;
function draw() {
    stroke(random(0,360), 100, 100);
    var startX = i;
    var startY = 0;
    var endX = i ;
    var endY = height ;
    line(startX, startY, endX, endY);
    i = i + 10;
    }

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

Your Finished Product Should Look Something Like This!