challenge1 Vers1

RAPiDS
Restate, (Find) Analogies, Plan a Solution, Divide Problem, Start where you Know

Problem: Build a stained glass window pattern. Start by splitting screen

Restate/Analogies: Use line() function to make 9 lines. Draw rectangles at certain intersectional points at the top, middle, and bottom of screen


1. drawLines() {
-You need to make 3 sets of 3 lines (9 total)
-Up strokeweight if need to

-3 lines per set: two outer and one center
-Start with horizontal set by plotting the center line
	If it's size(500, 500), it should start 0, 250 and end 500, 250
-Continue horizontal set by plotting outer lines
	Offset lines by 50
	Upper outer: Start 0, 200 and end 500, 200
	Lower outer: Start 0, 300 and end 500, 300

(-Decided horizontal lines were too offset so change offset by 10
	Upper outer: Start 0, 240, an end 500, 240
	Lower outer: Start 0, 260, and end 500, 260

Changing offset again by 25
	Upper outer: Start 0, 225 End 500, 225
	Lower outer: Start 0, 275 End 500, 275)

Now to plot first vertical set.
	Middle line:
	Half of half of the screen (125)
	Start 125, 0 End 125, 500

To plot second vertical set
	Middle line is half of half of the second part of the screen (375
	Start 375, 0, End 375, 500
}

2. Implementing ETC measures
	Change all line() arguments to be variation of width and height
		creation of offset variable to hold offset number
		4 types of arguments: width, height, a change in width, a change in height

3. Draw borders

	line(

4. drawShapes() {

First, write line to set color

Top:
Next there are two rectangles at the top
	First: Empty space between start and upper line
		Y value is 25
Then ETC these shapes

Middle:
Shapes -> left of first intersection, middle, right of second intersection
	First
		Single rect with line passing through at the middle, x is
	Second:



Bottom:
Shapes -> Between inner and outer lines, with middle line passing through for both vertical sets


}

----
FIRST DRAFT
What went wrong?
	I began adding too much complexity for no reason. Didn't separate the stages of programming (planning, coding, improving) As a 	result the program was haphazardly written
	How to improve for next time: Clearly separate each stage and plan first. Start out with a pseudocode of the program. Then work on adding complexity. Focus on reaching the minimum first before jumping ahead.

int offset = 25; //How much the lines in each set are offset by

void setup() {
  size(500, 500);
  background(255);
}

void draw() {
  drawShapes();
  drawBordersAlongScreen();
  drawLines();

}

void drawLines() { // Draws the 3 sets of 9 lines that split up the stained glass
   strokeWeight(1);

   //horizontal set

  line(0, (height/2), width, (height/2)); //central
  line(0, ((height/2) - offset), width, ((height/2) - offset)); //upper outer
  line(0, ((height/2) + offset), width, ((height/2) + offset)); //lower outer

  //first vertical set (left side)

  line( (width/4), 0, (width/4), height ); //central
  line( ((width/4) + offset), 0, ((width/4) + offset), height ); //upper outer
  line( ((width/4) - offset), 0, ((width/4) - offset), height ); //lower outer

  //second vertical set (right side)

  line( ((width/2) + (width/4)), 0,  ((width/2) + (width/4)), height ); //central
  line( ((((width/2) + (width/4)) + offset)), 0, ((((width/2) + (width/4)) + offset)), height ); //lower outer
  line( ((((width/2) + (width/4)) - offset)), 0, ((((width/2) + (width/4)) - offset)), height ); //upper outer

}

void drawShapes() { //Allows sections of the stained glass (top, middle, bottom) to be filled in with a transparent orange
 strokeWeight(1);
 fill(255, 165, 0, 175); //transparent orange

 //top shapes
  rect(0, 0, ((width/4)-offset), offset);
  rect(((((width/2) + (width/4)) + offset)), 0, (width/4), offset);

 //middle shapes
  rect(75, 225, 25, 50);
  rect(350, 225, 25, 50);

}

void drawBordersAlongScreen() {
  strokeWeight(5);

  line(0, 0, width-1, 0); //along top
  line(width-1, 0, width-1, height-1); //right side
  line(width-1, height-1, 0, height-1);//bottom
  line(0, height-1, 0, 0); //left side
}