New images for 2.0 Image Examples

java/examples/Basics/Image/Alphamask/Alphamask.pde

@@ -5,20 +5,24 @@
  * in different parts of the image. The two images are blended
  * together using the mask() method of PImage. 
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moonwalk.jpg,mask.jpg"; */ 
+
 PImage img;
-PImage maskImg;
+PImage imgMask;
 
 void setup() {
-  size(200, 200);
-  img = loadImage("test.jpg");
-  maskImg = loadImage("mask.jpg");
-  img.mask(maskImg);
+  size(640, 360);
+  img = loadImage("moonwalk.jpg");
+  imgMask = loadImage("mask.jpg");
+  img.mask(imgMask);
   imageMode(CENTER);
 }
 
 void draw() {
-  background(map(mouseX+mouseY, 0, width+height, 0, 255));
+  background(0, 102, 153);
   image(img, width/2, height/2);
   image(img, mouseX, mouseY);
 }

java/examples/Basics/Image/BackgroundImage/BackgroundImage.pde

@@ -6,25 +6,29 @@
  * the same width and height as the program.
  */
  
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moonwalk.jpg"; */ 
+
 PImage bg;
-int a; 
+int y;
 
-void setup() 
-{
-  size(200,200);
-  frameRate(30);
+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 "milan_rubbish.jpg"
-  // is 200 x 200 pixels.
-  bg = loadImage("milan_rubbish.jpg");
+  // into the size() method. In this program, the size of the image
+  // is 650 x 360 pixels.
+  bg = loadImage("moonwalk.jpg");
 }
 
-void draw() 
-{
+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);
+  line(0, y, width, y);
+  
+  y++;
+  if (y > height) {
+    y = 0; 
+  }
 }

java/examples/Basics/Image/CreateImage/CreateImage.pde

@@ -9,16 +9,17 @@ PImage img;
 
 void setup() 
 {
-  size(200, 200);  
-  img = createImage(120, 120, ARGB);
-  for(int i=0; i < img.pixels.length; i++) {
-    img.pixels[i] = color(0, 90, 102, i%img.width * 2); 
+  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, 90, 102, a); 
   }
 }
 
 void draw() 
 {
-  background(204);
-  image(img, 33, 33);
-  image(img, mouseX-60, mouseY-60);
+  background(0);
+  image(img, 90, 80);
+  image(img, mouseX-img.width/2, mouseY-img.height/2);
 }

java/examples/Basics/Image/LoadDisplayImage/LoadDisplayImage.pde

@@ -5,19 +5,22 @@
  * or any other size. 
  */
  
-PImage a;  // Declare variable "a" of type PImage
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moonwalk.jpg"; */ 
+
+PImage img;  // Declare variable "a" of type PImage
 
 void setup() {
-  size(200, 200);
-  // The file "jelly.jpg" must be in the data folder
-  // of the current sketch to load successfully
-  a = loadImage("jelly.jpg");  // Load the image into the program  
-  noLoop();  // Makes draw() only run once
+  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(a, 0, 0); 
-  // Displays the image at point (100, 0) at half of its size
-  image(a, 100, 0, a.width/2, a.height/2);
+  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);
 }

java/examples/Basics/Image/Pointillism/Pointillism.pde

@@ -5,27 +5,23 @@
  * Mouse horizontal location controls size of dots. 
  * Creates a simple pointillist effect using ellipses colored
  * according to pixels in an image. 
- * 
- * Updated 27 February 2010.
  */
  
-PImage img;
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moonwalk.jpg"; */ 
 
