Introduction to Processing. Sally Kong

Transcription

1 Introduction to Processing Sally Kong

2 - Open Source Platform - Geared toward creating visual, interactive media - Created by Ben Fry and Casey Reas

3 Basic Setup void setup() { size(800, 600); background(255); void draw() { Window width and height 0 for Black, 255 for White

4 Window Coordinate System (0,0) (width,0) (0, height) (width, height)

5 Simple Shapes Line: line(x1, y1, x2, y2); Ellipse: ellipse(centerx, centery, width, height); Rectangle: rect(upleftx, uplefty, width, height); Triangle: triangle(x1, y1, x2, y2, x3, y3);

6 Let s Draw! void setup() { size(800, 600); background(255); void draw() { line(width/2, height/2, mousex, mousey);

7 Variable Types integer: int number = 1; float (decimal number): float f1 = 0.5; boolean (true or false): boolean state1 = true; color in (R,G,B): color c1 = color(255, 255, 0); color in (R,G,B,A): color c1 = color(255, 255, 0, 150); String (characters): String text1 = Hello World ; Type Variable_Name = Variable_Value;

8 Useful Preset Values & Random //window dimensions width height //current mouse coordinates mousex mousey //previous mousex, mousey pmousex pmousey // boolean statements mousepressed keypressed //random float within a range random(start, end);

9 Conditional Statement if (statement is true) { //then do this else { //do something else *else is optional void setup() { size(500, 500); background(0); void draw() { float r = random(0, 255); float g = random(0, 255); float b = random(0, 255); color linecolor = color(r,g,b); stroke(linecolor); if(mousepressed){ line(width/2, height/2, mousex, mousey);

10 Having fun? Want a break?

11 Functions to Play With //to color shapes fill(color c); //to color lines stroke(color c); //thickness of strokes strokeweight(float f); // no lines/outlines nostroke(); //write texts text(string txt, float x, float y); // get in between colors color middle = lerpcolor(color from, color to, float percent); // get in between values float newval = map(inputvalue, lowbound1, upbound1, lowerbound2, upperbound2); // get distance between two points float distance = dist(float x1, float y1, float x2, float y2);

12 More!!! If you re interested. void setup() { size(500, 500); background(0); void draw() { color mask = color(0,0,0,20); fill(mask); rect(0,0, width, height); float r = random(100, 255); float g = random(100, 255); float b = random(100, 255); color ran = color(r,g,b); fill(ran); nostroke(); if(mousepressed){ ellipse(mousex, mousey, 10, 10); ellipse(width - mousex, mousey, 10, 10); ellipse(mousex, height - mousey, 10, 10); ellipse(width - mousex, height - mousey, 10, 10);

13 While Loop while(statement is true) { //do this void setup() { size(500, 500); background(255); void draw() { int count = 10; while(count > 0) { float side = count * 10; rect(width/2 - side/2, height/2 - side/2, side, side); count--; //same with count = count-1;

14 For Loop void setup() { size(500, 500); background(255); void draw() { for(int count = 10; count > 0; count--){ float side = count * 10; rect(width/2 - side/2, height/2 - side/2, side, side);

15 Nested For Loops Make sure to not use the same variable for the outer and inner for loops! void setup() { size(500, 500); background(255); void draw() { nostroke(); background(255); int n = 10; //number of parts for(int x = 0 ; x <= n; x++){ for(int y = 0; y <= n; y++) { //increment color color gradient = color((x+y)*10, 0, 0); fill(gradient); //increment positions ellipse(x*(width/n), y*(height/n), 20,20);

16 PDF Export 1. Import the library 2. Basic setup: beginrecord(pdf, title.pdf ); endrecord(); BTW: beginrecord(pdf, "####.pdf"); // saves the pdf with the frame number

17 PDF Export with keypressed() import processing.pdf.*; boolean save; void setup() { size(500, 500); framerate(2); void draw() { if(save) { beginrecord(pdf, "####. pdf"); // do something if(save) { endrecord(); save = false; void keypressed() { if (keycode == S ) { save = true;

18 Resources:

19 Array - container for variables - initializing arrays: ex. int[] numbers = {20, 40, 50; int[] numbers = new int[3]; //new int[size] - access variables by their index 0 to (size of the array -1) ex. numbers[0] = 20; numbers[1] = 40; numbers[2] = 50; int[] numbers = {20, 40, 50, 25, 21, 53; void setup() { size(400, 200); background(255); void draw() { // get size of array by.length for(int i = 0; i < numbers.length; i++){ nostroke(); fill(color(255, numbers[i] * 2, 0)); rect( (i+1)*50, height - numbers[i], 40, numbers[i]);

20 Modulus % Modulus: returns the remainder ex. 7%7 will give you 0 8%7 will give you 1 9%7 will give you 2. * Use them with your Arrays!!!

21 Modulus % Example color[] colors = new color[7]; void setup() { size(800, 600); background(255); colors[0] = color(241, 90, 90); colors[1] = color(240, 141, 25); colors[2] = color(240, 196, 25); colors[3] = color(78, 186, 111); colors[4] = color(45, 149, 191); colors[5] = color(27, 90, 115); colors[6] = color(149, 91, 165); void draw() { int n = 15; //number of parts for(int i = 0; i < n; i++){ nostroke(); fill(colors[i%(colors.length)]); rect (0, (i+1) * (height/(n+2)), width, (height/(n+3)));

22 loadstrings(); - read.txt files by line - returns a String[] *Make sure the.txt file is in a folder called data inside the sketch folder! - example: String[] lines = loadstrings( example. txt ); lines[0] will give Caffe Latte lines[1] will give 190 *Make it to an int like this: int value = int(lines[1]);

23 loadstrings() example void setup() { size(800, 350); background(color(1,69, 47)); noloop(); void draw() { nostroke(); fill(28); rect(30, 30, width-60, height-60); String[] lines = loadstrings("example. txt"); int ypointer = 45; textsize(30); for(int i = 0 ; i < lines.length; i++) { if(i%2 == 1) { ypointer += 40; //using calorie for transparency color cal = color(186, 119, 55, map(int(lines[i]), 15, 260, 100, 255)); fill(cal); //calorie bar rect(width/2-20 -int(lines[i]), ypointer-20, int(lines[i]), 20); text(lines[i-1], width/2, ypointer); You can download the example.txt at: