Week 6: Finishing My Project


When I left off on Friday, I had different Shape modes that could (most of them) work together. I didn’t figure out the triangle, the draw and the eraser. On Monday, I learned how to make the color selector work. It works using the same concept as the shape mode: If-else statements. I got the basic version to work, so in order to challenge myself, I decided to have twenty five different colors. I got right to work, first I had to change my drawBox function to an if else statement, if I have 25 boxes draw all this and if I have only six then do that. That took a ton of work, because I wanted to reorganize my code so it wasn’t ridiculously long and hard to fix. After that, I went through and added colors to my twenty five boxes of code. Then, I had to make a setFillColor function that would allow the user to switch between different modes of code. I didn’t finish everything but I started it (I would later delete most of it).  The below pictures show the code that I done before Tuesday (I worked on some after school). The last picture shows how the user interface worked (not well), all of my colors were mixed up. I would click one color and a few colors down the row would appear. On Monday, I spent most of my class period trying to find the coordinates of twenty five squares.


end of monday run screen

End of monday code 1


end of monday code 2



There is a sentence I stumbled upon while reading the Lord Of The Rings: “Short cuts make for Long Delays.” I found that quote very interesting, and I remember saying to myself “Amusing”. I didn’t take it seriously. While typing up my code on Monday and for most of Tuesday, I didn’t do a good job organizing my work. Each color row has six colors in it, not eight. It turned out that the reason why the color I clicked was the color that popped up was because, I gave the computer the wrong coordinates. I decided to organize my if-else statements based off of their row. So every eight statements had the same y-axis boundary coordinates. This wouldn’t work because, two of the colors aren’t even in the panel. I had to go through, figure out what I did wrong and then fix the 24 squares. Then, I decided to work on the stroke part. I copied and pasted the code from the fill function. Then I had to calculate all the y-axis parts for 24 squares. Then, I talked to Scott, and we figured out why the draw and eraser tool weren’t working. Turns out the mousePressed can’t work inside a mouseClicked function, so I changed the location where the function is called. Since, most of my code was filled with code that I wrote and then turned into notes, then changed the code around it. So there was stuff that didn’t really work, that I had to fix. In the end though, I prevailed and finished my application.

Here are a few pictures that I drew using my code.





Scott looked at my project and told me to add a save button, which I did add. It takes pictures and saves it in my sketch file. This picture below is what my program took, not a screen shot. test

Then, I started to research more about the NAE video challenge, but I didn’t find anything about 2016’s challenge. Then I looked up the winners to get an idea of what they might have us do. Then, I decided to work on after effects.


There was a carreer talk from a man from Nepris about software engineering. He took up most of the period. I had about thirty minutes so I searched up a tutorial and got to work. This is the first part of the animation.


Today, I worked on adding color and finished the last part of the animation. This is how it looks like. The tutorial I was using used a different version of aftereffects so some of the features didn’t exist so I had to figure out how to do things manually (ex: aligning tool). The aligning tool put my scaling and other effects off position. There were these really small things that I would have to go through and fix because in the long run, that made a big difference. By the end of today, I really got the hang of keynotes and basically how after effects works. I learned more about the color. I also learned about the rotation, repeat, skew lines and more. I learned small short cuts about accessing things in after effects.




Week 5

Monday: No school, I spent my whole day in Robotics.

Tuesday: Although it took  a while for me to decide what I wanted to work on, I decided that I wanted to edit my selection panels so that I can visually see what I different options I would end up with. I went through the code and added an extra parameter to the function, an integer that would define color. Then I chose six colors and then filled the rectangles in. Then came the hard part: putting shapes inside of the tiny shape selectors. In order to do that, I had to calculate the location of each tiny square and then figure out the coordinates of the shapes I wanted to draw. At first I was getting no where because I was using a guess and check method. I was trying to eyeball the middle. I didn’t know how I could use math to solve my problems because some of my shape modes were in the center (the center of the shape) and some were in corner mode (the coordinate I input is where the top left corner of the shape is). After I “finished” the first shape (an ellipse) I wanted to change my process. I decided to draw the rectangles. As soon as I drew my problem, I found a solution. I drew my rectangles and calculated their coordinates based off the function that was in the program. Then I wrote the coordinates of my tiny rectangles down and then highlighted them for future reference (I love myself for doing that). Then, I knew that the center of the square was twenty five units more than the corner in the x axis and the y axis because 25 is half of the square’s size. After finding those coordinates and plugging them into the shape’s parameters, I would go in and change the size (the stroke weight sometimes made the shape go outside the box). During this enduever, I learned how to draw triangles.(this is was for the last few minutes of class) Then I played around with how I could make a user defined triangles. I know that the user will have to choose three points that I will have to record. The problem is that I’ve used booleans for the others so when it was off, the computer would record it as the first point. After, the boolean would be marked true, which then makes it run the other program when the boolean is true, making it the second point. Then the program using the shape’s functions draw the shape.

