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.
// the stuff after two dashes 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)
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);
}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 (integer - 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 iterate 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 +3; // 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 +3; // 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 trippy! Limit yourself to this if you know more so the newcomer can read your code. Try commenting out the background(255) line. Duuuuuuuuuuude.
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));