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.
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.
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 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.min.js"></script> |