This is a picture of what I got done by the end of Monday:

End of Monday

Picture of my magical sheet with important info:

code stuff

Wednesday: Today I found out that I had to take the AMC 10 test (which freaked me out). I had to leave at 9:15 to take the test. I decided to do some last minute studying. I believe that it should count as physics stuff because Physics is the application of Mathematics. Since, I didn’t have much time, I would read the problem and then try and figure out the logic behind solving it. Then, I would read the answer and see how it was actually solved. The website I used (I did 2015 10 B)  (in case you’re wondering or want evidence) was https://www.artofproblemsolving.com/wiki/index.php?title=AMC_10_Problems_and_Solutions

The test ended at 10:45 ish so Physics was over when I finished the test. Later that day, I found out that for some reason Processing didn’t save my work from Monday, so I had to reprogram all the shapes selection stuff. This time, it took less time because I didn’t spend like 45 minutes guess and checking every shape, I had the coordinates and used math to make the shapes again! I took a snapshot of my work on Monday but the code didn’t show the coordinates. After school, I asked my friend (who is really good at coding) how I could keep my shapes from appearing outside of the canvas. I wanted the user to only be able to draw shapes inside the canvas. She recommended that the tool selection panel and the blue background refresh after running code. I copied my tool selection panel and pasted it at the end, ever since then, my background has been working funny.

Thursday: Back to work. I didn’t waste a single minute. I talked to Scott and he told me what I had to do in order to switch between modes. It was a ton of code that I had to type and change. Scott suggested that I use If-Else statements to change between modes but I ended up type the else if statements incorrectly. Then I had to go through the whole code and change it (20 lines or so). Another error popped up saying I had to many brackets when I didn’t. I believe I have all the important, basic code down, I just have a ton of syntax errors that I didn’t have time to fix. The program kept telling me I had to many or too little brackets, I’m not sure I did it correctly. I would try and change a bunch of code but nothing would happen. It was a bad day. I hope that I can fix the code issues or at least understand what I did wrong. On top of that, I started to organize my code, I believe that I might have messed something up when I cut and pasted code to different places. For example I found out that my if-else statements were outside the draw function. I need to seriously debug my code. Here is what I have so far. I keep getting an “expecting EOF found else” error.

boolean pen = false;

void setup ()
background (0, 250, 202);
size (1500, 1000);
void draw ()
//main recrtangle to draw on, Canvas
rect(280, 50, 1200, 900);
textAlign(CENTER, CENTER);
text (“Canvas”, 600, 50, 480, 50);

//Big rectangle for tool box
rect(50, 50, 220, 900);
fill (0);
textAlign(CENTER, CENTER);
text (“Tool Panel”, 60, 60, 200, 50);
drawBox(60, 125, “Shape Selector”, 255, 255, 255, 255, 255); //tool selector

//rect size
rect(98.5, 182.5, 20, 30);
ellipse(135+25, 182.5, 20, 20);
line(198.5, 158.5, 198.5+47.5, 158.5+47.5);
//point(pen tool)
point(72.5+25, 220+25);
triangle(135+25, 230, 145, 220+40, 135+40, 220+40);
//Eraser option
textAlign(CENTER, CENTER);
text(“Eraser”, 197.5+25, 218+25, 50, 50);
drawBox(60, 305, “Color Selecotor”, #0ACB3F, #ED0000, #FAFF17, #BE32C6, #02CEF5);
//_________________________________________________________________________________ normal sketch thing
if (mousePressed && mouseX > 280 && mouseX<1470 && mouseY> 50 && mouseY < 950 )
pen = true;
} else {
pen = false;
if (pen)

colorMode(HSB, 100);
stroke (199, 99, 98, 159);
line(mouseX, mouseY, pmouseX, pmouseY);
} else
stroke (0);

