p5.js Draw a Window

p5.js Draw a Window.markdown

p5.js Draw a Window

combining simple shapes to create a more complex one

A Pen by Christopher Stein on CodePen.

License.

script.js

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


    //black inside window
    fill('black');
    rect(65, 70, 125 - 30, 150);

    //grid on inside of the window
    strokeWeight(4);
    stroke('Peru');

    line(65, 70, 65, 70 + 150); //left
    line(65 + 95, 70, 65 + 95, 70 + 150); //right
    x = 65 + 95 / 2;
    line(x, 70, x, 70 + 150); //middle vertical

    line(65, 70, 65 + 95, 70); //top
    line(65, 70 + 150, 65 + 95, 70 + 150); //bottom
    y = 70 + 150 / 2;
    line(65, y, 65 + 95, y); //middle horizontal

    strokeWeight(1);
    stroke('black');
  
  //top bar
    fill('peru');
    rect(50, 50, 125, 20);
  
  //bottom bar
    fill('peru');
    rect(50, 70 + 150, 125, 40);

  } //end setup

scripts

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