diff options
| -rw-r--r-- | processing.html.markdown | 216 |
1 files changed, 131 insertions, 85 deletions
diff --git a/processing.html.markdown b/processing.html.markdown index fc5dc997..e437ee95 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -3,16 +3,22 @@ language: processing filename: learnprocessing.pde contributors: - ["Phone Thant Ko", "http://github.com/phonethantko"] + - ["Divay Prakash", "https://github.com/divayprakash"] --- + ## Introduction -Processing is a programming language for creation of digital arts and multimedia content, allowing non-programmers to -learn fundamentals of computer programming in a visual context. -While the language is based on Java language, -its syntax has been largely influenced by both Java and Javascript syntaxes. [See more here](https://processing.org/reference/) -The language is statically typed, and also comes with its official IDE to compile and run the scripts. +Processing is a programming language for creation of digital arts and +multimedia content, allowing non-programmers to learn fundamentals of computer +programming in a visual context. + +While the language is based on Java language, its syntax has been largely +influenced by both Java and Javascript syntaxes. [See more here](https://processing.org/reference/) + +The language is statically typed, and also comes with its official IDE to +compile and run the scripts. -```processing +``` /* --------- Comments --------- @@ -29,23 +35,28 @@ The language is statically typed, and also comes with its official IDE to compil /* --------------------------------------- Writing and Running Processing Programs --------------------------------------- - */ +*/ -// In Processing, your program's entry point is a function named setup() with a void return type. +// In Processing, the program entry point is a function named setup() with a +// void return type. // Note! The syntax looks strikingly similar to that of C++. void setup() { // This prints out the classic output "Hello World!" to the console when run. - println("Hello World!"); // Another language with a semi-column trap, ain't it? + println("Hello World!"); // Another language with a semi-column trap, aint it? } -// Normally, we put all the static codes inside the setup() method as the name suggest since it only runs once. +// Normally, we put all the static codes inside the setup() method as the name +// suggest since it only runs once. // It can range from setting the background colours, setting the canvas size. background(color); // setting the background colour -size(width,height,[renderer]); // setting the canvas size with optional parameter defining renderer +size(width,height,[renderer]); // setting the canvas size with optional +// parameter defining renderer // You will see more of them throughout this document. -// If you want to run the codes indefinitely, it has to be placed in draw() method. -// draw() must exist if you want the code to run continuously and obviously, there can only be one draw() method. +// If you want to run the codes indefinitely, it has to be placed in draw() +// method. +// draw() must exist if you want the code to run continuously and obviously, +// there can only be one draw() method. int i = 0; void draw() { // This block of code loops forever until stopped @@ -54,22 +65,25 @@ void draw() { } // Now that we know how to write the working script and how to run it, -// we will proceed to explore what data types and collections are supported in Processing. +// we will proceed to explore what data types and collections are supported in +// Processing. /* ------------------------ Datatypes & collections ------------------------ */ -// According to Processing References, Processing supports 8 primitive datatypes as follows. +// According to Processing References, Processing supports 8 primitive +// datatypes as follows. boolean booleanValue = true; // Boolean byte byteValueOfA = 23; // Byte char charValueOfA = 'A'; // Char -color colourValueOfWhiteM = color(255, 255, 255); // Colour (Specified using color() method) +color colourValueOfWhiteM = color(255, 255, 255); // Colour (Specified using +// color() method) color colourValueOfWhiteH = #FFFFFF; // Colour (Specified using hash value) int intValue = 5; // Integer (Number without decimals) -long longValue = 2147483648L; // "L" is added to the number to mark it as a long +long longValue = 2147483648L; // "L" is added to number to mark it as a long float floatValue = 1.12345; // Float (32-bit floating-point numbers) double doubleValue = 1.12345D; // Double (64-bit floating-point numbers) @@ -79,13 +93,15 @@ double doubleValue = 1.12345D; // Double (64-bit floating-point numbers) // they need to be converted into "int" and "float" datatypes respectively, // using (int) and (float) syntax before passing into a function. -// There is a whole bunch of default composite datatypes available for use in Processing. +// There is a whole bunch of default composite datatypes available for use in +// Processing. // Primarily, I will brief through the most commonly used ones to save time. // String // While char datatype uses '', String datatype uses "" - double quotes. String sampleString = "Hello, Processing!"; -// String can be constructed from an array of char datatypes as well. We will discuss array very soon. +// String can be constructed from an array of char datatypes as well. We will +// discuss array very soon. char source = {'H', 'E', 'L', 'L', 'O'}; String stringFromSource = new String(source); // HELLO // As in Java, strings can be concatenated using the "+" operator. @@ -93,27 +109,29 @@ print("Hello " + "World!"); // Hello World! // Array // Arrays in Processing can hold any datatypes including Objects themselves. -// Since arrays are similar to objects, they must be created with the keyword "new". +// Since arrays are similar to objects, they must be created with the keyword +// "new". int[] intArray = new int[5]; int[] intArrayWithValues = {1, 2, 3}; // You can also populate with data. // ArrayList // Functions are similar to those of array; arraylists can hold any datatypes. -// The only difference is arraylists resize dynamically, -// as it is a form of resizable-array implementation of the Java "List" interface. +// The only difference is arraylists resize dynamically, as it is a form of +// resizable-array implementation of the Java "List" interface. ArrayList<Integer> intArrayList = new ArrayList<Integer>(); // Object // Since it is based on Java, Processing supports object-oriented programming. -// That means you can basically define any datatypes of your own and manipulate them to your needs. +// That means you can basically define any datatypes of your own and manipulate +// them to your needs. // Of course, a class has to be defined before for the object you want. // Format --> ClassName InstanceName SomeRandomClass myObject // then instantiate later //or SomeRandomClass myObjectInstantiated = new SomeRandomClass(); -// Processing comes up with more collections (eg. - Dictionaries and Lists) by default, -// for the simplicity sake, I will leave them out of discussion here. +// Processing comes up with more collections (eg. - Dictionaries and Lists) by +// default, for the simplicity sake, I will leave them out of discussion here. /* ------------ Maths @@ -128,7 +146,8 @@ SomeRandomClass myObjectInstantiated = new SomeRandomClass(); 3.0 / 2 // 1.5 3.0 % 2 // 1.0 -// Processing also comes with a set of functions that simplify mathematical operations. +// Processing also comes with a set of functions that simplify mathematical +// operations. float f = sq(3); // f = 9.0 float p = pow(3, 3); // p = 27.0 int a = abs(-13) // a = 13 @@ -137,18 +156,21 @@ int r2 = round(3.7); // r2 = 4 float sr = sqrt(25); // sr = 5.0 // Vectors -// Processing provides an easy way to implement vectors in its environment using PVector class. -// It can describe a two or three dimensional vector and +// Processing provides an easy way to implement vectors in its environment +// using PVector class. It can describe a two or three dimensional vector and // comes with a set of methods which are useful for matrices operations. // You can find more information on PVector class and its functions here. // (https://processing.org/reference/PVector.html) // Trigonometry -// Processing also supports trigonometric operations by supplying a set of functions. -// sin(), cos(), tan(), asin(), acos(), atan() and also degrees() and radians() for convenient conversion. -// However, those functions take angle in radians as the parameter so it has to be converted beforehand. +// Processing also supports trigonometric operations by supplying a set of +// functions. sin(), cos(), tan(), asin(), acos(), atan() and also degrees() +// and radians() for convenient conversion. +// However, those functions take angle in radians as the parameter so it has +// to be converted beforehand. float one = sin(PI/2); // one = 1.0 -// As you may have noticed, there exists a set of constants for trigonometric uses; +// As you may have noticed, there exists a set of constants for trigonometric +// uses; // PI, HALF_PI, QUARTER_PI and so on... /* ------------- @@ -168,14 +190,14 @@ if (author.getAppearance().equals("hot")) { int i = 3; String value = (i > 5) ? "Big" : "Small"; // "Small" -// Switch-case structure can be used to check multiple conditions more concisely. +// Switch-case structure can be used to check multiple conditions concisely. int value = 2; switch(value) { case 0: - print("Nought!"); // This doesn't get executed. + print("Nought!"); // This does not get executed. break; // Jumps to the next statement case 1: - print("Getting there..."); // This again doesn't get executed. + print("Getting there..."); // This again does not get executed. break; case 2: print("Bravo!"); // This line gets executed. @@ -203,13 +225,16 @@ while(j > 0) { loop(); // allows the draw() method to run forever while noLoop(); // only allows it to run once. redraw(); // runs the draw() method once more. -exit(); // This stops the program. It is useful for programs with draw() running continuously. +exit(); // This stops the program. It is useful for programs with draw() +// running continuously. ``` + ## Drawing with Processing -Since you will have understood the basics of the language by now, we will now look into the best part of Processing; DRAWING. -```processing +Since you will have understood the basics of the language by now, we will now +look into the best part of Processing - DRAWING. +``` /* ------ Shapes ------ @@ -233,12 +258,15 @@ triangle(x1, y1, x2, y2, x3, y3); // Rectangle rect(a, b, c, d, [r]); // With optional parameter defining the radius of all corners -rect(a, b, c, d, [tl, tr, br, bl]); // With optional set of parameters defining radius of each corner -// Draws a rectangle with {a, b} as a top left coordinate and c and d as width and height respectively. +rect(a, b, c, d, [tl, tr, br, bl]); // With optional set of parameters defining +// radius of each corner +// Draws a rectangle with {a, b} as a top left coordinate and c and d as width +// and height respectively. // Quad quad(x, y, x2, y2, x3, y3, x4, y4); -// Draws a quadrilateral with parameters defining coordinates of each corner point. +// Draws a quadrilateral with parameters defining coordinates of each corner +// point. // Ellipse ellipse(x, y, width, height); @@ -249,19 +277,23 @@ arc(x, y, width, height, start, stop, [mode]); // While the first four parameters are self-explanatory, // start and end defined the angles the arc starts and ends (in radians). // Optional parameter [mode] defines the filling; -// PIE gives pie-like outline, CHORD gives the chord-like outline and OPEN is CHORD without strokes +// PIE gives pie-like outline, CHORD gives the chord-like outline and OPEN is +// CHORD without strokes // Curves // Processing provides two implementation of curves; using curve() and bezier(). -// Since I plan to keep this simple I won't be discussing any further details. +// Since I plan to keep this simple I wont be discussing any further details. // However, if you want to implement it in your sketch, here are the references: -// (https://processing.org/reference/curve_.html)(https://processing.org/reference/bezier_.html) +// (https://processing.org/reference/curve_.html) +// (https://processing.org/reference/bezier_.html) // 3D Shapes -// 3D space can be configured by setting "P3D" to the renderer parameter in size() method. +// 3D space can be configured by setting "P3D" to the renderer parameter in +// size() method. size(width, height, P3D); -// In 3D space, you will have to translate to the particular coordinate to render the 3D shapes. +// In 3D space, you will have to translate to the particular coordinate to +// render the 3D shapes. // Box box(size); // Cube with same length defined by size @@ -270,27 +302,32 @@ box(w, h, d); // Box with width, height and depth separately defined // Sphere sphere(radius); // Its size is defined using the radius parameter // Mechanism behind rendering spheres is implemented by tessellating triangles. -// That said, how much detail being rendered is controlled by function sphereDetail(res) +// That said, how much detail being rendered is controlled by function +// sphereDetail(res) // More information here: (https://processing.org/reference/sphereDetail_.html) // Irregular Shapes -// What if you wanted to draw something that's not made available by Processing's functions? -// You can use beginShape(), endShape(), vertex(x,y) to define shapes by specifying each point. -// More information here: (https://processing.org/reference/beginShape_.html) -// You can also use custom made shapes using PShape class.(https://processing.org/reference/PShape.html) +// What if you wanted to draw something thats not made available by Processing +// functions? +// You can use beginShape(), endShape(), vertex(x,y) to define shapes by +// specifying each point. More information here: +// (https://processing.org/reference/beginShape_.html) +// You can also use custom made shapes using PShape class: +// (https://processing.org/reference/PShape.html) /* --------------- Transformations --------------- */ -// Transformations are particularly useful to keep track of the coordinate space -// and the vertices of the shapes you have drawn. -// Particularly, matrix stack methods; pushMatrix(), popMatrix() and translate(x,y) +// Transformations are particularly useful to keep track of the coordinate +// space and the vertices of the shapes you have drawn. Particularly; +// matrix stack methods; pushMatrix(), popMatrix() and translate(x,y) pushMatrix(); // Saves the current coordinate system to the stack // ... apply all the transformations here ... popMatrix(); // Restores the saved coordinate system -// Using them, the coordinate system can be preserved and visualized without causing any conflicts. +// Using them, the coordinate system can be preserved and visualized without +// causing any conflicts. // Translate translate(x, y); // Translates to point{x, y} i.e. - setting origin to that point @@ -310,51 +347,63 @@ scale(s); // Scale the coordinate system by either expanding or contracting it. */ // Colours -// As I have discussed earlier, the background colour can be configured using background() function. -// You can define a color object beforehand and then pass it to the function as an argument. +// As I have discussed earlier, the background colour can be configured using +// background() function. You can define a color object beforehand and then +// pass it to the function as an argument. color c = color(255, 255, 255); // WHITE! -// By default, Processing uses RGB colour scheme but it can be configured to HSB using colorMode(). -// Read here: (https://processing.org/reference/colorMode_.html) +// By default, Processing uses RGB colour scheme but it can be configured to +// HSB using colorMode(). Read more here: +// (https://processing.org/reference/colorMode_.html) background(color); // By now, the background colour should be white. // You can use fill() function to select the colour for filling the shapes. -// It has to be configured before you start drawing shapes so the colours gets applied. +// It has to be configured before you start drawing shapes so the colours gets +// applied. fill(color(0, 0, 0)); -// If you just want to colour the outlines of the shapes then you can use stroke() function. -stroke(255, 255, 255, 200); // stroke colour set to yellow with transparency set to a lower value. +// If you just want to colour the outlines of the shapes then you can use +// stroke() function. +stroke(255, 255, 255, 200); // stroke colour set to yellow with transparency +// set to a lower value. // Images -// Processing can render images and use them in several ways. Mostly stored as PImage datatype. +// Processing can render images and use them in several ways. Mostly stored as +// PImage datatype. filter(shader); // Processing supports several filter functions for image manipulation. texture(image); // PImage can be passed into arguments for texture-mapping the shapes. +``` + +If you want to take things further, there are more things Processing is powered +for. Rendering models, shaders and whatnot. There's too much to cover in a +short documentation, so I will leave them out here. Shoud you be interested, +please check out the references. ``` -If you want to take things further, there are more things Processing is powered for. Rendering models, shaders and whatnot. -There's too much to cover in a short documentation, so I will leave them out here. Shoud you be interested, please check out the references. -```processing // Before we move on, I will touch a little bit more on how to import libraries -// so you can extend Processing's functionality to another horizon. +// so you can extend Processing functionality to another horizon. /* ------- Imports ------- */ -// The power of Processing can be further visualized when we import libraries and packages into our sketches. +// The power of Processing can be further visualized when we import libraries +// and packages into our sketches. // Import statement can be written as below at the top of the source code. import processing.something.*; - ``` + ## DTC? -Down To Code? Let's get our hands dirty! +Down To Code? Let's get our hands dirty! -Let us see an example from openprocessing to visualize how much Processing is capable of within few lines of code. -Copy the code below into your Processing IDE and see the magic. +Let us see an example from openprocessing to visualize how much Processing is +capable of within few lines of code. -```processing +Copy the code below into your Processing IDE and see the magic. -// Disclaimer: I did not write this program since I currently am occupied with internship and -// this sketch is adapted from openprocessing since it shows something cool with simple codes. +``` +// Disclaimer: I did not write this program since I currently am occupied with +// internship and this sketch is adapted from openprocessing since it shows +// something cool with simple codes. // Retrieved from: (https://www.openprocessing.org/sketch/559769) float theta; @@ -380,8 +429,6 @@ void draw() { } - - void branch(float len) { col=map(len, 0, 90, 150, 255); fill(col, 0, 74); @@ -390,7 +437,6 @@ void branch(float len) { ellipse(0, -len, 3, 3); len *= 0.7; - if (len>30) { pushMatrix(); translate(0, -30); @@ -406,16 +452,16 @@ void branch(float len) { } } - ``` -Processing is easy to learn and is particularly useful to create multimedia contents (even in 3D) without -having to type a lot of codes. It is so simple that you can read through the code and get a rough idea of -the program flow. -However, that does not apply when you introduce external libraries, packages and even your own classes. -(Trust me! Processing projects can get real humongous...) +Processing is easy to learn and is particularly useful to create multimedia +contents (even in 3D) without having to type a lot of codes. It is so simple +that you can read through the code and get a rough idea of the program flow. + +However, that does not apply when you introduce external libraries, packages +and even your own classes. (Trust me! Processing projects can get real humongous...) -## Some useful resources: +## Some useful resources - [Processing Website](http://processing.org) - [Processing Sketches](http://openprocessing.org) |