Coding Art

Lesson 7 - Shooting Diagonal Lines

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(340, 340);
    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
    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() {
    stroke(random(0, 360), 100, 100);
    var x = random(width);
    var y = random(height);
    var x2 = 20;
    var y2 = 2*x2 - 2*x + y;
    line((x), (y), (x2), (y2));
}

Explanation of the draw function!!:

function draw() { // tells the computer we are making the art now
    stroke(random(0,360), 100, 100); // makes the lines a random color of the rainbow
    var x = random(width); //var declares a variable and gives it a name and then = gives it a value
    var y = random(height); // random width and height is how long the lines will be
    var x2 = 20; // where the lines start shooting from, in this case 20 pixels to the right
    var y2 = 2*x2 - 2*x + y;  // sets the second point of the line
    line((x), (y), (x2), (y2));  //when you draw these lines you just call on the variable you declared previously
}

Final Code for this Lesson!

function setup() {
    createCanvas(340, 340);
    colorMode(HSB);
}
function draw() {
    stroke(random(0, 360), 100, 100);
    var x = random(width);
    var y = random(height);
    var x2 = 20;
    var y2 = 2*x2 - 2*x + y;
    line((x), (y), (x2), (y2));
}

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

Your Finished Product Should Look Something Like This!