mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
Fix line length and styling
This commit is contained in:
Divay Prakash
parent
e3dcdb24d1
commit
60adaef06e
@ -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<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
|
||||
@ -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,37 +346,46 @@ 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.*;
|
||||
```
|
||||
@ -351,12 +394,15 @@ import processing.something.*;
|
||||
|
||||
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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user