Initial Commit

This commit is contained in:
plane000
2018-04-20 10:15:15 +01:00
parent 49150ccfe4
commit 62101e8e61
2870 changed files with 520122 additions and 0 deletions

View File

@@ -0,0 +1,50 @@
/**
* Array.
*
* An array is a list of data. Each piece of data in an array
* is identified by an index number representing its position in
* the array. Arrays are zero based, which means that the first
* element in the array is [0], the second element is [1], and so on.
* In this example, an array named "coswav" is created and
* filled with the cosine values. This data is displayed three
* separate ways on the screen.
*/
float[] coswave;
void setup() {
size(640, 360);
coswave = new float[width];
for (int i = 0; i < width; i++) {
float amount = map(i, 0, width, 0, PI);
coswave[i] = abs(cos(amount));
}
background(255);
noLoop();
}
void draw() {
int y1 = 0;
int y2 = height/3;
for (int i = 0; i < width; i++) {
stroke(coswave[i]*255);
line(i, y1, i, y2);
}
y1 = y2;
y2 = y1 + y1;
for (int i = 0; i < width; i++) {
stroke(coswave[i]*255 / 4);
line(i, y1, i, y2);
}
y1 = y2;
y2 = height;
for (int i = 0; i < width; i++) {
stroke(255 - coswave[i]*255);
line(i, y1, i, y2);
}
}

View File

@@ -0,0 +1,41 @@
/**
* Array 2D.
*
* Demonstrates the syntax for creating a two-dimensional (2D) array.
* Values in a 2D array are accessed through two index values.
* 2D arrays are useful for storing images. In this example, each dot
* is colored in relation to its distance from the center of the image.
*/
float[][] distances;
float maxDistance;
int spacer;
void setup() {
size(640, 360);
maxDistance = dist(width/2, height/2, width, height);
distances = new float[width][height];
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float distance = dist(width/2, height/2, x, y);
distances[x][y] = distance/maxDistance * 255;
}
}
spacer = 10;
strokeWeight(6);
noLoop(); // Run once and stop
}
void draw() {
background(0);
// This embedded loop skips over values in the arrays based on
// the spacer variable, so there are more values in the array
// than are drawn here. Change the value of the spacer variable
// to change the density of the points
for (int y = 0; y < height; y += spacer) {
for (int x = 0; x < width; x += spacer) {
stroke(distances[x][y]);
point(x + spacer/2, y + spacer/2);
}
}
}

View File

@@ -0,0 +1,33 @@
/**
* Array Objects.
*
* Demonstrates the syntax for creating an array of custom objects.
*/
int unit = 40;
int count;
Module[] mods;
void setup() {
size(640, 360);
noStroke();
int wideCount = width / unit;
int highCount = height / unit;
count = wideCount * highCount;
mods = new Module[count];
int index = 0;
for (int y = 0; y < highCount; y++) {
for (int x = 0; x < wideCount; x++) {
mods[index++] = new Module(x*unit, y*unit, unit/2, unit/2, random(0.05, 0.8), unit);
}
}
}
void draw() {
background(0);
for (Module mod : mods) {
mod.update();
mod.display();
}
}

View File

@@ -0,0 +1,39 @@
class Module {
int xOffset;
int yOffset;
float x, y;
int unit;
int xDirection = 1;
int yDirection = 1;
float speed;
// Contructor
Module(int xOffsetTemp, int yOffsetTemp, int xTemp, int yTemp, float speedTemp, int tempUnit) {
xOffset = xOffsetTemp;
yOffset = yOffsetTemp;
x = xTemp;
y = yTemp;
speed = speedTemp;
unit = tempUnit;
}
// Custom method for updating the variables
void update() {
x = x + (speed * xDirection);
if (x >= unit || x <= 0) {
xDirection *= -1;
x = x + (1 * xDirection);
y = y + (1 * yDirection);
}
if (y >= unit || y <= 0) {
yDirection *= -1;
y = y + (1 * yDirection);
}
}
// Custom method for drawing the object
void display() {
fill(255);
ellipse(xOffset + x, yOffset + y, 6, 6);
}
}

View File

@@ -0,0 +1,28 @@
/**
* Move Eye.
* by Simon Greenwold.
*
* The camera lifts up (controlled by mouseY) while looking at the same point.
*/
void setup() {
size(640, 360, P3D);
fill(204);
}
void draw() {
lights();
background(0);
// Change height of the camera with mouseY
camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
0.0, 0.0, 0.0, // centerX, centerY, centerZ
0.0, 1.0, 0.0); // upX, upY, upZ
noStroke();
box(90);
stroke(255);
line(-100, 0, 0, 100, 0, 0);
line(0, -100, 0, 0, 100, 0);
line(0, 0, -100, 0, 0, 100);
}

View File

@@ -0,0 +1,40 @@
/**
* Perspective vs. Ortho
*
* Move the mouse left to right to change the "far"
* parameter for the perspective() and ortho() functions.
* This parameter sets the maximum distance from the
* origin away from the viewer and will clip the geometry.
* Click a mouse button to switch between the perspective and
* orthographic projections.
*/
boolean showPerspective = false;
void setup() {
size(600, 360, P3D);
noFill();
fill(255);
noStroke();
}
void draw() {
lights();
background(0);
float far = map(mouseX, 0, width, 120, 400);
if (showPerspective == true) {
perspective(PI/3.0, float(width)/float(height), 10, far);
} else {
ortho(-width/2.0, width/2.0, -height/2.0, height/2.0, 10, far);
}
translate(width/2, height/2, 0);
rotateX(-PI/6);
rotateY(PI/3);
box(180);
}
void mousePressed() {
showPerspective = !showPerspective;
}

View File

@@ -0,0 +1,40 @@
/**
* Perspective.
*
* Move the mouse left and right to change the field of view (fov).
* Click to modify the aspect ratio. The perspective() function
* sets a perspective projection applying foreshortening, making
* distant objects appear smaller than closer ones. The parameters
* define a viewing volume with the shape of truncated pyramid.
* Objects near to the front of the volume appear their actual size,
* while farther objects appear smaller. This projection simulates
* the perspective of the world more accurately than orthographic projection.
* The version of perspective without parameters sets the default
* perspective and the version with four parameters allows the programmer
* to set the area precisely.
*/
void setup() {
size(640, 360, P3D);
noStroke();
}
void draw() {
lights();
background(0);
float cameraY = height/2.0;
float fov = mouseX/float(width) * PI/2;
float cameraZ = cameraY / tan(fov / 2.0);
float aspect = float(width)/float(height);
if (mousePressed) {
aspect = aspect / 2.0;
}
perspective(fov, aspect, cameraZ/10.0, cameraZ*10.0);
translate(width/2+30, height/2, 0);
rotateX(-PI/6);
rotateY(PI/3 + mouseY/float(height) * PI);
box(45);
translate(0, 0, -50);
box(30);
}

View File

@@ -0,0 +1,27 @@
/**
* Brightness
* by Rusty Robison.
*
* Brightness is the relative lightness or darkness of a color.
* Move the cursor vertically over each bar to alter its brightness.
*/
int barWidth = 20;
int lastBar = -1;
void setup() {
size(640, 360);
colorMode(HSB, width, 100, width);
noStroke();
background(0);
}
void draw() {
int whichBar = mouseX / barWidth;
if (whichBar != lastBar) {
int barX = whichBar * barWidth;
fill(barX, 100, mouseY);
rect(barX, 0, barWidth, height);
lastBar = whichBar;
}
}

View File

@@ -0,0 +1,40 @@
/**
* Color Variables (Homage to Albers).
*
* This example creates variables for colors that may be referred to
* in the program by a name, rather than a number.
*/
size(640, 360);
noStroke();
background(51, 0, 0);
color inside = color(204, 102, 0);
color middle = color(204, 153, 0);
color outside = color(153, 51, 0);
// These statements are equivalent to the statements above.
// Programmers may use the format they prefer.
//color inside = #CC6600;
//color middle = #CC9900;
//color outside = #993300;
pushMatrix();
translate(80, 80);
fill(outside);
rect(0, 0, 200, 200);
fill(middle);
rect(40, 60, 120, 120);
fill(inside);
rect(60, 90, 80, 80);
popMatrix();
pushMatrix();
translate(360, 80);
fill(inside);
rect(0, 0, 200, 200);
fill(outside);
rect(40, 60, 120, 120);
fill(middle);
rect(60, 90, 80, 80);
popMatrix();

View File

@@ -0,0 +1,30 @@
/**
* Hue.
*
* Hue is the color reflected from or transmitted through an object
* and is typically referred to as the name of the color (red, blue, yellow, etc.)
* Move the cursor vertically over each bar to alter its hue.
*/
int barWidth = 20;
int lastBar = -1;
void setup()
{
size(640, 360);
colorMode(HSB, height, height, height);
noStroke();
background(0);
}
void draw()
{
int whichBar = mouseX / barWidth;
if (whichBar != lastBar) {
int barX = whichBar * barWidth;
fill(mouseY, height, height);
rect(barX, 0, barWidth, height);
lastBar = whichBar;
}
}

