p5.js Draw a Window with Vars

p5.js Draw a Window with Vars.markdown

p5.js Draw a Window with Vars

combining simple shapes to create a more complex one. This time using variables to make the drawing more understandable and flexible.

A Pen by Christopher Stein on CodePen.

License.

script.js

function setup() {
    //create the Canvas
    createCanvas(windowWidth, windowHeight);

    //two start variables, all X and Y are based on these so you can change them and change the position of the window
    var startX = 50;
    var startY = 50;

    //variables for top box
    var topBoxX = startX;
    var topBoxY = startY;
    var topBoxWidth = 125;
    var topBoxHeight = 20;

    //variables inside window box
    var insideX = topBoxX + 15;
    var insideY = topBoxY + topBoxHeight;
    var insideWidth = topBoxWidth - 30;
    var insideHeight = 150;

    //variales for bottom box
    var bottomBoxHeight = 40;
    var bottomBoxWidth = topBoxWidth; //keep them the same width
    var bottomBoxX = topBoxX; //start them the same amount in
    var bottomBoxY = insideY + insideHeight;

    //variables for inside lines
    var leftX, centerX, rightX; //x locations
    var topY, middleY, bottomY; //y locations

    leftX = insideX;
    centerX = leftX + insideWidth / 2;
    rightX = leftX + insideWidth;

    topY = insideY;
    middleY = topY + insideHeight / 2;
    bottomY = topY + insideHeight; 

    //draw inside box
    strokeWeight(1);
    stroke('black');
    fill('black');
    rect(insideX, insideY, insideWidth, insideHeight);


    //draw inside lines that are grid on inside of the window
    strokeWeight(4);
    stroke('peru');
    //horizontal lines
    line(leftX, topY, rightX, topY); //top
    line(leftX, middleY, rightX, middleY); //middle horizontal
    line(leftX, bottomY, rightX, bottomY); //bottom

    //vertical lines
    line(leftX, topY, leftX, bottomY); //left
    line(centerX, topY, centerX, bottomY); //middle vertical
    line(rightX, topY, rightX, bottomY); //right



    //draw top box
    strokeWeight(1);
    stroke('black');
    fill('peru');
    rect(topBoxX, topBoxY, topBoxWidth, topBoxHeight);


    //draw bottom box
    strokeWeight(1);
    stroke('black');
    fill('peru');
    rect(bottomBoxX, bottomBoxY, bottomBoxWidth, bottomBoxHeight);
} //end setup

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.min.js"></script>