Initial Commit
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 117 KiB |
@@ -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;
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 117 KiB |
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
|
After Width: | Height: | Size: 117 KiB |
@@ -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);
|
||||
}
|
||||
|
After Width: | Height: | Size: 117 KiB |
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 117 KiB |
@@ -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();
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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 mouse’s 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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||