Teaching

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.


Row 1: Clair, Andrew, Penny, Raymond, Float, Angel

**Afternoon Teams:** (Anastasia, Penny, Jove), (Will, Jeni), (Alix, Fang), (Raymond, Clair), (Zuri, Float), (Angel, Andrew), (Mei-Ling, Ed), (Emily, Ellie)

====== Topics ======

  * Alan Turing
    * http://www.loebner.net/Prizef/TuringArticle.html
    * Artificial flight
  * Algorithms - more Big O
    * Selection
    * Insertion
    * Bubble
    * Searches
  * Special Links
    * http://www.sorting-algorithms.com/
    * http://visualsort.appspot.com/
  * JavaScript and Processing.js
  * Final Project


Intro to Processing code:

<code java>


// GLOBAL VARIABLES

int i, j, k, l;

// SETUP FUNCTION - Runs Once

void setup () {

  size(500,500);

  
}


// DRAW LOOP - Infinite Loop

void draw () {
 
  background(255,0,0);

  ellipse(mouseX, mouseY, 20, 20); 
}

</code>

Seurat/Blotches Mario (in Java)

<code java>

import acm.graphics.*;
import acm.util.*;
import acm.program.*;
import java.awt.*;


public class Seurat extends GraphicsProgram{


	private static final int NUM_PICTURES = 5;
	private static final int SPLOTCH_DIAMETER = 10;
	private RandomGenerator rgen = new RandomGenerator();
	
	public static void main(String[] args) {
		new Seurat().start(args);
	}

	public void run() {
		setBackground(Color.black);
		GImage image = new GImage(getRandomImage());
		int imageLeft = (int) ((getWidth() - image.getWidth())/2);
		int imageTop = (int) ((getHeight() - image.getHeight())/2);
		//add(image, imageLeft, imageTop);
	
		while (true) {
			int pixelX = rgen.nextInt((int) image.getWidth());
			int pixelY = rgen.nextInt((int) image.getHeight());
			Color pixelColor = getColorAt(image, pixelX, pixelY);
			int xPos = imageLeft + pixelX;
			int yPos = imageTop + pixelY;
			drawSplotch(xPos, yPos, pixelColor);
		}
	}
	
	/**
	 * 
	 * @param xPos
	 * @param yPos
	 * @param pixelColor
	 */
	private void drawSplotch(int xPos, int yPos, Color pixelColor) {
		xPos = xPos - SPLOTCH_DIAMETER/2;
		yPos = yPos - SPLOTCH_DIAMETER/2;
		GOval circle = new GOval(xPos, yPos, SPLOTCH_DIAMETER, SPLOTCH_DIAMETER);
		circle.setColor(pixelColor);
		circle.setFilled(true);
		add(circle);
	}
	
	
	/**
	 * 
	 * @param image
	 * @param x of a pixel
	 * @param y of a pixel
	 * @return the color found at a specific pixel
	 */
	private Color getColorAt(GImage image, int x, int y) {
		// feel free to ignore how the program is looking up the pixel color
		// this syntax is not very nice and you don't need to understand it.
		return new Color(image.getPixelArray()[y][x]);
	}

	private String getRandomImage() {
		switch (rgen.nextInt(NUM_PICTURES)) {
			case 0: return "flyMario.jpg";
			case 1: return "vangogh.jpg";
			case 2: return "magritte.jpg";
			case 3: return "seurat.jpg";
			case 4: return "henson.jpg";
			case 5: return "firefox.jpg";
			default: return null;
		}
	}
}

</code>



----
====== Assignments ======

==== Part 1: Blog Posts - All of them ====

  * Write Blog Posts about:
    * **Projects** - Each project should get it's own post. Screenshot, link to demo, description. You are building a portfolio. Don't forget to link your Design Docs from now on! Please blog about your IF from Thursday.
    * **Stone Librande** - Write about what you thought and learned about Stone's presentation. Make sure to thank him at the end. Put in some image. I will send these posts to Stone as a thank you.

Double check your links!!

----

===== Part 2: Processing Intro (Do this individually or with your partner) =====

(Each person will try it on their own computer, but the team members should help each other out. Please still sit together.Afternoon groups listed at the top)