View File

@@ -0,0 +1,55 @@
/**
* Simple Linear Gradient
*
* The lerpColor() function is useful for interpolating
* between two colors.
*/
// Constants
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2, c1, c2;
void setup() {
size(640, 360);
// Define colors
b1 = color(255);
b2 = color(0);
c1 = color(204, 102, 0);
c2 = color(0, 102, 153);
noLoop();
}
void draw() {
// Background
setGradient(0, 0, width/2, height, b1, b2, X_AXIS);
setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS);
// Foreground
setGradient(50, 90, 540, 80, c1, c2, Y_AXIS);
setGradient(50, 190, 540, 80, c2, c1, X_AXIS);
}
void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {
noFill();
if (axis == Y_AXIS) { // Top to bottom gradient
for (int i = y; i <= y+h; i++) {
float inter = map(i, y, y+h, 0, 1);
color c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x+w, i);
}
}
else if (axis == X_AXIS) { // Left to right gradient
for (int i = x; i <= x+w; i++) {
float inter = map(i, x, x+w, 0, 1);
color c = lerpColor(c1, c2, inter);
stroke(c);
line(i, y, i, y+h);
}
}
}

View File

@@ -0,0 +1,36 @@
/**
* Radial Gradient.
*
* Draws are series of concentric circles to create a gradient
* from one color to another.
*/
int dim;
void setup() {
size(640, 360);
dim = width/2;
background(0);
colorMode(HSB, 360, 100, 100);
noStroke();
ellipseMode(RADIUS);
frameRate(1);
}
void draw() {
background(0);
for (int x = 0; x <= width; x+=dim) {
drawGradient(x, height/2);
}
}
void drawGradient(float x, float y) {
int radius = dim/2;
float h = random(0, 360);
for (int r = radius; r > 0; --r) {
fill(h, 90, 90);
ellipse(x, y, r, r);
h = (h + 1) % 360;
}
}

View File

@@ -0,0 +1,42 @@
/**
* Relativity.
*
* Each color is perceived in relation to other colors. The top and bottom
* bars each contain the same component colors, but a different display order
* causes individual colors to appear differently.
*/
color a, b, c, d, e;
void setup() {
size(640, 360);
noStroke();
a = color(165, 167, 20);
b = color(77, 86, 59);
c = color(42, 106, 105);
d = color(165, 89, 20);
e = color(146, 150, 127);
noLoop(); // Draw only one time
}
void draw() {
drawBand(a, b, c, d, e, 0, width/128);
drawBand(c, a, d, b, e, height/2, width/128);
}
void drawBand(color v, color w, color x, color y, color z, int ypos, int barWidth) {
int num = 5;
color[] colorOrder = { v, w, x, y, z };
for(int i = 0; i < width; i += barWidth*num) {
for(int j = 0; j < num; j++) {
fill(colorOrder[j]);
rect(i+j*barWidth, ypos, barWidth, height/2);
}
}
}

View File

@@ -0,0 +1,29 @@
/**
* Saturation.
*
* Saturation is the strength or purity of the color and represents the
* amount of gray in proportion to the hue. A "saturated" color is pure
* and an "unsaturated" color has a large percentage of gray.
* Move the cursor vertically over each bar to alter its saturation.
*/
int barWidth = 20;
int lastBar = -1;
void setup() {
size(640, 360);
colorMode(HSB, width, height, 100);
noStroke();
}
void draw() {
int whichBar = mouseX / barWidth;
if (whichBar != lastBar) {
int barX = whichBar * barWidth;
fill(barX, mouseY, 66);
rect(barX, 0, barWidth, height);
lastBar = whichBar;
}
}

View File

@@ -0,0 +1,41 @@
/**
* Wave Gradient
* by Ira Greenberg.
*
* Generate a gradient along a sin() wave.
*/
float amplitude = 30;
float fillGap = 2.5;
void setup() {
size(640, 360);
background(200);
// To efficiently set all the pixels on screen, make the set()
// calls on a PImage, then write the result to the screen.
PImage gradient = createImage(width, height, RGB);
float frequency = 0;
for (int i =- 75; i < height+75; i++){
// Reset angle to 0, so waves stack properly
float angle = 0;
// Increasing frequency causes more gaps
frequency += 0.002;
for (float j = 0; j < width+75; j++){
float py = i + sin(radians(angle)) * amplitude;
angle += frequency;
color c = color(abs(py-i)*255/amplitude, 255-abs(py-i)*255/amplitude, j*(255.0/(width+50)));
// Hack to fill gaps. Raise value of fillGap if you increase frequency
for (int filler = 0; filler < fillGap; filler++){
gradient.set(int(j-filler), int(py)-filler, c);
gradient.set(int(j), int(py), c);
gradient.set(int(j+filler), int(py)+filler, c);
}
}
}
// Draw the image to the screen
set(0, 0, gradient);
// Another alternative for drawing to the screen
//image(gradient, 0, 0);
}

View File

@@ -0,0 +1,26 @@
/**
* Conditionals 1.
*
* Conditions are like questions.
* They allow a program to decide to take one action if
* the answer to a question is "true" or to do another action
* if the answer to the question is "false."<br />
* The questions asked within a program are always logical
* or relational statements. For example, if the variable 'i' is
* equal to zero then draw a line.
*/
size(640, 360);
background(0);
for(int i = 10; i < width; i += 10) {
// If 'i' divides by 20 with no remainder draw
// the first line, else draw the second line
if((i % 20) == 0) {
stroke(255);
line(i, 80, i, height/2);
} else {
stroke(153);
line(i, 20, i, 180);
}
}

View File

@@ -0,0 +1,28 @@
/**
* Conditionals 2.
*
* We extend the language of conditionals from the previous
* example by adding the keyword "else". This allows conditionals
* to ask two or more sequential questions, each with a different
* action.
*/
size(640, 360);
background(0);
for (int i = 2; i < width-2; i += 2) {
// If 'i' divides by 20 with no remainder
if ((i % 20) == 0) {
stroke(255);
line(i, 80, i, height/2);
// If 'i' divides by 10 with no remainder
} else if ((i % 10) == 0) {
stroke(153);
line(i, 20, i, 180);
// If neither of the above two conditions are met
// then draw this line
} else {
stroke(102);
line(i, height/2, i, height-20);
}
}

View File

@@ -0,0 +1,22 @@
/**
* Embedding Iteration.
*
* Embedding "for" structures allows repetition in two dimensions.
*
*/
size(640, 360);
background(0);
int gridSize = 40;
for (int x = gridSize; x <= width - gridSize; x += gridSize) {
for (int y = gridSize; y <= height - gridSize; y += gridSize) {
noStroke();
fill(255);
rect(x-1, y-1, 3, 3);
stroke(255, 100);
line(x, y, width/2, height/2);
}
}

View File

@@ -0,0 +1,41 @@
/**
* Iteration.
*
* Iteration with a "for" structure to construct repetitive forms.
*/
int y;
int num = 14;
size(640, 360);
background(102);
noStroke();
// White bars
fill(255);
y = 60;
for(int i = 0; i < num/3; i++) {
rect(50, y, 475, 10);
y+=20;
}
// Gray bars
fill(51);
y = 40;
for(int i = 0; i < num; i++) {
rect(405, y, 30, 10);
y += 20;
}
y = 50;
for(int i = 0; i < num; i++) {
rect(425, y, 30, 10);
y += 20;
}
// Thin lines
y = 45;
fill(0);
for(int i = 0; i < num-1; i++) {
rect(120, y, 40, 1);
y+= 20;
}

View File

@@ -0,0 +1,45 @@
/**
* Logical Operators.
*
* The logical operators for AND (&&) and OR (||) are used to
* combine simple relational statements into more complex expressions.
* The NOT (!) operator is used to negate a boolean statement.
*/
size(640, 360);
background(126);
boolean test = false;
for (int i = 5; i <= height; i += 5) {
// Logical AND
stroke(0);
if((i > 35) && (i < 100)) {
line(width/4, i, width/2, i);
test = false;
}
// Logical OR
stroke(76);
if ((i <= 35) || (i >= 100)) {
line(width/2, i, width, i);
test = true;
}
// Testing if a boolean value is "true"
// The expression "if(test)" is equivalent to "if(test == true)"
if (test) {
stroke(0);
point(width/3, i);
}
// Testing if a boolean value is "false"
// The expression "if(!test)" is equivalent to "if(test == false)"
if (!test) {
stroke(255);
point(width/4, i);
}
}

View File

