Courses‎ > ‎APCS - Term 1‎ > ‎Konstantinovich‎ > ‎

2019-05-03

posted May 2, 2019, 6:26 PM by Konstantinovich Samuel   [ updated May 3, 2019, 8:23 AM ]
Goal Processing formal lab:

1. Make a repo:
MKS22X-ProcessingBasics
Use the Processing IDE to create and save 2 sketches.
When you save a sketch, it makes a folder with all the files inside of it. This is required, do not rename the folder.
Name them so I can tell which is which: 
e.g.
Section1
Section2

They will then be placed in your repo like this:
MKS22X-ProcessingBasics/Section1/Section1.pde
MKS22X-ProcessingBasics/Section2/Section2.pde

Copy the code into a processing sketch, save the file and code/mess with the existing code. 

(NOTE: NEVER NAME YOUR SKETCH THE SAME AS ANY INNER CLASSES!!!)

2. Complete as much as you can (by Monday)

Section 0:
Give this a quick read: (up to how rectangles work, don't worry about ellipse for now)

Section 1 Basics:
a) Visualizer  (drawing a bunch of boxes based on the values in an array)
b) Locking the values to a valid range.
c) Color Changing
d) More flexibility. (do this later)

Section 2 Fractals: (recursion is your friend here)
a) Sierpinski's Gasket
b) Koch Curve [CHALLENGE PROBLEM! Try it but don't worry if you get stuck]

VISUALIZER: (do not name this project Visualizer)



a) Complete the display method. It should draw several rectangles the heights of which are based on the values in an array, the widths should be equal, calculated based on the width of the visualizer. The rectangles should fill the width of the box. (There are 10 bars to start)

BEFORE CODING THIS:
You need to draw out the picture and figure out the coordinates of various parts of the diagram.
Some coordinates are marked in this image:
If you cannot tell me how you calculate them, you should not write code. Draw out a picture and label things to help you. Start with this: your visualizer is relative to (x,y) where is that in this image?

b) The values will change (the bars move) based on the speeds array, make sure they stay inside the box by modifying the update method. Negate the speeds when they hit the top/bottom so the bars oscillate.
c) Allow for a variable sized array (from 1 to 40 values) You can also allow for variable width/height on your Visualizer's bounding box.
d) [Come back to this later] Improve it by changing the color of each box as the height changes (green from 50 to 100, then yellow from 0 to 50, orange from -50 to 0, then red from -50 to -100) I am asking that the entire box should be one color they don't have to be smooth color transitions. If you want to make it more complicated doing a  smooth change would be a challenge.


int MAX_VALUE = 100;
int MIN_VALUE = -100;
Visualizer v;

/*You are simulating a visualizer of multiple values
 You need to create a display method first. 
 Then you can make a method that changes the values each time the update is called. 
 */
class Visualizer {
  float x, y;
  float [] values;
  float [] speeds;
  Visualizer(float x, float y) {
    this.x = x;
    this.y = y;
    values = new float[10];
    speeds = new float[10];
    for (int i = 0; i < values.length; i++) {
      values[i] = random(-99, 99);
      speeds[i] = random(2);
    }
  }

  void display() {
    //draw the bars equally spaced inside this box. 
    //You can assume 10, but it would be even better 
    //if you could modify it to be larger increments.
    fill(255);
    rect(x, y, 400, 200);
    //This is a 200x400 box.
    //The width of the visualizer is 400! This rect is the border

    //the line is the 0 y-value, the top is 100, the bottom is -100
    line(x, y+100, x+400, y+100);

    //You need to use a loop. You need to make the HEIGHT of the bars 
    //the values in the array.
    //Negative values are red, and go below the line.
    //Positive values are green and go above the line.

    //???WRITE THIS METHOD FIRST!!!
    //THESE ARE WRONG: They just illustrate how they could look
    fill(255, 0, 0);
    rect(x+40, y+100, 60, 50);
    fill(0, 255, 0);
    rect(x+120, y+50, 60, 50);


    //Width of the visualizer is 400!

  
  }
  void update() {
    //???WRITE THIS METHOD SECOND!!!
    for (int i = 0; i < values.length; i++) {
      values[i] += speeds[i]; //the speed updates the values. Do not touch this.
      //??? keep them values between max/min value so they stay in the box.

      //??? reverse the speeds so the bar oscillates up/down when it reaches max/min

      
    }
  }
}

void setup() {
  size(600, 500);
  v = new Visualizer(20, 20);
}
void draw() {
  background(255);
  v.display();
  v.update();
}


FRACTALS:
1. Sierpinski's Gasket [You can do it!]
2. Go back and try the colors for the Visualizer first
3. Koch Curve (or snowflake) [Challenge!]
*bonus this shows mouse and key presses, but you have to read more about them*

1. Sierpinski's Gasket can be created recursively by:
a) Starting with a triangle and cutting out the middle at each step of the recursion.
OR
b) Drawing the little triangles at the end of the recursion instead.
This is a fractal, so the pattern repeats:



int levels;
color bg,fg;

void setup() {
  size(800, 600);
  levels = 1;
}

/*Create Sierpiski's Gasket (google an image of this)
  The outer triangle are the vertices: (v1x, v1y), (v2x,v2y), (v3x, v3y)
  levels:
  0 = regular triangle
  1 = triforce (looks like 3 triangles)
  2 = each of the 3 triangles will be cut into 3 triangles.
  etc.
*/
void gasket(int levels, float v1x, float v1y, float v2x, float v2y, float v3x, float v3y) {
    //YOU WRITE THIS METHOD!
}

void draw() { 
  background(50);  
  
  fill(255);
  text("Click the mouse to increase levels, press a key to decrease levles",20,20);

  gasket(levels,0, height-10, width, height-10, width/2, 10);

 //koch(levels,width-10, height/2,10, height/3 ); 
 //other fractal you can do! This requires a bit more math, or you can look up the coordinates.
}

void mouseClicked(){ 
 levels ++;  
}

void keyPressed(){
 levels --; 
}




Comments