宜昌老张

Processing互动媒体制作软件介绍

0
阅读(4069)

     Processing是由美国麻省理工学院媒体实验室( M.I.T. Media Laboratory )美学与运算小组( Aesthetics Computation Group )的Casey Reas与Ben Fry创立的一款专为设计师和艺术家使用的编程语言,通过它无需太高深的编程技术便可以实现梦幻般的视觉展示及媒体交互作品。同时,也可结合Arduino等相关硬件,制作出回归人际物理世界的互动系统。

 

   Processing编程不仅仅是计算机技术,它也可以创造出令人不可思议的艺术作品。
 

    我用Processing软件制作了一个“双面花布”的作品如下图:

    作品操作方法:点击鼠标左键,显示双面花布的正面,同心圆图案开始闪耀流动,松开左键,图案静止;点击鼠标右键,显示双面花布的反面,方块图案像莫尔条纹一样移动,松开右键,图案静止。

Processing软件的官方网站: http://www.processing.org/

软件下载地址: http://www.processing.org/download/

目前国内唯一一本Processing专著是广州美术学院的谭亮老师编写的,书名《Processing互动艺术》。

 

内容简介

    谭亮编著的本书将引领你进入编程艺术的世界。本书揭示了运用Processing创建高质量互动艺术作品的奥秘,你将感受到Processing的敏捷性和艺术性,内容覆盖绘图、响应互动、动画、视频、3D、物理计算等专题。精选的实例将激发读者的想象力和创造的乐趣,阅读和练习本书的案例即能快速进入互动艺术创作。本书语言简洁易懂,案例设计独特,所有代码均可在线下载,适合于专业编程人员和学习互动艺术的读者。

购书当当网网址:

http://product.dangdang.com/product.aspx?product_id=21120781&ref=search-1-pub

    Processing软件是免费软件,下载后,不需安装,直接点击文件夹里的可执行文件,就可以直接进入下图编程界面。

    这个双面花布的同心圆图案借鉴了广美那本书的第62页的例子,方块图案则借鉴了,Processing官方学习网页的例子,网址:http://www.processing.org/learning/,所以我们可以利用Processing软件免费、开源、共享的特点,在共享资料的基础,快速、高效地再创造,制作出自己预期的好作品。我的博客文章除了给自己工作做记录,也是希望大家如果感兴趣,可以借鉴,相互分享。

    双面花布的程序:(我用红色字体标注同心圆图案程序段,用蓝色字体标注方块图案程序段)

    实际上,大家可以马上把程序复制贴到上图编程环境里,在点击菜单栏上的运行按键,您也可以马上看到这个好玩的互动数位作品了。

程序:

 

// 2D Array of objects
Cell[][] grid;

// Number of columns and rows in the grid
int cols = 10;
int rows = 10;
void setup()
{
  size(600,600);
  smooth(); 
  grid = new Cell[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      // Initialize each object
      grid[i][j] = new Cell(i*60,j*60,60,60,i+j);
    }
  } 
}
void draw()
{
  if(mousePressed)
  {      
     if(mouseButton==LEFT)
     {
        background(255);
        noFill();
        for(int d=0;d<75;d+=4)
        {
          for(int x1=0;x1<650;x1+=75)
          {
            for(int y1=0;y1<650;y1+=75)
            {
              stroke(random(255),random(255),120);
              strokeWeight(4);
              ellipse(x1,y1,d,d);
            }
          }
        }
      }
    else if(mouseButton==RIGHT)
    {
      background(255);
      for (int i = 0; i < cols; i++) {
        for (int j = 0; j < rows; j++) {
          // Oscillate and display each object
          grid[i][j].oscillate();
          grid[i][j].display();
        }
      }
    }
  }
}
// A Cell object
class Cell {
  // A cell object knows about its location in the grid as well as its size with the variables x,y,w,h.
  float x,y;   // x,y location
  float w,h;   // width and height
  float angle; // angle for oscillating brightness

  // Cell Constructor
  Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    angle = tempAngle;
  } 
  
  // Oscillation means increase angle
  void oscillate() {
    angle += 0.08; 
  }

  void display() {
    stroke(255);
    strokeWeight(2);
    // Color calculated using sine wave
    fill(127+127*sin(angle));
    rect(x,y,w,h); 
  }
}