@@ -0,0 +1,50 @@
/**
* Characters Strings.
*
* The character datatype, abbreviated as char, stores letters and
* symbols in the Unicode format, a coding system developed to support
* a variety of world languages. Characters are distinguished from other
* symbols by putting them between single quotes ('P').<br />
* <br />
* A string is a sequence of characters. A string is noted by surrounding
* a group of letters with double quotes ("Processing").
* Chars and strings are most often used with the keyboard methods,
* to display text to the screen, and to load images or files.<br />
* <br />
* The String datatype must be capitalized because it is a complex datatype.
* A String is actually a class with its own methods, some of which are
* featured below.
*/
char letter;
String words = "Begin...";
void setup() {
size(640, 360);
// Create the font
textFont(createFont("SourceCodePro-Regular.ttf", 36));
}
void draw() {
background(0); // Set background to black
// Draw the letter to the center of the screen
textSize(14);
text("Click on the program, then type to add to the String", 50, 50);
text("Current key: " + letter, 50, 70);
text("The String is " + words.length() + " characters long", 50, 90);
textSize(36);
text(words, 50, 120, 540, 300);
}
void keyTyped() {
// The variable "key" always contains the value
// of the most recent key pressed.
if ((key >= 'A' && key <= 'z') || key == ' ') {
letter = key;
words = words + key;
// Write the letter to the console
println(key);
}
}

View File

@@ -0,0 +1,33 @@
/**
* Datatype Conversion.
*
* It is sometimes beneficial to convert a value from one type of
* data to another. Each of the conversion functions converts its parameter
* to an equivalent representation within its datatype.
* The conversion functions include int(), float(), char(), byte(), and others.
*/
size(640, 360);
background(0);
noStroke();
textFont(createFont("SourceCodePro-Regular.ttf",24));
char c; // Chars are used for storing alphanumeric symbols
float f; // Floats are decimal numbers
int i; // Integers are values between 2,147,483,647 and -2147483648
byte b; // Bytes are values between -128 and 128
c = 'A';
f = float(c); // Sets f = 65.0
i = int(f * 1.4); // Sets i to 91
b = byte(c / 2); // Sets b to 32
//println(f);
//println(i);
//println(b);
text("The value of variable c is " + c, 50, 100);
text("The value of variable f is " + f, 50, 150);
text("The value of variable i is " + i, 50, 200);
text("The value of variable b is " + b, 50, 250);

View File

@@ -0,0 +1,33 @@
/**
* Integers Floats.
*
* Integers and floats are two different kinds of numerical data.
* An integer (more commonly called an int) is a number without
* a decimal point. A float is a floating-point number, which means
* it is a number that has a decimal place. Floats are used when
* more precision is needed.
*/
int a = 0; // Create a variable "a" of the datatype "int"
float b = 0.0; // Create a variable "b" of the datatype "float"
void setup() {
size(640, 360);
stroke(255);
}
void draw() {
background(0);
a = a + 1;
b = b + 0.2;
line(a, 0, a, height/2);
line(b, height/2, b, height);
if(a > width) {
a = 0;
}
if(b > width) {
b = 0;
}
}

View File

@@ -0,0 +1,37 @@
/**
* True/False.
*
* A Boolean variable has only two possible values: true or false.
* It is common to use Booleans with control statements to
* determine the flow of a program. In this example, when the
* boolean value "x" is true, vertical black lines are drawn and when
* the boolean value "x" is false, horizontal gray lines are drawn.
*/
boolean b = false;
size(640, 360);
background(0);
stroke(255);
int d = 20;
int middle = width/2;
for (int i = d; i <= width; i += d) {
if (i < middle) {
b = true;
} else {
b = false;
}
if (b == true) {
// Vertical line
line(i, d, i, height-d);
}
if (b == false) {
// Horizontal line
line(middle, i - middle + d, width-d, i - middle + d);
}
}

View File

@@ -0,0 +1,57 @@
/**
* Variable Scope.
*
* Variables have a global or local "scope".
* For example, variables declared within either the
* setup() or draw() functions may be only used in these
* functions. Global variables, variables declared outside
* of setup() and draw(), may be used anywhere within the program.
* If a local variable is declared with the same name as a
* global variable, the program will use the local variable to make
* its calculations within the current scope. Variables are localized
* within each block, the space between a { and }.
*/
int a = 80; // Create a global variable "a"
void setup() {
size(640, 360);
background(0);
stroke(255);
noLoop();
}
void draw() {
// Draw a line using the global variable "a"
line(a, 0, a, height);
// Create a new variable "a" local to the for() statement
for (int a = 120; a < 200; a += 2) {
line(a, 0, a, height);
}
// Create a new variable "a" local to the draw() function
int a = 300;
// Draw a line using the new local variable "a"
line(a, 0, a, height);
// Make a call to the custom function drawAnotherLine()
drawAnotherLine();
// Make a call to the custom function setYetAnotherLine()
drawYetAnotherLine();
}
void drawAnotherLine() {
// Create a new variable "a" local to this method
int a = 320;
// Draw a line using the local variable "a"
line(a, 0, a, height);
}
void drawYetAnotherLine() {
// Because no new local variable "a" is set,
// this line draws using the original global
// variable "a", which is set to the value 80.
line(a+2, 0, a+2, height);
}

View File

@@ -0,0 +1,40 @@
/**
* Variables.
*
* Variables are used for storing values. In this example, change
* the values of variables to affect the composition.
*/
size(640, 360);
background(0);
stroke(153);
strokeWeight(4);
strokeCap(SQUARE);
int a = 50;
int b = 120;
int c = 180;
line(a, b, a+c, b);
line(a, b+10, a+c, b+10);
line(a, b+20, a+c, b+20);
line(a, b+30, a+c, b+30);
a = a + c;
b = height-b;
line(a, b, a+c, b);
line(a, b+10, a+c, b+10);
line(a, b+20, a+c, b+20);
line(a, b+30, a+c, b+30);
a = a + c;
b = height-b;
line(a, b, a+c, b);
line(a, b+10, a+c, b+10);
line(a, b+20, a+c, b+20);
line(a, b+30, a+c, b+30);

View File

@@ -0,0 +1,22 @@
/**
* Bezier.
*
* The first two parameters for the bezier() function specify the
* first point in the curve and the last two parameters specify
* the last point. The middle parameters set the control points
* that define the shape of the curve.
*/
void setup() {
size(640, 360);
stroke(255);
noFill();
}
void draw() {
background(0);
for (int i = 0; i < 200; i += 20) {
bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0));
}
}

View File

@@ -0,0 +1,30 @@
/**
* Pie Chart
*
* Uses the arc() function to generate a pie chart from the data
* stored in an array.
*/
int[] angles = { 30, 10, 45, 35, 60, 38, 75, 67 };
void setup() {
size(640, 360);
noStroke();
noLoop(); // Run once and stop
}
void draw() {
background(100);
pieChart(300, angles);
}
void pieChart(float diameter, int[] data) {
float lastAngle = 0;
for (int i = 0; i < data.length; i++) {
float gray = map(i, 0, data.length, 0, 255);
fill(gray);
arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(data[i]));
lastAngle += radians(data[i]);
}
}

View File

@@ -0,0 +1,34 @@
/**
* Points and Lines.
*
* Points and lines can be used to draw basic geometry.
* Change the value of the variable 'd' to scale the form.
* The four variables set the positions based on the value of 'd'.
*/
int d = 70;
int p1 = d;
int p2 = p1+d;
int p3 = p2+d;
int p4 = p3+d;
size(640, 360);
noSmooth();
background(0);
translate(140, 0);
// Draw gray box
stroke(153);
line(p3, p3, p2, p3);
line(p2, p3, p2, p2);
line(p2, p2, p3, p2);
line(p3, p2, p3, p3);
// Draw white points
stroke(255);
point(p1, p1);
point(p1, p3);
point(p2, p4);
point(p3, p1);
point(p4, p2);
point(p4, p4);

View File

@@ -0,0 +1,30 @@
/**
* Primitives 3D.
*
* Placing mathematically 3D objects in synthetic space.
* The lights() method reveals their imagined dimension.
* The box() and sphere() functions each have one parameter
* which is used to specify their size. These shapes are
* positioned using the translate() function.
*/
size(640, 360, P3D);
background(0);
lights();
noStroke();
pushMatrix();
translate(130, height/2, 0);
rotateY(1.25);
rotateX(-0.4);
box(100);
popMatrix();
noFill();
stroke(255);
pushMatrix();
translate(500, height*0.35, -200);
sphere(280);
popMatrix();

View File

