Your SlideShare is downloading. ×
ARTDM 170, Week 14: Introduction to Processing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

ARTDM 170, Week 14: Introduction to Processing

864
views

Published on

Published in: Design

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide






















  • Transcript

    • 1. ARTDM 170, Week 14: Introduction to Processing Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
    • 2. Processing
    • 3. Affect Browser by Christian Nold
    • 4. Strange Weather by Studio for Urban Projects
    • 5. Eyebeam Art + Technology Center, NYC, March 2008
    • 6. On the Origin of Species: The Preservation of Favoured Traces by Ben Fry
    • 7. Download Processing http://processing.org
    • 8. Open Processing
    • 9. Processing examples • Run a few of the example sketches in Processing.  ‣ Go to File > Examples > (then choose an example) Check out the Exhibition page
    • 10. Processing basics • To see your sketch in action click Run • To stop it you can close the viewer or click Stop • To create a new sketch, click New
    • 11. Processing basics • Sketches run as Java Applets • You can put Java Applets in Web pages just like Flash movies or any other media file • Sketches can also be exported to Windows, Mac, and Linux as software applications
    • 12. Basic parts of a sketch /* Notes */ // Setup the variables values float moveX = 50; // Initialize the sketch void setup() { } // Loops every frame void draw() { }
    • 13. Draw a line void setup() { size(400, 400); stroke(255); background(192, 64, 0); } void draw() { line(150, 25, 270, 350); }
    • 14. Make the line follow the mouse void setup() { size(400, 400); stroke(255); background(192, 64, 0); } void draw() { line(150, 25, mouseX, mouseY); }
    • 15. Clearing the screen void setup() { size(400, 400); stroke(255); } void draw() { background(192, 64, 0); line(150, 25, mouseX, mouseY); }
    • 16. Bouncing Ball Sketch 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 } // Move the ball ballX = ballX + moveX; ballY = ballY + moveY; fill(255,100); noStroke(); ellipse(ballX, ballY, ballWidth, ballHeight); }
    • 17. Making “art” • Comment out the code that clears the screen // background(0);
    • 18. Making “art” • Add an intermediary thatʼs semi- transparent between frames // background(0); fill(0,4); rect(0,0,width,height);
    • 19. Making “art” • Change the fill color to random values fill(random(0,255), random(0,255), random(0,255), random(0,255));
    • 20. Exporting • Sketches can be exported to several formats: ‣ Java applet with index.html page for web browsers ‣ Windows, Mac, and Linux applications
    • 21. Timeline March April May Last day of class 9 16 23 30 6* 13 20 27 4 11 18 25 Create a project title and description Present final projects Paper prototypes (two days) Design background, characters, and other game elements Embed game elements in game symbol Add movement and keyboard interaction Add Start and Game Over screens Add scoring and game over trigger
    • 22. Homework, due May 4 • Work on your final projects