info/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-08-04 22:07:52 +02:00
Code Issues Releases Wiki Activity

Fix line length and styling

Browse Source
This commit is contained in:
Divay Prakash
2018-11-17 20:15:36 +05:30
parent e3dcdb24d1
commit 60adaef06e
1 changed files with 120 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
processing.html.markdown
View File

@@ -7,11 +7,15 @@ contributors:
## Introduction ## Introduction
Processing is a programming language for creation of digital arts and multimedia content, allowing non-programmers to Processing is a programming language for creation of digital arts and
learn fundamentals of computer programming in a visual context. multimedia content, allowing non-programmers to learn fundamentals of computer
While the language is based on Java language, programming in a visual context.
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. 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++. // Note! The syntax looks strikingly similar to that of C++.
void setup() { void setup() {
// This prints out the classic output "Hello World!" to the console when run. // 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. // It can range from setting the background colours, setting the canvas size.
background(color); // setting the background colour 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. // 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. // If you want to run the codes indefinitely, it has to be placed in draw()
// draw() must exist if you want the code to run continuously and obviously, there can only be one draw() method. // method.
// draw() must exist if you want the code to run continuously and obviously,
// there can only be one draw() method.
int i = 0; int i = 0;
void draw() { void draw() {
// This block of code loops forever until stopped // 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, // 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 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 boolean booleanValue = true; // Boolean
byte byteValueOfA = 23; // Byte byte byteValueOfA = 23; // Byte
char charValueOfA = 'A'; // Char 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) color colourValueOfWhiteH = #FFFFFF; // Colour (Specified using hash value)
int intValue = 5; // Integer (Number without decimals) 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) float floatValue = 1.12345; // Float (32-bit floating-point numbers)
double doubleValue = 1.12345D; // Double (64-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, // they need to be converted into "int" and "float" datatypes respectively,
// using (int) and (float) syntax before passing into a function. // 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. // Primarily, I will brief through the most commonly used ones to save time.
// String // String
// While char datatype uses '', String datatype uses "" - double quotes. // While char datatype uses '', String datatype uses "" - double quotes.
String sampleString = "Hello, Processing!"; 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'}; char source = {'H', 'E', 'L', 'L', 'O'};
String stringFromSource = new String(source); // HELLO String stringFromSource = new String(source); // HELLO
// As in Java, strings can be concatenated using the "+" operator. // As in Java, strings can be concatenated using the "+" operator.
@@ -94,27 +108,29 @@ print("Hello " + "World!"); // Hello World!
// Array // Array
// Arrays in Processing can hold any datatypes including Objects themselves. // 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[] intArray = new int[5];
int[] intArrayWithValues = {1, 2, 3}; // You can also populate with data. int[] intArrayWithValues = {1, 2, 3}; // You can also populate with data.
// ArrayList // ArrayList
// Functions are similar to those of array; arraylists can hold any datatypes. // Functions are similar to those of array; arraylists can hold any datatypes.
// The only difference is arraylists resize dynamically, // The only difference is arraylists resize dynamically, as it is a form of
// as it is a form of resizable-array implementation of the Java "List" interface. // resizable-array implementation of the Java "List" interface.
ArrayList<Integer> intArrayList = new ArrayList<Integer>(); ArrayList<Integer> intArrayList = new ArrayList<Integer>();
// Object // Object
// Since it is based on Java, Processing supports object-oriented programming. // 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. // Of course, a class has to be defined before for the object you want.
// Format --> ClassName InstanceName // Format --> ClassName InstanceName
SomeRandomClass myObject // then instantiate later SomeRandomClass myObject // then instantiate later
//or //or
SomeRandomClass myObjectInstantiated = new SomeRandomClass(); SomeRandomClass myObjectInstantiated = new SomeRandomClass();
// Processing comes up with more collections (eg. - Dictionaries and Lists) by default, // Processing comes up with more collections (eg. - Dictionaries and Lists) by
// for the simplicity sake, I will leave them out of discussion here. // default, for the simplicity sake, I will leave them out of discussion here.
/* ------------ /* ------------
Maths Maths
@@ -129,7 +145,8 @@ SomeRandomClass myObjectInstantiated = new SomeRandomClass();
3.0 / 2 // 1.5 3.0 / 2 // 1.5
3.0 % 2 // 1.0 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 f = sq(3); // f = 9.0
float p = pow(3, 3); // p = 27.0 float p = pow(3, 3); // p = 27.0
int a = abs(-13) // a = 13 int a = abs(-13) // a = 13
@@ -138,18 +155,21 @@ int r2 = round(3.7); // r2 = 4
float sr = sqrt(25); // sr = 5.0 float sr = sqrt(25); // sr = 5.0
// Vectors // Vectors
// Processing provides an easy way to implement vectors in its environment using PVector class. // Processing provides an easy way to implement vectors in its environment
// It can describe a two or three dimensional vector and // 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. // comes with a set of methods which are useful for matrices operations.
// You can find more information on PVector class and its functions here. // You can find more information on PVector class and its functions here.
// (https://processing.org/reference/PVector.html) // (https://processing.org/reference/PVector.html)
// Trigonometry // Trigonometry
// Processing also supports trigonometric operations by supplying a set of functions. // Processing also supports trigonometric operations by supplying a set of
// sin(), cos(), tan(), asin(), acos(), atan() and also degrees() and radians() for convenient conversion. // functions. sin(), cos(), tan(), asin(), acos(), atan() and also degrees()
// However, those functions take angle in radians as the parameter so it has to be converted beforehand. // 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 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... // PI, HALF_PI, QUARTER_PI and so on...
/* ------------- /* -------------
@@ -169,14 +189,14 @@ if (author.getAppearance().equals("hot")) {
int i = 3; int i = 3;
String value = (i > 5) ? "Big" : "Small"; // "Small" 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; int value = 2;
switch(value) { switch(value) {
case 0: case 0:
print("Nought!"); // This doesn't get executed. print("Nought!"); // This does not get executed.
break; // Jumps to the next statement break; // Jumps to the next statement
case 1: case 1:
print("Getting there..."); // This again doesn't get executed. print("Getting there..."); // This again does not get executed.
break; break;
case 2: case 2:
print("Bravo!"); // This line gets executed. print("Bravo!"); // This line gets executed.
@@ -204,12 +224,14 @@ while(j > 0) {
loop(); // allows the draw() method to run forever while loop(); // allows the draw() method to run forever while
noLoop(); // only allows it to run once. noLoop(); // only allows it to run once.
redraw(); // runs the draw() method once more. 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 ## 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 // Rectangle
rect(a, b, c, d, [r]); // With optional parameter defining the radius of all corners 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
// Draws a rectangle with {a, b} as a top left coordinate and c and d as width and height respectively. // 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
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. // Draws a quadrilateral with parameters defining coordinates of each corner
// point.
// Ellipse // Ellipse
ellipse(x, y, width, height); 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, // While the first four parameters are self-explanatory,
// start and end defined the angles the arc starts and ends (in radians). // start and end defined the angles the arc starts and ends (in radians).
// Optional parameter [mode] defines the filling; // 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 // Curves
// Processing provides two implementation of curves; using curve() and bezier(). // 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: // 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 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); 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
box(size); // Cube with same length defined by size 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
sphere(radius); // Its size is defined using the radius parameter sphere(radius); // Its size is defined using the radius parameter
// Mechanism behind rendering spheres is implemented by tessellating triangles. // 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) // More information here: (https://processing.org/reference/sphereDetail_.html)
// Irregular Shapes // Irregular Shapes
// What if you wanted to draw something that's not made available by Processing's functions? // What if you wanted to draw something thats not made available by Processing
// You can use beginShape(), endShape(), vertex(x,y) to define shapes by specifying each point. // functions?
// More information here: (https://processing.org/reference/beginShape_.html) // You can use beginShape(), endShape(), vertex(x,y) to define shapes by
// You can also use custom made shapes using PShape class.(https://processing.org/reference/PShape.html) // 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
--------------- ---------------
*/ */
// Transformations are particularly useful to keep track of the coordinate space // Transformations are particularly useful to keep track of the coordinate
// and the vertices of the shapes you have drawn. // space and the vertices of the shapes you have drawn. Particularly;
// Particularly, matrix stack methods; pushMatrix(), popMatrix() and translate(x,y) // matrix stack methods; pushMatrix(), popMatrix() and translate(x,y)
pushMatrix(); // Saves the current coordinate system to the stack pushMatrix(); // Saves the current coordinate system to the stack
// ... apply all the transformations here ... // ... apply all the transformations here ...
popMatrix(); // Restores the saved coordinate system 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
translate(x, y); // Translates to point{x, y} i.e. - setting origin to that point translate(x, y); // Translates to point{x, y} i.e. - setting origin to that point
@@ -312,37 +346,46 @@ scale(s); // Scale the coordinate system by either expanding or contracting it.
*/ */
// Colours // Colours
// As I have discussed earlier, the background colour can be configured using background() function. // As I have discussed earlier, the background colour can be configured using
// You can define a color object beforehand and then pass it to the function as an argument. // 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! color c = color(255, 255, 255); // WHITE!
// By default, Processing uses RGB colour scheme but it can be configured to HSB using colorMode(). // By default, Processing uses RGB colour scheme but it can be configured to
// Read here: (https://processing.org/reference/colorMode_.html) // HSB using colorMode(). Read more here:
// (https://processing.org/reference/colorMode_.html)
background(color); // By now, the background colour should be white. background(color); // By now, the background colour should be white.
// You can use fill() function to select the colour for filling the shapes. // 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)); fill(color(0, 0, 0));
// If you just want to colour the outlines of the shapes then you can use stroke() function. // If you just want to colour the outlines of the shapes then you can use
stroke(255, 255, 255, 200); // stroke colour set to yellow with transparency set to a lower value. // stroke() function.
stroke(255, 255, 255, 200); // stroke colour set to yellow with transparency
// set to a lower value.
// Images // 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. filter(shader); // Processing supports several filter functions for image manipulation.
texture(image); // PImage can be passed into arguments for texture-mapping the shapes. 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. If you want to take things further, there are more things Processing is powered
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. 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 // 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 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 statement can be written as below at the top of the source code.
import processing.something.*; import processing.something.*;
``` ```
@@ -351,12 +394,15 @@ import processing.something.*;
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. 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 // Disclaimer: I did not write this program since I currently am occupied with
// this sketch is adapted from openprocessing since it shows something cool with simple codes. // internship and this sketch is adapted from openprocessing since it shows
// something cool with simple codes.
// Retrieved from: (https://www.openprocessing.org/sketch/559769) // Retrieved from: (https://www.openprocessing.org/sketch/559769)
float theta; 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 Processing is easy to learn and is particularly useful to create multimedia
having to type a lot of codes. It is so simple that you can read through the code and get a rough idea of contents (even in 3D) without having to type a lot of codes. It is so simple
the program flow. 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...) 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