ARTDM 170, Week13: Processing

703 views

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
703
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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>

×