Processing & Arduino in Tandem. Creating Your Own Digital Art Tools

Size: px

Start display at page:

Download "Processing & Arduino in Tandem. Creating Your Own Digital Art Tools"

Lucas Kennedy
5 years ago
Views:

2 Processing & Arduino in Tandem Creating Your Own Digital Art Tools

3 Week 2 - Making your own drawing tool Using Processing to build a basic application

4 Segment 1 - A Basic Drawing Program Change window size and background color Use the mouse to draw lines Detect keyboard input to save the image

the same name as the folder it is in and have the extension.

5 Sketches are saved in: Documents/Processing/ A folder and a file are created with the name of the sketch The file must have the same name as the folder it is in and have the extension.pde The.pde file is just plain text and can be opened in any text editor

6 Press the Play button to run an application The default window has a 100x100 pixel area for graphics

7 Built in methods run without any setup Methods are written with the commonly used function(); format Similar to java, javascript and actionscript Processing is case sensitive and requires semicolons as line endings

8 setup() and draw() are the core functions setup() runs once when the sketch starts draw() runs every frame as a loop Define functions with curly braces { } Lines within the curly braces are run when the function is called

9 size() defines the windows width and height in pixels if() {... } runs its lines if the arguments return true There are many built-in functions and variables pmousex and pmousey are the previous frames mouse coordinates line(x1,y1,x2,y2) draws a line between two points

10 keypressed() is called when a key is pressed key is the key that was pressed if() statements with only one line don t need braces save() saves an image to the sketch folder

11 Segment 1 - Review We just... Set the window size and background Drew lines when the mouse is pressed Detected the s key to save the image

12 Q&A

13 Segment 2 - Adding Color and Style Change the lines thickness Change the lines color Change the lines transparency

14 smooth() anti-aliases the drawn graphics framerate() sets the framesper-second The program will attempt to run at the set frame rate if it can, but will never go faster than it.

15 Variables require a typedeclaration float is a number with a decimal point strokeweight() sets the line thickness stroke() sets the color The default color mode is RGB (red, green, blue) Each color channel has a range, 0 is no color and 255 is full color

16 colormode() sets the way colors are handled HSB is another common mode (hue, saturation, brightness) Hue is the entire color wheel starting with red (0) Saturation sets the richness of the color Brightness is how light or dark

17 Alpha is how opaque or transparent a color is 0 Alpha is transparent 255 Alpha is opaque

18 Segment 2 - Review We just... Created variables to store data about our line Changed color mode to HSB Applied the variables to the stroke weight and color

19 Q&A

20 Segment 3 - Beginnings of a GUI Make a larger canvas Create an area for placing controls Create a preview of the line

21 In the next step we ll make the canvas larger and create an area to put a GUI

22 GUI_WIDTH is used to store the width of the GUI background The application window is increased in size to 1000x600 pixels nostroke() prevents outlines from being drawn onto new graphics fill() determines the color of new graphics rect(x,y,width,height) draws a rectangle

23 In the next step we ll make a preview area for the brush

24 drawguibackground() and drawline() are custom functions drawguibackground() contains the code that draws the rectangle, sets its color and removes outlines The function drawline() is now called when the mouse is pressed stroke() turns outlines on again

25 drawcursor() changes the cursor to a cross when over the canvas and into a hand when over the GUI cursor() sets the mouse cursor

26 drawlinepreview() shows a preview of the line A white rectangle is drawn behind the preview to show transparency A preview of the line is drawn using the color and line weight variables

27 Segment 3 - Review We just... Created a preview of our line Added an area to draw a GUI Made the drawing area bigger

28 Q&A

29 Segment 4 - Adding sliders to control color Create a reference to the controlp5 library Change the GUI font Put sliders below the line preview to control width and color

30 Select New Tab from the right arrow tab menu Name the tab with the controls that appear

31 Organize related blocks of code into tabs to consolidate it by use Tabs are saved as.pde files in the sketch folder:

32 Consolidating code can make it easier to read draw() now only has two lines

33 In the next step we ll make a slider to control the line weight

Libraries are pre-made chunks of code with a specific functionality Many 3rd party libraries are provided for free by developers around the world, offering a myriad of uses like extended video and

34 Libraries are pre-made chunks of code with a specific functionality Many 3rd party libraries are provided for free by developers around the world, offering a myriad of uses like extended video and audio capabilities ControlP5 is a library for creating sliders, knobs, buttons and other GUI controls ControlP5 is developed by Andreas Schlegel, more info can be found on Andreas website at:

35 import is used to include external libraries The line ControlP5 controlp5; defines an instance of the ControlP5 class named controlp5 Important to note the capitalization! Standard convention is to capitalize class names and use lowercase for individual instances

36 new is used to create a new object instance this refers to the entire application controlp5.addslider() creates a new slider lineweight gives control over the variable with the same name setlabel( weight ) sets the slider s label text

37 setupgui() is added to setup()

38 PFont is the native Processing font class createfont() prepares a font for Processing setcontrolfont() sets the font for the GUI addtextlabel() draws text into the GUI

39 In the next step we ll add sliders to control all of the brush properties

40 setupgui() now instantiates a slider for each color property

41 Segment 4 - Review We just... Added the controlp5 library and created a ControlP5 object Changed the GUI font Put sliders below the line preview to control width and color

42 Q&A

43 Segment 5 - Finishing the drawing tool Create save and clear buttons Export the finished Application!

44 In the next step we ll add a save and clear button

45 addbutton() creates the save and clear buttons saveimage and clearimage will call functions with the same name

46 The save and clear buttons now need functions to make them active

47 filename is the string output by timestamp() plus the extension PImage is the Processing Image class for storing pixels get returns the pixels within a certain area

48 timestamp() is a function that returns a String return tells the function what to supply when called year(), month(), day(), minute(), second() and millis() return a String with the current date/time + _ + adds an underscore between the text elements

49 clearimage() clears the canvas fill() is set to white and the stroke is removed A rect() is drawn over the canvas area covering any previously drawn pixels with white

50 The final step is exporting the application From the top menu select: File -> Export Application Processing exports to the three most common operating systems

51 Segment 5 - Review We just... Added save and clear buttons Exported the finished application

52 Q&A

Design Programming DECO2011

Design Programming DECO2011 Rob Saunders web: http://www.arch.usyd.edu.au/~rob e-mail: rob@arch.usyd.edu.au office: Room 274, Wilkinson Building Data, Variables and Flow Control What is a Variable? Computers