The code between the lines is Processing code. You can copy and paste it into processing then hit apple-t and it will format correctly. After that click on the play icon to run the "sketch" (in processing the programs you write are called "sketches" which and they are kept in your ... "sketchbook").
// the stuff after two forward slashes are comments, and will be ignored by the code
// the setup() section is read the first time the program runs only
// the draw() section is read over and over by the program
void setup(){
size(400,400);
}void draw(){
// your code goes here
}
Next up a bunch of 2D primatives
void setup(){ size(400,400); // this will determine the size of your "stage", the first number is the width the second the height.
background(255); // makes the background color white
}background(255); // makes the background color white
void draw(){
noFill();
line(20, 30, 390, 60); // line(x1, y1, x2, y2)
rect(100, 100, 50, 50); // rect(x, y, width, height)
ellipse(300, 300, 50, 50); // ellipse(x, y, width, height)
triangle( 20, 10, 30, 120, 280, 280); // triangle(x1, y1, x2, y2, x3, y3);
quad(320, 280, 186,320, 269, 163, 130, 376); // quad(x1, y1, x2, y2, x3, y3, x4, y4)
}
line(20, 30, 390, 60); // line(x1, y1, x2, y2)
rect(100, 100, 50, 50); // rect(x, y, width, height)
ellipse(300, 300, 50, 50); // ellipse(x, y, width, height)
triangle( 20, 10, 30, 120, 280, 280); // triangle(x1, y1, x2, y2, x3, y3);
quad(320, 280, 186,320, 269, 163, 130, 376); // quad(x1, y1, x2, y2, x3, y3, x4, y4)
at this point you're asking yourself, how the heck do you know what are the keywords and what are not? Get familiar with the AIP (application Programming Interface).
If you learn better from a book, I recommend this processing book written by Casey Reas and Ben Fry, the dudes who made the program itself.
Next ... add line color, fill color and stroke weight.
void setup(){
size(400,400);
background(120); // one value will produce a grayscale
}background(120); // one value will produce a grayscale
void draw(){
noFill();
strokeWeight(1);// line width
stroke (255, 0, 0); // changes the line colour (red, green, blue) - every line below will be red until you change it.
line(20, 30, 390, 60);
rect(100, 100, 50, 50);
stroke (200, 100, 15); // changes the line colour (red, green, blue) - every line below will be red until you change it.
fill(30, 60, 190); // changes the fill color to blue
ellipse(300, 300, 50, 50);
triangle( 20, 10, 30, 120, 280, 280);
fill(255, 240, 0, 100); // the 4th value is alpha!
strokeWeight(3);// line width
quad(320, 280, 86,20, 269, 163, 130, 376);
}// notice that the lower in the code your shape is the closer to the screen.strokeWeight(1);// line width
stroke (255, 0, 0); // changes the line colour (red, green, blue) - every line below will be red until you change it.
line(20, 30, 390, 60);
rect(100, 100, 50, 50);
stroke (200, 100, 15); // changes the line colour (red, green, blue) - every line below will be red until you change it.
fill(30, 60, 190); // changes the fill color to blue
ellipse(300, 300, 50, 50);
triangle( 20, 10, 30, 120, 280, 280);
fill(255, 240, 0, 100); // the 4th value is alpha!
strokeWeight(3);// line width
quad(320, 280, 86,20, 269, 163, 130, 376);
Yeah, but this sucks trying to guesstimate where the x and y locations are. Use the println function to print back to the message window. In this case we'll print the location of the mouse.
// add this code in the draw() section of your program
println(mouseX + " mouse X"); //the horizontal location of the mouse
println(mouseY + " mouse Y"); //the vertical location of the mouse
Next up make a variable. Variables are declared above the setup() section. There are different types of variables for now we'll make an int. int is short for integer which is a whole number (without a decimal).
int var1 = 200; // "var 1" is the variable name.
void setup(){
size(400,400);
background(255);
}background(255);
void draw(){
ellipse(var1, 250, 100, 100);
} so what? well, now you can update the variable!
int var1 = 200;
void setup(){
size(400,400);
}void draw(){
background(255); // notice we moved the background into the draw section
var1 ++; // add 1 to var1. The long way of doing this would be var1 = var1 + 1
ellipse(var1, 300, 100, 100);
}var1 ++; // add 1 to var1. The long way of doing this would be var1 = var1 + 1
ellipse(var1, 300, 100, 100);
What Fun! but we want the ball to come back! We need an "if" statement.
int var1 = 200;
int var2 = 200;
void setup(){
size(400,400);
}void draw(){
background(255); // notice we moved the background into the draw section
var1 ++; // add 1 to var1. The long way of doing this would be var1 = var1 + 1
ellipse(var1, 300, 100, 100);
if (var1 == width) { // the double == signs compare both sides of the equation. The single = set the left side to the right. "width" is the width of the stage
var1 = 1; // reset the variable so the ball comes in the left of the screen
} // don't forget to close your brackets!
} var1 ++; // add 1 to var1. The long way of doing this would be var1 = var1 + 1
ellipse(var1, 300, 100, 100);
if (var1 == width) { // the double == signs compare both sides of the equation. The single = set the left side to the right. "width" is the width of the stage
var1 = 1; // reset the variable so the ball comes in the left of the screen
} // don't forget to close your brackets!
Use variables, iteration, for statements and primitives to make something super duper trippy! Limit yourself to this if you know more so the uninitiated can read your code. Try commenting out the background(255) line for extra trippyness Duuuuuuuuuuude. Here's an example.
int var1 = 200;
float var2 = 300.6; // a new float variable
void setup(){
size(400,400);
strokeWeight(4);
}strokeWeight(4);
void draw(){
background(255);
var1 += 3; // adds 3 to the variable
var2 -= .8; // subtracts .8 from var2
stroke(var1 /2, var2 /3, 40);
ellipse(var1, var2, var1 /3, 100);
if (var1 > width + 60) {
}var1 += 3; // adds 3 to the variable
var2 -= .8; // subtracts .8 from var2
stroke(var1 /2, var2 /3, 40);
ellipse(var1, var2, var1 /3, 100);
if (var1 > width + 60) {
var1 = -30;
}
if (var2 < -30){}
var2 = height;
fill(random(255), random(255), random(255), random(255));
}fill(random(255), random(255), random(255), random(255));