(六)利用processing实现图案的绘制

读取图像并在窗口中绘制:

//首先在 速写本中添加 lunar.jpg 文件
PImage img;
void setup(){
  size(480, 120);
  img = loadImage("lunar.jpg");
}
void draw(){
  image(img, 0, 0);
}
////////////////////////////////// 
在窗口上显示多个图片
PImage img1;
PImage img2;
void setup(){
  size(480, 120);
  img1 = loadImage("lunar.jpg");
  img2 = loadImage("capsule.jpg");
}
void draw(){
  image(img1, -120, 0);
  image(img1, 130, 0, 240, 120);
  image(img2, 300, 0, 240, 120);
}
//////////////////////////////////////////
添加光栅图像
PImage img;
void setup(){
  size(480, 120);
  img = loadImage("clouds.png");
}
void draw(){
  background(255);
  image(img, 0, 0);
  image(img, 0, mouseY*-1);
}
程序运行结果:

(六)利用processing实现图案的绘制_第1张图片

(六)利用processing实现图案的绘制_第2张图片

(六)利用processing实现图案的绘制_第3张图片

程序使用说明:

PImage    //图形类型
loadImage(X)   //保存图片文件到 图片类型变量中
image(img, x, y, Width, Height)   //绘制图片文件到窗口, img表示图片, x,y 为图片在窗口左上角的位置, Width,Height表示图片绘制的大小,默认是图片的大小
processing ->image 可以读取和显示jpeg, png, gif格式的光栅文件,gif, png图像支持透明度

读取创建矢量图片:

//添加svg矢量图片在窗口中显示
PShape network;
void setup(){
  size(400, 400);
  smooth();
  network = loadShape("network.svg");
}
void draw(){
  background(0);
  shape(network, 0, 0, 400, 400);
  //shape(network, 180, 10, 280, 280);
  saveFrame("Shape.png");
}

程序运行结果:

(六)利用processing实现图案的绘制_第4张图片

函数使用说明:

PShape   //创建矢量形状类型
loadShape("图片名称")    //加载图片给 矢量图形类型
shape(图形对象, x, y, width, height)    //x,y图片起始位置, width,height图片宽度,高度

图片绘制实例:

PImage landscape;
PShape bot1;
PShape bot2;
PShape bot3;

float easing = 0.05;
float offset = 0;

void setup(){
  landscape = loadImage("alpine.png");
  bot1 = loadShape("robot1.svg");
  bot2 = loadShape("robot2.svg");
  bot3 = loadShape("robot3.svg");
  size(720, 480);
  smooth();
}
void draw(){
  background(landscape);
  float targetOffset = map(mouseY, 0, height, -40, 40);
  
  offset += (targetOffset - offset)*easing;
  shape(bot1, 85 + offset, 65);
  
  float smallerOffset = offset*0.7;
  shape(bot2, 510+smallerOffset, 140, 78, 248);
  
  smallerOffset *= -0.5;
  shape(bot3, 410 + smallerOffset, 255, 39, 124);
  saveFrame("Shape.png");
}

运行结果:

(六)利用processing实现图案的绘制_第5张图片

你可能感兴趣的:(processing)