虽然图形用户界面(GUI)早在二十年前成为主流,但是基础编程语言的教学到今天仍是以命令行接口为主,在学习程序设计时人们不能与其进行图形界面的交互,而我们人脑天生擅长空间辨识,图形用户界面利用的正是这种优势,加上它能提供各种实时且鲜明的图像式反馈
(feedback),可以大幅缩短学习曲线,并帮助理解抽象逻辑法则。
二、Processing
Processing是一种具有革命前瞻性的新兴计算机语言,它的概念是在电子艺术的环境下介绍程序语言,并将电子艺术的概念介绍给程序设计师。她是
Java 语言的延伸,并支持许多现有的 Java 语言架构,并具有许多贴心及人性化的设计。
Processing
可以在 Windows、MAC
OS X、MAC 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 Reas与Ben
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