ARTDM 170, Week 13:  Introduction to Processing <ul><li>Gilbert Guerrero  [email_address] </li></ul><ul><li>gilbertguerrer...
Processing
Affect Browser , by Christian Nold
Strange Weather , by Studio for Urban Projects
Eyebeam Art + Technology Center , New York
On the Origin of Species: The Preservation of  Favoured  Traces , Ben Fry
Download Processing <ul><ul><li>http://processing.org   </li></ul></ul>
Open Processing
Processing examples <ul><li>Run a few of the example sketches in Processing.   </li></ul><ul><ul><li>Go to File > Examples...
Processing basics <ul><li>To see your sketch in action click  Run </li></ul><ul><li>To stop it you can close the viewer or...
Processing basics <ul><li>Sketches run as Java Applets </li></ul><ul><li>Sketches can be exported to several formats: </li...
Basic parts of a sketch <ul><li>/* Notes */ </li></ul><ul><li>// Setup the variables values float moveX = 50; </li></ul><u...
Draw a line <ul><li>void setup() {   size(400, 400);   stroke(255);   background(192, 64, 0);  } void draw() {   line(150,...
Follow the mouse <ul><li>void setup() {   size(400, 400);   stroke(255);   background(192, 64, 0);  } void draw() {   line...
Clearing the screen <ul><li>void setup() {   size(400, 400);   stroke(255); } </li></ul><ul><li>void draw() {   background...
Bouncing Ball Sketch <ul><li>void draw() {    background(0);   if(ballX > width - ballWidth/2 || ballX < ballWidth/2){   m...
Random color <ul><li>Comment out the background refresh </li></ul><ul><li>// background(0); </li></ul><ul><li>Change the f...
Final Projects December 2 9 16 25 18 11 November Last day  of class Present final projects (two days) Design background an...
Homework, due Nov 18  <ul><li>Work on your  final projects </li></ul><ul><ul><li>Design background and game elements </li>...
Upcoming SlideShare
Loading in...5
×

ARTDM 170, Week13: Processing

520

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
520
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "ARTDM 170, Week13: Processing"

  1. 1. ARTDM 170, Week 13: Introduction to Processing <ul><li>Gilbert Guerrero [email_address] </li></ul><ul><li>gilbertguerrero.com/blog/artdm-170/ </li></ul>
  2. 2. Processing
  3. 3. Affect Browser , by Christian Nold
  4. 4. Strange Weather , by Studio for Urban Projects
  5. 5. Eyebeam Art + Technology Center , New York
  6. 6. On the Origin of Species: The Preservation of Favoured Traces , Ben Fry
  7. 7. Download Processing <ul><ul><li>http://processing.org </li></ul></ul>
  8. 8. Open Processing
  9. 9. Processing examples <ul><li>Run a few of the example sketches in Processing.  </li></ul><ul><ul><li>Go to File > Examples > (then choose an example) </li></ul></ul><ul><li>Check out the Exhibition page </li></ul>
  10. 10. Processing basics <ul><li>To see your sketch in action click Run </li></ul><ul><li>To stop it you can close the viewer or click Stop </li></ul><ul><li>To create a new sketch, click New </li></ul>
  11. 11. Processing basics <ul><li>Sketches run as Java Applets </li></ul><ul><li>Sketches can be exported to several formats: </li></ul><ul><ul><li>Java applet with index.html page for web borwsers </li></ul></ul><ul><ul><li>Windows, Mac, and Linux applications </li></ul></ul>
  12. 12. Basic parts of a sketch <ul><li>/* Notes */ </li></ul><ul><li>// Setup the variables values float moveX = 50; </li></ul><ul><li>// Initialize the sketch void setup() { } </li></ul><ul><li>// Loops every frame void draw() { } </li></ul>
  13. 13. Draw a line <ul><li>void setup() { size(400, 400); stroke(255); background(192, 64, 0); } void draw() { line(150, 25, 270, 350); } </li></ul>
  14. 14. Follow the mouse <ul><li>void setup() { size(400, 400); stroke(255); background(192, 64, 0); } void draw() { line(150, 25, mouseX, mouseY); } </li></ul>
  15. 15. Clearing the screen <ul><li>void setup() { size(400, 400); stroke(255); } </li></ul><ul><li>void draw() { background(192, 64, 0); line(150, 25, mouseX, mouseY); } </li></ul>
  16. 16. Bouncing Ball Sketch <ul><li>void draw() { background(0); if(ballX > width - ballWidth/2 || ballX < ballWidth/2){ moveX = -moveX; //change direction } if(ballY > height - ballWidth/2 || ballY < ballWidth/2){ moveY = -moveY; //change direction } </li></ul><ul><li>// Move the ball ballX = ballX + moveX; ballY = ballY + moveY; </li></ul><ul><li>fill(255,100); noStroke(); ellipse(ballX, ballY, ballWidth, ballWidth); } </li></ul>
  17. 17. Random color <ul><li>Comment out the background refresh </li></ul><ul><li>// background(0); </li></ul><ul><li>Change the fill color to a random rgb value </li></ul><ul><li>fill(random(0,255), random(0,255), random(0,255), random(0,255)); </li></ul>
  18. 18. Final Projects December 2 9 16 25 18 11 November Last day of class Present final projects (two days) Design background and game elements. Embed in game symbol Script user interaction and movement of game elements Add scoring and game over trigger
  19. 19. Homework, due Nov 18 <ul><li>Work on your final projects </li></ul><ul><ul><li>Design background and game elements </li></ul></ul><ul><ul><li>Embed them in a game symbol </li></ul></ul><ul><li>Read Getting Started on the Processing website </li></ul>

×