1、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

voidsetup() {

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

}voiddraw() {//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);

}

View Code

2、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.

此示例介绍将加载背景图像的最快方法转换到Processing。 要加载图像作为背景，它必须与程序的宽度和高度相同。

PImage bg;inty;voidsetup() {

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");

}voiddraw() {

background(bg);

stroke(226, 204, 0);

line(0, y, width, y);

y++;if (y >height) {

y= 0;

}

}

View Code

3、透明度。

向左移动，指针对面的形象改变立场。本方案通过用色调()函数修改图像的α值覆盖在另一个图象。

PImage img;float offset = 0;float easing = 0.05;voidsetup() {

size(640, 360);

img= loadImage("moonwalk.jpg"); //Load an image into the program

}voiddraw() {

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);

}

View Code

4、遮罩

为图像加载“遮罩”以指定图像不同部分的透明度。 使用Image的mask()方法将两个图像混合在一起。

PImage img;

PImage imgMask;voidsetup() {

size(640, 360);

img= loadImage("moonwalk.jpg");

imgMask= loadImage("mask.jpg");

img.mask(imgMask);

imageMode(CENTER);

}voiddraw() {

background(0, 102, 153);

image(img, width/2, height/2);

image(img, mouseX, mouseY);

}

View Code

5、创建图像。

createImage()函数提供了一个新的像素的缓冲区。 此示例创建图像渐变。

PImage img;voidsetup() {

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);

}

}voiddraw() {

background(0);

image(img,90, 80);

image(img, mouseX-img.width/2, mouseY-img.height/2);

}

View Code

6、点画

鼠标水平位置控制点的大小。 使用根据图像中的像素着色的椭圆创建简单的点画效果。

PImage img;intsmallPoint, largePoint;voidsetup() {

size(640, 360);

img= loadImage("moonwalk.jpg");

smallPoint= 4;

largePoint= 40;

imageMode(CENTER);

noStroke();

background(255);

}voiddraw() {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);

}

View Code

7、请求图像由Ira Greenberg(从为Flash开发人员处理)。

展示如何使用requestImage()函数与preloader动画。 requestImage()函数在单独的线程上加载图像，以使草图在加载时不会冻结。 当你加载大图片时，它非常有用。这些图像是小的快速下载，但尝试应该大的图像，以获得完整的效果。

int imgCount = 12;

PImage[] imgs= newPImage[imgCount];floatimgW;//Keeps track of loaded images (true or false)

boolean[] loadStates = new boolean[imgCount];//For loading animation

floatloaderX, loaderY, theta;voidsetup() {

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");

}

}voiddraw(){

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();

}

}voiddrawImages() {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

voidrunLoaderAni(){//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

booleancheckLoadStates(){for (int i = 0; i < imgs.length; i++){if (loadStates[i] == false){return false;

}

}return true;

}

View Code