Differences

This shows you the differences between two versions of the page.

--- spcs:summer2014:d5 [2014/07/21 11:56]
ffpaladin
+++ spcs:summer2014:d5 [2014/07/22 17:30] (current)
ffpaladin [Part 1: Blog Posts - All of them]
@@ Line 21: / Line 21: @@
   * 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 ====
+===== Part 1: Blog Posts - All of them =====
   * Write Blog Posts about:
@@ Line 37: / Line 151: @@
 ===== 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)
+(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/
@@ Line 234: / Line 348: @@
 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)
+(Remember, to look at your references: https://www.processing.org/reference/ and look under the Pixel heading. Animations require a draw() function.)
 {{:spcs:summer2014:screen_shot_2014-07-07_at_11.50.58_am.png|}}
@@ Line 240: / Line 354: @@
 Now, see if you can figure out how to get the code to run in a browser!)
-<code java>
+<code html>
 <html>
@@ Line 247: / Line 361: @@
 </html>
-</java>
+</code>
+Read this for reference: http://processingjs.org/articles/jsQuickStart.html#quickstart
+Put everything into a Github Repo in the gh-pages branch!
 ----
-==== Part 4: Visual Sorting I (TEAM) ====
+===== Part 4: Visual Sorting I (TEAM) =====
 (Afternoon groups listed at the top)
@@ Line 281: / Line 399: @@
 .... 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.
+  - 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. Pick your favorite one. Try to sort the numbers with for-loops first.
+  - When you've successfully sorted the numbers, you'll need to sort the numbers WITHOUT using the for-loop. (Using just the draw loop).
-Once you can see the numbers printed out, see if you can draw the numbers as rectangles.
+Once you can sort them, try to draw them on the screen and animate them. Like these: http://www.sorting-algorithms.com/
-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).
+If you finish this early, you should either try another sort OR.. help Mousey learn the http://en.wikipedia.org/wiki/Sieve_of_Eratosthenes with another computer animation.
+----
-Next pick your favorite sort and sort those numbers. You may need to create a swap function.
+===== Part 5 - Cookbook JS Tile Game (Team) (Optional) =====
-Once you can sort them, try to draw them on the screen and animate them. Like these: http://www.sorting-algorithms.com/
+Get the Tile Game up and running. Please continue to try and learn from the code and reading.
-If you finish this early, you should either try another sort OR.. help Mousey learn the http://en.wikipedia.org/wiki/Sieve_of_Eratosthenes.
+This is for people who finish early and have nothing to do.
-Try to get your project blog online, if you have time. Also, don't forget to link your design doc in the blog.
 ----
+===== Part 6 - Two Feedback Forms =====
+[[https://docs.google.com/forms/d/1nNvgtxwBtGiDMfe_jjx1PH8MzwJlOR7jIAaEdLZ-sZI/viewform|Anonymous Daily Feedback Form]]
+and...
+<html>
+<iframe src="https://docs.google.com/forms/d/1YCb9i2OT46VIZmzbunqjMVXwbdBHRJd-8zrE17NJFOM/viewform?embedded=true" width="760" height="2000" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
+</html>

Teaching

User Tools

Site Tools

Differences

Page Tools