-int smallPoint = 2;
-int largePoint;
-int top, left;
+PImage img;
+int smallPoint, largePoint;
 
 void setup() {
-  size(200, 200);
-  img = loadImage("eames.jpg");
-  //img = loadImage("sunflower.jpg");  // an alternative image
+  size(640, 360);
+  img = loadImage("moonwalk.jpg");
+  smallPoint = 4;
+  largePoint = 40;
+  imageMode(CENTER);
   noStroke();
   background(255);
-  smooth();
-  largePoint = min(width, height) / 10;
-  // center the image on the screen
-  left = (width - img.width) / 2;
-  top = (height - img.height) / 2;
 }
 
 void draw() { 
@@ -34,5 +30,5 @@ void draw() {
   int y = int(random(img.height));
   color pix = img.get(x, y);
   fill(pix, 128);
-  ellipse(left + x, top + y, pointillize, pointillize);
+  ellipse(x, y, pointillize, pointillize);
 }

java/examples/Basics/Image/Sprite/Sprite.pde

@@ -7,32 +7,28 @@
  
 PImage teddy;
 
-float xpos;
-float ypos;
-float drag = 30;
+float x, y;
+float easing = 0.05;
 
 void setup() {
-  size(200, 200);
+  size(640, 360);
+  imageMode(CENTER);
   teddy = loadImage("teddy.gif");
-  xpos = width/2;
-  ypos = height/2;
+  x = width/2;
+  y = height/2;
 }
 
 void draw() { 
   background(102);
   
-  float difx = mouseX - xpos-teddy.width/2;
-  if (abs(difx) > 1) {
-    xpos = xpos + difx/drag;
-    xpos = constrain(xpos, 0, width-teddy.width);
-  }  
+  float dx = mouseX - x;
+  x += dx * easing;
+  x = constrain(x, teddy.width/2, width - teddy.width/2); 
   
-  float dify = mouseY - ypos-teddy.height/2;
-  if (abs(dify) > 1) {
-    ypos = ypos + dify/drag;
-    ypos = constrain(ypos, 0, height-teddy.height);
-  }  
+  float dy = mouseY - y;
+  y += dy * easing;
+  y = constrain(y, teddy.height/2, height - teddy.height/2); 
   
-  // Display the sprite at the position xpos, ypos
-  image(teddy, xpos, ypos);
+  // Display the sprite at the position x, y
+  image(teddy, x, y);
 }

java/examples/Basics/Image/Sprite2/Sprite2.pde

@@ -1,45 +0,0 @@
-/**
- * Sprite2 (Teddy)
- * by James Patterson. 
- * 
- * Demonstrates loading and displaying a transparent GIF image. 
- * This alternate version shows a sky image in the background.
- */
- 
-PImage teddy;
-PImage sky;
-
-float xpos;
-float ypos;
-float drag = 30.0;
-
-void setup() {
-  size(200, 200);
-  teddy = loadImage("teddy.gif");
-  sky = loadImage("sky.jpg");
-  xpos = width/2;
-  ypos = height/2;
-  // resize the background image so that it fills the screen
-  if (sky.width != width || sky.height != height) {
-    sky.resize(width, height);
-  }
-}
-
-void draw() {
-  background(sky);
-  
-  float difx = mouseX - xpos-teddy.width/2;
-  if (abs(difx) > 1) {
-    xpos = xpos + difx/drag;
-    xpos = constrain(xpos, 0, width-teddy.width);
-  }  
-  
-  float dify = mouseY - ypos-teddy.height/2;
-  if (abs(dify) > 1 ) {
-    ypos = ypos + dify/drag;
-    ypos = constrain(ypos, 0, height-teddy.height);
-  }  
-  
-  // Display the sprite at the position xpos, ypos
-  image(teddy, xpos, ypos);
-}

java/examples/Basics/Image/Transparency/Transparency.pde

@@ -6,21 +6,25 @@
  * by modifying the alpha value of the image with the tint() function. 
  */
 
-PImage a, b;
-float offset;
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moonwalk.jpg"; */ 
+
+PImage img;
+float offset = 0;
+float easing = 0.05;
 
 void setup() {
-  size(200, 200);
-  a = loadImage("construct.jpg");  // Load an image into the program 
-  b = loadImage("wash.jpg");   // Load an image into the program 
+  size(640, 360);
+  img = loadImage("moonwalk.jpg");  // Load an image into the program 
 }
 
 void draw() { 
-  image(a, 0, 0);
-  float offsetTarget = map(mouseX, 0, width, -b.width/2 - width/2, 0);
-  offset += (offsetTarget-offset)*0.05; 
-  tint(255, 153);
-  image(b, offset, 20);
+  image(img, 0, 0);  // Display at full opacity
+  float dx = (mouseX-img.width/2) - offset;
+  offset += dx * easing; 
+  tint(255, 126);  // Display at half opacity
+  image(img, offset, 0);
 }