//________________________________________________________________________________Section to change modes or criteria to change modes
if (mouseX >72.5 && mouseX < 72.5+50 && mouseY > 165.5 && mouseY < 165.5+50 && mousePressed);
{mode = 1;
else if (mouseX > 135 && mouseX < 135+50 && mouseY > 157.5 && mouseY< 157.5+50 && mousePressed) {
mode = 2;
} else if (mouseX > 197 && mouseX < 197+50 && mouseY > 157.5 && mouseY > 157.5+50 && mousePressed) {
mode = 3;
} else if (mouseX > 72.5 && mouseX < 72.5+50 && mouseY > 220 && mouseY > 270 && mousePressed) {
mode = 4;
} //else if (mouseX > 135 && mouseX < 185 && mouseY > 220 && mouseY > 270) {
// mode = 5;
//} else {
// (mouseX > 197.5 && mouseX < 197.5 && mouseY > 220 && mouseY > 270) {
// mode = 6;
// }
//________________________________________________________________________________Defining the modes
if (mode = 1) drawElipse ();
else if (mode = 2) {
} else if (mode = 3) {
} else if (mode = 4) {
//else if (mode = 5) {
// drawTrig();
//else if (mode =6) {
// Erase();
////Big rectangle for tool box
//rect(50, 50, 220, 900);
//fill (0);
//textAlign(CENTER, CENTER);
//text (“Tool Panel”, 60, 60, 200, 50);
//drawBox(60, 125, “Shape Selector”, 255, 255, 255, 255, 255); //tool selector

////rect size
//rect(98.5, 182.5, 20, 30);
//ellipse(135+25, 182.5, 20, 20);
//line(198.5, 158.5, 198.5+47.5, 158.5+47.5);
////point(pen tool)
//point(72.5+25, 220+25);
//triangle(135+25, 230, 145, 220+40, 135+40, 220+40);
////Eraser option
//textAlign(CENTER, CENTER);
//text(“Eraser”, 197.5+25, 218+25, 50, 50);
////____________________________________________________________________funcction defining area
////draw box stuff
void drawBox (int x, int y, String header, int a, int b, int c, int d, int e) {
int w= 50;
float v= 12.5;
rect(x, y, 200, 157.5);
//tiny rectangles
rect(x+v, y+v+20, w, w);
rect(x+v+w+v, y+v+20, w, w);
rect(x+v+w+v+w+v, y+v+20, w, w);
rect(x+v, y+v+w+v+20, w, w);
rect(x+v+w+v, y+v+w+v+20, w, w);
rect(x+v+w+v+w+v, y+v+w+v+20, w, w);
//Title text
textAlign(CENTER, CENTER);
text(header, x, y-5, 200, 35);

PVector p1 = new PVector(0, 0);
PVector p2 = new PVector(0, 0);
//PVector p3 = new PVector (0,0);

void drawElipse() {
Boolean ellipseStarted = false;
if (ellipseStarted && pen) {
p2.set(mouseX, mouseY);
ellipse(p1.x, p1.y, (p2.x -p1.x)*2, (p2.x-p1.x)*2);
ellipseStarted = false;
} else {
p1.set(mouseX, mouseY);
ellipseStarted = true;

void drawRect() {
Boolean rectStarted = false;
if (true) { // if it matters
if (rectStarted && pen) {
p2.set(mouseX, mouseY);
rect(p1.x, p1.y, p2.x-p1.x, p2.y-p1.y);
} else {
p1.set(mouseX, mouseY);

void drawLine() {
Boolean lineStarted = false;
if (true ) {
if (lineStarted && pen) {
p2.set(mouseX, mouseY);
line(p1.x, p1.y, p2.x, p2.y);
lineStarted = false;
} else {
p1.set(mouseX, mouseY);
lineStarted = true;
//void mouseClicked () {
// boolean trigStarted = false;
// if (true) {
// if (trigStarted && pen) {
// p3.set(mouseX, mouseY);
// triangle(p1.x, p1.y, p2.x, p2.y, p3.x, p2.y);
// } else {
// p2.set (mouseX, mouseY);

// }
// }

Friday: I typed up my blog which as of now is 1372 words it was 9:55 when I started working on my code.

Scott helped me debug the code. Then, the code finally worked. I got the ellipse tool to only work when it is “in bounds” I did this by changing the pen boolean to a boundary. The functions only work if it is in bounds. I spent the last one hour debugging with Scott and organizing my code. The code finally works but for some reason, whatever you draw the canvas and the tool panel overrides it. You can see the tabs in the top right corner. I drew a circle but the canvas covered it again. I think I have an idea for fixing my boundaries. First I can add the background color in my draw function. End of FridayThen, I have to somehow keep the canvas static. The background part colored the whole thing blue, but changing the canvas’ location to setup worked. The canvas is static. It just bleeds into the boundaries a bit.

Friday 2







Week 4

This week I made some major improvements.


On Monday, I went through the internet and tried to find a way where I could learn how to make a rectangle and a circle tool. I played around with mouseClicked() and mouseDragged () but nothing happened. My code didn’t do what I wanted. Then, I went around the internet and tried to understand some drawing codes. One website I found was: https://forum.processing.org/one/topic/drawing-application-need-help.html

The website didn’t have anything that would help me, but it was interesting to skim the comments and try to understand what was happening. I tried to do it like the picture below but that didn’t work. Monday ex) 1I brainstormed different ways that I can make the rectangle work. I decided that I could make a function that drew lines between two point that I would click. A rectangle only has two different (x,y) coordinates, the other two are a mix of the opposite coordinates. I started to do that but I couldn’t figure out how to use the mouseClicked() function. Class ended before I figured it out.


On Tuesday, I asked Scott right when class started for help. He helped me figure out how to draw the rectangle by only clicking the two parts. Then, I tried to apply the same concept to circles. The problem was that, the computer drew the radius, so I had to multiply it by two in order to make Processing have a diameter of where I clicked my mouse the second time. Then, I coded for the line. I have all the code in the same program but the programs that I don’t use are commented. After figuring out my shapes, I decided to experiment around with filling the small option rectangles. I finished coloring in the small squares. Now I need to place shapes in the shape tool. Then, I need to turn them into option buttons so that I can change modes.

Some screen shots:

circle tool tuesday Line code tuesday Rectangle and line tools work at the same time Tuesday Tuesday code snap


I had a Student Ambassador tour so I had to leave at 9:20. In thirty minutes of class time I had. I made my blog. I took notes on Monday and Tuesday, but I turned it into a blog on Wednesday.


I read a few Physics stuff (Electric Field and Movement of Charge) before I went to the field trip (engineering conference)

Week 3

Monday 2/1/16:

Today, I learned how to make text appear on the screen. Turns out, the text problem had nothing to do with active and static mode! The reason the error popped was because I wasn’t putting the text commands in a function. It had to go under void draw(). The reason why the text wouldn’t appear then was because, the text’s color was automatically set for white. After I solved that problem with Scott, I worked on trying to center it and getting it where I want it. Then I went throught the coding tutorial in http://www.codingforart.com/category/technical/. Then, I  learned how to make functions and how they work. I tried to make my own function. I started to make a rectangle with more rectangles inside of it. I left of, still fixing a few stuff. I only had two rectangles.



On Tuesday, we spent about an hour and a half listening to important people from Turner Industries talk about their job. Then, I got right to work. First I wanted to work on my function. I kept adding things that I can later control then I would end up changing them. Finally, I had some space between the two tiny squares and added a third square. Whenever, I would kind of get bored, I would work on my sketching only on the canvas problems. I didn’t want the pen tool to work outside of the canvas area. After playing around with the borders and such, I asked Scott for his advice. He told me that the reason why the pen still worked outside the area was because my cursor was moving faster than the time it took for the computer to go through the code. I tried to fix this by changing the frame rate.


End of tuesday


I added four more rectangles to my functions. Then I used my function twice. So, I have a shape selector thing and a color selector. I also played around with the text tool stuff. So now I can also add what I want to write in my function and I would appear where I want it. I centered stuff and made everything look prettier. For example I made my tool selection panel bigger so there was a margin between the end of the panel and the option groups. I then made my main text stuff bigger.

End of Wednesday


I worked my blog. I everything above on my blog on Thursday. I took notes through out the week but I started on my blog on Thursday.

On Thursday, I wanted to learn how to draw lines. I thought that I could use the mouseClicked() function to choose two point where I want a line. In the line function, the first two numbers are the first coordinate and the last two are a new coordinate. A line is drawn connecting the two coordinates. So I was exploring the different mouse commands. Then, I asked Scott, how to make the line stuff work. He then started talking about objects oriented coding and how to structure stuff. how I can better structure my program. He talked about different modes and how programs can switch between them. I went through my ‘goals” for this program and therefore I made a page that outlined my different options. I entertained different ways that I can structure my code.

I spent most of my time on Processing .org’s reference page.


I worked on my Thursday blog. Afterwords, I went through the object oriented tutorial on Coding for art website. http://www.codingforart.com/processing-section-9/.

I got through the main lesson but I left of, trying to figure out how to do the extra or the challenge part. I am not sure how I can change the path the ball takes on its travel.

Friday 1

This is the first or the main part of the lesson. The picture below is an extra “aspect” of the lesson (almost like a practice/challenge).

Friday 2