Visual Programming For Absolute beginners

- from Wikipedia: 

-Processing is based on Java but uses simplified syntax and assumes a graphical end product.

-Processing IDE (Recommended)

-Openprocessing.org account

-Build and display directly in the browser (You'll just need a plain text editor)

-Think like a machine. Be 100% explicit. 

-Make your sketch as simple as possible. 

-If something's not working, don't be discouraged--it could be something as simple as a missing ')' in your code. The Processing IDE will help you keep from making these kinds of mistakes but even pros make silly errors every once in a while.

-Be lazy. Try to find a way to do what you want with just a few lines of code--in most cases, there's a way.

void setup(){ 
size(200,200); // width in pixels, height in pixels
background(255,255,255,100);  //  background red value, background green value, background blue value, alpha/opacity (0-100)
stroke(0,0,0,100);  //  stroke color (same values as background)
strokeWeight(3);  //  stroke width in pixels
fill(150,150,150,50);  //  fill color (same values as background)
frameRate(40) // number of times per second the draw function should be called (100 by default)
} 

-Colors in Processing can be represented a lot of different ways--usually R,G,B,A is a really useful way to do it.

-They can also be represented with hex codes, but using a hex code doesn't allow you to set the opacity. Hex codes are actually R,G,B codes in disguise anyway (for instance, #55FAD3) 

-You can also use gray values (supply a number between 0 and 100, 0 being white and 100 being black) but why limit yourself to 100 shades of gray when you can use R,G,B to represent anything between white (255,255,255) and black (0,0,0)?

void draw(){
// do something
} 

ellipse(50,50,10,10);  //  X coordinate of the center, Y coordinate of the center, width in pixels, and height in pixels 

Whenever you want to draw a circle on the canvas, you need to call the ellipse() function. This function can make ellipses and circles, so it needs a center point, a width, and a height.

line(50,50,150,150);  //  X coordinate of first endpoint, Y coordinate of first endpoint, X coordinate of second endpoint, Y coordinate of second endpoint 

line() takes four parameters--the first two are one endpoint, the second two are another endpoint. 

rect(50,50,100,100);  // X coordinate of top left corner, Y coordinate of top left corner, width in pixels, height in pixels

rect() takes four parameters, the first two are the top left corner of the rectangle, the third is its width, and the fourth is its height.

variables - variables are really important. Here's how you declare a variable:

int x = 1;  // integers are whole numbers (they can be negative or positive)

float y = 4.0;  // floats are decimal numbers (also negative or positive) 

String chicken = "Roger is the chicken's name";  //  Processing doesn't use a lot of text, but you can display text in various fonts--store text as strings 

color c = color(255, 204, 0);  //  colors are not very useful as variables, but it's possible to store a color in a variable

Variables don't need to be a single letter. Try to name your variables words/letters beginning with a lower case letter (generally, symbols other than "_" do not belong in variable names). 

Examples of common variable naming conventions are:

w   inputText   numberOfChickens  charleys_Phone_Number

width and height - these variables always return the canvas' width and height--use them any time you want to make your sketch scalable, because if you change the size of the canvas, width and height will respond to new canvas sizes and react appropriately.

For example:

rect((width/2) - 15,(height/2) - 15, 30, 30); 

random(100);  

random() generates a semi-random float between 0 and whatever number you specify. This is great for generating a new random color or position.

Try adding the following into setup() and then void():

background(random(255),255,255,100); 

mouseX & mouseY 

These dynamic variables always store the location of the user's mouse, you can use them to produce shapes that change based on where the user's mouse is at any given point in time. 

Try adding the following to the end of your draw() function:

stroke(0,0,0,100);
line(0, 0, mouseX, mouseY); 

void setup(){
   size(1000, 1000);
   background(255, 255, 255, 100);
   fill(255, 100, 100, 5);
   stroke(0, 0, 0, 100);
}

void draw(){
  rect(0, 0, mouseX, mouseY);
} 

void setup(){
   size(1000, 1000);
   background(255, 255, 255, 100);
   fill(255, 100, 100);  // the opacity is set to 100% to show the rectangle
   stroke(0, 0, 0, 100);
}

void draw(){
  background(255, 255, 255, 100);
  rect(0, 0, mouseX, mouseY);
} 

void setup(){
   size(1000, 1000);
   background(255, 255, 255, 100);
   fill(255, 100, 100);
   noStroke();
}

void draw(){
  fill(random(255), random(255), random(255), random(50));
  ellipse(mouseX, mouseY, 30, 30);
} 

void setup(){
   size(1000, 1000);
   background(255, 255, 255, 100);
   fill(255, 100, 100);
   noStroke();
}

void draw(){
  fill(random(255), random(255), random(255), 30 + random(20));
  ellipse(mouseX, mouseY, 30, 30);
} 

void setup(){
    size(1000, 1000);
    background(255, 255, 255, 100);
    strokeWeight(3);
}

void draw(){
    stroke(0, random(255), 0, 25);
    line(mouseX, 0, mouseX, height);
} 

stroke(random(255), 25); 

float g = random(255);
stroke(g, g, g, 25); 

void setup(){
    size(1000, 1000);
    background(255, 255, 255, 100);
    strokeWeight(3);
}

void draw(){
   float g = random(255);
   stroke(g, g, g, 25);
   line(mouseX, 0, mouseX, height);
   stroke(0, random(255), 0, 25);
   line(0, mouseY, width, mouseY);
} 

float colorOptions[] = new float[]; 

String fruits[] = ["apples","oranges","grapefruits","peaches","bananas"] 

int[] colorOptions = {30, 100, 200, 230};

void setup(){
    size(800,800);
    background(255,255,255,100);
    stroke(0,0,0,100);
    strokeWeight(1);
} 

int counter = 0;
float[] colorOptions = {244, 35, 0, 130, 200};void setup(){
    size(800,800);
    background(255,255,255,100);
    stroke(0,0,0,100);
    strokeWeight(1);
}  

int counter = 0;
float[] colorOptions = {244, 35, 0, 130, 200};void setup(){
    size(800,800);
    background(255,255,255,100);
    stroke(0,0,0,100);
    strokeWeight(1);
}  
void draw(){
    rect(counter + 30, 30, 20, 20);}

int counter = 0;
float[] colorOptions = {244, 35, 0, 130, 200};void setup(){
    size(800,800);
    background(255,255,255,100);
    stroke(0,0,0,100);
    strokeWeight(1);
}  

void draw(){
     for (int i = 0; i < colorOptions.length; i++){
        rect(counter + 30, 30, 20, 20);
        counter += 30;
     }
     noLoop();
}

for (int i = 0; i < colorOptions.length; i++){
        rect(counter + 30, 30, 20, 20);
        counter += 30;
     } 

int counter = 0;
float[] colorOptions = {244, 35, 0, 130, 200};void setup(){
    size(800,800);
    background(255,255,255,100);
    stroke(0,0,0,100);
    strokeWeight(1);
}  

void draw(){
     for (int i = 0; i < colorOptions.length; i++){        fill(colorOptions[i], colorOptions[i], colorOptions[i], 100);
        rect(counter + 30, 30, 20, 20);
        counter += 30;
     }
     noLoop();
}

int counter = 0;
float[] colorOptions = {244, 35, 0, 130, 200};void setup(){
    size(800,800);
    background(255,255,255,100);
    stroke(0,0,0,100);
    strokeWeight(1);
}  

void draw(){
     for (int i = 0; i < colorOptions.length; i++){        fill(colorOptions[i], colorOptions[i], colorOptions[i], 100);
        rect(counter + 30, 30, 20, 20);
        counter += 30;
     }
}