@@ -0,0 +1,46 @@
/**
* Regular Polygon
*
* What is your favorite? Pentagon? Hexagon? Heptagon?
* No? What about the icosagon? The polygon() function
* created for this example is capable of drawing any
* regular polygon. Try placing different numbers into the
* polygon() function calls within draw() to explore.
*/
void setup() {
size(640, 360);
}
void draw() {
background(102);
pushMatrix();
translate(width*0.2, height*0.5);
rotate(frameCount / 200.0);
polygon(0, 0, 82, 3); // Triangle
popMatrix();
pushMatrix();
translate(width*0.5, height*0.5);
rotate(frameCount / 50.0);
polygon(0, 0, 80, 20); // Icosahedron
popMatrix();
pushMatrix();
translate(width*0.8, height*0.5);
rotate(frameCount / -100.0);
polygon(0, 0, 70, 7); // Heptagon
popMatrix();
}
void polygon(float x, float y, float radius, int npoints) {
float angle = TWO_PI / npoints;
beginShape();
for (float a = 0; a < TWO_PI; a += angle) {
float sx = x + cos(a) * radius;
float sy = y + sin(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}

View File

@@ -0,0 +1,32 @@
/**
* Shape Primitives.
*
* The basic shape primitive functions are triangle(),
* rect(), quad(), ellipse(), and arc(). Squares are made
* with rect() and circles are made with ellipse(). Each
* of these functions requires a number of parameters to
* determine the shape's position and size.
*/
size(640, 360);
background(0);
noStroke();
fill(204);
triangle(18, 18, 18, 360, 81, 360);
fill(102);
rect(81, 81, 63, 63);
fill(204);
quad(189, 18, 216, 18, 216, 360, 144, 360);
fill(255);
ellipse(252, 144, 72, 72);
fill(204);
triangle(288, 18, 351, 360, 288, 360);
fill(255);
arc(479, 300, 280, 280, PI, TWO_PI);

View File

@@ -0,0 +1,48 @@
/**
* Star
*
* The star() function created for this example is capable of drawing a
* wide range of different forms. Try placing different numbers into the
* star() function calls within draw() to explore.
*/
void setup() {
size(640, 360);
}
void draw() {
background(102);
pushMatrix();
translate(width*0.2, height*0.5);
rotate(frameCount / 200.0);
star(0, 0, 5, 70, 3);
popMatrix();
pushMatrix();
translate(width*0.5, height*0.5);
rotate(frameCount / 400.0);
star(0, 0, 80, 100, 40);
popMatrix();
pushMatrix();
translate(width*0.8, height*0.5);
rotate(frameCount / -100.0);
star(0, 0, 30, 70, 5);
popMatrix();
}
void star(float x, float y, float radius1, float radius2, int npoints) {
float angle = TWO_PI / npoints;
float halfAngle = angle/2.0;
beginShape();
for (float a = 0; a < TWO_PI; a += angle) {
float sx = x + cos(a) * radius2;
float sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a+halfAngle) * radius1;
sy = y + sin(a+halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}

View File

@@ -0,0 +1,42 @@
/**
* Triangle Strip
* by Ira Greenberg.
*
* Generate a closed ring using the vertex() function and
* beginShape(TRIANGLE_STRIP) mode. The outsideRadius and insideRadius
* variables control ring's radii respectively.
*/
int x;
int y;
float outsideRadius = 150;
float insideRadius = 100;
void setup() {
size(640, 360);
background(204);
x = width/2;
y = height/2;
}
void draw() {
background(204);
int numPoints = int(map(mouseX, 0, width, 6, 60));
float angle = 0;
float angleStep = 180.0/numPoints;
beginShape(TRIANGLE_STRIP);
for (int i = 0; i <= numPoints; i++) {
float px = x + cos(radians(angle)) * outsideRadius;
float py = y + sin(radians(angle)) * outsideRadius;
angle += angleStep;
vertex(px, py);
px = x + cos(radians(angle)) * insideRadius;
py = y + sin(radians(angle)) * insideRadius;
vertex(px, py);
angle += angleStep;
}
endShape();
}

View File

@@ -0,0 +1,24 @@
/**
* Alpha Mask.
*
* Loads a "mask" for an image to specify the transparency
* in different parts of the image. The two images are blended
* together using the mask() method of PImage.
*/
PImage img;
PImage imgMask;
void setup() {
size(640, 360);
img = loadImage("moonwalk.jpg");
imgMask = loadImage("mask.jpg");
img.mask(imgMask);
imageMode(CENTER);
}
void draw() {
background(0, 102, 153);
image(img, width/2, height/2);
image(img, mouseX, mouseY);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

View File

@@ -0,0 +1,30 @@
/**
* Background Image.
*
* This example presents the fastest way to load a background image
* into Processing. To load an image as the background, it must be
* the same width and height as the program.
*/
PImage bg;
int y;
void setup() {
size(640, 360);
// The background image must be the same size as the parameters
// into the size() method. In this program, the size of the image
// is 640 x 360 pixels.
bg = loadImage("moonwalk.jpg");
}
void draw() {
background(bg);
stroke(226, 204, 0);
line(0, y, width, y);
y++;
if (y > height) {
y = 0;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

View File

@@ -0,0 +1,23 @@
/**
* Create Image.
*
* The createImage() function provides a fresh buffer of pixels to play with.
* This example creates an image gradient.
*/
PImage img;
void setup() {
size(640, 360);
img = createImage(230, 230, ARGB);
for(int i = 0; i < img.pixels.length; i++) {
float a = map(i, 0, img.pixels.length, 255, 0);
img.pixels[i] = color(0, 153, 204, a);
}
}
void draw() {
background(0);
image(img, 90, 80);
image(img, mouseX-img.width/2, mouseY-img.height/2);
}

View File

@@ -0,0 +1,22 @@
/**
* Load and Display
*
* Images can be loaded and displayed to the screen at their actual size
* or any other size.
*/
PImage img; // Declare variable "a" of type PImage
void setup() {
size(640, 360);
// The image file must be in the data folder of the current sketch
// to load successfully
img = loadImage("moonwalk.jpg"); // Load the image into the program
}
void draw() {
// Displays the image at its actual size at point (0,0)
image(img, 0, 0);
// Displays the image at point (0, height/2) at half of its size
image(img, 0, height/2, img.width/2, img.height/2);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

View File

@@ -0,0 +1,30 @@
/**
* Pointillism
* by Daniel Shiffman.
*
* Mouse horizontal location controls size of dots.
* Creates a simple pointillist effect using ellipses colored
* according to pixels in an image.
*/
PImage img;
int smallPoint, largePoint;
void setup() {
size(640, 360);
img = loadImage("moonwalk.jpg");
smallPoint = 4;
largePoint = 40;
imageMode(CENTER);
noStroke();
background(255);
}
void draw() {
float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
int x = int(random(img.width));
int y = int(random(img.height));
color pix = img.get(x, y);
fill(pix, 128);
ellipse(x, y, pointillize, pointillize);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

View File

@@ -0,0 +1,89 @@
/**
* Request Image
* by Ira Greenberg ( From Processing for Flash Developers).
*
* Shows how to use the requestImage() function with preloader animation.
* The requestImage() function loads images on a separate thread so that
* the sketch does not freeze while they load. It's very useful when you are
* loading large images.
*
* These images are small for a quick download, but try it with your own huge
* images to get the full effect.
*/
int imgCount = 12;
PImage[] imgs = new PImage[imgCount];
float imgW;
// Keeps track of loaded images (true or false)
boolean[] loadStates = new boolean[imgCount];
// For loading animation
float loaderX, loaderY, theta;
void setup() {
size(640, 360);
imgW = width/imgCount;
// Load images asynchronously
for (int i = 0; i < imgCount; i++){
imgs[i] = requestImage("PT_anim"+nf(i, 4)+".gif");
}
}
void draw(){
background(0);
// Start loading animation
runLoaderAni();
for (int i = 0; i < imgs.length; i++){
// Check if individual images are fully loaded
if ((imgs[i].width != 0) && (imgs[i].width != -1)){
// As images are loaded set true in boolean array
loadStates[i] = true;
}
}
// When all images are loaded draw them to the screen
if (checkLoadStates()){
drawImages();
}
}
void drawImages() {
int y = (height - imgs[0].height) / 2;
for (int i = 0; i < imgs.length; i++){
image(imgs[i], width/imgs.length*i, y, imgs[i].height, imgs[i].height);
}
}
// Loading animation
void runLoaderAni(){
// Only run when images are loading
if (!checkLoadStates()){
ellipse(loaderX, loaderY, 10, 10);
loaderX += 2;
loaderY = height/2 + sin(theta) * (height/8);
theta += PI/22;
// Reposition ellipse if it goes off the screen
if (loaderX > width + 5){
loaderX = -5;
}
}
}
// Return true when all images are loaded - no false values left in array
boolean checkLoadStates(){
for (int i = 0; i < imgs.length; i++){
if (loadStates[i] == false){
return false;
}
}
return true;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@@ -0,0 +1,29 @@
/**
* Transparency.
*
* Move the pointer left and right across the image to change
* its position. This program overlays one image over another
* by modifying the alpha value of the image with the tint() function.
*/
PImage img;
float offset = 0;
float easing = 0.05;
void setup() {
size(640, 360);
img = loadImage("moonwalk.jpg"); // Load an image into the program
}
void draw() {
image(img, 0, 0); // Display at full opacity
float dx = (mouseX-img.width/2) - offset;
offset += dx * easing;
tint(255, 127); // Display at half opacity
image(img, offset, 0);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

View File

@@ -0,0 +1,62 @@
/**
* Clock.
*
* The current time can be read with the second(), minute(),
* and hour() functions. In this example, sin() and cos() values
* are used to set the position of the hands.
*/
int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;
void setup() {
size(640, 360);
stroke(255);
int radius = min(width, height) / 2;
secondsRadius = radius * 0.72;
minutesRadius = radius * 0.60;
hoursRadius = radius * 0.50;
clockDiameter = radius * 1.8;
cx = width / 2;
cy = height / 2;
}
void draw() {
background(0);
// Draw the clock background
fill(80);
noStroke();
ellipse(cx, cy, clockDiameter, clockDiameter);
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
// Draw the hands of the clock
stroke(255);
strokeWeight(1);
line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
strokeWeight(2);
line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
strokeWeight(4);
line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
// Draw the minute ticks
strokeWeight(2);
beginShape(POINTS);
for (int a = 0; a < 360; a+=6) {
float angle = radians(a);
float x = cx + cos(angle) * secondsRadius;
float y = cy + sin(angle) * secondsRadius;
vertex(x, y);
}
endShape();
}

View File

@@ -0,0 +1,38 @@
/**
* Constrain.
*
* Move the mouse across the screen to move the circle.
* The program constrains the circle to its box.
*/
float mx;
float my;
float easing = 0.05;
int radius = 24;
int edge = 100;
int inner = edge + radius;
void setup() {
size(640, 360);
noStroke();
ellipseMode(RADIUS);
rectMode(CORNERS);
}
void draw() {
background(51);
if (abs(mouseX - mx) > 0.1) {
mx = mx + (mouseX - mx) * easing;
}
if (abs(mouseY - my) > 0.1) {
my = my + (mouseY- my) * easing;
}
mx = constrain(mx, inner, width - inner);
my = constrain(my, inner, height - inner);
fill(76);
rect(edge, edge, width-edge, height-edge);
fill(255);
ellipse(mx, my, radius, radius);
}

View File

@@ -0,0 +1,33 @@
/**
* Easing.
*
* Move the mouse across the screen and the symbol will follow.
* Between drawing each frame of the animation, the program
* calculates the difference between the position of the
* symbol and the cursor. If the distance is larger than
* 1 pixel, the symbol moves part of the distance (0.05) from its
* current position toward the cursor.
*/
float x;
float y;
float easing = 0.05;
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(51);
float targetX = mouseX;
float dx = targetX - x;
x += dx * easing;
float targetY = mouseY;
float dy = targetY - y;
y += dy * easing;
ellipse(x, y, 66, 66);
}

View File

@@ -0,0 +1,38 @@
/**
* Keyboard.
*
* Click on the image to give it focus and press the letter keys
* to create forms in time and space. Each key has a unique identifying
* number. These numbers can be used to position shapes in space.
*/
int rectWidth;
void setup() {
size(640, 360);
noStroke();
background(0);
rectWidth = width/4;
}
void draw() {
// keep draw() here to continue looping while waiting for keys
}
void keyPressed() {
int keyIndex = -1;
if (key >= 'A' && key <= 'Z') {
keyIndex = key - 'A';
} else if (key >= 'a' && key <= 'z') {
keyIndex = key - 'a';
}
if (keyIndex == -1) {
// If it's not a letter key, clear the screen
background(0);
} else {
// It's a letter key, fill a rectangle
fill(millis() % 255);
float x = map(keyIndex, 0, 25, 0, width - rectWidth);
rect(x, 0, rectWidth, height);
}
}

View File

@@ -0,0 +1,87 @@
/**
* Keyboard Functions.
* Modified from code by Martin.
* Original 'Color Typewriter' concept by John Maeda.
*
* Click on the window to give it focus and press the letter keys to type colors.
* The keyboard function keyPressed() is called whenever
* a key is pressed. keyReleased() is another keyboard
* function that is called when a key is released.
*/
int maxHeight = 40;
int minHeight = 20;
int letterHeight = maxHeight; // Height of the letters
int letterWidth = 20; // Width of the letter
int x = -letterWidth; // X position of the letters
int y = 0; // Y position of the letters
boolean newletter;
int numChars = 26; // There are 26 characters in the alphabet
color[] colors = new color[numChars];
void setup() {
size(640, 360);
noStroke();
colorMode(HSB, numChars);
background(numChars/2);
// Set a hue value for each key
for(int i = 0; i < numChars; i++) {
colors[i] = color(i, numChars, numChars);
}
}
void draw() {
if(newletter == true) {
// Draw the "letter"
int y_pos;
if (letterHeight == maxHeight) {
y_pos = y;
rect( x, y_pos, letterWidth, letterHeight );
} else {
y_pos = y + minHeight;
rect( x, y_pos, letterWidth, letterHeight );
fill(numChars/2);
rect( x, y_pos-minHeight, letterWidth, letterHeight );
}
newletter = false;
}
}
void keyPressed()
{
// If the key is between 'A'(65) to 'Z' and 'a' to 'z'(122)
if((key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z')) {
int keyIndex;
if(key <= 'Z') {
keyIndex = key-'A';
letterHeight = maxHeight;
fill(colors[keyIndex]);
} else {
keyIndex = key-'a';
letterHeight = minHeight;
fill(colors[keyIndex]);
}
} else {
fill(0);
letterHeight = 10;
}
newletter = true;
// Update the "letter" position
x = ( x + letterWidth );
// Wrap horizontally
if (x > width - letterWidth) {
x = 0;
y+= maxHeight;
}
// Wrap vertically
if( y > height - letterHeight) {
y = 0; // reset y to 0
}
}

View File

@@ -0,0 +1,24 @@
/**
* Milliseconds.
*
* A millisecond is 1/1000 of a second.
* Processing keeps track of the number of milliseconds a program has run.
* By modifying this number with the modulo(%) operator,
* different patterns in time are created.
*/
float scale;
void setup() {
size(640, 360);
noStroke();
scale = width/20;
}
void draw() {
for (int i = 0; i < scale; i++) {
colorMode(RGB, (i+1) * scale * 10);
fill(millis()%((i+1) * scale * 10));
rect(i*scale, 0, scale, height);
}
}

View File

@@ -0,0 +1,27 @@
/**
* Mouse 1D.
*
* Move the mouse left and right to shift the balance.
* The "mouseX" variable is used to control both the
* size and color of the rectangles.
*/
void setup() {
size(640, 360);
noStroke();
colorMode(RGB, height, height, height);
rectMode(CENTER);
}
void draw() {
background(0.0);
float r1 = map(mouseX, 0, width, 0, height);
float r2 = height-r1;
fill(r1);
rect(width/2 + r1/2, height/2, r1, r1);
fill(r2);
rect(width/2 - r2/2, height/2, r2, r2);
}

View File

@@ -0,0 +1,21 @@
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
void setup() {
size(640, 360);
noStroke();
rectMode(CENTER);
}
void draw() {
background(51);
fill(255, 204);
rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
fill(255, 204);
int inverseX = width-mouseX;
int inverseY = height-mouseY;
rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}

View File

@@ -0,0 +1,64 @@
/**
* Mouse Functions.
*
* Click on the box and drag it across the screen.
*/
float bx;
float by;
int boxSize = 75;
boolean overBox = false;
boolean locked = false;
float xOffset = 0.0;
float yOffset = 0.0;
void setup() {
size(640, 360);
bx = width/2.0;
by = height/2.0;
rectMode(RADIUS);
}
void draw() {
background(0);
// Test if the cursor is over the box
if (mouseX > bx-boxSize && mouseX < bx+boxSize &&
mouseY > by-boxSize && mouseY < by+boxSize) {
overBox = true;
if(!locked) {
stroke(255);
fill(153);
}
} else {
stroke(153);
fill(153);
overBox = false;
}
// Draw the box
rect(bx, by, boxSize, boxSize);
}
void mousePressed() {
if(overBox) {
locked = true;
fill(255, 255, 255);
} else {
locked = false;
}
xOffset = mouseX-bx;
yOffset = mouseY-by;
}
void mouseDragged() {
if(locked) {
bx = mouseX-xOffset;
by = mouseY-yOffset;
}
}
void mouseReleased() {
locked = false;
}

View File

@@ -0,0 +1,24 @@
/**
* Mouse Press.
*
* Move the mouse to position the shape.
* Press the mouse button to invert the color.
*/
void setup() {
size(640, 360);
noSmooth();
fill(126);
background(102);
}
void draw() {
if (mousePressed) {
stroke(255);
} else {
stroke(0);
}
line(mouseX-66, mouseY, mouseX+66, mouseY);
line(mouseX, mouseY-66, mouseX, mouseY+66);
}

View File

@@ -0,0 +1,55 @@
/**
* Mouse Signals.
*
* Move and click the mouse to generate signals.
* The top row is the signal from "mouseX",
* the middle row is the signal from "mouseY",
* and the bottom row is the signal from "mousePressed".
*/
int[] xvals;
int[] yvals;
int[] bvals;
void setup()
{
size(640, 360);
noSmooth();
xvals = new int[width];
yvals = new int[width];
bvals = new int[width];
}
int arrayindex = 0;
void draw()
{
background(102);
for(int i = 1; i < width; i++) {
xvals[i-1] = xvals[i];
yvals[i-1] = yvals[i];
bvals[i-1] = bvals[i];
}
// Add the new values to the end of the array
xvals[width-1] = mouseX;
yvals[width-1] = mouseY;
if(mousePressed) {
bvals[width-1] = 0;
} else {
bvals[width-1] = 255;
}
fill(255);
noStroke();
rect(0, height/3, width, height/3+1);
for(int i=1; i<width; i++) {
stroke(255);
point(i, xvals[i]/3);
stroke(0);
point(i, height/3+yvals[i]/3);
stroke(255);
line(i, 2*height/3+bvals[i]/3, i, (2*height/3+bvals[i-1]/3));
}
}

View File

@@ -0,0 +1,35 @@
/**
* Storing Input.
*
* Move the mouse across the screen to change the position
* of the circles. The positions of the mouse are recorded
* into an array and played back every frame. Between each
* frame, the newest value are added to the end of each array
* and the oldest value is deleted.
*/
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
void setup() {
size(640, 360);
noStroke();
fill(255, 153);
}
void draw() {
background(51);
// Cycle through the array, using a different entry on each frame.
// Using modulo (%) like this is faster than moving all the values over.
int which = frameCount % num;
mx[which] = mouseX;
my[which] = mouseY;
for (int i = 0; i < num; i++) {
// which+1 is the smallest (the oldest in the array)
int index = (which+1 + i) % num;
ellipse(mx[index], my[index], i, i);
}
}

View File

@@ -0,0 +1,28 @@
/**
* Directional.
*
* Move the mouse the change the direction of the light.
* Directional light comes from one direction and is stronger
* when hitting a surface squarely and weaker if it hits at a
* a gentle angle. After hitting a surface, a directional lights
* scatters in all directions.
*/
void setup() {
size(640, 360, P3D);
noStroke();
fill(204);
}
void draw() {
noStroke();
background(0);
float dirY = (mouseY / float(height) - 0.5) * 2;
float dirX = (mouseX / float(width) - 0.5) * 2;
directionalLight(204, 204, 204, -dirX, -dirY, -1);
translate(width/2 - 100, height/2, 0);
sphere(80);
translate(200, 0, 0);
sphere(80);
}

View File

@@ -0,0 +1,34 @@
/**
* Mixture
* by Simon Greenwold.
*
* Display a box with three different kinds of lights.
*/
void setup() {
size(640, 360, P3D);
noStroke();
}
void draw() {
background(0);
translate(width / 2, height / 2);
// Orange point light on the right
pointLight(150, 100, 0, // Color
200, -150, 0); // Position
// Blue directional light from the left
directionalLight(0, 102, 255, // Color
1, 0, 0); // The x-, y-, z-axis direction
// Yellow spotlight from the front
spotLight(255, 255, 109, // Color
0, 40, 200, // Position
0, -0.5, -0.5, // Direction
PI / 2, 2); // Angle, concentration
rotateY(map(mouseX, 0, width, 0, PI));
rotateX(map(mouseY, 0, height, 0, PI));
box(150);
}

View File

@@ -0,0 +1,43 @@
/**
* Mixture Grid
* modified from an example by Simon Greenwold.
*
* Display a 2D grid of boxes with three different kinds of lights.
*/
void setup() {
size(640, 360, P3D);
noStroke();
}
void draw() {
defineLights();
background(0);
for (int x = 0; x <= width; x += 60) {
for (int y = 0; y <= height; y += 60) {
pushMatrix();
translate(x, y);
rotateY(map(mouseX, 0, width, 0, PI));
rotateX(map(mouseY, 0, height, 0, PI));
box(90);
popMatrix();
}
}
}
void defineLights() {
// Orange point light on the right
pointLight(150, 100, 0, // Color
200, -150, 0); // Position
// Blue directional light from the left
directionalLight(0, 102, 255, // Color
1, 0, 0); // The x-, y-, z-axis direction
// Yellow spotlight from the front
spotLight(255, 255, 109, // Color
0, 40, 200, // Position
0, -0.5, -0.5, // Direction
PI / 2, 2); // Angle, concentration
}

View File

@@ -0,0 +1,31 @@
/**
* On/Off.
*
* Uses the default lights to show a simple box. The lights() function
* is used to turn on the default lighting. Click the mouse to turn the
* lights off.
*/
float spin = 0.0;
void setup() {
size(640, 360, P3D);
noStroke();
}
void draw() {
background(51);
if (!mousePressed) {
lights();
}
spin += 0.01;
pushMatrix();
translate(width/2, height/2, 0);
rotateX(PI/9);
rotateY(PI/5 + spin);
box(150);
popMatrix();
}

View File

@@ -0,0 +1,25 @@
/**
* Reflection
* by Simon Greenwold.
*
* Vary the specular reflection component of a material
* with the horizontal position of the mouse.
*/
void setup() {
size(640, 360, P3D);
noStroke();
colorMode(RGB, 1);
fill(0.4);
}
void draw() {
background(0);
translate(width / 2, height / 2);
// Set the specular color of lights that follow
lightSpecular(1, 1, 1);
directionalLight(0.8, 0.8, 0.8, 0, 0, -1);
float s = mouseX / float(width);
specular(s, s, s);
sphere(120);
}

View File

@@ -0,0 +1,31 @@
/**
* Spot.
*
* Move the mouse the change the position and concentation
* of a blue spot light.
*/
int concentration = 600; // Try values 1 -> 10000
void setup() {
size(640, 360, P3D);
noStroke();
fill(204);
sphereDetail(60);
}
void draw() {
background(0);
// Light the bottom of the sphere
directionalLight(51, 102, 126, 0, -1, 0);
// Orange light on the upper-right of the sphere
spotLight(204, 153, 0, 360, 160, 600, 0, 0, -1, PI/2, 600);
// Moving spotlight that follows the mouse
spotLight(102, 153, 204, 360, mouseY, 600, 0, 0, -1, PI/2, 600);
translate(width/2, height/2, 0);
sphere(120);
}

View File

@@ -0,0 +1,67 @@
/**
* Additive Wave
* by Daniel Shiffman.
*
* Create a more complex wave by adding two waves together.
*/
int xspacing = 8; // How far apart should each horizontal location be spaced
int w; // Width of entire wave
int maxwaves = 4; // total # of waves to add together
float theta = 0.0;
float[] amplitude = new float[maxwaves]; // Height of wave
float[] dx = new float[maxwaves]; // Value for incrementing X, to be calculated as a function of period and xspacing
float[] yvalues; // Using an array to store height values for the wave (not entirely necessary)
void setup() {
size(640, 360);
frameRate(30);
colorMode(RGB, 255, 255, 255, 100);
w = width + 16;
for (int i = 0; i < maxwaves; i++) {
amplitude[i] = random(10,30);
float period = random(100,300); // How many pixels before the wave repeats
dx[i] = (TWO_PI / period) * xspacing;
}
yvalues = new float[w/xspacing];
}
void draw() {
background(0);
calcWave();
renderWave();
}
void calcWave() {
// Increment theta (try different values for 'angular velocity' here
theta += 0.02;
// Set all height values to zero
for (int i = 0; i < yvalues.length; i++) {
yvalues[i] = 0;
}
// Accumulate wave height values
for (int j = 0; j < maxwaves; j++) {
float x = theta;
for (int i = 0; i < yvalues.length; i++) {
// Every other wave is cosine instead of sine
if (j % 2 == 0) yvalues[i] += sin(x)*amplitude[j];
else yvalues[i] += cos(x)*amplitude[j];
x+=dx[j];
}
}
}
void renderWave() {
// A simple way to draw the wave with an ellipse at each location
noStroke();
fill(255,50);
ellipseMode(CENTER);
for (int x = 0; x < yvalues.length; x++) {
ellipse(x*xspacing,height/2+yvalues[x],16,16);
}
}

View File

@@ -0,0 +1,57 @@
/**
* Arctangent.
*
* Move the mouse to change the direction of the eyes.
* The atan2() function computes the angle from each eye
* to the cursor.
*/
Eye e1, e2, e3;
void setup() {
size(640, 360);
noStroke();
e1 = new Eye( 250, 16, 120);
e2 = new Eye( 164, 185, 80);
e3 = new Eye( 420, 230, 220);
}
void draw() {
background(102);
e1.update(mouseX, mouseY);
e2.update(mouseX, mouseY);
e3.update(mouseX, mouseY);
e1.display();
e2.display();
e3.display();
}
class Eye {
int x, y;
int size;
float angle = 0.0;
Eye(int tx, int ty, int ts) {
x = tx;
y = ty;
size = ts;
}
void update(int mx, int my) {
angle = atan2(my-y, mx-x);
}
void display() {
pushMatrix();
translate(x, y);
fill(255);
ellipse(0, 0, size, size);
rotate(angle);
fill(153, 204, 0);
ellipse(size/4, 0, size/2, size/2);
popMatrix();
}
}

View File

@@ -0,0 +1,54 @@
/**
* Distance 1D.
*
* Move the mouse left and right to control the
* speed and direction of the moving shapes.
*/
float xpos1;
float xpos2;
float xpos3;
float xpos4;
int thin = 8;
int thick = 36;
void setup()
{
size(640, 360);
noStroke();
xpos1 = width/2;
xpos2 = width/2;
xpos3 = width/2;
xpos4 = width/2;
}
void draw()
{
background(0);
float mx = mouseX * 0.4 - width/5.0;
fill(102);
rect(xpos2, 0, thick, height/2);
fill(204);
rect(xpos1, 0, thin, height/2);
fill(102);
rect(xpos4, height/2, thick, height/2);
fill(204);
rect(xpos3, height/2, thin, height/2);
xpos1 += mx/16;
xpos2 += mx/64;
xpos3 -= mx/16;
xpos4 -= mx/64;
if(xpos1 < -thin) { xpos1 = width; }
if(xpos1 > width) { xpos1 = -thin; }
if(xpos2 < -thick) { xpos2 = width; }
if(xpos2 > width) { xpos2 = -thick; }
if(xpos3 < -thin) { xpos3 = width; }
if(xpos3 > width) { xpos3 = -thin; }
if(xpos4 < -thick) { xpos4 = width; }
if(xpos4 > width) { xpos4 = -thick; }
}

View File

@@ -0,0 +1,27 @@
/**
* Distance 2D.
*
* Move the mouse across the image to obscure and reveal the matrix.
* Measures the distance from the mouse to each square and sets the
* size proportionally.
*/
float max_distance;
void setup() {
size(640, 360);
noStroke();
max_distance = dist(0, 0, width, height);
}
void draw() {
background(0);
for(int i = 0; i <= width; i += 20) {
for(int j = 0; j <= height; j += 20) {
float size = dist(mouseX, mouseY, i, j);
size = size/max_distance * 66;
ellipse(i, j, size, size);
}
}
}

View File

@@ -0,0 +1,26 @@
/**
* Double Random
* by Ira Greenberg.
*
* Using two random() calls and the point() function
* to create an irregular sawtooth line.
*/
int totalPts = 300;
float steps = totalPts + 1;
void setup() {
size(640, 360);
stroke(255);
frameRate(1);
}
void draw() {
background(0);
float rand = 0;
for (int i = 1; i < steps; i++) {
point( (width/steps) * i, (height/2) + random(-rand, rand) );
rand += random(-5, 5);
}
}

View File

@@ -0,0 +1,39 @@
/**
* Graphing 2D Equations
* by Daniel Shiffman.
*
* Graphics the following equation:
* sin(n*cos(r) + 5*theta)
* where n is a function of horizontal mouse location.
*/
void setup() {
size(640, 360);
}
void draw() {
loadPixels();
float n = (mouseX * 10.0) / width;
float w = 16.0; // 2D space width
float h = 16.0; // 2D space height
float dx = w / width; // Increment x this amount per pixel
float dy = h / height; // Increment y this amount per pixel
float x = -w/2; // Start x at -1 * width / 2
for (int i = 0; i < width; i++) {
float y = -h/2; // Start y at -1 * height / 2
for (int j = 0; j < height; j++) {
float r = sqrt((x*x) + (y*y)); // Convert cartesian to polar
float theta = atan2(y,x); // Convert cartesian to polar
// Compute 2D polar coordinate function
float val = sin(n*cos(r) + 5 * theta); // Results in a value between -1 and 1
//float val = cos(r); // Another simple function
//float val = sin(theta); // Another simple function
// Map resulting vale to grayscale value
pixels[i+j*width] = color((val + 1.0) * 255.0/2.0); // Scale to between 0 and 255
y += dy; // Increment y
}
x += dx; // Increment x
}
updatePixels();
}

View File

@@ -0,0 +1,44 @@
/**
* Increment Decrement.
*
* Writing "a++" is equivalent to "a = a + 1".
* Writing "a--" is equivalent to "a = a - 1".
*/
int a;
int b;
boolean direction;
void setup() {
size(640, 360);
colorMode(RGB, width);
a = 0;
b = width;
direction = true;
frameRate(30);
}
void draw() {
a++;
if(a > width) {
a = 0;
direction = !direction;
}
if(direction == true){
stroke(a);
} else {
stroke(width-a);
}
line(a, 0, a, height/2);
b--;
if(b < 0) {
b = width;
}
if(direction == true) {
stroke(width-b);
} else {
stroke(b);
}
line(b, height/2+1, b, height);
}

View File

@@ -0,0 +1,35 @@
/**
* Linear Interpolation.
*
* Move the mouse across the screen and the symbol will follow.
* Between drawing each frame of the animation, the ellipse moves
* part of the distance (0.05) from its current position toward
* the cursor using the lerp() function
*
* This is the same as the Easing under input only with lerp() instead.
*/
float x;
float y;
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(51);
// lerp() calculates a number between two numbers at a specific increment.
// The amt parameter is the amount to interpolate between the two values
// where 0.0 equal to the first point, 0.1 is very near the first point, 0.5
// is half-way in between, etc.
// Here we are moving 5% of the way to the mouse location each frame
x = lerp(x, mouseX, 0.05);
y = lerp(y, mouseY, 0.05);
fill(255);
stroke(255);
ellipse(x, y, 66, 66);
}

View File

@@ -0,0 +1,24 @@
/**
* Map.
*
* Use the map() function to take any number and scale it to a new number
* that is more useful for the project that you are working on. For example, use the
* numbers from the mouse position to control the size or color of a shape.
* In this example, the mouses x-coordinate (numbers between 0 and 360) are scaled to
* new numbers to define the color and size of a circle.
*/
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(0);
// Scale the mouseX value from 0 to 640 to a range between 0 and 175
float c = map(mouseX, 0, width, 0, 175);
// Scale the mouseX value from 0 to 640 to a range between 40 and 300
float d = map(mouseX, 0, width, 40, 300);
fill(255, c, 0);
ellipse(width/2, height/2, d, d);
}

View File

@@ -0,0 +1,32 @@
/**
* Noise1D.
*
* Using 1D Perlin Noise to assign location.
*/
float xoff = 0.0;
float xincrement = 0.01;
void setup() {
size(640, 360);
background(0);
noStroke();
}
void draw() {
// Create an alpha blended background
fill(0, 10);
rect(0,0,width,height);
//float n = random(0,width); // Try this line instead of noise
// Get a noise value based on xoff and scale it according to the window's width
float n = noise(xoff)*width;
// With each cycle, increment xoff
xoff += xincrement;
// Draw the ellipse at the value produced by perlin noise
fill(200);
ellipse(n,height/2, 64, 64);
}

View File

@@ -0,0 +1,44 @@
/**
* Noise2D
* by Daniel Shiffman.
*
* Using 2D noise to create simple texture.
*/
float increment = 0.02;
void setup() {
size(640, 360);
}
void draw() {
loadPixels();
float xoff = 0.0; // Start xoff at 0
float detail = map(mouseX, 0, width, 0.1, 0.6);
noiseDetail(8, detail);
// For every x,y coordinate in a 2D space, calculate a noise value and produce a brightness value
for (int x = 0; x < width; x++) {
xoff += increment; // Increment xoff
float yoff = 0.0; // For every xoff, start yoff at 0
for (int y = 0; y < height; y++) {
yoff += increment; // Increment yoff
// Calculate noise and scale by 255
float bright = noise(xoff, yoff) * 255;
// Try using this line instead
//float bright = random(0,255);
// Set each pixel onscreen to a grayscale value
pixels[x+y*width] = color(bright);
}
}
updatePixels();
}

View File

@@ -0,0 +1,53 @@
/**
* Noise3D.
*
* Using 3D noise to create simple animated texture.
* Here, the third dimension ('z') is treated as time.
*/
float increment = 0.01;
// The noise function's 3rd argument, a global variable that increments once per cycle
float zoff = 0.0;
// We will increment zoff differently than xoff and yoff
float zincrement = 0.02;
void setup() {
size(640, 360);
frameRate(30);
}
void draw() {
// Optional: adjust noise detail here
// noiseDetail(8,0.65f);
loadPixels();
float xoff = 0.0; // Start xoff at 0
// For every x,y coordinate in a 2D space, calculate a noise value and produce a brightness value
for (int x = 0; x < width; x++) {
xoff += increment; // Increment xoff
float yoff = 0.0; // For every xoff, start yoff at 0
for (int y = 0; y < height; y++) {
yoff += increment; // Increment yoff
// Calculate noise and scale by 255
float bright = noise(xoff,yoff,zoff)*255;
// Try using this line instead
//float bright = random(0,255);
// Set each pixel onscreen to a grayscale value
pixels[x+y*width] = color(bright,bright,bright);
}
}
updatePixels();
zoff += zincrement; // Increment zoff
}

View File

@@ -0,0 +1,40 @@
/**
* Noise Wave
* by Daniel Shiffman.
*
* Using Perlin Noise to generate a wave-like pattern.
*/
float yoff = 0.0; // 2nd dimension of perlin noise
void setup() {
size(640, 360);
}
void draw() {
background(51);
fill(255);
// We are going to draw a polygon out of the wave points
beginShape();
float xoff = 0; // Option #1: 2D Noise
// float xoff = yoff; // Option #2: 1D Noise
// Iterate over horizontal pixels
for (float x = 0; x <= width; x += 10) {
// Calculate a y value according to noise, map to
float y = map(noise(xoff, yoff), 0, 1, 200,300); // Option #1: 2D Noise
// float y = map(noise(xoff), 0, 1, 200,300); // Option #2: 1D Noise
// Set the vertex
vertex(x, y);
// Increment x dimension for noise
xoff += 0.05;
}
// increment y dimension for noise
yoff += 0.01;
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}

View File

@@ -0,0 +1,58 @@
/**
* Operator Precedence
*
* If you don't explicitly state the order in which
* an expression is evaluated, they are evaluated based
* on the operator precedence. For example, in the statement
* "4+2*8", the 2 will first be multiplied by 8 and then the result will
* be added to 4. This is because the "*" has a higher precedence
* than the "+". To avoid ambiguity in reading the program,
* it is recommended that is statement is written as "4+(2*8)".
* The order of evaluation can be controlled through placement of
* parenthesis in the code. A table of operator precedence follows below.
*
*/
// The highest precedence is at the top of the list and
// the lowest is at the bottom.
// Multiplicative: * / %
// Additive: + -
// Relational: < > <= >=
// Equality: == !=
// Logical AND: &&
// Logical OR: ||
// Assignment: = += -= *= /= %=
size(640, 360);
background(51);
noFill();
stroke(51);
stroke(204);
for(int i=0; i< width-20; i+= 4) {
// The 30 is added to 70 and then evaluated
// if it is greater than the current value of "i"
// For clarity, write as "if (i > (30 + 70)) {"
if (i > 30 + 70) {
line(i, 0, i, 50);
}
}
stroke(255);
// The 2 is multiplied by the 8 and the result is added to the 4
// For clarity, write as "rect(5 + (2 * 8), 0, 90, 20);"
rect(4 + 2 * 8, 52, 290, 48);
rect((4 + 2) * 8, 100, 290, 49);
stroke(153);
for (int i = 0; i < width; i+= 2) {
// The relational statements are evaluated
// first, and then the logical AND statements and
// finally the logical OR. For clarity, write as:
// "if(((i > 20) && (i < 50)) || ((i > 100) && (i < width-20))) {"
if (i > 20 && i < 50 || i > 100 && i < width-20) {
line(i, 151, i, height-1);
}
}

View File

@@ -0,0 +1,52 @@
/**
* PolarToCartesian
* by Daniel Shiffman.
*
* Convert a polar coordinate (r,theta) to cartesian (x,y):
* x = r * cos(theta)
* y = r * sin(theta)
*/
float r;
// Angle and angular velocity, accleration
float theta;
float theta_vel;
float theta_acc;
void setup() {
size(640, 360);
// Initialize all values
r = height * 0.45;
theta = 0;
theta_vel = 0;
theta_acc = 0.0001;
}
void draw() {
background(0);
// Translate the origin point to the center of the screen
translate(width/2, height/2);
// Convert polar to cartesian
float x = r * cos(theta);
float y = r * sin(theta);
// Draw the ellipse at the cartesian coordinate
ellipseMode(CENTER);
noStroke();
fill(200);
ellipse(x, y, 32, 32);
// Apply acceleration and velocity to angle (r remains static in this example)
theta_vel += theta_acc;
theta += theta_vel;
}

View File

@@ -0,0 +1,22 @@
/**
* Random.
*
* Random numbers create the basis of this image.
* Each time the program is loaded the result is different.
*/
void setup() {
size(640, 360);
background(0);
strokeWeight(20);
frameRate(2);
}
void draw() {
for (int i = 0; i < width; i++) {
float r = random(255);
stroke(r);
line(i, 0, i, height);
}
}

View File

@@ -0,0 +1,28 @@
/**
* Random Gaussian.
*
* This sketch draws ellipses with x and y locations tied to a gaussian distribution of random numbers.
*/
void setup() {
size(640, 360);
background(0);
}
void draw() {
// Get a gaussian random number w/ mean of 0 and standard deviation of 1.0
float val = randomGaussian();
float sd = 60; // Define a standard deviation
float mean = width/2; // Define a mean value (middle of the screen along the x-axis)
float x = ( val * sd ) + mean; // Scale the gaussian random number by standard deviation and mean
noStroke();
fill(255, 10);
noStroke();
ellipse(x, height/2, 32, 32); // Draw an ellipse at our "normal" random location
}

View File

@@ -0,0 +1,32 @@
/**
* Sine.
*
* Smoothly scaling size with the sin() function.
*/
float diameter;
float angle = 0;
void setup() {
size(640, 360);
diameter = height - 10;
noStroke();
noStroke();
fill(255, 204, 0);
}
void draw() {
background(0);
float d1 = 10 + (sin(angle) * diameter/2) + diameter/2;
float d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;
float d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;
ellipse(0, height/2, d1, d1);
ellipse(width/2, height/2, d2, d2);
ellipse(width, height/2, d3, d3);
angle += 0.02;
}

View File

@@ -0,0 +1,47 @@
/**
* Sine Cosine.
*
* Linear movement with sin() and cos().
* Numbers between 0 and PI*2 (TWO_PI which angles roughly 6.28)
* are put into these functions and numbers between -1 and 1 are
* returned. These values are then scaled to produce larger movements.
*/
float x1, x2, y1, y2;
float angle1, angle2;
float scalar = 70;
void setup() {
size(640, 360);
noStroke();
rectMode(CENTER);
}
void draw() {
background(0);
float ang1 = radians(angle1);
float ang2 = radians(angle2);
x1 = width/2 + (scalar * cos(ang1));
x2 = width/2 + (scalar * cos(ang2));
y1 = height/2 + (scalar * sin(ang1));
y2 = height/2 + (scalar * sin(ang2));
fill(255);
rect(width*0.5, height*0.5, 140, 140);
fill(0, 102, 153);
ellipse(x1, height*0.5 - 120, scalar, scalar);
ellipse(x2, height*0.5 + 120, scalar, scalar);
fill(255, 204, 0);
ellipse(width*0.5 - 120, y1, scalar, scalar);
ellipse(width*0.5 + 120, y2, scalar, scalar);
angle1 += 2;
angle2 += 3;
}

View File

@@ -0,0 +1,50 @@
/**
* Sine Wave
* by Daniel Shiffman.
*
* Render a simple sine wave.
*/
int xspacing = 16; // How far apart should each horizontal location be spaced
int w; // Width of entire wave
float theta = 0.0; // Start angle at 0
float amplitude = 75.0; // Height of wave
float period = 500.0; // How many pixels before the wave repeats
float dx; // Value for incrementing X, a function of period and xspacing
float[] yvalues; // Using an array to store height values for the wave
void setup() {
size(640, 360);
w = width+16;
dx = (TWO_PI / period) * xspacing;
yvalues = new float[w/xspacing];
}
void draw() {
background(0);
calcWave();
renderWave();
}
void calcWave() {
// Increment theta (try different values for 'angular velocity' here
theta += 0.02;
// For every x value, calculate a y value with sine function
float x = theta;
for (int i = 0; i < yvalues.length; i++) {
yvalues[i] = sin(x)*amplitude;
x+=dx;
}
}
void renderWave() {
noStroke();
fill(255);
// A simple way to draw the wave with an ellipse at each location
for (int x = 0; x < yvalues.length; x++) {
ellipse(x*xspacing, height/2+yvalues[x], 16, 16);
}
}

View File

@@ -0,0 +1,23 @@
/**
* Composite Objects
*
* An object can include several other objects. Creating such composite objects
* is a good way to use the principles of modularity and build higher levels of
* abstraction within a program.
*/
EggRing er1, er2;
void setup() {
size(640, 360);
er1 = new EggRing(width*0.45, height*0.5, 0.1, 120);
er2 = new EggRing(width*0.65, height*0.8, 0.05, 180);
}
void draw() {
background(0);
er1.transmit();
er2.transmit();
}

Some files were not shown because too many files have changed in this diff Show More