Program Structure. setup() draw() Data directory. Statements end in semi- colon Comments start with //

Transcription

1 Processing Overview h/p:// Build sketches Use the sketch pad editor Java- based - can use eclipse, java libraries, etc For ideas, examples h/p://openprocessing.com

2 Program Structure setup() draw() Data directory Useful for handling images, data files Can add a file through the sketch menu part of program export. No absolute paths. Statements end in semi- colon Comments start with //

3 Coordinates

4 Coordinates

5 Useful FuncMons ONen used in setup() size() background() stroke() fill() size(int width, int height) aner size() call in setup can reference width and height as special values through program. a good way to approximate the center of a processing sketch example: ellipse(width/2, height/2, 20, 20);

6 stroke() Examples A Black brush or pen stroke(0); A white pen stroke(255); A white pen broken into RGB format stroke(255,255,255); An orange pen stroke(255,128,0); Hex web format stroke(#ff8000); Use of alpha transparency stroke(255,128,0,128);

7 Color - Grayscale black (0) white (255) 8 bit (1 byte) representamon for grayscale 24 bit for RGB representamon 32 bit for RGBA representamon 255 possibilimes background(162) What is the color? fill(255); rect(); How about? fill(255,0,0)? fill(255,255,255)? fill(5) fill(5,5,5);

8 Color - Intro AddiMve vs. SubtracMve colors color on a screen vs. color on canvas all colors on a screen produces white (255) all colors on a canvas produces blackish brown

9 Color Selector Tool

10 fill(255); rect(30, 50, 55, 50); fill(255, 128, 0); rect(30, 100, 55, 50); fill(0, 0, 255, 128); rect(30, 150, 55, 50); fill() examples

11 background() Lots of opmons most common rgb value is an int for the color value alpha is an opmonal float value which sets opacity background(rgb, <,alpha>) a float that specifies a value between white and black background(gray <,alpha>) Broken out into separate RGB values + opmonal alpha background(r, g, b <, alpha>) PImage to set as background background(pimage <, alpha>)

12 Program Layout <global declaramons> void setup() { size(500, 500); background(128); //grayish somewhere between black and white fill(255); //fill shapes with white stroke(0); //black pen } void draw() { line(50, 50, 100, 100); rect(100, 100, 20, 20); }

13 Programming Modes Basic StaMc images, no looping Just type comments into sketch pad ConMnuous Program redraws screen at given frame rate Uses setup and draw methods recommended Java Advanced mode Extend PApplet

14 Rendering Modes Java 2D (default) what we will use in this class high- quality vector graphics at expense of some performance P2D great for simpler graphics with fast pixel operamons P3D (might use this if we get to 3D) meant for simpler 3D graphics with emphasis on performance OpenGL high quality 3D renderer that makes use of opengl PDF output.pdf must be added as a library to your sketch can write directly to PDF P2D and P3D are great for pixel based work with an emphasis on performance. Each renderer is a li/le different and some funcmons do not behave similarly or map properly. Rendering mode can be set with: size(width, height, renderer)

15 ConMnuous Mode noloop() Stops conmnual loop. draw() executes once. loop() Causes draw to execute conmnuously redraw() Invokes draw() once.

16 boolean byte char color double float int long Common Processing Types

17 Array will talk about later ArrayList HashMap Object String XMLElement PImage Types (Composite)

18 ArrayList Stores a variable number of objects Similar to an array, but much easier to add and remove items Is resized dynamically size() how many items in the list add() remove() get()

19 Custom Class (example) class Person { String name; int age; public Person(String name, int age) { this.name = name; this.age = age; } public String tostring() { return I am + name + and I am + age + years old ; } } //class

20 Classes conmnued Can also make use of inheritance with implements (for interfaces) and extends (for subclassing) class Student extends Person { String major; //constructor public Student(String name, int age, String major) { super(name, age); this.major = major; }

21 Basic Shapes Point Rectangle rect() Circle/Ellipse - ellipse() Line line() Quadrilateral quad() not constrained by 90 degree angles triangle triangle(x1, y1, x2, y2, x3, y3)

22 Basic Shapes Example void setup() { background(255); size(300, 300); stroke(0); fill(0); } void draw() { strokeweight(2); rect(width/2, height/2, 20, 20); ellipse(width/2 + 40, height/2 + 40, 20, 20); line(width/2-40, height/2,width/2-30, height/2+20); triangle(width/2, height/2-40, width/2-10, height/2-10, width/2+10, height/2-10); strokeweight(5); point(width/2-20, height/2); }

23 Point Point (x,y); Point (x,y,z); Used for 3D rendering mode strokeweight() to set thickness

24 Lines 2D line(x1, y1, x2, y2) 3D line(x1, y1, z1, x2, y2, z2) Example: line (1,1,3,3);

25 Rectangle The first two parameters set the locamon of the upper- len corner rect(x, y, width, height) width int or float: width of the rectangle height int or float: height of the rectangle Example: line(1,1,2,2);

26 Ellipse ellipse(a, b, c, d) a float: x- coordinate of the ellipse b float: y- coordinate of the ellipse c float: width of the ellipse D float: height of the ellipse float: height of the ellipse by default ellipsemode() Radius, Center, Corner, Corners

27 EllipseModes RADIUS First two parameters determine the center, the last two params determine the width and height from the center. Ellipse where width and height are equal is a circle and becomes a radius. CENTER Width and height params determine CORNER First two params are upper len corner and then width and height CORNERS defines a bounding box upper len and lower right

28 Ellipse Example Radius mode, ellipse(2,2,1,1)

29 Handling Mouse Events mousex mousey mouseclicked() mousedragged() mousepressed() mousereleased() mousemoved() keypressed()

30 Mouse & Key Events mousepressed() event fires when the mouse is pressed also a boolean that indicates whether the mouse was pressed mousereleased() event fires when mouse is released mousebu/on The LEFT or RIGHT bu/ons (Which mouse bu/on was clicked) Example: (mousebu/on == LEFT) keypressed key the key that was selected system variable that stores the key that was pressed (key == b ) mousex The mouse coordinate for X mousey mouse coordinate for Y

31 KeyPressed Example // Click on the window to give it focus, // and then press any key. int value = 0; void draw() { } fill(value); rect(25, 25, 50, 50); void keypressed() { } if (value == 0) { } value = 255; else { value = 0; }

32 Images An image is a series of numbers represenmng levels of red, green, and blue on a grid of pixels. Each pixel has an x and Y posimon

33 PImage Basic datatype for storing images in processing Processing uses.gif,.jpg,.tga, and.png use loadimage(filename); Pimage class members: width and height array of pixels, pixels[] use loadpixels() to use pixel array funcmons To create an image, createimage() background(pimage);

34 Advanced Image Handling There are Mmes when you need to work directly with the pixels loadpixels() called prior to accessing the pixels updatepixels() called aner you have finished accessing the pixel array loadpixels(); for (int i = 0; i < pixels.length; i++) { color c = pixels[i]; <do some stuff> } updatepixels();

35 Image AnnotaMon Example

36 File I/O - basics loadstrings(string filename); for data, text files if in the data folder, do not need a complete path loadbytes(filename); for binary files selectinput() returns file path brings up a file chooser savestrings(filename, String[] lines) for wrimng a text file to disk

37 Strings An array of characters (under- the- hood) Luckily, we have a type char mystring[] = { h, e, l, l, o } (a pain) String mystring = Hello ; (much easier) Useful for File IO and many other applicamons split() Breaks string into tokens with delimiters trim() Remove whitespace from the end of a string loadstrings() Load a file, line by line returns a String[]

38 Strings conmnued equals() and the == operator String a1 = new String( hi ); String a2 = new String( hi ); What does (a1 == a2) evaluate to? How about: (a1.equals(s2)) Why?

39 I/O Example String lines[] = loadstrings("sampledata.txt"); println("there are " + lines.length + " lines"); for (int i=0; i < lines.length; i++) { //println(lines[i]); String[] columns = split(lines[i], ','); for (int k=0; k<columns.length; k++) { print(columns[k].trim() +, ); } }

40 Arrays - basic A fundamental type to store a list of values zero- based in processing first element is referenced with index [0] To define an array type[] var To inimalize new type[count] (int[] arr = new int[3];) a series: {a,b,c n} (int[] arr = {1,5,8}; ) To assign a value at an index var[index] = value (arr[0] = 1;) Use length a/ribute to get size of array int i = arr.length;

41 Array- example void setup() { size(200, 200); stroke(0); background(255); strokeweight(10); } void draw() { int[] values = new int[4]; values[0] = 10; values[1] = 20; values[2] = 30; values[3] = 40; for (int i=0; i<values.length; i++) { point(values[i], values[i]); } }

42 Two- Dimensional Arrays data onen lives in two dimensions. Think spreadsheet with columns and rows A two- dimensional array is an array of arrays int[] arr = {10, 20, 30, 40}; OR int[][] arr ={ {10, 20, 30}, {40}}; To loop: int[][] values = { {10, 20, 30}, {40} }; for (int i=0; i<values.length; i++) { for (int k=0; k<values[i].length; k++) point(values[i][k], values[i][k]); }

43 Two- dimensional Array Greyscale Exercise How to generate this with this array? int[][] arr = { {230, 75, 189}, {236, 80, 80}, {20, 255, 80}, {0, 150, 155} };

44 ArrayList Stores a variable number of objects Similar to an array, but much easier to add and remove items Is resized dynamically size() how many items in the list add() remove() get()

45 Hashmap A collecmon type that stores objects referenced by a key. SomeMmes referred to as an associamve array, or dicmonary A Java type described here h/p://docs.oracle.com/javase/1.4.2/docs/api/java/uml/ HashMap.html HashMap mymap = new HashMap(iniMalCapacity, loadfactor); OR HashMap mymap = new HashMap(); inimalcapacity is default # of buckets. (default = 16) loadfactor sets the point when the capacity is doubled (default =.75) Requires use of Iterators to loop

46 Math & Stat Data mapping is an important operamon in processing. Common in situamons where you want to map a value to a corresponding locamon on the screen. map() will transform a value from one range to another map(float value, float low, float high, float newlow, float newhigh) Example float value = 25; float v = map(value, 0, 100, 0, 200); println(v); //prints out 50.0

47 Math &Stat II Normalize a set of values to a standard range The norm() will normalize a value between 0 and 1 norm(float value, float low, float high) Example float value = 10; float v = norm(value, 0, 50); println(v); // Prints "0.2

48 Math & Stat III InterpolaMon, momon, do/ed- lines The lerp() funcmon is used for calculamng a number in a range at a given increment. lerp(float low, float high, float increment) increment is between 0 and 1 map, norm, and lerp are closely related norm = map(val, low, high, 0,1) map = lerp(start, end, norm(val, low, high))

49 Lerp example void setup() { size(200, 200); stroke(0); noloop(); } void draw() { int x1 = 15; int y1 = 10; int x2 = 80; int y2 = 90; line(x1, y1, x2, y2); for (int i = 0; i <= 10; i++) { float x = lerp(x1, x2, i/10.0) + 10; float y = lerp(y1, y2, i/10.0); point(x, y); } }

50 RGB Color Cube

51 Color HSB & RGB RGB is for Red- Green- Blue spectrum.

52 HSB Hue the actual color SaturaMon purity of color Brightness 0 is black 255 is washed out white

53 Color InterpolaMon lerpcolor interpolamon between a range similar to lerp, but returns a color lerpcolor(start_color, end_color, increment) start and end color is the range to interpolate between increment is the amount or degree of interpolamon lerpcolor(start, end, increment, HGB RGB); can also select between HGB and RGB

54 HSB vs. RGB HSB breaks components into visual RGB is preferred when there are significant changes in hue starmng at red and interpolamng to green (thru blue) will move through all colors in the spectrum However, RGB moving between orange to blue would first go thru gray which is not always desired

55 Map example

56 Display the map PImage mapimage; void setup() { size(640,400); //store map mapimage = loadimage("map.png"); } void draw() { smooth(); fill(190,0,0); nostroke(); } //display map background(mapimage);

57 Loading Data Table class Let s add a class to handle loading data in the format of: state- abbreviamon </tab> value Classes in processing can be stored in the.pde extension and included in sketch Takes a filename and parses it into String[][] We will make extensive use of this class type in this demonstramon Add Table.pde into sketch

58 Data Items locamons.tsv (.tsv is tab- seperated values) random.tsv (use as changes in populamon) populamon.tsv Will load each of these into a Table object

59 Loading LocaMon Data Table locamontable; int rowcount; setup() { //make a data table from a file that contains the coordinates of each state locamontable = new Table("locaMons.tsv"); rowcount = locamontable.getrowcount(); } draw() { for (int row = 0; row < rowcount; row++) { String abbrev = locamontable.getrowname(row); float x = locamontable.getfloat(row, 1); float y = locamontable.getfloat(row, 2); ellipse(x,y,9,9); } }

60 PopulaMon and Random Changes Let s add a few more data files PopulaMon.tsv and random.tsv In declaramons Table datatable, populamontable; In setup() loadrandomchangesdatatable(); loadpopulamondatatable();

61 Get the High and Lows In DeclaraMon //for capturing ranges float datamin = MAX_FLOAT; float datamax = MIN_FLOAT; float dataminpop = MAX_FLOAT; float datamaxpop = MIN_FLOAT;

62 Loading Random Changes Data void loadrandomchangesdatatable() { datatable = new Table("random.tsv"); for (int row = 0; row<datatable.getrowcount(); row++) { float value = datatable.getfloat(row, 1); } if (value > datamax) { datamax = value; } else if (value < datamin) { datamin = value; } println("data min is " +datamin + " and data max is " + datamax); }

63 Loading PopulaMon Data void loadpopulamondatatable() { populamontable = new Table("populaMon.tsv"); for (int row = 0; row<populamontable.getrowcount(); row++) { float value = populamontable.getfloat(row, 1); } if (value > datamaxpop) { datamaxpop = value; } else if (value < dataminpop) { dataminpop = value; } println("populamon min is " +datamin + " and populamon max is " + datamax); }

64 Visualize Random Changes Replace call to ellipse in draw method with: for (int row = 0; row < rowcount; row++) { String abbrev = locamontable.getrowname(row); float x = locamontable.getfloat(row, 1); float y = locamontable.getfloat(row, 2); //ellipse(x,y,9,9); drawellipsebysize(x, y, abbrev); }

65 Review map() map() will transform a value from one range to another map(float value, float low, float high, float newlow, float newhigh) Example float value = 25; float v = map(value, 0, 100, 0, 200); println(v); //prints out 50.0

66 Draw Ellipse By Size We will use the Random Changes data to establish the size of the ellipse //draw thje ellipse based on the size in //the random changes data table public void drawellipsebysize(float x, float y, String abbrev) { float value = datatable.getfloat(abbrev,1); float mapped_value = map(value, datamin, datamax, 2, 40); fill(128); //grey ellipse(x, y, mapped_value, mapped_value); }

67 Let s add some color We will use the populamon table to visualize larger state size Let s draw the ellipse by both size and color Size of ellipse - > changes in random stats Color of ellipse - > size of the state relamve to other states

68 draw() - size and color void drawellipsesizeandcolor(float x, float y, String abbrev) { float value = datatable.getfloat(abbrev,1); float mapped_value = map(value, datamin, datamax, 2, 40); color between = getcolor(abbrev); fill(between); ellipse(x, y, mapped_value, mapped_value); }

69 Color InterpolaMon lerpcolor interpolamon between a range similar to lerp, but returns a color lerpcolor(start_color, end_color, increment) start and end color is the range to interpolate between increment is the amount or degree of interpolamon lerpcolor(start, end, increment, HGB RGB); can also select between HGB and RGB

70 HSB vs. RGB HSB breaks components into visual RGB is preferred when there are significant changes in hue starmng at red and interpolamng to green (thru blue) will move through all colors in the spectrum However, RGB moving between orange to blue would first go thru gray which is not always desired

71 RGB Color Cube

72 HSB Hue the actual color SaturaMon purity of color Brightness 0 is black 255 is washed out white

73 draw size & color cont. color getcolor(string abbrev) { float value = populamontable.getfloat(abbrev,1); float percent = norm(value, dataminpop, datamaxpop); color between = lerpcolor(#fc082c, #0F26F0, percent); // between = lerpcolor(#fc082c, #0F26F0, percent, HSB); return between; }

74 Use Color Selector

75 Mouse Over Effects Good way to show interacmon Let s display informamon to the user while hovering on a state capital Will need to display some text And capture mouse locamons! Let s create a method in draw to do this checkmouserollover()

76 Adding Text to Sketches PFont() datatype to store a font loadfont() loads the font- type must be in the data folder Use the Create Font menu item

77 Adding Fonts to your Sketch The Create Font tool Font added to data folder in sketch must select size

78 Adding Text Pfont font = loadfont( Universe- bold- 12.vlw ); textfont(font); //write text starmng from x,y text( blah blah, 50, 50); //define bounding box for text text( blah blah, 50, 50, 200, 200); Universe- bold must be in data folder fonts end with.vlw extension

79 CheckMouseRollOver() void checkmouserollover(float x, float y, float value, String abbrev) { float radius = 0; if (value >= 0 ) { radius = map(value, 0, datamax, 1.5, 15); } else { radius = map(value, 0, datamin, 1.5, 15); } } if (dist(x, y, mousex, mousey) < radius+2) { fill(0); textalign(center); //show data value and state in parenthesis text(value + "(" + abbrev + ")", x, y- radius- 4); }

80 A few more items..complex forms For drawing more complex shapes where basic ellipses, rects, etc. do not suffice, consider the following: 1. beginshape() and endshape() 2. vertex 3. Arcs 4. Curves 5. Bezier curves, Bezier VerMces

81 Processing.js To render processing sketches to the web, two approaches 1. Java Applets (going away) 2. Javascript (universally browser compamble) Go to h/p://processingjs.org Uses the Canvas object as a drawing surface Example <script src= processing min.js ></script> <canvas data- processing- source= mysketch.pde ></canvas>

82 Thank- you Any quesmons please me at: Terry (will do my best to help if I can!)