ARTDM 170, Week 14: Introduction to Processing
2 likes731 views
This document provides an introduction and overview of Processing, an open-source programming language and environment for visual arts. It discusses downloading and installing Processing, the basic parts and structure of Processing sketches including setup(), draw(), variables, and examples. It also covers creating lines, making lines follow the mouse, clearing the screen, creating a bouncing ball sketch, exporting sketches, and making "art" by commenting out background clearing and adding semi-transparent rectangles between frames. The final sections provide a timeline for an introductory Processing class and homework assignment to work on a final project due on May 4th.
Ad
More Related Content
Similar to ARTDM 170, Week 14: Introduction to Processing (20)
More from Gilbert Guerrero (20)
Ad
Recently uploaded (20)
Ad
ARTDM 170, Week 14: Introduction to Processing
- 1. ARTDM 170, Week 14: Introduction to Processing Gilbert Guerrero [email protected] 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
- 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