Examples mods for 2.0

java/examples/Topics/Animation/AnimatedSprite/AnimatedSprite.pde

@@ -1,6 +1,6 @@
 /**
  * Animated Sprite (Shifty + Teddy)
- * by James Patterson. 
+ * by James Paterson. 
  * 
  * Press the mouse button to change animations.
  * Demonstrates loading, displaying, and animating GIF images.
@@ -8,8 +8,9 @@
  * animated GIFs, but would not allow as much control over 
  * the display sequence and rate of display. 
  */
- 
+
 Animation animation1, animation2;
+
 float xpos;
 float ypos;
 float drag = 30.0;
@@ -24,11 +25,8 @@ void setup() {
 }
 
 void draw() { 
-  float difx = mouseX - xpos;
-  if (abs(difx) > 1.0) {
-    xpos = xpos + difx/drag;
-    xpos = constrain(xpos, 0, width);
-  }
+  float dx = mouseX - xpos;
+  xpos = xpos + dx/drag;
 
   // Display the sprite at the position xpos, ypos
   if (mousePressed) {

java/examples/Topics/Animation/Sequential/Sequential.pde

@@ -1,11 +1,17 @@
 /**
  * Sequential
- * by James Patterson.  
+ * by James Paterson.  
  * 
  * Displaying a sequence of images creates the illusion of motion. 
  * Twelve images are loaded and each is displayed individually in a loop. 
  */
-  
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="PT_anim0000.gif, PT_anim0001.gif, PT_anim0002.gif, PT_anim0003.gif,
+PT_anim0004.gif, PT_anim0005.gif, PT_anim0006.gif, PT_anim0007.gif, PT_anim0008.gif,
+PT_anim0009.gif, PT_anim0010.gif, PT_anim0011.gif"; */ 
+
 int numFrames = 12;  // The number of frames in the animation
 int frame = 0;
 PImage[] images = new PImage[numFrames];
@@ -32,15 +38,20 @@ void setup() {
   // can create the filenames as the program runs.
   // The nf() command does number formatting, which will
   // ensure that the number is (in this case) 4 digits.
-  //for(int i=0; i<numFrames; i++) {
+  //for (int i = 0; i < numFrames; i++) {
   //  String imageName = "PT_anim" + nf(i, 4) + ".gif";
   //  images[i] = loadImage(imageName);
   //}
 } 
  
 void draw() { 
+  background(0);
   frame = (frame+1) % numFrames;  // Use % to cycle through frames
-  image(images[frame], 10, 70);
-  image(images[(frame + 3) % numFrames], 220, 70);
-  image(images[(frame + 6) % numFrames], 430, 70);
+  int offset = 0;
+  for (int x = -100; x < width; x += images[0].width) { 
+    image(images[(frame+offset) % numFrames], x, -20);
+    offset+=2;
+    image(images[(frame+offset) % numFrames], x, height/2);
+    offset+=2;
+  }
 }

java/examples/Topics/Drawing/Animator/Animator.pde

@@ -14,19 +14,18 @@ int currentFrame = 0;
 PImage[] frames = new PImage[24];
 int lastTime = 0;
 
-void setup() 
-{
+void setup() {
   size(640, 360);
   strokeWeight(12);
   smooth();
-  background(204);
+  background(0);
+  stroke(255);
   for (int i = 0; i < frames.length; i++) {
     frames[i] = get(); // Create a blank frame
   }
 }
 
-void draw() 
-{
+void draw() {
   int currentTime = millis();
   if (currentTime > lastTime+30) {
     nextFrame();

java/examples/Topics/Drawing/ContinuousLines/ContinuousLines.pde

@@ -3,8 +3,6 @@
  * 
  * Click and drag the mouse to draw a line. 
  */
- 
-int px, py;
 
 void setup() {
   size(640, 360);
@@ -14,8 +12,6 @@ void setup() {
 void draw() {
   stroke(255);
   if(mousePressed) {
-    line(mouseX, mouseY, px, py);
+    line(mouseX, mouseY, pmouseX, pmouseY);
   }
-  px = mouseX;
-  py = mouseY;
 }

java/examples/Topics/Drawing/CustomTool/CustomTool.pde

@@ -1,84 +0,0 @@
-/**
- * Custom Tool. 
- * 
- * Move the cursor across the screen to draw. 
- * In addition to creating software tools to simulate pens and pencils, 
- * it is possible to create unique tools to draw with. 
- */
-
-int dots = 1000;
-float[] dX = new float[dots];
-float[] dY = new float[dots];
-
-float l_0 = 0.0;
-float h_0 = 0.0;
-
-float legX = 0.0;
-float legY = 0.0;
-float thighX = 0.0;
-float thighY = 0.0;
-
-float l = 60.0; // Length of the 'leg'
-float h = 90.0; // Height of the 'leg'
-
-float nmx, nmy = 0.0;
-float mx, my = 0.0;
-
-int currentValue = 0;
-int valdir = 1;
-
-void setup() 
-{
-  size(640, 360);
-  noStroke();
-  smooth();
-  background(102);
-}
-
-void draw() 
-{
-  // Smooth the mouse
-  nmx = mouseX;
-  nmy = mouseY;
-  if((abs(mx - nmx) > 1.0) || (abs(my - nmy) > 1.0)) { 
-    mx = mx - (mx-nmx)/20.0;
-    my = my - (my-nmy)/20.0;
-
-    // Set the drawing value
-    currentValue += 1* valdir;
-    if(currentValue > 255 || currentValue <= 0) {
-      valdir *= -1;
-    }
-  }
-
-  iKinematics();
-  kinematics();
-
-  pushMatrix();
-  translate(width/2, height/2);
-  stroke(currentValue); 
-  line(thighX, thighY, legX, legY);
-  popMatrix();
-
-  stroke(255);
-  point(legX + width/2, legY + height/2);
-}
-
-void kinematics() 
-{
-  thighX = h*cos(h_0);
-  thighY = h*sin(h_0);
-  legX = thighX + l*cos(h_0 - l_0);
-  legY = thighY + l*sin(h_0 - l_0);
-}
-
-void iKinematics()
-{
-  float tx = mx - width/2.0;
-  float ty = my - height/2.0;
-  float c2 = (tx*tx + ty*ty - h*h - l*l)/(2*h*l); //in degrees
-  float s2 = sqrt(abs(1 - c2*c2)); // the sign here determines the bend in the joint  
-  l_0 = -atan2(s2, c2);
-  h_0 = atan2(ty, tx) - atan2(l*s2, h+l*c2);
-}
-

java/examples/Topics/Image Processing/Blur/Blur.pde

@@ -1,43 +1,55 @@
 /**
  * Blur. 
  * 
- * Bluring half of an image by processing it through a
- * low-pass filter. 
+ * Bluring a grayscale image by processing it through a low-pass filter. 
  */
 
-float v = 1.0/9.0;
-float[][] kernel = { { v, v, v },
-                     { v, v, v },
-                     { v, v, v } };
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
 
-size(200, 200); 
+float v = 1.0 / 9.0;
+float[][] kernel = {{ v, v, v }, 
+                    { v, v, v }, 
+                    { v, v, v }};
+                    
+PImage img;
 
-PImage img = loadImage("trees.jpg"); // Load the original image
-image(img, 0, 0); // Displays the image from point (0,0) 
-img.loadPixels();
+void setup() {
+  size(640, 360);
+  img = loadImage("moon.jpg"); // Load the original image
+  noLoop();
+} 
 
-// Create an opaque image of the same size as the original
-PImage edgeImg = createImage(img.width, img.height, RGB);
+void draw() {
+  image(img, 0, 0); // Displays the image from point (0,0) 
+  img.loadPixels();
 
-// Loop through every pixel in the image.
-for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges
-  for (int x = 1; x < img.width-1; x++) { // Skip left and right edges
-    float sum = 0; // Kernel sum for this pixel
-    for (int ky = -1; ky <= 1; ky++) {
-      for (int kx = -1; kx <= 1; kx++) {
-        // Calculate the adjacent pixel for this kernel point
-        int pos = (y + ky)*img.width + (x + kx);
-        // Image is grayscale, red/green/blue are identical
-        float val = red(img.pixels[pos]);
-        // Multiply adjacent pixels based on the kernel values
-        sum += kernel[ky+1][kx+1] * val;
+  // Create an opaque image of the same size as the original
+  PImage edgeImg = createImage(img.width, img.height, RGB);
+
+  // Loop through every pixel in the image
+  for (int y = 1; y < img.height-1; y++) {   // Skip top and bottom edges
+    for (int x = 1; x < img.width-1; x++) {  // Skip left and right edges
+      float sum = 0; // Kernel sum for this pixel
+      for (int ky = -1; ky <= 1; ky++) {
+        for (int kx = -1; kx <= 1; kx++) {
+          // Calculate the adjacent pixel for this kernel point
+          int pos = (y + ky)*img.width + (x + kx);
+          // Image is grayscale, red/green/blue are identical
+          float val = red(img.pixels[pos]);
+          // Multiply adjacent pixels based on the kernel values
+          sum += kernel[ky+1][kx+1] * val;
+        }
       }
+      // For this pixel in the new image, set the gray value
+      // based on the sum from the kernel
+      edgeImg.pixels[y*img.width + x] = color(sum);
     }
-    // For this pixel in the new image, set the gray value
-    // based on the sum from the kernel
-    edgeImg.pixels[y*img.width + x] = color(sum);
   }
+  // State that there are changes to edgeImg.pixels[]
+  edgeImg.updatePixels();
+
+  image(edgeImg, width/2, 0); // Draw the new image
 }
-// State that there are changes to edgeImg.pixels[]
-edgeImg.updatePixels();
-image(edgeImg, 100, 0); // Draw the new image
+

java/examples/Topics/Image Processing/Brightness/Brightness.pde

@@ -5,7 +5,11 @@
  * Adjusts the brightness of part of the image
  * Pixels closer to the mouse will appear brighter. 
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="wires.jpg"; */ 
+
 PImage img;
 
 void setup() {

java/examples/Topics/Image Processing/Convolution/Convolution.pde

@@ -2,41 +2,45 @@
  * Convolution
  * by Daniel Shiffman.  
  * 
- * Applies a convolution matrix to a portion of the index.  
+ * Applies a convolution matrix to a portion of an image.  
  * Move mouse to apply filter to different parts of the image. 
  */
 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon-wide.jpg"; */ 
+
 PImage img;
-int w = 80;
+int w = 120;
 
 // It's possible to convolve the image with 
-// many different matrices
-
-  float[][] matrix = { { -1, -1, -1 },
-                       { -1,  9, -1 },
-                       { -1, -1, -1 } }; 
+// many different matrices to produce different effects.
+// This is a high-pass filter; it accentuates the edges. 
+float[][] matrix = { { -1, -1, -1 },
+                     { -1,  9, -1 },
+                     { -1, -1, -1 } }; 
 
 void setup() {
-  size(200, 200);
-  frameRate(30);
-  img = loadImage("end.jpg");
+  size(640, 360);
+  img = loadImage("moon-wide.jpg"); 
 }
 
 void draw() {
   // We're only going to process a portion of the image
   // so let's set the whole image as the background first
-  image(img,0,0);
+  image(img, 0, 0);
   // Where is the small rectangle we will process
-  int xstart = constrain(mouseX-w/2,0,img.width);
-  int ystart = constrain(mouseY-w/2,0,img.height);
-  int xend = constrain(mouseX+w/2,0,img.width);
-  int yend = constrain(mouseY+w/2,0,img.height);
+  int xstart = constrain(mouseX - w/2, 0, img.width);
+  int ystart = constrain(mouseY - w/2, 0, img.height);
+  int xend = constrain(mouseX + w/2, 0, img.width);
+  int yend = constrain(mouseY + w/2, 0, img.height);
   int matrixsize = 3;
   loadPixels();
   // Begin our loop for every pixel
   for (int x = xstart; x < xend; x++) {
     for (int y = ystart; y < yend; y++ ) {
-      color c = convolution(x,y,matrix,matrixsize,img);
+      color c = convolution(x, y, matrix, matrixsize, img);
       int loc = x + y*img.width;
       pixels[loc] = c;
     }
@@ -44,7 +48,7 @@ void draw() {
   updatePixels();
 }
 
-color convolution(int x, int y, float[][] matrix,int matrixsize, PImage img)
+color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img)
 {
   float rtotal = 0.0;
   float gtotal = 0.0;
@@ -65,10 +69,10 @@ color convolution(int x, int y, float[][] matrix,int matrixsize, PImage img)
     }
   }
   // Make sure RGB is within range
-  rtotal = constrain(rtotal,0,255);
-  gtotal = constrain(gtotal,0,255);
-  btotal = constrain(btotal,0,255);
+  rtotal = constrain(rtotal, 0, 255);
+  gtotal = constrain(gtotal, 0, 255);
+  btotal = constrain(btotal, 0, 255);
   // Return the resulting color
-  return color(rtotal,gtotal,btotal);
+  return color(rtotal, gtotal, btotal);
 }
 

java/examples/Topics/Image Processing/EdgeDetection/EdgeDetection.pde

@@ -5,35 +5,48 @@
  * by processing it through a high-pass filter. 
  */
 
-float[][] kernel = { { -1, -1, -1 },
-                     { -1,  9, -1 },
-                     { -1, -1, -1 } };
-  
-size(200, 200);
-PImage img = loadImage("house.jpg"); // Load the original image
-image(img, 0, 0); // Displays the image from point (0,0) 
-img.loadPixels();
-// Create an opaque image of the same size as the original
-PImage edgeImg = createImage(img.width, img.height, RGB);
-// Loop through every pixel in the image.
-for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges
-  for (int x = 1; x < img.width-1; x++) { // Skip left and right edges
-    float sum = 0; // Kernel sum for this pixel
-    for (int ky = -1; ky <= 1; ky++) {
-      for (int kx = -1; kx <= 1; kx++) {
-        // Calculate the adjacent pixel for this kernel point
-        int pos = (y + ky)*img.width + (x + kx);
-        // Image is grayscale, red/green/blue are identical
-        float val = red(img.pixels[pos]);
-        // Multiply adjacent pixels based on the kernel values
-        sum += kernel[ky+1][kx+1] * val;
-      }
-    }
-    // For this pixel in the new image, set the gray value
-    // based on the sum from the kernel
-    edgeImg.pixels[y*img.width + x] = color(sum);
-  }
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="house.jpg"; */
+
+float[][] kernel = {{ -1, -1, -1}, 
+                    { -1,  9, -1}, 
+                    { -1, -1, -1}};
+                    
+PImage img;
+
+void setup() { 
+  size(200, 200);
+  img = loadImage("house.jpg"); // Load the original image
+  noLoop();
 }
-// State that there are changes to edgeImg.pixels[]
-edgeImg.updatePixels();
-image(edgeImg, 100, 0); // Draw the new image
+
+void draw() {
+  image(img, 0, 0); // Displays the image from point (0,0) 
+  img.loadPixels();
+  // Create an opaque image of the same size as the original
+  PImage edgeImg = createImage(img.width, img.height, RGB);
+  // Loop through every pixel in the image.
+  for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges
+    for (int x = 1; x < img.width-1; x++) { // Skip left and right edges
+      float sum = 0; // Kernel sum for this pixel
+      for (int ky = -1; ky <= 1; ky++) {
+        for (int kx = -1; kx <= 1; kx++) {
+          // Calculate the adjacent pixel for this kernel point
+          int pos = (y + ky)*img.width + (x + kx);
+          // Image is grayscale, red/green/blue are identical
+          float val = red(img.pixels[pos]);
+          // Multiply adjacent pixels based on the kernel values
+          sum += kernel[ky+1][kx+1] * val;
+        }
+      }
+      // For this pixel in the new image, set the gray value
+      // based on the sum from the kernel
+      edgeImg.pixels[y*img.width + x] = color(sum);
+    }
+  }
+  // State that there are changes to edgeImg.pixels[]
+  edgeImg.updatePixels();
+  image(edgeImg, 100, 0); // Draw the new image
+}
+

java/examples/Topics/Image Processing/Explode/Explode.pde

@@ -6,7 +6,11 @@
  * Maps pixels from a 2D image into 3D space. Pixel brightness controls 
  * translation along z axis. 
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="eames.jpg"; */ 
+
 PImage img;       // The source image
 int cellsize = 2; // Dimensions of each cell in the grid
 int columns, rows;   // Number of columns and rows in our system

java/examples/Topics/Image Processing/Extrusion/Extrusion.pde

@@ -5,6 +5,10 @@
  * around the center.
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
+
 PImage extrude;
 int[][] values;
 float angle = 0;

java/examples/Topics/Image Processing/Histogram/Histogram.pde

@@ -9,7 +9,11 @@
  * Note that this sketch will behave differently on Android, 
  * since most images will no longer be full 24-bit color.
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
+
 size(200, 200);
 
 // Load an image from the data directory

java/examples/Topics/Image Processing/LinearImage/LinearImage.pde

@@ -3,10 +3,12 @@
  * 
  * Click and drag mouse up and down to control the signal. 
  * Press and hold any key to watch the scanning. 
- *
- * Updated 28 February 2010.
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
+
 PImage img;
 int direction = 1;
 

java/examples/Topics/Image Processing/PixelArray/PixelArray.pde

@@ -6,7 +6,11 @@
  * This program sequentially reads the color of every pixel of an image
  * and displays this color to fill the window.  
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
+
 PImage img;
 int direction = 1;
 float signal;

java/examples/Topics/Image Processing/Zoom/Zoom.pde

@@ -2,20 +2,21 @@
  * Zoom. 
  * 
  * Move the cursor over the image to alter its position. Click and press
- * the mouse to zoom and set the density of the matrix by typing numbers 1-5.
- * This program displays a series of lines with their heights corresponding to 
- * a color value read from an image. 
+ * the mouse to zoom. This program displays a series of lines with their 
+ * heights corresponding to a color value read from an image. 
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="ystone08.jpg"; */ 
+
 PImage img;
-//boolean onetime = true;
 int[][] imgPixels;
 float sval = 1.0;
 float nmx, nmy;
 int res = 5;
 
-void setup() 
-{
+void setup() {
   size(640, 360, P3D);
   noFill();
   stroke(255);
@@ -28,11 +29,10 @@ void setup()
   }
 }
 
-void draw() 
-{
+void draw() {
   background(0);
 
-  nmx = nmx + (mouseX-nmx)/20; 
+  nmx += (mouseX-nmx)/20; 
   nmy += (mouseY-nmy)/20; 
 
   if(mousePressed) { 
@@ -42,9 +42,9 @@ void draw()
     sval -= 0.01; 
   }
 
-  sval = constrain(sval, 1.0, 2.5);
+  sval = constrain(sval, 1.0, 2.0);
 
-  translate(width/2 + nmx * sval-100, height/2 + nmy*sval - 200, -50);
+  translate(width/2 + nmx * sval-100, height/2 + nmy*sval - 100, -50);
   scale(sval);
   rotateZ(PI/9 - sval + 1.0);
   rotateX(PI/sval/8 - 0.125);
@@ -64,24 +64,6 @@ void draw()
   }
 }
 
-void keyPressed() {
-  if(key == '1') {
-    res = 1;
-  } 
-  else if (key == '2') {
-    res = 2; 
-  } 
-  else if (key == '3') {
-    res = 3;
-  } 
-  else if (key == '4') {
-    res = 4;
-  } 
-  else if (key == '5') {
-    res = 5;
-  }
-}
-
 
 
 

java/examples/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.pde

@@ -2,10 +2,14 @@
  * Smoke Particle System
  * by Daniel Shiffman.  
  * 
- * A basic smoke effect using a particle system. 
- * Each particle is rendered as an alpha masked image. 
+ * A basic smoke effect using a particle system. Each particle 
+ * is rendered as an alpha masked image. 
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="texture.gif"; */  
+
 ParticleSystem ps;
 Random generator;
 
@@ -57,4 +61,4 @@ void displayVector(PVector v, float x, float y, float scayl) {
   line(len,0,len-arrowsize,+arrowsize/2);
   line(len,0,len-arrowsize,-arrowsize/2);
   popMatrix();
-}
+}

java/examples/Topics/Textures/TextureCube/TextureCube.pde

@@ -1,5 +1,5 @@
 /**
- * TexturedCube
+ * Texture Cube
  * by Dave Bollinger.
  * 
  * Drag mouse to rotate cube. Demonstrates use of u/v coords in 
@@ -7,13 +7,15 @@
  * the P3D renderer as you can see, but they look great using OPENGL.
 */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="berlin-1.jpg"; */ 
 
 PImage tex;
 float rotx = PI/4;
 float roty = PI/4;
 
-void setup() 
-{
+void setup() {
   size(640, 360, P3D);
   tex = loadImage("berlin-1.jpg");
   textureMode(NORMALIZED);
@@ -21,8 +23,7 @@ void setup()
   stroke(color(44,48,32));
 }
 
-void draw() 
-{
+void draw() {
   background(0);
   noStroke();
   translate(width/2.0, height/2.0, -100);

java/examples/Topics/Textures/TextureCylinder/TextureCylinder.pde

@@ -1,9 +1,12 @@
 /**
- * Texture 3. 
+ * Texture Cylinder. 
  * 
  * Load an image and draw it onto a cylinder and a quad. 
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="berlin-1.jpg"; */ 
 
 int tubeRes = 32;
 float[] tubeX = new float[tubeRes];

java/examples/Topics/Textures/TextureQuad/TextureQuad.pde

@@ -1,10 +1,14 @@
 /**
- * Texture 1. 
+ * Texture Quad. 
  * 
  * Load an image and draw it onto a quad. The texture() function sets
  * the texture image. The vertex() function maps the image to the geometry.
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="berlin-1.jpg"; */ 
+
 PImage img;
 
 void setup() {
@@ -21,8 +25,8 @@ void draw() {
   beginShape();
   texture(img);
   vertex(-100, -100, 0, 0, 0);
-  vertex(100, -100, 0, 400, 0);
-  vertex(100, 100, 0, 400, 400);
-  vertex(-100, 100, 0, 0, 400);
+  vertex(100, -100, 0, 300, 0);
+  vertex(100, 100, 0, 300, 300);
+  vertex(-100, 100, 0, 0, 300);
   endShape();
 }

java/examples/Topics/Textures/TextureTriangle/TextureTriangle.pde

@@ -1,9 +1,13 @@
 /**
- * Texture 2. 
+ * Texture Triangle. 
  * 
  * Using a rectangular image to map a texture onto a triangle.
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="berlin-1.jpg"; */ 
+
 PImage img;
 
 void setup() {
@@ -14,12 +18,12 @@ void setup() {
 
 void draw() {
   background(0);
-  translate(width / 2, height / 2);
+  translate(width/2, height/2, 0);
   rotateY(map(mouseX, 0, width, -PI, PI));
   beginShape();
   texture(img);
   vertex(-100, -100, 0, 0, 0);
-  vertex(100, -40, 0, 400, 120);
+  vertex(100, -40, 0, 300, 120);
   vertex(0, 100, 0, 200, 400);
   endShape();
 }