Install the Processing program (if it's not there already): http://processing.org/ 

Try to do as much as you want:

**Introduction to Processing (credit: DMA)**

Most intro programming classes begin with text-based exercises and basic command line prompts. With Processing, we will be learning to program visually through manipulating images. Processing syntax is very similar to Java, a good understanding of the basics of Processing will give you a head start on the Java applet and game design sections over the rest of the week.

Why learn Processing?

The Processing environment is actually written in Java! Processing code is translated(compiled) into Java and is run as a Java program.

Starting with Processing allows you to have a basic graphics library at your disposal without worrying about more advanced Java concepts and object-oriented programming.

The goal of this lesson is to introduce you to programming and get you comfortable with drawing shapes through code. You will also learn about tracking mouse positions in order to make your graphics more interactive.

1. Your first Processing application

Line Drawings

Let’s get to drawing with code! Open up a new Processing sketch and type the following into the text editor area:

  line (0, 0, 100, 100);

This is our first function (more on functions later)! The line function is surrounded by brackets ( ) containing 4 numbers, separated by commas. The values within the brackets are called parameters (Provide a definition of a function and parameters, simple explanation).

Notice the semi-colon (;) at the end of the statement. The semi-colon is a very important part of Java syntax, it tells the compiler that you have finished your statement. Syntax is an important part of programming (specificity of language).

{{:spcs:winter2014:math:day3:clip_image004.png|}}

Programming languages are precise and will not run if you forget a semicolon or give your function the incorrect number or type of arguments. If you receive an error message while trying to run your application, don’t panic! The compiler will catch any errors in your code and offer suggestions to help fix the problem. This is an invaluable resource as you progress through the lesson material. Even professional programmers make errors quite often and that is why it is important to test your code often!

{{:spcs:winter2014:math:day3:clip_image006_thumb.png|}}

Let’s add another line:

  line (100, 0, 0, 100);

Try running the code again.

{{:spcs:winter2014:math:day3:clip_image008_thumb.png|}}

We have created an X shape across the screen by constructing two lines, but how exactly does this work?

The numbers in the line function represent coordinate positions. You may have learned in Math class that coordinates are represented by two numbers in brackets representing the X (horizontal) and Y (vertical) position of a point. The line function takes two coordinates points as arguments and draws a line between the two points.

The coordinate system in Processing starts from the upper left hand corner (position 0, 0). This means that as your x value increases, the point moves RIGHT, and similarly, as your y value increases, your coordinate will move DOWN. This is important to remember as it will determine the placement of all the elements coded in your application.

{{:spcs:winter2014:math:day3:clip_image010_thumb.png|}}

By default, Processing runs on a 100 x 100 pixel window (we’ll see in a bit how to adjust the screen size). Our two lines are represented by two sets of coordinate points. Our first line function draws a line from point (0, 0) to point (100, 100) and the second line draws a line from point (0, 100) to point (0, 100).

Rectangles and Circles (Ellipses)

Here is the code we use to draw rectangles and ellipses. We will continue to build on top of the line drawings we constructed during the previous section.

rect( x_position, y_position, width, height)
 

*Remember that X and Y positions start at the upper left hand corner, position (0, 0).

Let’s make some rectangles! Type this code below your line code:

  rectMode(CENTER);
  rect(50, 50, 50, 50);
 

Our rectangle will be drawn centered at position (50, 50) with a width of 50 and a height of 50. This effectively makes a square.

Run the code. You should see a square appear at the center of your lines. Notice that the rectangle is drawn on top of the lines. It is important to note that Processing draws images in the order that they are written in the code. If you place the rectangle code before the line code, the lines will appear on top of the rectangles.

Next up, let’s draw an ellipse!

The arguments (parameters) for drawing an ellipse are very similar to that of a rectangle:

  ellipse (x_position, y_position, width, height)

Type this code below your rectangle code:

  ellipseMode(CENTER); 
  ellipse(50, 50, 50, 50);
 

Run this code again, and you should see a circle appear inside of your rectangle.

{{:spcs:winter2014:math:day3:clip_image012_thumb.png|}}

The code ellipseMode(CENTER) and rectMode(CENTER) mean that our coordinate positions (the first and second parameters of the function) for rectangle and ellipses are based on the center of our shape.

2. Make a traffic light!

Let’s do an exercise to test your understanding of coordinate positioning.

The code lines that start with // are comments. They do not change the functionality of a program, but are used to provider helpful hints to the programmer. Comments are an essential part of writing good code. Effective comments let you understand what a program does before running it. This is especially useful if you plan on sharing your codes with others.

// this is a comment! tell me how your program works!
/*  This is a multi-lined comment.
I could go on forever.
Don’t forget to close me!
*/
 
Let’s take a look at the green light ellipse code first.

  ellipse (10, 20, 25, 25);
 

The vertical positioning looks fine (the green light belongs at the top), but the horizontal positioning is slightly off. Recall that increases in our X position (the first argument of ellipse) will move our circle to the right.

Let’s increase the value of x to 50:

  ellipse (50, 20, 25, 25);
 

Run your application to double check your work. That position looks about right!

Moving on to the yellow light. The horizontal positioning looks find but the yellow light is too far down our traffic light.

To move the yellow light up, we need to decrease the y position value from its current value of 70. Let’s change it to 50:

  ellipse(50, 50, 25, 25);
 
Much better! The red light is not positioned correctly at all, and is almost falling off of the screen. Can you guess what the correct x position is for the red light? By looking at our two previous ellipses, we can get the correct x position value of 50. When trying to adjust parts of your program, it is always useful to look back at the code you have already written, it usually contains hints about how to fix your current line of code!

  ellipse(50, 100, 25, 25);
 
What about the vertical position of the red light? Try decreasing the value of the y position by 5 or 10 and run the code to see the difference. The correct spacing will be around 80.

The final positioning of the red light should be something similar to this:

  ellipse(50, 80, 25, 25);

Run your code again to double check your work, you should see a nicely organized traffic light!

{{:spcs:winter2014:math:day3:clip_image016_thumb.jpg|}}

Notice that the difference between the Y position of the green light is

50 – 20 = 30 and similarly, the difference between the Y position of the yellow light and the red light is 80-50 = 30. By comparing the values of the position of our shapes using simple math, we can further understand the relationship between the shape drawings relative to the dimensions of our application screen size.

3. Let’s make our drawings colorful!

After the previous example, you may be curious about how the colors were created. You might have noticed the fill function listed before each ellipse function. The fill function has the following format for creating colors:

  fill ( RedValue, GreenValue, BlueValue);
 

Colors are created by combining values of red, green and blue color. You might recall from art class that all colors can be made by combining different amounts of these three primary colors. In Processing (and many other programming languages), each color can take a value between 0 and 255, representing the intensity of that color.

Make sure that your fill function is placed before the shape you wish to apply the color to.

If you would like to a Grayscale color, simply use a single number argument with a value from 0 to 255. This is particularly useful for setting background colors.

  background(0);

Will set the background to black (the most extreme grayscale value).

  background(255);

Will set the background to white.

Hot Tip:

What’s an easy way to remember which number represents black and which represents white?

Think of the number value as “adding” color; a lower number value indicates a “lighter” color.

Having trouble thinking about how to make colors? Check out this short video on how computer mix colors from the Khan Academy:

http://www.khanacademy.org/cs/intro-to-coloring/844038377

Youtube link(embed): http://youtu.be/qtVKzgtWWu4

4. Drawing Triangles

Let’s finish off our basic shape knowledge by learning how to draw a triangle. the triangle function takes 3 sets of XY coordinates, representing the three points of the triangle.

  triangle(x1, y1, x2, y2, x3, y3);
 
{{:spcs:winter2014:math:day3:clip_image025_thumb.jpg|}}


Notice the first line of code:

size (200, 200);

The size function sets the screen size of your application (length, width). In this example, the size of the screen is set to 200 by 200 pixels.

----

===== Part 3: Processing Seurat (Teams) =====

(Afternoon groups listed at the top)

In processing, write a program that paints images like this:

(Remember, to look at your references: https://www.processing.org/reference/ and look under the Pixel heading)

{{:spcs:summer2014:screen_shot_2014-07-07_at_11.50.58_am.png|}}

Now, see if you can figure out how to get the code to run in a browser!)

<code java>

<html>
<script src="processing.js"></script>
<canvas data-processing-sources="fallingBallPink.pde"></canvas>
</html>

</code>

Read this for reference: http://processingjs.org/articles/jsQuickStart.html#quickstart

----

==== Part 4: Visual Sorting I (TEAM) ====

(Afternoon groups listed at the top)

Mousey the mouse needs to sort his cheese stick collection. There are 20 cheese sticks of different lengths in random order. Please help Mousey write an algorithm to sort his cheese sticks in Processing. Mousey lives far away, so Mousey will have to visit your blog to learn how to do this himself. 

From now on, we will always use the setup() and draw() functions. For the beginning of this assignment, you can leave it out until you're ready for the animations. Don't worry, if you don't finish, we will continue this tomorrow.

First: Make an array of integers in some random order, like this in Processing:

<code java>

int[] cheesesticks = { 90, 150, 30, 22........ };

</code>

or you can do it manually:

<code java>

int[] cheesesticks = new int [20];

cheesesticks[0] = 90;
cheesesticks[1] = 150;
cheesesticks[2] = 30;

</code>

.... Do whatever makes more sense to you. (Try searching for "Processing Random Numbers").

Next, use the print function and a for-loop to see if you can print out the numbers.

Once you can see the numbers printed out, see if you can draw the numbers as rectangles.

When you've gotten this far, you should try to write out the sort. Try to sort the numbers in your setup function first (the function that runs only once).


Next pick your favorite sort and sort those numbers. You may need to create a swap function.

Once you can sort them, try to draw them on the screen and animate them. Like these: http://www.sorting-algorithms.com/

If you finish this early, you should either try another sort OR.. help Mousey learn the http://en.wikipedia.org/wiki/Sieve_of_Eratosthenes.

Try to get your project blog online, if you have time. Also, don't forget to link your design doc in the blog.

----
Teaching

User Tools

Site Tools

Page Tools
