diff --git a/java/examples/Basics/Image/Alphamask/Alphamask.pde b/java/examples/Basics/Image/Alphamask/Alphamask.pde index 5e5a7cdb2..296835da7 100644 --- a/java/examples/Basics/Image/Alphamask/Alphamask.pde +++ b/java/examples/Basics/Image/Alphamask/Alphamask.pde @@ -6,8 +6,7 @@ * together using the mask() method of PImage. */ -// @pjs preload must be used to preload media if the program is -// running with Processing.js +// The next line is needed if running in JavaScript Mode with Processing.js /* @pjs preload="moonwalk.jpg,mask.jpg"; */ PImage img; diff --git a/java/examples/Basics/Image/BackgroundImage/BackgroundImage.pde b/java/examples/Basics/Image/BackgroundImage/BackgroundImage.pde index f06dba217..7d2f6a6d6 100644 --- a/java/examples/Basics/Image/BackgroundImage/BackgroundImage.pde +++ b/java/examples/Basics/Image/BackgroundImage/BackgroundImage.pde @@ -6,8 +6,7 @@ * the same width and height as the program. */ -// @pjs preload must be used to preload media if the program is -// running with Processing.js +// The next line is needed if running in JavaScript Mode with Processing.js /* @pjs preload="moonwalk.jpg"; */ PImage bg; diff --git a/java/examples/Basics/Image/CreateImage/CreateImage.pde b/java/examples/Basics/Image/CreateImage/CreateImage.pde index 897b35a50..b3ea02cb5 100644 --- a/java/examples/Basics/Image/CreateImage/CreateImage.pde +++ b/java/examples/Basics/Image/CreateImage/CreateImage.pde @@ -7,18 +7,16 @@ PImage img; -void setup() -{ +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, 90, 102, a); + img.pixels[i] = color(0, 153, 204, a); } } -void draw() -{ +void draw() { background(0); image(img, 90, 80); image(img, mouseX-img.width/2, mouseY-img.height/2); diff --git a/java/examples/Basics/Image/LoadDisplayImage/LoadDisplayImage.pde b/java/examples/Basics/Image/LoadDisplayImage/LoadDisplayImage.pde index 7024d596d..48cc22379 100644 --- a/java/examples/Basics/Image/LoadDisplayImage/LoadDisplayImage.pde +++ b/java/examples/Basics/Image/LoadDisplayImage/LoadDisplayImage.pde @@ -5,8 +5,7 @@ * or any other size. */ -// @pjs preload must be used to preload media if the program is -// running with Processing.js +// The next line is needed if running in JavaScript Mode with Processing.js /* @pjs preload="moonwalk.jpg"; */ PImage img; // Declare variable "a" of type PImage diff --git a/java/examples/Basics/Image/Pointillism/Pointillism.pde b/java/examples/Basics/Image/Pointillism/Pointillism.pde index eb3fb170d..9227a9710 100644 --- a/java/examples/Basics/Image/Pointillism/Pointillism.pde +++ b/java/examples/Basics/Image/Pointillism/Pointillism.pde @@ -7,8 +7,7 @@ * according to pixels in an image. */ -// @pjs preload must be used to preload media if the program is -// running with Processing.js +// The next line is needed if running in JavaScript Mode with Processing.js /* @pjs preload="moonwalk.jpg"; */ PImage img; diff --git a/java/examples/Basics/Image/RequestImage/RequestImage.pde b/java/examples/Basics/Image/RequestImage/RequestImage.pde new file mode 100644 index 000000000..eb028b300 --- /dev/null +++ b/java/examples/Basics/Image/RequestImage/RequestImage.pde @@ -0,0 +1,90 @@ +/** + * 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); + smooth(); + 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; +} + + + + + + diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0000.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0000.gif new file mode 100644 index 000000000..b0e3f04ac Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0000.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0001.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0001.gif new file mode 100644 index 000000000..4f7cb9024 Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0001.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0002.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0002.gif new file mode 100644 index 000000000..4d37297fa Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0002.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0003.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0003.gif new file mode 100644 index 000000000..d3ab40361 Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0003.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0004.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0004.gif new file mode 100644 index 000000000..44cd62bdb Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0004.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0005.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0005.gif new file mode 100644 index 000000000..185298a94 Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0005.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0006.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0006.gif new file mode 100644 index 000000000..30de51162 Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0006.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0007.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0007.gif new file mode 100644 index 000000000..cc9f8f883 Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0007.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0008.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0008.gif new file mode 100644 index 000000000..76475facd Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0008.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0009.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0009.gif new file mode 100644 index 000000000..3b224625a Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0009.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0010.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0010.gif new file mode 100644 index 000000000..9c008f38b Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0010.gif differ diff --git a/java/examples/Basics/Image/RequestImage/data/PT_anim0011.gif b/java/examples/Basics/Image/RequestImage/data/PT_anim0011.gif new file mode 100644 index 000000000..db227e220 Binary files /dev/null and b/java/examples/Basics/Image/RequestImage/data/PT_anim0011.gif differ diff --git a/java/examples/Basics/Image/Transparency/Transparency.pde b/java/examples/Basics/Image/Transparency/Transparency.pde index c24911e5b..92721cc31 100644 --- a/java/examples/Basics/Image/Transparency/Transparency.pde +++ b/java/examples/Basics/Image/Transparency/Transparency.pde @@ -6,8 +6,7 @@ * by modifying the alpha value of the image with the tint() function. */ -// @pjs preload must be used to preload media if the program is -// running with Processing.js +// The next line is needed if running in JavaScript Mode with Processing.js /* @pjs preload="moonwalk.jpg"; */ PImage img;