From 8f5f8d576bf248a2af9689cb88161f06e2a47e02 Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Fri, 29 Jun 2018 16:52:13 +0630 Subject: Initial Commit --- processing.html.markdown | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 processing.html.markdown (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown new file mode 100644 index 00000000..707e09c9 --- /dev/null +++ b/processing.html.markdown @@ -0,0 +1,27 @@ +--- +language: "Processing" +filename: learnprocessing.pde +contributors: + - ["Phone Thant Ko", "http://github.com/phonethantko"] +--- +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 off on Java language, +its syntax has been largely influenced by both Java and Javascript syntaxes. [See more here](https://processing.org/reference/) +The language also comes with its official IDE to compile and run the scripts. + +```Processing +// Single-line comment starts with // + +/* + Since Processing is based on Java the syntax for its comments are the same as Java (as you may have noticed above)! + Multi-line comments are wrapped around /* */ +*/ + +// In Processing, your program's 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, aint it? +} + +``` -- cgit v1.2.3 From 45432cdc0d9ccf083d4f32be4fa175ee0fa6bbe2 Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Fri, 29 Jun 2018 16:59:16 +0630 Subject: Update processing.html.markdown --- processing.html.markdown | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 707e09c9..f4b90882 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -5,15 +5,17 @@ contributors: - ["Phone Thant Ko", "http://github.com/phonethantko"] --- 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 off on Java language, -its syntax has been largely influenced by both Java and Javascript syntaxes. [See more here](https://processing.org/reference/) +learn fundamentals of computer programming in a visual context. +While the language is based off on Java language, +its syntax has been largely influenced by both Java and Javascript syntaxes. [See more here](https://processing.org/reference/) The language also comes with its official IDE to compile and run the scripts. ```Processing // Single-line comment starts with // /* - Since Processing is based on Java the syntax for its comments are the same as Java (as you may have noticed above)! + Since Processing is based on Java, + the syntax for its comments are the same as Java (as you may have noticed above)! Multi-line comments are wrapped around /* */ */ -- cgit v1.2.3 From 96335abf1079668a5cbe10037de9a58ea6e98af8 Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Fri, 29 Jun 2018 18:02:18 +0630 Subject: 29/06/2018 - 6:02PM --- processing.html.markdown | 69 +++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 63 insertions(+), 6 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index f4b90882..2d70e082 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -4,26 +4,83 @@ filename: learnprocessing.pde contributors: - ["Phone Thant Ko", "http://github.com/phonethantko"] --- +## 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 off on Java language, its syntax has been largely influenced by both Java and Javascript syntaxes. [See more here](https://processing.org/reference/) The language also comes with its official IDE to compile and run the scripts. -```Processing +```processing +/* --------- + Comments + --------- +*/ + // Single-line comment starts with // /* - Since Processing is based on Java, - the syntax for its comments are the same as Java (as you may have noticed above)! - Multi-line comments are wrapped around /* */ + Since Processing is based on Java, + the syntax for its comments are the same as Java (as you may have noticed above)! + Multi-line comments are wrapped as seen here. */ +/* --------------------------------------- + Writing and Running Processing Programs + --------------------------------------- + */ + // In Processing, your program's entry point is a function named setup() with a void return type. -// Note! The syntax looks strikingly similar to that of C++ +// 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, aint it? + println("Hello World!"); // Another language with a semi-column trap, ain't it? } +// Normally, we put all the static codes inside the setup() method as the name suggests. +// It can range from setting the background colours, setting the canvas size. +// You will see more of them throughout this document. + +// 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. + +/* ----------------------- + Datatypes & collections + ------------------------ +*/ + +// 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 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 +float floatValue = 1.12345; // Float (32-bit floating-point numbers) +double doubleValue = 1.12345D; // Double (64-bit floating-point numbers) + +// NOTE! +// Although datatypes "long" and "double" work in the language, +// processing functions do not use these datatypes, therefore +// they need to be converted into "int" and "float" datatypes respectively, +// using (int) and (float) syntax before passing into a function. + + + + ``` +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 really large) + +## What's Next? + +Here, I have compiled some useful resources: + + - [Processing Website](http://processing.org) + - [Processing Sketches](http://openprocessing.org) -- cgit v1.2.3 From c258855144e5c59b8fa84730878e179fbb19807f Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Mon, 2 Jul 2018 11:14:50 +0630 Subject: 2/7/18 11:14PM --- processing.html.markdown | 84 +++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 79 insertions(+), 5 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 2d70e082..83f774ee 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -8,9 +8,9 @@ contributors: 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 off on Java language, +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 also comes with its official IDE to compile and run the scripts. +The language is statically typed, and also comes with its official IDE to compile and run the scripts. ```processing /* --------- @@ -38,10 +38,19 @@ void setup() { println("Hello World!"); // Another language with a semi-column trap, ain't it? } -// Normally, we put all the static codes inside the setup() method as the name suggests. +// 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. // 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. +int i = 0; +void draw() { + // This block of code loops forever until stopped + print(i); + i++; // Increment Operator! +} + // 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. @@ -68,8 +77,73 @@ 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. +// 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. +char source = {'H', 'E', 'L', 'L', 'O'}; +String stringFromSource = new String(source); // HELLO +// As in Java, strings can be concatenated using the "+" operator. +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". +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. +ArrayList intArrayList = new ArrayList(); + +// 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. +// 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(); // Assuming we have nothing to pass into the constructor + +// 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 + ------------ +*/ +// Arithmetic +1 + 1 // 2 +2 - 1 // 0 +2 * 3 // 6 +3 / 2 // 1 +3.0 / 2 // 1.5 +3.0 % 2 // 1.0 + +// 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 +int r1 = round(3.1); // r1 = 3 +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 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, a thing to note is 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; PI, HALF_PI, QUARTER_PI and so on... ``` Processing is easy to learn and is particularly useful to create multimedia contents (even in 3D) without -- cgit v1.2.3 From dd92983e8b2e85606c01c252e888c96fb43bb865 Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Mon, 2 Jul 2018 11:17:25 +0630 Subject: 2/7/18 11:17AM --- processing.html.markdown | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 83f774ee..f352b9c4 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -108,7 +108,7 @@ ArrayList intArrayList = new ArrayList(); // Format --> ClassName InstanceName SomeRandomClass myObject // then instantiate later //or -SomeRandomClass myObjectInstantiated = new SomeRandomClass(); // Assuming we have nothing to pass into the constructor +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. @@ -135,15 +135,18 @@ 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 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) +// 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, a thing to note is those functions take angle in radians as the parameter so it has to be converted beforehand. +// 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; PI, HALF_PI, QUARTER_PI and so on... +// As you may have noticed, there exists a set of constants for trigonometric uses; +// PI, HALF_PI, QUARTER_PI and so on... ``` Processing is easy to learn and is particularly useful to create multimedia contents (even in 3D) without -- cgit v1.2.3 From e7603786a8fcb88508b1298053c2a78ad65c9ed7 Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Mon, 2 Jul 2018 11:50:32 +0630 Subject: 2/7/18 11:50AM --- processing.html.markdown | 73 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 67 insertions(+), 6 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index f352b9c4..91d75cb4 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -54,9 +54,9 @@ 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. -/* ----------------------- - Datatypes & collections - ------------------------ +/* ------------------------ + Datatypes & collections + ------------------------ */ // According to Processing References, Processing supports 8 primitive datatypes as follows. @@ -113,10 +113,11 @@ 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. -/* ----------- - Maths - ------------ +/* ------------ + Maths + ------------ */ + // Arithmetic 1 + 1 // 2 2 - 1 // 0 @@ -148,6 +149,66 @@ float one = sin(PI/2); // one = 1.0 // As you may have noticed, there exists a set of constants for trigonometric uses; // PI, HALF_PI, QUARTER_PI and so on... +/* ------------- + Control Flow + ------------- +*/ + +// Conditional Statements +// If Statements - The same syntax as if statements in Java. +if (author.getAppearance().equals("hot")) { + print("Narcissism at its best!"); +} else { + // You can check for other conditions here. + print("Something is really wrong here!"); +} +// A shortcut for if-else statements can also be used. +int i = 3; +String value = (i > 5) ? "Big" : "Small"; // "Small" + +// Switch-case structure can be used to check multiple conditions more concisely. +int value = 2; +switch(value) { + case 0: + print("Nought!"); // This doesn't get executed. + break; // Jumps to the next statement + case 1: + print("Getting there..."); // This again doesn't get executed. + break; + case 2: + print("Bravo!"); // This line gets executed. + break; + default: + print("Not found!"); // This line gets executed if our value was some other value. + break; +} + +// Iterative statements +// For Statements - Again, the same syntax as in Java +for(int i = 0; i < 5; i ++){ + print(i); // prints from 0 to 4 +} + +// While Statements - Again, nothing new if you are familiar with Java syntax. +int j = 3; +while(j > 0) { + print(j); + j--; // This is important to prevent from the code running indefinitely. +} + +// loop()| noLoop() | redraw() | exit() +// These are more of Processing-specific functions to configure program flow. +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. +``` +Since you will have understood the basics of the language, we will now look into the best part of Processing; DRAWING. + +```processing + + + ``` 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 -- cgit v1.2.3 From 90ee44541ef66d4f8d0507c1b2080cf409078064 Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Mon, 2 Jul 2018 12:15:25 +0630 Subject: 2/7/18 12:15PM --- processing.html.markdown | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 91d75cb4..6423baa7 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -203,9 +203,44 @@ 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. ``` +## Drawing with Processing Since you will have understood the basics of the language, we will now look into the best part of Processing; DRAWING. ```processing +/* ------ + Shapes + ------ +*/ + +// 2D Shapes + +// Point +point(x, y); // In 2D space +point(x, y, z); // In 3D space +// Draws a point in the coordinate space. + +// Line +line(x1, y1, x2, y2); // In 2D space +line(x1, y1, z1, x2, y2, z2); // In 3D space +// Draws a line connecting two points defined by (x1, y1) and (x2, y2) + +// 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. + +// Quad +quad(x,y,x2,y2,x3,y3,x4,y4) +// Draws a quadrilateral with parameters defining coordinates of each corner point. + +// Arc; +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 + + -- cgit v1.2.3 From fa305fc98763d4c2cd204cfe9b5f0bc59daefc14 Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Mon, 2 Jul 2018 14:55:22 +0630 Subject: 2/7/18 2:55PM --- processing.html.markdown | 84 +++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 79 insertions(+), 5 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 6423baa7..88c7c289 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -40,6 +40,8 @@ void setup() { // 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 // 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. @@ -204,7 +206,7 @@ redraw(); // runs the draw() method once more. 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, we will now look into the best part of Processing; DRAWING. +Since you will have understood the basics of the language by now, we will now look into the best part of Processing; DRAWING. ```processing /* ------ @@ -222,27 +224,99 @@ point(x, y, z); // In 3D space // Line line(x1, y1, x2, y2); // In 2D space line(x1, y1, z1, x2, y2, z2); // In 3D space -// Draws a line connecting two points defined by (x1, y1) and (x2, y2) +// Draws a line connecting two points defined by (x1, y1) and (x2, y2). + +// Triangle +triangle(x1, y1, x2, y2, x3, y3); +// Draws a triangle connecting three points defined by coordinate paramters. // 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 +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) +quad(x, y, x2, y2, x3, y3, x4, y4); // Draws a quadrilateral with parameters defining coordinates of each corner point. -// Arc; +// Ellipse +ellipse(x, y, width, height); +// Draws an eclipse at point {x, y} with width and height specified. + +// Arc 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 +// 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. +// 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) + +// 3D Shapes + +// 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. +// Box +box(size); // Cube with same length defined by size +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) +// 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) + +/* --------------- + 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) +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. + +// Translate +translate(x, y); // Translates to point{x, y} i.e. - setting origin to that point +translate(x, y, z); // 3D counterpart of the function + +// Rotate +rotate(angle); // Rotate the amount specified by the angle parameter +// It has 3 3D counterparts to perform rotation, each for every dimension, +// namely: rotateX(angle), rotateY(angle), rotateZ(angle) + +// Scale +scale(s); // Scale the coordinate system by either expanding or contracting it. + +/* -------------------- + Styling and Textures + -------------------- +*/ + + + +/* ------- + Imports + ------- +*/ +// 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.*; ``` Processing is easy to learn and is particularly useful to create multimedia contents (even in 3D) without -- cgit v1.2.3 From 66c6297749cbff4272a12b852741c365bec9149a Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Mon, 2 Jul 2018 15:18:30 +0630 Subject: 2/7/18 3:18PM --- processing.html.markdown | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 88c7c289..e3d83f80 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -209,6 +209,7 @@ exit(); // This stops the program. It is useful for programs with draw() running Since you will have understood the basics of the language by now, we will now look into the best part of Processing; DRAWING. ```processing + /* ------ Shapes ------ @@ -276,6 +277,7 @@ sphere(radius); // Its size is defined using the radius parameter // 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) /* --------------- Transformations @@ -307,7 +309,30 @@ 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. +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) +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. +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. + +// Images +// 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. +```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. /* ------- Imports -- cgit v1.2.3 From fb78575d55b64860d781e651b3b958d8ba04bdf4 Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Mon, 2 Jul 2018 16:15:09 +0630 Subject: 2/7/18 4:14PM --- processing.html.markdown | 67 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index e3d83f80..84c2dee1 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -344,11 +344,76 @@ There's too much to cover in a short documentation, so I will leave them out her import processing.something.*; ``` +## DTC? + +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. + +```processing + +// 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; +float a; +float col; +float num; + +void setup() { + size(600,600); +} + +void draw() { + background(#F2F2F2); + translate(width/2, height/2); + theta = map(sin(millis()/1000.0), -1, 1, 0, PI/6); + + float num=6; + for (int i=0; i30) { + pushMatrix(); + translate(0, -30); + rotate(theta); + branch(len); + popMatrix(); + + pushMatrix(); + translate(0, -30); + rotate(-theta); + branch(len); + popMatrix(); + + } +} + +``` + 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 really large) +(Trust me! Processing projects can get real humongous...) ## What's Next? -- cgit v1.2.3 From 7daca0eaa49f8de64965c18df5333fb1392cdd3b Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Tue, 11 Sep 2018 19:01:43 +0800 Subject: Updates as per request --- processing.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 84c2dee1..5ec123b3 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -1,5 +1,5 @@ --- -language: "Processing" +language: processing filename: learnprocessing.pde contributors: - ["Phone Thant Ko", "http://github.com/phonethantko"] @@ -417,7 +417,7 @@ However, that does not apply when you introduce external libraries, packages and ## What's Next? -Here, I have compiled some useful resources: +Some useful resources: - [Processing Website](http://processing.org) - [Processing Sketches](http://openprocessing.org) -- cgit v1.2.3 From 0bbd51ba4894e9030066e1d850fa607e95fafecc Mon Sep 17 00:00:00 2001 From: Phone Thant Ko Date: Tue, 11 Sep 2018 19:08:18 +0800 Subject: Fixing the wrong placement --- processing.html.markdown | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 5ec123b3..fc5dc997 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -415,9 +415,7 @@ 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...) -## What's Next? - -Some useful resources: +## Some useful resources: - [Processing Website](http://processing.org) - [Processing Sketches](http://openprocessing.org) -- cgit v1.2.3 From fc741ca8d500a9075ecd3aafae22d8f2f34509b3 Mon Sep 17 00:00:00 2001 From: Divay Prakash Date: Sat, 17 Nov 2018 19:29:34 +0530 Subject: Fix build error --- processing.html.markdown | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index fc5dc997..c68c5f3b 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -12,7 +12,7 @@ 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 --------- @@ -208,7 +208,7 @@ exit(); // This stops the program. It is useful for programs with draw() running ## 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 +``` /* ------ Shapes @@ -330,7 +330,7 @@ texture(image); // PImage can be passed into arguments for texture-mapping the s ``` 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. @@ -351,7 +351,7 @@ 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. -```processing +``` // 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. -- cgit v1.2.3 From e3dcdb24d1f822f3057887e092965c1731a34820 Mon Sep 17 00:00:00 2001 From: Divay Prakash Date: Sat, 17 Nov 2018 19:32:06 +0530 Subject: Various style fixes --- processing.html.markdown | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index c68c5f3b..22b831b1 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -4,6 +4,7 @@ filename: learnprocessing.pde contributors: - ["Phone Thant Ko", "http://github.com/phonethantko"] --- + ## Introduction Processing is a programming language for creation of digital arts and multimedia content, allowing non-programmers to @@ -29,7 +30,7 @@ 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. // Note! The syntax looks strikingly similar to that of C++. @@ -205,11 +206,12 @@ 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. ``` + ## 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. ``` - /* ------ Shapes ------ @@ -326,10 +328,11 @@ stroke(255, 255, 255, 200); // stroke colour set to yellow with transparency set // 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. + ``` // 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. @@ -342,8 +345,8 @@ There's too much to cover in a short documentation, so I will leave them out her // 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! @@ -352,7 +355,6 @@ Let us see an example from openprocessing to visualize how much Processing is ca 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. // Retrieved from: (https://www.openprocessing.org/sketch/559769) @@ -380,8 +382,6 @@ void draw() { } - - void branch(float len) { col=map(len, 0, 90, 150, 255); fill(col, 0, 74); @@ -390,7 +390,6 @@ void branch(float len) { ellipse(0, -len, 3, 3); len *= 0.7; - if (len>30) { pushMatrix(); translate(0, -30); @@ -406,7 +405,6 @@ void branch(float len) { } } - ``` Processing is easy to learn and is particularly useful to create multimedia contents (even in 3D) without @@ -415,7 +413,7 @@ 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) -- cgit v1.2.3 From 60adaef06e60cdc3ab8a6bf61dc046e0c462de1c Mon Sep 17 00:00:00 2001 From: Divay Prakash Date: Sat, 17 Nov 2018 20:15:36 +0530 Subject: Fix line length and styling --- processing.html.markdown | 193 +++++++++++++++++++++++++++++------------------ 1 file changed, 120 insertions(+), 73 deletions(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 22b831b1..98b81573 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -7,11 +7,15 @@ contributors: ## 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. ``` /* --------- @@ -32,21 +36,26 @@ The language is statically typed, and also comes with its official IDE to compil --------------------------------------- */ -// 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 @@ -55,22 +64,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) @@ -80,13 +92,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. @@ -94,27 +108,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 intArrayList = new ArrayList(); // 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 @@ -129,7 +145,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 @@ -138,18 +155,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... /* ------------- @@ -169,14 +189,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. @@ -204,12 +224,14 @@ 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. +Since you will have understood the basics of the language by now, we will now +look into the best part of Processing - DRAWING. ``` /* ------ @@ -235,12 +257,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); @@ -251,19 +276,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 @@ -272,27 +301,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 @@ -312,51 +346,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. ``` // 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. -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. ``` -// 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; @@ -407,11 +453,12 @@ 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 -- cgit v1.2.3 From 3badbe3640f8b0831b83434441684ed1069bdc8a Mon Sep 17 00:00:00 2001 From: Divay Prakash Date: Sat, 17 Nov 2018 20:55:33 +0530 Subject: Add name to contributors --- processing.html.markdown | 1 + 1 file changed, 1 insertion(+) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index 98b81573..e437ee95 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -3,6 +3,7 @@ language: processing filename: learnprocessing.pde contributors: - ["Phone Thant Ko", "http://github.com/phonethantko"] + - ["Divay Prakash", "https://github.com/divayprakash"] --- ## Introduction -- cgit v1.2.3 From 3f32649dd84795a981a7a6e7c38cd566722413b9 Mon Sep 17 00:00:00 2001 From: caminsha Date: Tue, 25 Feb 2020 22:46:04 +0100 Subject: Fixed a small math error Before: 2 -1 = 0 After: 2 - 1 = 1 --- processing.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index e437ee95..d99912e7 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -140,7 +140,7 @@ SomeRandomClass myObjectInstantiated = new SomeRandomClass(); // Arithmetic 1 + 1 // 2 -2 - 1 // 0 +2 - 1 // 1 2 * 3 // 6 3 / 2 // 1 3.0 / 2 // 1.5 -- cgit v1.2.3 From 1a9bbb6159c34df3029c0d55944094afcc91b760 Mon Sep 17 00:00:00 2001 From: caminsha Date: Thu, 27 Feb 2020 23:10:20 +0100 Subject: added semicolon at the end of the line --- processing.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index d99912e7..cf2dd77d 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -150,7 +150,7 @@ SomeRandomClass myObjectInstantiated = new SomeRandomClass(); // operations. float f = sq(3); // f = 9.0 float p = pow(3, 3); // p = 27.0 -int a = abs(-13) // a = 13 +int a = abs(-13); // a = 13 int r1 = round(3.1); // r1 = 3 int r2 = round(3.7); // r2 = 4 float sr = sqrt(25); // sr = 5.0 -- cgit v1.2.3 From 5d1c72515cbffc2e744c2ca2d500f75a3e74f1c3 Mon Sep 17 00:00:00 2001 From: caminsha Date: Thu, 27 Feb 2020 23:37:43 +0100 Subject: Added short explanation about break statement --- processing.html.markdown | 2 ++ 1 file changed, 2 insertions(+) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index cf2dd77d..d0952e96 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -191,6 +191,8 @@ int i = 3; String value = (i > 5) ? "Big" : "Small"; // "Small" // Switch-case structure can be used to check multiple conditions concisely. +// It is important to use the break statement. If the `break`-statement does +// not exist the program executes all the following cases after a case was true. int value = 2; switch(value) { case 0: -- cgit v1.2.3 From d7de2446b770382689495406a4e725810a052e2f Mon Sep 17 00:00:00 2001 From: caminsha Date: Thu, 27 Feb 2020 23:38:03 +0100 Subject: removed an unnecesarry white space --- processing.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index d0952e96..d7b0d600 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -211,7 +211,7 @@ switch(value) { // Iterative statements // For Statements - Again, the same syntax as in Java -for(int i = 0; i < 5; i ++){ +for(int i = 0; i < 5; i++){ print(i); // prints from 0 to 4 } -- cgit v1.2.3 From 48c193853c0a996d81d72c7bd861d6cdbfbc4103 Mon Sep 17 00:00:00 2001 From: caminsha Date: Sun, 1 Mar 2020 22:43:30 +0100 Subject: Changed color value in background function Changed it because we defined the color white as c before. --- processing.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index d7b0d600..dbf078a2 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -356,7 +356,7 @@ color c = color(255, 255, 255); // WHITE! // 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. +background(c); // 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. -- cgit v1.2.3 From 80063a34ed85aaf5f3070a21e26754d16b1f9f59 Mon Sep 17 00:00:00 2001 From: caminsha Date: Sun, 1 Mar 2020 22:57:55 +0100 Subject: Changed color definition I have changed the color definition because 255, 255, 255 was not yellow. --- processing.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'processing.html.markdown') diff --git a/processing.html.markdown b/processing.html.markdown index dbf078a2..777c6981 100644 --- a/processing.html.markdown +++ b/processing.html.markdown @@ -363,7 +363,7 @@ background(c); // By now, the background colour should be white. 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 +stroke(255, 255, 0, 200); // stroke colour set to yellow with transparency // set to a lower value. // Images -- cgit v1.2.3