/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://studio.sketchpad.cc/sp/pad/view/ro.-Ks$GLv8877/rev.2297
 * 
 * authors: 
 *   Creative People
 *   

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



// This is a comment (note).  It will not be executed by the computer.
// You can use comments to describe what your program does.

// This defines how big your drawing area is.
// There is a coordinate system. And (0,0) is at the top left
// and (300,300) is at the bottom right
size(300,300);

// draw a line from top left to the bottom right
line(0,0,300,300);

// draw a line from bottom left to the top right


// you can draw shapes too, like a rectangle
// the first two numbers defines the top left corner of the shape.
// the last two numbers decides the width and height
rect(150,150,50,50);

// here is an ellipse (or could be a cicle)
// the first two parameters (values you put into a function) are for the center position
// the last two are for the width and height
ellipse(100,150,50,50);

// Let's add some color
// use http://hslpicker.com to pick a color
// copy the RGB (Red, Green, Blue) values that look like this: (162, 0, 255)
// and paste them into the fill function.  All the following shapes will have this fill color
// until a new color is defined
fill(68, 120, 187);
rect(220,150,50,50);

// try making a different colored ellipse, but make it more oval

// all our shapes have a border or stroke around them
// we can change the width and color of it. This only affects the following shaps drawn.
strokeWeight(2); //width
stroke(0,0,180); //color
rect(50,50,50,50);

// strokeWeight() and stroke() also apply to lines.
// fill() only applies to shapes
line(0,150,300,150);



// We are going to create our own function that the computer will call like 30-60 times a second
// This can be used to make animations and make it look like the computer is drawing all on its own
// This examples uses variables that change over time, but all the drawing methods are
// the same as above

// play with this number
int blockSize = 7;

int posX = -blockSize;
int posY = height-blockSize;
int colorValue = 0;
int edgeBuffer = 0;
void draw()
{
    //make thin black border
    stroke(0);
    strokeWeight(1);
    
    // scoot this block over a bit
    posX+=blockSize;
    
    // check if this position is going to be off the edge of the pyramid
    if(posX >= width - edgeBuffer)
    {
        //if it is then move up and start back at the far left
        edgeBuffer += blockSize;
        posX = edgeBuffer;
        posY -= blockSize;
    }
    // if we are at the top, stop!
    if(edgeBuffer >= width/2) return;
    
    // fill color based on the y position of the block being drawn
    fill((1-(posY/(height-blockSize)))*255);
    
    //draw the block
    rect(posX,posY,blockSize,blockSize);
    
}