第一讲（请点击下面图片，即可在浏览器新窗口中查看课件内容）
第二讲（请点击下面图片，即可在浏览器新窗口中查看课件内容）
更多内容正在持续更新中...
Category Archives: Processing小组
用Processing描绘物理世界
Processing是一种开源编程语言，专门为电子艺术和视觉交互设计而创建，其目的是通过可视化的方式辅助编程教学，并在此基础之上表达数字创意。Processing也指Processing语言的集成开发环境(IDE)。2001年，MIT媒体实验室的 Casey Reas 和 Benjamin Fry 发起了此计划。其固定目标之一便是作为一个有效的工具，通过激励性的可视化反馈帮助非程序员进行编程的入门学习。Processing语言建立在Java语言的基础之上，但使用简化的语法和图形编程模型。
—————————————此条源自维基百科
艺术家们的Processing作品（点击上图可打开）
互联网上充斥着艺术家们用Processing创造的作品，但是可视化的仅仅是这些艺术作品或者文艺青年内心中的胸臆吗？
答案是：非也非也，相较之沉闷的物理定律和数学知识，自然界的规律也可以用Processing轻易的描绘出来。形象生动且不失准确性，相较之使用数学公式的方法，也许大家在看完动画之后再去摸索背后的数学更加有趣。下面，笔者借鉴纽约大学ITP教授的开源项目The nature of code中的几个小小的例子，来展现自然界生动活泼的一面。
平面二维完全弹性碰撞
一维简谐运动
阻尼单摆
简谐横波
万有引力
万有引力（多质点）
广美毕设展
新闻联播时间到.... 5月17日，创元素首脑及各主要领导移驾充满艺术气息的广美，参观了广美毕设展，平日里某些技术宅们虽是门外汉，但也趁机沾一下艺术气息。找对象时说不定用得上... 非广美学生，门票5元，但我只能说很超值，整整四层楼 貌似到6月中旬才结束，有兴趣的朋友抓紧时间哦 
作品超多，感觉做得都非常用心，图片烧流量，编辑也卡，就只贴部分上来~ 超喜欢的一幅油画，奔放而充满力量感的美 
进门右转就看到的巨幅画 需要仰视的船头 
大黄鸭~氛围不错 
竹子做的玩具 现在农村也没多少人会给小孩削个竹子的小车了吧 
为帕金森患者设计的勺子 CNC加工的吗？感觉成本应该很高 
如水波动般的玻璃制品，看上去让我联想到冰块和轻柔的水波 
各种打包，很怀旧 现在看照片有种彩铅绘画的感觉 
画出来的水方言啦，围了一圈人好不容易有机会拍照，可以自助购买哦
这个胡子的作品看了真心难受，上面那些洞洞.... 
《围城》 这有多少小人啊 
读屏时代..移动互联网时代的真实写照！旁边还有不少人拿着手机给它拍照。。。 
“四大神兽” 
赏心悦目，美到了 
猜猜下面这货什么做的？ 
答案是玻璃钢，也就是玻璃纤维+环氧树脂，敲一下会发现是空心的哦 吧台 
这些挂着的也很不错 
简单有效的支架结构，蝴蝶螺母是个好东西 
用“SB”绘图
制汇节时看到有一个拍照然后转换为字符组成的画面的展示，很有意思。其实，这类东西的原理并不复杂，计算图片各点灰度值，然后用合适的方法表现出来，如不同的字符，字符的大小，字符的灰度，图形的大小……之前我弄过一个用字符“SB”的大小和灰度表现图像的，效果如下（黑一下某土豪）：
放大一看，是不是就看到了无数“SB”呢~当然，字符是可以任意替换的，随你开心
PImage targetImg; //原始图像对象 int a = 2; //记录图像缩小倍数的整形变量 int b = 10; //记录“SB”大小的整形变量 float gamma = 1; int addGray = 30; PImage img; //新建img图像对象用来储存缩小后的图像 void setup(){ size(1280,1024); targetImg = loadImage("text.png"); //原始图像对象赋值 image(targetImg,0,0,targetImg.width/a,targetImg.height/a);//在原点将原始图原大小缩小a倍后显示（用缩小显示再截屏的方法省去自己写图像缩放的算法） img = get(0,0,targetImg.width/a,targetImg.height/a); //将缩小后的图像赋值给img图像变量（用get函数截屏取图的方式） //noLoop(); } void draw(){ background(255); //清空屏幕，背景全白（从而可以动态调整参数） for(int x = 1;x<targetImg.width/a+1;x++){ //嵌套for循环扫屏 for(int y = 1;y<targetImg.height/a+1;y++){ color c1 = img.get(x,y); //获取图像上点的颜色数据赋值给c1变量 int gray = int(red(c1)*gamma*0.299+green(c1)*gamma*0.587+blue(c1)*gamma*0.114); //color c2 = color(gray); //将计算出的整形数据gray强行变为颜色类型数据赋值给c2变量 textSize(int(255-gray)/6+1); //fill(gray); //fill(c1); fill(constrain(gray-addGray,0,255)); 根据addGray变量的设定调整灰度值并用constrain函数限制数据范围为0-255 text("SB",x*b,y*b); } } } void keyPressed(){ //用键盘动态调整a，b，addGray if(key =='j'){ a += 1; }else if(key == 'k'){ a -= 1; }else if(key == 'u'){ b += 1; }else if(key == 'i'){ b -= 1; }else if(key == 'o'){ addGray += 3; }else if(key == 'p'){ addGray -= 3; } } |
好了，上面就是代码了。用processing写这东西其实是用不了多少代码的。因为我的那个processing用不了中文注释，当时我偷懒就没写注释，所以之前发的代码没有注释，现在已经补上了。
Processing模拟阻尼谐振
近期闲来无事-稍微琢磨了一下二阶线性微分方程以及二阶系统的一些特性，不甘寂寞，觉得这个东西用Processing来展示会比较屌。随手写了个Processing程序。欢迎众位看官来围观一下。
什么？你居然还在用Windows XP？ 噢噢！对滴，我就是XP坚守党！那又怎么样？
好的，下面公布代码。从开源来，到开源去，这是我们一直奉行的...
这里有两个文件，都放在一个Processing的目录下就好
?Download dampHarmonic.pde
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | int x = 0; int y = height/2; Integrator initial; void setup() { clear(); size(800, 400); initial = new Integrator(400, 0.98, 0.2); initial.target(height/2); } int temp; void draw() { smooth(); temp = (int)initial.value; initial.update(); stroke(255); line(x, temp, x ++, (int)initial.value); if ( x >= width-80 ) { //clear(); x = 0; while(true); } line(x, (int)initial.value, width-76, (int)initial.value); rectMode(CENTER); fill(205); stroke(255, 0, 0); rect(width-50, (int)initial.value, 50, 30); delay(50); stroke(0); line(x, temp, width-76, temp); } void Delay(int ms) { try { Thread.sleep(ms); } catch(Exception e){} } |
?Download Integrator.pde
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | class Integrator { final float DAMPING = 0.5f; final float ATTRACTION = 0.2f; float value; float vel; float accel; float force; float mass = 1; float damping = DAMPING; float attraction = ATTRACTION; boolean targeting; float target; Integrator() { } Integrator(float value) { this.value = value; } Integrator(float value, float damping, float attraction) { this.value = value; this.damping = damping; this.attraction = attraction; } void set(float v) { value = v; } void update() { if (targeting) { force += attraction * (target - value); } accel = force / mass; vel = (vel + accel) * damping; value += vel; force = 0; } void target(float t) { targeting = true; target = t; } void noTarget() { targeting = false; } } |
对了，突然发现，还有所谓群摆，下右图，谁能搞个出来看看吖？让大家鼓个掌！
创元素的小伙伴们，努力吧？科学的道路上从来.....（此处省略一万字）
用Processing写坦克游戏雏形—一个编程菜鸟的自娱自乐
用processing写tank游戏——编程菜鸟的自娱自乐~
嘿，大家好，我是创元素的热带企鹅~寒假时开始接触processing ，然后看到亲戚家小孩玩游戏，就萌发了用processing写个小游戏的想法。到开学初接触到面向对象编程，便不可抑止的想要写个小游戏出来练练手。断断续续边学边用两三周到现在，游戏已经有了一个雏形，便在这里分享一下~若有老鸟看到还望多多指点。
好了，先看下游戏效果。
代码包含两个类，tank和enemy。以我的理解，processing写游戏就是要在draw函数中计算显示出每一帧的画面。我的思路是先想我需要怎样的效果，然后要用到哪些变量，然后这些变量如何放置，是否处理成类。比如说我写tank游戏，tank的变量有x，y坐标，车身方向directionB，炮塔方向directionT等。再复杂一点就是tank相关的变量，如发射的炮弹的x，y坐标，这是一串数据，需要用两个数组BulletX【】，BulletY【】来储存。同样的还有tank碾压出来的一串车辙，也要用到数组，trackX【】，trackY【】，trackD【】（direction）这一堆变量统统可以处理成一个类，也就是tank。
处理完变量问题后，接下去就是各种细节和数学运算，这里主要是三角函数的运算。写类的时候我是尽量先想我在主函数中要用到什么，然后在类中写出这些方法，当然不少时候我也会想到什么写什么，不行再注释掉嘛。好了，下面上代码~
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 | class tank { int allTrackNumber = 26; //<span style="font-family: 宋体;">储存车辙树的变量</span> int strength; //<span style="font-family: 宋体;">战车生命值</span> float directionB; //<span style="font-family: 宋体;">车身方向</span> float directionT = 0; //added direction the gun turret than boddy float speed; //<span style="font-family: 宋体;">车速，每帧移动的像素</span> float bulletSpeed; //<span style="font-family: 宋体;">炮弹速度</span> float x; //<span style="font-family: 宋体;">车坐标</span> float y; float[] bx = new float[30]; float[] by = new float[30]; float[] trackX = new float[allTrackNumber]; //the track number in all float[] trackY = new float[allTrackNumber]; float[] trackD = new float[allTrackNumber]; //<span style="font-family: 宋体;">变量数组</span> int bulletNumber = 0; //<span style="font-family: 宋体;">现有子弹数</span> int trackNumber = 0; void tank(float tempX, float tempY, float d, float s, float bs, int str) { //<span style="font-family: 宋体;">对象初始化函数</span> x = tempX; y = tempY; speed = s; bulletSpeed = bs; directionB = d; strength = str; } void moveR() { //<span style="font-family: 宋体;">一堆移动的函数</span> x += speed; } void moveL() { x -= speed; } void moveD() { y += speed; } void moveU() { y -= speed; } void turnR() { directionB += speed; track(); } void turnL() { directionB -= speed; track(); } void forward() { x += speed*cos(radians(directionB)); y += speed*sin(radians(directionB)); //track! track(); } void backward() { x -= speed*cos(radians(directionB)); y -= speed*sin(radians(directionB)); track(); } void turnTurretR(){ directionT += 1; } void turnTurretL(){ directionT -= 1; } int bulletNumber() { //<span style="font-family: 宋体;">返回变量值的函数</span> return bulletNumber; } float bulletX(int i) { //to return the locations of bullets return bx[i]; } float bulletY(int i) { return by[i]; } float x() { return x; } float y() { return y; } float directionB() { return directionB; } float speed() { return speed; } float bulletSpeed() { return bulletSpeed; } int strength() { return strength; } void display() { //<span style="font-family: 宋体;">显示函数</span> for(int i = trackNumber-1;i>-1;i--){ int l1 = 44; int l2 = 26; stroke(0); strokeWeight(1.5); line(trackX[i]+l1*cos(radians(90-trackD[i])),trackY[i]-l1*sin(radians(90-trackD[i])), trackX[i]+l2*cos(radians(90-trackD[i])),trackY[i]-l2*sin(radians(90-trackD[i]))); line(trackX[i]-l1*cos(radians(90-trackD[i])),trackY[i]+l1*sin(radians(90-trackD[i])), trackX[i]-l2*cos(radians(90-trackD[i])),trackY[i]+l2*sin(radians(90-trackD[i]))); } PImage body = loadImage("tank body.png"); PImage turret = loadImage("gun turret.png"); imageMode(CENTER); pushMatrix(); //<span style="font-family: 宋体;">备份坐标系</span> //translate(x+26*cos(radians(directionB)), y+26*sin(radians(directionB))); translate(x,y); rotate(radians(180+directionB)); translate(-20,0); //<span style="font-family: 宋体;">校正炮塔旋转中心位置</span> image(body, 0, 0); translate(+20,0); rotate(radians(directionT)); translate(-20,0); image(turret,0,0); //<span style="font-family: 宋体;">显示炮塔无背景图片</span> popMatrix(); //<span style="font-family: 宋体;">还原坐标系</span> for (int i = bulletNumber - 1;i>-1;i--) { //<span style="font-family: 宋体;">根据现有炮弹数变量显示炮弹</span> bullet(bx[i], by[i], 8, directionB+directionT); if (bx[i]>width||bx[i]<0||by[i]>height||by[i]<0) { bulletNumber -= 1; } bx[i] += bulletSpeed*cos(radians(directionB+directionT)); by[i] += bulletSpeed*sin(radians(directionB+directionT)); } } void shoot() { //tank<span style="font-family: 宋体;">射击函数</span> player = minim.loadFile("fire.wav"); //<span style="font-family: 宋体;">载入炮火音效</span> player.play(); bulletNumber += 1; //<span style="font-family: 宋体;">现有炮弹数</span><span style="font-family: 'Times New Roman';">+1</span> for (int i = bulletNumber -1;i>0;i--) { //<span style="font-family: 宋体;">跟新数组的第一组变量并将原有变量向 </span> //<span style="font-family: 宋体;">后移动一组保存 </span><span style="font-family: 'Times New Roman';">(</span><span style="font-family: 宋体;">从一贪吃蛇游戏代码</span> //<span style="font-family: 宋体;">中学得的方法</span><span style="font-family: 'Times New Roman';">) </span> bx[i] = bx[i-1]; by[i] = by[i-1]; } bx[0] = x + 126*cos(radians(directionB+directionT)); by[0] = y + 126*sin(radians(directionB+directionT)); fire(x,y,directionB+directionT); } //void hitted(){ // strength -= 1; } void track(){ //<span style="font-family: 宋体;">用和炮弹同样的方法记录跟新</span><span style="font-family: 'Times New Roman';">track</span><span style="font-family: 宋体;">数</span> //<span style="font-family: 宋体;">组变量</span> if(abs(int(x/cos(radians(directionB))))%10 == 1){ trackNumber += 1; for(int i = trackNumber-1;i>0;i--){ trackX[i] = trackX[i-1]; trackY[i] = trackY[i-1]; trackD[i] = trackD[i-1]; } trackX[0] = x; trackY[0] = y; trackD[0] = directionB; if(trackNumber > allTrackNumber-1){ trackNumber -= 1; } } } void fire(float x,float y,float direction){ //<span style="font-family: 宋体;">炮口火光效果函数</span> PImage fire; fire = loadImage("fire120.80.png"); pushMatrix(); translate(x + 166*cos(radians(direction)),y + 166*sin(radians(direction))); imageMode(CENTER); rotate(radians(direction)); image(fire,0,0); popMatrix(); } } |
接下来的是还没完工的enemy类的代码，为了先测试tank是否正常，先让enemy只有一个，就是开始看到的那个蓝色的小圆~汗！
比较简单，就没用注释了。
class enemy {
int enemyNumber;
float enemyBX[] = new float[10];
float enemyBY[] = new float[10];
int enemyStrength;
int firePower; //the bullet number a enemy shoot per minute
float enemySpeed;
float enemyBulletSpeed;
float enemyX;
float enemyY;
float enemyDirection;
void enemy(int eN, int eS, int fP, float eSpeed, float eBS,float x,float y,float d) {
enemyNumber = eN;
enemyStrength = eS;
firePower = fP;
enemySpeed = eSpeed;
enemyBulletSpeed = eBS;
enemyX = x;
enemyY = y;
enemyDirection = d;
}
void hitted(){
enemyStrength -= 1;
if(enemyStrength == 0){
enemy1.enemy(1,1,1,1,1,random(0,width),random(0,height/2),90);
scores += 10;
}
}
void display(){
noStroke();
fill(94,52,234);
ellipse(enemyX,enemyY,20,20);
}
float enemyX(){
return enemyX;
}
float enemyY(){
return enemyY;
}
}
最后，是调用他们的主体程序↓
//PImage img;
import ddf.minim.*;
AudioPlayer player;
Minim minim;
PImage fire;
enemy enemy1;
tank tank1;
float gameTime = 0.0;
//int oldval = 0;
//int val = 0;
int coolDown = 20; //the limited frameCount between two shoot
int scores = 0;
void setup() {
minim = new Minim(this);
size(600, 600);
//img = loadImage("600.600.png");
enemy1 = new enemy();
enemy1.enemy(1,1,1,1,1,width/2,30,90);
tank1 = new tank();
tank1.tank(width/2, 400, 0.0, 1.0, 20.0, 3);//location,direction,speed and bulletSpeed
gameTime = millis()/1000;
}
void draw() {
background(255);
//background(img);
textSize(20);
textAlign(CENTER);
text("strength", 3*width/4, 25);
text(tank1.strength(), 3*width/4+64, 25);
text("your scores", 3*width/4, 45);
text(scores, 3*width/4+86, 45);
if ((millis()/1000-gameTime)<9.0) {
help();
}
if (keyPressed&&(key == CODED)) {
if (keyCode == RIGHT) {
tank1.moveR();
}
if (keyCode == LEFT) {
tank1.moveL();
}
if (keyCode == UP) {
tank1.moveU();
}
if (keyCode == DOWN) {
tank1.moveD();
}
}
if (keyPressed) {
if ((key == 'w')||(key == 'W')) {
tank1.forward();
}
if ((key == 's')||(key == 'S')) {
tank1.backward();
}
if ((key == 'a')||(key == 'A')) {
tank1.turnL();
}
if ((key == 'd')||(key == 'D')) {
tank1.turnR();
}
if ((key == 'q')||(key == 'Q')) {
tank1.turnTurretL();
}
if ((key == 'e')||(key == 'E')) {
tank1.turnTurretR();
}
/*if ((key == 'f')||(key == 'F')) {
val = 1;
}
else {
val = 0;
}
}
if ((val == 1)&&(oldval == 0)) {
tank1.shoot();
} */
/*if(mousePressed){
tank1.shoot();
}*/
//oldval = val;
}
if (keyPressed&&((key == 'f')||(key == 'F'))&&coolDown == 0) {
tank1.shoot();
//tank1.shoot();
coolDown = 20;
}
if (coolDown > 0) {
coolDown -= 1;
}
tank1.display();
enemy1.display();
if (tank1.strength()<=0) {
gameover();
if (keyPressed&&(key == 'r'||key == 'R')) {
restart();
}
}
//judgement for hitting
for(int i = tank1.bulletNumber()-1;i>-1;i--){
if(dist(tank1.bulletX(i),tank1.bulletY(i),enemy1.enemyX(),enemy1.enemyY())<10){
enemy1.hitted();
}
}
}
/*void keyPressed() {
if ((key == 'f')||(key == 'F')) {
tank1.shoot();
}
}*/
void bullet(float x, float y, int dd, float direction) {
ellipseMode(CENTER);
noFill();
smooth();
pushMatrix();
translate(x, y);
rotate(radians(direction));
for (int d = 1;d<dd;d++) {
stroke(255-255*d/dd);
ellipse(0, 0, 2*d, d);
}
popMatrix();
}
void help() {
textSize(16);
textAlign(LEFT);
fill(0);
String help1 = "press q,e to turn your gun turret,and f to shoot";
String help2 = "press a,d,s,w to drive your tank";
text(help1, 2, 20);
text(help2, 2, 40);
}
void gameover() {
textSize(36);
textAlign(CENTER);
text("GAME OVER", width/2, height/2);
textSize(26);
text("press r to restart", width/2, height/2-36);
}
void restart() {
tank1.tank(width/2, 400, 0.0, 1.0, 20.0, 3);
enemy1.enemy(1,1,1,1,1,width/2,30,90);
scores = 0;
}
好了，代码发完了，最后补充用到的部分图片~它们都是网上搜到后稍稍ps一下的产物，有些粗糙不堪~
tankBody
gunTurret
菜鸟当共勉，老鸟望指点。
140314