加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

交互设计1——processing互动编程

(2014-01-20 19:16:19)
标签:

processing

互动编程

交互设计

分类: 交互设计
交互设计1——Processing互动编程
(读研期间的实践案例)
一、互动与程序

    虽然图形用户界面(GUI)早在二十年前成为主流,但是编程语言的教学到今天仍是以命令行接口为主,在学习程序设计时人们不能与其进行图形界面的交互,而我们人脑天生长空间辨识,图形用户界面利用的正是这种优势,加上它能各种实时且鲜明的图像式反馈 (feedback),可以大幅缩短曲线,并帮助理解抽象逻辑法则。

二、Processing

        Processing是一种具有革命前瞻性的新兴计算机语言,它的概念是在电子艺术的环境下介绍程序语言,并将电子艺术的概念介绍给程序设计师。她是 Java 语言的延伸,并支持许多现有的 Java 语言架构,并具有许多贴心及人性化的设计。    

        Processing 可以在 WindowsMAC OS XMAC OS 9 Linux 等操作系统上使用。以 Processing 完成的作品可在个人本机端作用,或以Java Applets 的模式外输至网络上发布

 

        Processing Java的语法简化并将其运算结果“感官化”,让使用者能很快享有声光兼备的交互式多媒体作品。

下面几幅图是processing相关程序运行时的效果图:

(1)Bound ball

 


 

(2)Gradual change

(3)Tree

 

 


         Processing 是由美国麻省理工学院媒体实验室 ( M.I.T. Media Laboratory ) 美学与运算小组 ( Aesthetics & Computation Group ) Casey ReasBen Fry 创立的一款专为设计师使用编程语言以实现梦幻般的视觉展示及媒体交互作品。同时,也可结合Arduino等相关硬件,设计出完整的交互系统,应用拓展能力极强

    在互动媒体的应用上,交互网站、互动展示、动态视觉艺术是其三大热点。

三、用Processing实现的飞机大战游戏

代码:

import ddf.minim.analysis.*; 

import ddf.minim.*; 


Minim minim; 

AudioPlayer kingk1; 

FFT fft; 


Sky stars = new Sky();

Rect rect1;

Box[] boxes;

Time timer;

Drop[] drop;

PImage head;

int totaldrop=0;

int totalboxes=0;

void setup(){

  minim = new Minim(this); 

  kingk1 = minim.loadFile("shoot.mp3", 560);

  kingk1.play(); 

  size(560,600);

  smooth();

  rect1=new Rect();

  stars.setup(); 

  head = loadImage( "fj.jpg");

  timer=new Time(300);

  drop=new Drop[1000];

  boxes=new Box[100];

  timer.start();

}

void draw(){

  background(0);

  rect1.setlocation(mouseX,mouseY);

  rect1.display();

  stars.move(); 

  stars.display(); 

  imageMode(CENTER);

  image(head,mouseX,mouseY);

  if(timer.isFinished()){

    drop[totaldrop]=new Drop();

    boxes[totalboxes]=new Box();

    totaldrop++;

    totalboxes++;

    if(totaldrop>=drop.length){

      totaldrop=0;

    }

    if(totalboxes>=boxes.length){

      totalboxes=0;

    }

    timer.start();

  }

  for(int i=0;i

    drop[i].move();

    drop[i].display();

  }

  for(int j=0;j

    boxes[j].move();

    boxes[j].display();

    for(int i=0;i

      if(drop[i].intersect(boxes[j])){

        boxes[j].caught();

        drop[i].caught1();

      }

      if(rect1.inter(boxes[j])){

        gameover();

        boxes[j].stop1();

        drop[i].stop2();

      }

    }

  }

}

void gameover() { 

  fill (240, 40, 40); 

  textSize (86); 

  textAlign(CENTER); 

  text ("Game Over", width/2, height/2);

class Time{

  int savedtime;

  int totaltime;

  Time(int temptotaltime){

    totaltime=temptotaltime;

  }

  void start(){

    savedtime=millis();

  }

  boolean isFinished(){

    int passedtime=millis()-savedtime;

    if(passedtime>totaltime){

      return true;

    }else{

      return false;

    }

  }

}

class Drop{

  float x,y;

  float r;

  float speed;

  color c;

  Drop(){

    r=3;

    y=mouseY;

    x=mouseX;

    speed=random(6,9);

    c=color(240,247,35);

  }

  void move(){

    y=y-speed;

  }

  void display(){

    noStroke();

    fill(c);

    for(int i=9;i>r;i--){

      ellipse(x,y-i*6,i*2,i*2);

    }

  }

  boolean intersect(Box b){

    float distance=dist(x,y,b.x,b.y);

    if(distance

      return true;

    }else{

      return false;

    }

  }

  void caught1(){

    speed=0;

    y=-1000;

  }

  void stop2(){

    speed=0;

  }

}

class Box{

  float x = random(width); 

  float y = random(1); 

  int life; 

  int speed;

  Box(){

    life = 3; 

    speed =1; 

  }

  void display(){

    ellipseMode (CENTER); 

    rectMode (CENTER); 

    stroke (255); 

    strokeWeight (1); 

    fill (45, 37, 100); 

    rect (x, y-15, 65, 6); 

    rect (x, y-15, 85, 5); 

    arc (x, y-8, 16, 35, PI, PI*2); 

    ellipse (x, y-10, 35, 16); 

    fill (0, 80, 192); 

    ellipse (x-26, y-15, 13, 13); 

    ellipse (x+26, y-15, 13, 13); 

    fill (99, 173, 242); 

    ellipse (x+26, y-15, 5, 5); 

    ellipse (x-26, y-15, 5, 5); 

  }

  void move(){

    y=y+speed;

  }

  void caught(){

    speed=0;

    y=-1000;

  }

  void stop1(){

    speed=0;

  }

}

class Sky { 

  int n = 60; 

  float speed = 1; 

  float[] x = new float [n]; 

  float[] y = new float [n]; 

  float[] d = new float [n]; 


Sky () { 


void setup() { 

  for (int i=0; i

  if (i%5 == 0) 

  d[i] = random (0, 2); 

  else 

  d[i] = 3; 

  x[i] = random (0, width); 

  y[i] = random (-height, height*2); 

void move() { 

  for (int i=0; i

  y[i] += d[i]*speed; 

  if (y[i]>height*2) 

  y[i] = random (-height-100, -height+100); 

void display() { 

  fill (255); 

  noStroke(); 

  for (int i=0; i

    ellipse (x[i], y[i], d[i], d[i]); 

 

}

class Rect{

  float x;

  float y;

  float w;

  float h;

  Rect(){

    x=0;

    y=0;

    w=85;

    h=60;

  }

  void setlocation(float tempx,float tempy){

    x=tempx;

    y=tempy;

  }

  void display(){

    noStroke();

    fill(0);

    rectMode(CENTER);

    rect(x,y,w,h);

  }

  boolean inter(Box b1){

    float distance1=dist(x+40,y+30,b1.x+40,b1.y+6);

    if(distance1<70){

      return true;

    }else{

      return false;

    }

  }

 

}

运行效果图:

http://s1/mw690/004iYZkCgy6FWsKIjN630&690

 

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有