From 56298c6dbf62bf0b30cc1e05e526b9dfa1ebcc82 Mon Sep 17 00:00:00 2001
From: Jon Buckley Demonstrations built from scratch or found in the wild.Custom Demos
+
+Custom Built
+
+
+
+Found "In The Wild"
+
+
+
;6{F_cp_-F(nClQJB?_YOsh1E!pnTA?0nj$;DA0@VT
z=xv|nEe1lz^G2C+f{03bIzM~c5fc`gw^q-%-OLhHMTp3>5*D5z@vy?%f@7vOI
zoFfs@
`{E4$*eR{{yD>7rz{@ gnmxSST{ZqUL^9)F`}q+8we$)QWzI1zp-SaMFAu#UgRm-T
zv5eHUTQNGm{oq#AOH~b$aV<5n0?w8nr6up4EC-L|nqFaQ#~?f0QY3_z`llyWISSRd
zq>$XX-|TVYza>R|{L9?jP2;H4RbhxB$Z6ivj4WmCMsvQtHL
!T2;397JwEmk?hX6BA5jHZb|
zGiAc&QVp!L#m=!cXZ(VeJso&zTyqB%8@Mf
Custom Built
Found "In The Wild"
Move mouse to view line intersections.
+ +int DONT_INTERSECT = 0;
+int COLLINEAR = 1;
+int DO_INTERSECT = 2;
+
+float x =0, y=0;
+
+void setup(){
+ size(200,200);
+ fill(255,0,0);
+}
+
+void draw(){
+
+ int intersected;
+
+ background(255);
+
+ // lignes
+ stroke(0);
+
+ // ligne fixe
+ line(20,height/2, width-20, (height/2)-20);
+
+ // ligne en mouvement
+ line(10,10,mouseX, mouseY);
+
+ intersected = intersect(20, height/2, width-20, (height/2)-20, 10, 10, mouseX, mouseY);
+
+ // dessiner le point d'intersection
+ noStroke();
+ if (intersected == DO_INTERSECT) ellipse(x, y, 5, 5);
+
+}
+
+
+int intersect(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4){
+
+ float a1, a2, b1, b2, c1, c2;
+ float r1, r2 , r3, r4;
+ float denom, offset, num;
+
+ // Compute a1, b1, c1, where line joining points 1 and 2
+ // is "a1 x + b1 y + c1 = 0".
+ a1 = y2 - y1;
+ b1 = x1 - x2;
+ c1 = (x2 * y1) - (x1 * y2);
+
+ // Compute r3 and r4.
+ r3 = ((a1 * x3) + (b1 * y3) + c1);
+ r4 = ((a1 * x4) + (b1 * y4) + c1);
+
+ // Check signs of r3 and r4. If both point 3 and point 4 lie on
+ // same side of line 1, the line segments do not intersect.
+ if ((r3 != 0) && (r4 != 0) && same_sign(r3, r4)){
+ return DONT_INTERSECT;
+ }
+
+ // Compute a2, b2, c2
+ a2 = y4 - y3;
+ b2 = x3 - x4;
+ c2 = (x4 * y3) - (x3 * y4);
+
+ // Compute r1 and r2
+ r1 = (a2 * x1) + (b2 * y1) + c2;
+ r2 = (a2 * x2) + (b2 * y2) + c2;
+
+ // Check signs of r1 and r2. If both point 1 and point 2 lie
+ // on same side of second line segment, the line segments do
+ // not intersect.
+ if ((r1 != 0) && (r2 != 0) && (same_sign(r1, r2))){
+ return DONT_INTERSECT;
+ }
+
+ //Line segments intersect: compute intersection point.
+ denom = (a1 * b2) - (a2 * b1);
+
+ if (denom == 0) {
+ return COLLINEAR;
+ }
+
+ if (denom < 0){
+ offset = -denom / 2;
+ }
+ else {
+ offset = denom / 2 ;
+ }
+
+ // The denom/2 is to get rounding instead of truncating. It
+ // is added or subtracted to the numerator, depending upon the
+ // sign of the numerator.
+ num = (b1 * c2) - (b2 * c1);
+ if (num < 0){
+ x = (num - offset) / denom;
+ }
+ else {
+ x = (num + offset) / denom;
+ }
+
+ num = (a2 * c1) - (a1 * c2);
+ if (num < 0){
+ y = ( num - offset) / denom;
+ }
+ else {
+ y = (num + offset) / denom;
+ }
+
+ // lines_intersect
+ return DO_INTERSECT;
+}
+
+
+boolean same_sign(float a, float b){
+
+ return (( a * b) >= 0);
+}A dynamically-generated bar chart. Move mouse to view dynamic pie chart.
+ + + + + int xspacing = 16; // How far apart should each horizontal location be spaced
+int w; // Width of entire wave
+int maxwaves = 4; // total # of waves to add together
+int total = 0;
+
+float theta = 0.0f;
+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)
+float[] last;
+
+int pos;
+int rel;
+int numLines;
+int idealLines;
+int idealSpacing;
+int targetX;
+
+void setup() {
+ size(600, 150);
+ //frameRate(24);
+ colorMode(RGB,255,255,255,100);
+ //background(0);
+ smooth();
+ w = width+16;
+
+ for (int i = 0; i < maxwaves; i++) {
+ amplitude[i] = random(20,30);
+ float period = random(100,300); // How many pixels before the wave repeats
+ dx[i] = (TWO_PI / period) * xspacing;
+ }
+
+ last = new float[maxwaves];
+ idealLines = numLines = int(w/xspacing);
+ idealSpacing = xspacing;
+ yvalues = new float[numLines];
+}
+
+void draw() {
+ pos = constrain(mouseX, 75, width-75);
+ rel = 1 - ((pos - 75) / (width - 150));
+
+ //background(0);
+ fill(0, 10 + ((1 - rel) * 100));
+ rect(0, 0, width, height);
+
+ //numLines = idealLines + ((1 - rel) * idealLines);
+ //xspacing = idealSpacing - (((1 - rel) * idealSpacing) / 2);
+
+ calcWave();
+ renderWave();
+ renderChart();
+}
+
+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 < numLines; i++) {
+ yvalues[i] = 0.0f;
+ }
+
+ total = 0;
+
+ // Accumulate wave height values
+ for (int j = 0; j < maxwaves; j++) {
+ float x = theta;
+ last[j] = 0;
+
+ for (int i = 0; i < numLines; i++) {
+ // Every other wave is cosine instead of sine
+ int diff = j % 2 == 0 ? sin(x) : cos(x);
+ int add = diff*amplitude[j];
+
+ last[j] += add;
+
+ yvalues[i] += add;
+
+ total += add;
+
+ x+=dx[j]; // - (((1 - rel) * dx[j]) / 2);
+ }
+ }
+}
+
+void renderWave() {
+ noStroke();
+
+ fill(254,60,0, 120 * rel);
+ beginShape();
+ vertex(0,height);
+ for (int x = 0; x < numLines; x++) {
+ vertex(x*xspacing,height/2+yvalues[x]+-5);
+ vertex((x*xspacing) + 10,height/2+yvalues[x]-5);
+ }
+ vertex(width,height);
+ endShape(CLOSE);
+
+ fill(255,0,0, 120 * rel);
+ beginShape();
+ vertex(0,height);
+ for (int x = 0; x < numLines; x++) {
+ vertex(x*xspacing,height/2+yvalues[x]);
+ vertex((x*xspacing) + 10,height/2+yvalues[x]);
+ }
+ vertex(width,height);
+ endShape(CLOSE);
+
+ //fill(255,0,0,255 - ((x/numLines)*200));
+ //rect(x*xspacing,height/2+yvalues[x],10,height*2);
+ // - ((1-rel) * 4)
+
+ for (int x = 0; x < numLines; x++) {
+ fill(255,0,0,255 - ((x/numLines)*200));
+ rect(x*xspacing,height/2+yvalues[x],10,height*2);
+ // - ((1-rel) * 4)
+ }
+}
+
+void renderChart() {
+ int h = 0;
+
+ for (int i=0; iA snake that follows your cursor.
+ +Snake
+
+// @pjs preload must be used to preload the image so that it will be available when used in the sketch
+/* @pjs preload="data/dirt.jpg"; */
+
+float[] x = new float[20];
+float[] y = new float[20];
+float segLength = 10;
+PImage a;
+
+void setup() {
+ size(320, 240);
+ smooth();
+ a = loadImage("data/dirt.jpg");
+}
+
+void draw() {
+ background(226);
+ image( a, 0, 0 );
+ dragSegment(0, mouseX - 8, mouseY - 8);
+ for(int i=0; i < x.length-1; i++) {
+ dragSegment(i+1, x[i], y[i]);
+ }
+}
+
+void dragSegment(int i, float xin, float yin) {
+ float dx = xin - x[i];
+ float dy = yin - y[i];
+ float angle = atan2(dy, dx);
+ x[i] = xin - cos(angle) * segLength;
+ y[i] = yin - sin(angle) * segLength;
+ //stroke(23, 79, 4, 220);
+
+ pushMatrix();
+ translate(x[i], y[i]);
+ rotate(angle);
+
+ color c;
+
+ if ( i % 3 == 1 )
+ c = color(0, 0, 0, 255);
+ else if ( i % 3 == 2 )
+ c = color(255, 255, 0, 255);
+ else
+ c = color(255, 0, 0, 255);
+
+ stroke( c );
+ strokeWeight(10);
+ line(0, 0, segLength, 0);
+
+ if ( i == x.length - 1 )
+ {
+ fill( c );
+ noStroke();
+ beginShape(TRIANGLES);
+ vertex(0, 5);
+ vertex(-2 * segLength, 0);
+ vertex(0, -5);
+ endShape();
+ }
+
+ if ( i == 0 )
+ {
+ // stroke(0, 255);
+ noStroke();
+ fill(0, 255);
+ ellipse(segLength, -2, 3, 3);
+ ellipse(segLength, 2, 3, 3);
+ //point(segLength, -2);
+ //point(segLength, 2);
+ }
+
+ popMatrix();
+}by Daniel Shiffman. + + + +Create a more complex wave by adding two waves together.
+ + + +Original Processing.org Example: AdditiveWave
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+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.0f;
+
+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(200,200);
+
+ frameRate(30);
+
+ colorMode(RGB,255,255,255,100);
+
+ smooth();
+
+ 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.0f;
+
+ }
+
+
+
+ // 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,width/2+yvalues[x],16,16);
+
+ }
+
+}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. + + + +Created 29 April 2003.
+ + + +Original Processing.org Example: Alphamask
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+// @pjs preload must be used to preload the image so that it will be available when used in the sketch
+
+/* @pjs preload="data/test.jpg,data/mask.jpg"; */
+
+
+
+PImage img;
+
+PImage maskImg;
+
+
+
+void setup()
+
+{
+
+ size(200,200);
+
+ img = loadImage("data/test.jpg");
+
+ maskImg = loadImage("data/mask.jpg");
+
+ img.mask(maskImg);
+
+}
+
+
+
+void draw()
+
+{
+
+ background((mouseX+mouseY)/1.5);
+
+ image(img, 50, 50);
+
+ image(img, mouseX-50, mouseY-50);
+
+}Move the mouse to change the direction of the eyes. + +The atan2() function computes the angle from each eye + +to the cursor. + + + +Created 1 September 2002
+ + + +Original Processing.org Example: Arctangent
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+Eye e1, e2, e3, e4, e5;
+
+
+
+void setup()
+
+{
+
+ size(200, 200);
+
+ smooth();
+
+ noStroke();
+
+ e1 = new Eye( 50, 16, 80);
+
+ e2 = new Eye( 64, 85, 40);
+
+ e3 = new Eye( 90, 200, 120);
+
+ e4 = new Eye(150, 44, 40);
+
+ e5 = new Eye(175, 120, 80);
+
+}
+
+
+
+void draw()
+
+{
+
+ background(102);
+
+
+
+ e1.update(mouseX, mouseY);
+
+ e2.update(mouseX, mouseY);
+
+ e3.update(mouseX, mouseY);
+
+ e4.update(mouseX, mouseY);
+
+ e5.update(mouseX, mouseY);
+
+
+
+ e1.display();
+
+ e2.display();
+
+ e3.display();
+
+ e4.display();
+
+ e5.display();
+
+}
+
+
+
+class Eye
+
+{
+
+ int ex, ey;
+
+ int size;
+
+ float angle = 0.0;
+
+
+
+ Eye(int x, int y, int s) {
+
+ ex = x;
+
+ ey = y;
+
+ size = s;
+
+ }
+
+
+
+ void update(int mx, int my) {
+
+ angle = atan2(my-ey, mx-ex);
+
+ }
+
+
+
+ void display() {
+
+ pushMatrix();
+
+ translate(ex, ey);
+
+ fill(255);
+
+ ellipse(0, 0, size, size);
+
+ rotate(angle);
+
+ fill(153);
+
+ ellipse(size/4, 0, size/2, size/2);
+
+ popMatrix();
+
+ }
+
+}The angle of each segment is controlled with the mouseX and + +mouseY position. The transformations applied to the first segment + +are also applied to the second segment because they are inside + +the same pushMatrix() and popMatrix() group.
+ + + +Original Processing.org Example: Arm
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+float x = 50;
+
+float y = 100;
+
+float angle1 = 0.0;
+
+float angle2 = 0.0;
+
+float segLength = 50;
+
+
+
+void setup() {
+
+ size(200, 200);
+
+ smooth();
+
+ strokeWeight(20.0);
+
+ stroke(0, 100);
+
+}
+
+
+
+void draw() {
+
+ background(226);
+
+
+
+ angle1 = (mouseX/float(width) - 0.5) * -PI;
+
+ angle2 = (mouseY/float(height) - 0.5) * PI;
+
+
+
+ pushMatrix();
+
+ segment(x, y, angle1);
+
+ segment(segLength, 0, angle2);
+
+ popMatrix();
+
+}
+
+
+
+void segment(float x, float y, float a) {
+
+ translate(x, y);
+
+ rotate(a);
+
+ line(0, 0, segLength, 0);
+
+}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.
+ + + +Original Processing.org Example: Array
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+size(200, 200);
+
+
+
+float[] coswave = new float[width];
+
+
+
+for(int i=0; i<width; i++) {
+
+ float ratio = (float)i/(float)width;
+
+ coswave[i] = abs( cos(ratio*PI) );
+
+}
+
+
+
+for(int i=0; i<width; i++) {
+
+ stroke(coswave[i]*255);
+
+ line(i, 0, i, width/3);
+
+}
+
+
+
+for(int i=0; i<width; i++) {
+
+ stroke(coswave[i]*255/4);
+
+ line(i, width/3, i, width/3*2);
+
+}
+
+
+
+for(int i=0; i<width; i++) {
+
+ stroke(255-coswave[i]*255);
+
+ line(i, width/3*2, i, height);
+
+}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.
+ + + +Original Processing.org Example: Array2D
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+float[][] distances;
+
+float maxDistance;
+
+
+
+size(200, 200);
+
+background(0);
+
+maxDistance = dist(width/2, height/2, width, height);
+
+distances = new float[width][height];
+
+for(int i=0; i<height; i++) {
+
+ for(int j=0; j<width; j++) {
+
+ float d = dist(width/2, height/2, j, i);
+
+ distances[j][i] = d/maxDistance * 255;
+
+ }
+
+}
+
+
+
+for(int i=0; i<height; i+=2) {
+
+ for(int j=0; j<width; j+=2) {
+
+ stroke(distances[j][i]);
+
+ point(j, i);
+
+ }
+
+}Demonstrates the syntax for creating an array of custom objects.
+ + + +Original Processing.org Example: ArrayObjects
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+int unit = 40;
+
+int num;
+
+Module[] mods;
+
+
+
+void setup()
+
+{
+
+ size(200, 200);
+
+ background(176);
+
+ noStroke();
+
+
+
+ num = width/unit * width/unit;
+
+ mods = new Module[num];
+
+
+
+ for (int i=0; i<height/unit; i++) {
+
+ for(int j=0; j<height/unit; j++) {
+
+ int index = i*height/unit + j;
+
+ mods[index] = new Module(j*unit, i*unit, unit/2, unit/2, random(0.05, 0.8));
+
+ }
+
+ }
+
+}
+
+
+
+void draw()
+
+{
+
+ for(int i=0; i<num; i++) {
+
+ mods[i].update();
+
+ mods[i].draw();
+
+ }
+
+}
+
+
+
+class Module {
+
+ float mx, my;
+
+ int size = unit;
+
+ float x, y = 0;
+
+ int xdir = 1;
+
+ int ydir = 1;
+
+ float speed;
+
+
+
+ // Contructor (required)
+
+ Module(float imx, float imy, float ix, float iy, float ispeed) {
+
+ mx = imy;
+
+ my = imx;
+
+ x = int(ix);
+
+ y = int(iy);
+
+ speed = ispeed;
+
+ }
+
+
+
+ // Custom method for updating the variables
+
+ void update() {
+
+ x = x + (speed * xdir);
+
+ if (x >= size || x <= 0) {
+
+ xdir *= -1;
+
+ x = x + (1 * xdir);
+
+ y = y + (1 * ydir);
+
+ }
+
+ if (y >= size || y <= 0) {
+
+ ydir *= -1;
+
+ y = y + (1 * ydir);
+
+ }
+
+ }
+
+
+
+ // Custom method for drawing the object
+
+ void draw() {
+
+ stroke(second()*4);
+
+ point(mx+x-1, my+y-1);
+
+ }
+
+}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.
+ + + +Original Processing.org Example: BackgroundImage
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+// @pjs preload must be used to preload the image so that it will be available when used in the sketch
+
+/* @pjs preload="data/milan_rubbish.jpg"; */
+
+
+
+PImage bg;
+
+int a;
+
+
+
+void setup()
+
+{
+
+ size(200,200);
+
+ frameRate(30);
+
+ // The background image must be the same size as the parameters
+
+ // into the size() method. In this program, the size of "milan_rubbish.jpg"
+
+ // is 200 x 200 pixels.
+
+ bg = loadImage("data/milan_rubbish.jpg");
+
+}
+
+
+
+void draw()
+
+{
+
+ background(bg);
+
+
+
+ a = (a + 1)%(width+32);
+
+ stroke(226, 204, 0);
+
+ line(0, a, width, a-26);
+
+ line(0, a-6, width, a-32);
+
+}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.
+ + + +Original Processing.org Example: Bezier
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+size(200, 200);
+
+background(0);
+
+stroke(255);
+
+noFill();
+
+smooth();
+
+
+
+for(int i = 0; i < 100; i += 20) {
+
+ bezier(90-(i/2.0), 20+i, 210, 10, 220, 150, 120-(i/8.0), 150+(i/4.0));
+
+}By Ira Greenberg + + + +Generates an ellipse using bezier() and + +trig functions. Approximately every 1/2 + +second a new ellipse is plotted using + +random values for control/anchor points.
+ + + +Original Processing.org Example: BezierEllipse
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+// arrays to hold ellipse coordinate data
+
+float[] px, py, cx, cy, cx2, cy2;
+
+
+
+// global variable-points in ellipse
+
+int pts = 4;
+
+
+
+color controlPtCol = #222222;
+
+color anchorPtCol = #BBBBBB;
+
+
+
+void setup(){
+
+ size(200, 200);
+
+ smooth();
+
+ setEllipse(pts, 65, 65);
+
+ frameRate(0.5);
+
+}
+
+
+
+void draw(){
+
+ background(145);
+
+ drawEllipse();
+
+ setEllipse(int(random(3, 12)), random(-100, 150), random(-100, 150));
+
+}
+
+
+
+// draw ellipse with anchor/control points
+
+void drawEllipse(){
+
+ strokeWeight(1.125);
+
+ stroke(255);
+
+ noFill();
+
+ // create ellipse
+
+ for (int i=0; i<pts; i++){
+
+ if (i==pts-1) {
+
+ bezier(px[i], py[i], cx[i], cy[i], cx2[i], cy2[i], px[0], py[0]);
+
+ }
+
+ else{
+
+ bezier(px[i], py[i], cx[i], cy[i], cx2[i], cy2[i], px[i+1], py[i+1]);
+
+ }
+
+ }
+
+ strokeWeight(.75);
+
+ stroke(0);
+
+ rectMode(CENTER);
+
+
+
+ // control handles and tangent lines
+
+ for ( int i=0; i< pts; i++){
+
+ if (i==pts-1){ // last loop iteration-close path
+
+ line(px[0], py[0], cx2[i], cy2[i]);
+
+ }
+
+ if (i>0){
+
+ line(px[i], py[i], cx2[i-1], cy2[i-1]);
+
+ }
+
+ line(px[i], py[i], cx[i], cy[i]);
+
+ }
+
+
+
+ for ( int i=0; i< pts; i++){
+
+ fill(controlPtCol);
+
+ noStroke();
+
+ //control handles
+
+ ellipse(cx[i], cy[i], 4, 4);
+
+ ellipse(cx2[i], cy2[i], 4, 4);
+
+
+
+ fill(anchorPtCol);
+
+ stroke(0);
+
+ //anchor points
+
+ rect(px[i], py[i], 5, 5);
+
+ }
+
+}
+
+
+
+// fill up arrays with ellipse coordinate data
+
+void setEllipse(int points, float radius, float controlRadius){
+
+ pts = points;
+
+ px = new float[points];
+
+ py = new float[points];
+
+ cx = new float[points];
+
+ cy = new float[points];
+
+ cx2 = new float[points];
+
+ cy2 = new float[points];
+
+ float angle = 360.0/points;
+
+ float controlAngle1 = angle/3.0;
+
+ float controlAngle2 = controlAngle1*2.0;
+
+ for ( int i=0; i<points; i++){
+
+ px[i] = width/2+cos(radians(angle))*radius;
+
+ py[i] = height/2+sin(radians(angle))*radius;
+
+ cx[i] = width/2+cos(radians(angle+controlAngle1))*
+
+ controlRadius/cos(radians(controlAngle1));
+
+ cy[i] = height/2+sin(radians(angle+controlAngle1))*
+
+ controlRadius/cos(radians(controlAngle1));
+
+ cx2[i] = width/2+cos(radians(angle+controlAngle2))*
+
+ controlRadius/cos(radians(controlAngle1));
+
+ cy2[i] = height/2+sin(radians(angle+controlAngle2))*
+
+ controlRadius/cos(radians(controlAngle1));
+
+
+
+ //increment angle so trig functions keep chugging along
+
+ angle+=360.0/points;
+
+ }
+
+}by Rusty Robison. + + + +Brightness is the relative lightness or darkness of a color. + +Move the cursor vertically over each bar to alter its brightness.
+ + + +Original Processing.org Example: Brightness
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+int barWidth = 5;
+
+int[] brightness;
+
+
+
+void setup()
+
+{
+
+ size(200, 200);
+
+ colorMode(HSB, 360, height, height);
+
+ brightness = new int[width/barWidth];
+
+}
+
+
+
+void draw()
+
+{
+
+ int j = 0;
+
+ for (int i = 0; i <= (width-barWidth); i += barWidth) {
+
+ noStroke();
+
+ if ((mouseX > i) && (mouseX < i+barWidth)) {
+
+ brightness[j] = mouseY;
+
+ }
+
+ fill(i, height, brightness[j]);
+
+ rect(i, 0, barWidth, height);
+
+ j++;
+
+ }
+
+}Click on the image to give it focus and then type letters to + +shift the location of the image. + +Characters are typographic symbols such as A, d, and %. + +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'). + +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.
+ + + +Original Processing.org Example: CharactersStrings
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+PImage frog;
+
+PFont fontA;
+
+int lettersize = 90;
+
+int xoffset;
+
+char letter;
+
+
+
+void setup()
+
+{
+
+ size(200, 200);
+
+ fontA = loadFont("Arial");
+
+ textFont(fontA);
+
+ textSize(lettersize);
+
+
+
+ // 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.
+
+ String name= "rathausFrog";
+
+ String extension = ".jpg";
+
+ int nameLength = name.length();
+
+ println("The length of " + name + " is " + nameLength + ".");
+
+ name = name.concat(extension);
+
+ nameLength = name.length();
+
+ println("The length of " + name + " is " + nameLength + ".");
+
+
+
+ // The parameter for the loadImage() method must be a string
+
+ // This line could also be written "frog = loadImage("rathausFrog.jpg");
+
+ frog = loadImage(name);
+
+}
+
+
+
+void draw()
+
+{
+
+ background(51); // Set background to dark gray
+
+
+
+ image(frog, xoffset, 0);
+
+
+
+ // Draw an X
+
+ line(0, 0, width, height);
+
+ line(0, height, width, 0);
+
+
+
+ // Get the width of the letter
+
+ int letterWidth = int(fontA.width(letter) * lettersize);
+
+
+
+ // Draw the letter to the center of the screen
+
+ text(letter, width/2-letterWidth/2, height/2);
+
+}
+
+
+
+void keyPressed()
+
+{
+
+ // The variable "key" always contains the value of the most recent key pressed.
+
+ // If the key is an upper or lowercase letter between 'A' and 'z'
+
+ // the image is shifted to the corresponding value of that key
+
+ if(key >= 'A' && key <= 'z') {
+
+ letter = char(key);
+
+ // Scale the values to numbers between 0 and 100
+
+ float scale = 100.0/57.0;
+
+ int temp = int((key - 'A') * scale);
+
+ // Set the offset for the image
+
+ xoffset = temp;
+
+ println(key);
+
+ }
+
+}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. + + *
+ + + +Original Processing.org Example: Clock
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+void setup() {
+
+ size(200, 200);
+
+ stroke(255);
+
+ smooth();
+
+}
+
+void draw() {
+
+ background(0);
+
+ fill(80);
+
+ noStroke();
+
+ // Angles for sin() and cos() start at 3 o'clock;
+
+ // subtract HALF_PI to make them start at the top
+
+ ellipse(100, 100, 160, 160);
+
+ float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
+
+ float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
+
+ float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
+
+ stroke(255);
+
+ strokeWeight(1);
+
+ line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
+
+ strokeWeight(2);
+
+ line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
+
+ strokeWeight(4);
+
+ line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);
+
+}by Ira Greenberg. + + + +The primaries are red, yellow, and blue. The + +secondaries are green, purple, and orange. The + +tertiaries are yellow-orange, red-orange, red-purple, + +blue-purple, blue-green, and yellow-green. + + + +Create a shade or tint of the + +subtractive color wheel using + +SHADE or TINT parameters.
+ + + +Original Processing.org Example: ColorWheel
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+int segs = 12;
+
+int steps = 6;
+
+float rotAdjust = radians(360.0/segs/2.0);
+
+float radius = 95.0;
+
+float segWidth = radius/steps;
+
+float interval = TWO_PI/segs;
+
+int SHADE = 0;
+
+int TINT = 1;
+
+
+
+void setup(){
+
+ size(200, 200);
+
+ background(127);
+
+ smooth();
+
+ ellipseMode(CENTER_RADIUS);
+
+ noStroke();
+
+ // you can substitue TINT for SHADE argument
+
+ createWheel(width/2, height/2, SHADE);
+
+}
+
+
+
+void createWheel(int x, int y, int valueShift){
+
+ if (valueShift == SHADE){
+
+ for (int j=0; j<steps; j++){
+
+ color[]cols = {
+
+ color(255-(255/steps)*j, 255-(255/steps)*j, 0),
+
+ color(255-(255/steps)*j, (255/1.5)-((255/1.5)/steps)*j, 0),
+
+ color(255-(255/steps)*j, (255/2)-((255/2)/steps)*j, 0),
+
+ color(255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j, 0),
+
+ color(255-(255/steps)*j, 0, 0),
+
+ color(255-(255/steps)*j, 0, (255/2)-((255/2)/steps)*j),
+
+ color(255-(255/steps)*j, 0, 255-(255/steps)*j),
+
+ color((255/2)-((255/2)/steps)*j, 0, 255-(255/steps)*j),
+
+ color(0, 0, 255-(255/steps)*j),
+
+ color(0, 255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j),
+
+ color(0, 255-(255/steps)*j, 0),
+
+ color((255/2)-((255/2)/steps)*j, 255-(255/steps)*j, 0) };
+
+ for (int i=0; i< segs; i++){
+
+ fill(cols[i]);
+
+ arc(x, y, radius, radius, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
+
+ }
+
+ radius -= segWidth;
+
+ }
+
+ } else if (valueShift == TINT){
+
+ for (int j=0; j<steps; j++){
+
+ color[]cols = {
+
+ color((255/steps)*j, (255/steps)*j, 0),
+
+ color((255/steps)*j, ((255/1.5)/steps)*j, 0),
+
+ color((255/steps)*j, ((255/2)/steps)*j, 0),
+
+ color((255/steps)*j, ((255/2.5)/steps)*j, 0),
+
+ color((255/steps)*j, 0, 0),
+
+ color((255/steps)*j, 0, ((255/2)/steps)*j),
+
+ color((255/steps)*j, 0, (255/steps)*j),
+
+ color(((255/2)/steps)*j, 0, (255/steps)*j),
+
+ color(0, 0, (255/steps)*j),
+
+ color(0, (255/steps)*j, ((255/2.5)/steps)*j),
+
+ color(0, (255/steps)*j, 0),
+
+ color(((255/2)/steps)*j, (255/steps)*j, 0) };
+
+ for (int i=0; i< segs; i++){
+
+ fill(cols[i]);
+
+ arc(x, y, radius, radius, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
+
+ }
+
+ radius -= segWidth;
+
+ }
+
+ }
+
+}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.
+ + + +Original Processing.org Example: CompositeObjects
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+EggRing er1, er2;
+
+
+
+void setup()
+
+{
+
+ size(200, 200);
+
+ smooth();
+
+ er1 = new EggRing(66, 132, 0.1, 66);
+
+ er2 = new EggRing(132, 180, 0.05, 132);
+
+}
+
+
+
+void draw()
+
+{
+
+ background(0);
+
+ er1.transmit();
+
+ er2.transmit();
+
+}
+
+
+
+class EggRing
+
+{
+
+ Egg ovoid;
+
+ Ring circle = new Ring();
+
+ EggRing(int x, int y, float t, float sp) {
+
+ ovoid = new Egg(x, y, t, sp);
+
+ circle.start(x, y - sp/2);
+
+ }
+
+ void transmit() {
+
+ ovoid.wobble();
+
+ ovoid.display();
+
+ circle.grow();
+
+ circle.display();
+
+ if (circle.on == false) {
+
+ circle.on = true;
+
+ }
+
+ }
+
+}
+
+
+
+class Egg {
+
+ float x, y; // X-coordinate, y-coordinate
+
+ float tilt; // Left and right angle offset
+
+ float angle; // Used to define the tilt
+
+ float scalar; // Height of the egg
+
+ // Constructor
+
+ Egg(int xpos, int ypos, float t, float s) {
+
+ x = xpos;
+
+ y = ypos;
+
+ tilt = t;
+
+ scalar = s / 100.0;
+
+ }
+
+ void wobble() {
+
+ tilt = cos(angle) / 8;
+
+ angle += 0.1;
+
+ }
+
+ void display() {
+
+ noStroke();
+
+ fill(255);
+
+ pushMatrix();
+
+ translate(x, y);
+
+ rotate(tilt);
+
+ scale(scalar);
+
+ beginShape();
+
+ vertex(0, -100);
+
+ bezierVertex(25, -100, 40, -65, 40, -40);
+
+ bezierVertex(40, -15, 25, 0, 0, 0);
+
+ bezierVertex(-25, 0, -40, -15, -40, -40);
+
+ bezierVertex(-40, -65, -25, -100, 0, -100);
+
+ endShape();
+
+ popMatrix();
+
+ }
+
+}
+
+
+
+class Ring {
+
+ float x, y; // X-coordinate, y-coordinate
+
+ float diameter; // Diameter of the ring
+
+ boolean on = false; // Turns the display on and off
+
+ void start(float xpos, float ypos) {
+
+ x = xpos;
+
+ y = ypos;
+
+ on = true;
+
+ diameter = 1;
+
+ }
+
+ void grow() {
+
+ if (on == true) {
+
+ diameter += 0.5;
+
+ if (diameter > width*2) {
+
+ diameter = 0.0;
+
+ }
+
+ }
+
+ }
+
+ void display() {
+
+ if (on == true) {
+
+ noFill();
+
+ strokeWeight(4);
+
+ stroke(155, 153);
+
+ ellipse(x, y, diameter, diameter);
+
+ }
+
+ }
+
+}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. + +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.
+ + + +Original Processing.org Example: Conditionals1
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+size(200, 200);
+
+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(153);
+
+ line(i, 40, i, height/2);
+
+ } else {
+
+ stroke(102);
+
+ line(i, 20, i, 180);
+
+ }
+
+}We extend the language of conditionals by adding the + +keyword "else". This allows conditionals to ask + +two or more sequential questions, each with a different + +action.
+ + + +Original Processing.org Example: Conditionals2
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+size(200, 200);
+
+background(0);
+
+
+
+for(int i=2; i<width-2; i+=2) {
+
+ // 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, 40, i, height/2);
+
+ } else if (i%10 == 0) {
+
+ stroke(153);
+
+ line(i, 20, i, 180);
+
+ } else {
+
+ stroke(102);
+
+ line(i, height/2, i, height-40);
+
+ }
+
+}Move the mouse across the screen to move the circle. + +The program constrains the circle to its box.
+ + + +Original Processing.org Example: Constrain
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+float mx;
+
+float my;
+
+float easing = 0.05;
+
+float esize = 25.0;
+
+int box = 30;
+
+
+
+void setup()
+
+{
+
+ size(200, 200);
+
+ noStroke();
+
+ smooth();
+
+ ellipseMode(CENTER_RADIUS);
+
+}
+
+
+
+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;
+
+ }
+
+
+
+ float distance = esize * 2;
+
+ mx = constrain(mx, box+distance, width-box-distance);
+
+ my = constrain(my, box+distance, height-box-distance);
+
+ fill(76);
+
+ rect(box+esize, box+esize, box*3, box*3);
+
+ fill(255);
+
+ ellipse(mx, my, esize, esize);
+
+}All shapes drawn to the screen have a position that is specified as a coordinate. + +All coordinates are measured as the distance from the origin in units of pixels. + +The origin [0, 0] is the coordinate is in the upper left of the window + +and the coordinate in the lower right is [width-1, height-1].
+ + + +Original Processing.org Example: Coordinates
+
+
// All Examples Written by Casey Reas and Ben Fry + +// unless otherwise stated. + +// Sets the screen to be 200, 200, so the width of the window is 200 pixels + +// and the height of the window is 200 pixels + +size(200, 200); + +background(0); + +noFill(); + +stroke(255); + + + +// The two parameters of the point() method each specify coordinates. + +// This call to point() draws at the position [100, 100] + +point(width/2, height/2); + + + +// Draws to the position [100, 50] + +point(width/2, height/4); + + + +// It is also possible to specify a point with any parameter, + +// but only coordinates on the screen are visible + +point(60, 30); + +point(60, 134); + +point(160, 50); + +point(280, -800); + +point(201, 100); + + + +// Coordinates are used for drawing all shapes, not just points. + +// Parameters for different methods are used for different purposes. + +// For example, the first two parameters to line() specify the coordinates of the + +// first point and the second two parameters specify the second point + +stroke(204); + +line(0, 73, width, 73); + + + +// The first two parameters to rect() are coordinates + +// and the second two are the width and height + +rect(110, 55, 40, 36);
The createGraphics() function creates an object from the PGraphics class + +(PGraphics is the main graphics and rendering context for Processing). + +The beginDraw() method is necessary to prepare for drawing and endDraw() is + +necessary to finish. Use this class if you need to draw into an off-screen + +graphics buffer or to maintain two contexts with different properties.
+ + + +Original Processing.org Example: CreateGraphics
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+PGraphics pg;
+
+
+
+void setup() {
+
+ size(200, 200);
+
+ pg = createGraphics(80, 80, P3D);
+
+}
+
+
+
+void draw() {
+
+ fill(0, 12);
+
+ rect(0, 0, width, height);
+
+ fill(255);
+
+ noStroke();
+
+ ellipse(mouseX, mouseY, 60, 60);
+
+
+
+ pg.beginDraw();
+
+ pg.background(102);
+
+ pg.noFill();
+
+ pg.stroke(255);
+
+ pg.ellipse(mouseX-60, mouseY-60, 60, 60);
+
+ pg.endDraw();
+
+
+
+ image(pg, 60, 60);
+
+}The createImage() function provides a fresh buffer of pixels to play with. + +This example creates an image gradient.
+ + + +Original Processing.org Example: CreateImage
+
+
// All Examples Written by Casey Reas and Ben Fry
+
+// unless otherwise stated.
+
+PImage img;
+
+
+
+void setup()
+
+{
+
+ size(200, 200);
+
+ img = createImage(120, 120, RGB);
+
+ for(int i=0; i < img.pixels.length; i++) {
+
+ img.pixels[i] = color(0, 90, 102, i%img.width * 2);
+
+ }
+
+}
+
+
+
+void draw()
+
+{
+
+ background(204);
+
+ image(img, 33, 33);
+
+ image(img, mouseX-60, mouseY-60);
+
+}Creating variables for colors that may be referred to + +in the program by their name, rather than a number.
+ + + +Original Processing.org Example: Creating
+
+
// All Examples Written by Casey Reas and Ben Fry + +// unless otherwise stated. + +size(200, 200); + +noStroke(); + + + +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; + + + +fill(outside); + +rect(0, 0, 200, 200); + +fill(middle); + +rect(40, 60, 120, 120); + +fill(inside); + +rect(60, 90, 80, 80);
Itthh+5dE1KUeRQ6F78uSU+UKK1AGOsxv^NUXz4T+h6xMx^3lAcp?=vp
zr-5HG%~3c|Sp)~Zw(Kzsc~!Qkg_q_n9NKDS)OW37cnH(_0nh}49>H_-;<+oc`LB(#LUoX2vu_XDz;v8Zq35KUX?eTnueV_wCuH(|%ZA>{qz;xfCp~XwrHsciWH}
z{?=?07AU%}9-BFu31$~ VfVM)l6d(cX89FIBN3mc*O{23ylPjM^2rGFvm
literal 0
HcmV?d00001
diff --git a/learning/basic/data/brugges.jpg b/learning/basic/data/brugges.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fa723f9dade8f1af2b8af5f0608ff9983af8c898
GIT binary patch
literal 34371
zcmcG#1ymf(_AlClJHaJb(BQ${f(M7-7G!|I1}8v(C
6CBn^TW>hXR7Zo3{RQ!)3Y04KxXM3OSbd!LZE5Ip4A06
zC42Gcku8Z%uiUunQ@@S)s+?)Vt;un|N&$}@i5DFer~VgaF2;uFQ@*snqE!SejIUYs
zI`q~j)GK`ErxwcYb59nQpzv|PqS4WwAD6SY!qM&I$=hw;0$WOK`s9DKGXsxrYJL
zLw7``g=10Yj%{Plz8G<;8=B~s6uxuzO$#v^A2->60UxTuJDcZDVSwy?7ziVQXaRcg
zbU>AQO)Yu#v?NPTcZz&K2VC+Rb!5IhaDKu6T6m#pVbw26myCE^3{#KVf}D&VVZs><
z-oMvYg+KOwbEI{DudgPG^DgPgLLZ-{qF^t{ArTsXG%z^jSz5DIamy%>tG4Okea=-6
zs(6gv>+ZRxccE>X-xOtMYORV3~edd|7STWZ8K+S~+XE
zLb*eEK6xMcp9;tdN(xa56N;3I7K-_bhc5(P_`YaW!cx*wN>*A{W>I!gu2(@&d7%=c
zGONm<>Zn?y2B;~j#i-4xGpRePH)x<}sB5HXtZQ;
?
zb7Ed?=j7%kvyh@b#49K%zpiU)>xxDAg@LViaB@L?_w@GlU(6IlWO#F;AfX{5I{b$m
zBZaI1_ZY?bT@-gl*&*Stp(VQKM4IL
-(%c_T-j`
zNf?QY@L?YE-(Zp8tXfydtuXXt!F}pT8;NlDJ~}tI8vU~D`Y7rUOz}uUPSPZTWW9OK
zp-s$Kw)pisxg=6hl?_^nc1P%*tT>L@D6y2?x&+-0*Qb%&4hs>%OY^gr{C5DB-N)ak
zc9LWky|hfn#ouNUxaGR#_vh%Ds)RqpQa+&{5!}vaO6aO!w(V4S{7&89