互动媒体

《代码本色》 结合牛顿力学 习作

第0章

随机游走+柏林噪声

参考0-1、0-6

0-1

0-6

代码：

class Walker{

  float x;

  float y;

  Walker(){

    x = 1;

    y = 1;

  }

  void step(){

    float stepx = int(random(3))-1;

    float stepy = int(random(3))-1;

    x += stepx;

    y += stepy;

  }

}

Walker w;

void setup(){

  size(600, 300, P3D);

  background(0);

  fill(255, 128);

  noStroke();

  //lights();

}

float t = 0;

void draw(){

  ++t;

  w = new Walker();

  w.step();

  clear();

  for(int x = 0; x<width; x += 20){

    for(int y = 0; y<height; y += 20){

      for(int z = 40; z<300; z += 20){

        float n = noise(0.02*x, 0.02*y, 0.02*(z+t));

        x += 0.1*w.x;

        y += 0.1*w.y;

        translate(x, y, -z);

        float bright = map(noise(x,y), 0, 1, 0, 255);

        fill(5+bright, n*160);

        //box(n*20);

        ellipse(2,n*20,20,20);

        translate(-x, -y, z);

      }

    }

  }

}

结果图：


思路：

定义了一个Walker类，使圆产生一定程度的偏移，随时间不断移动，运用0-6中的写法定义bright变量，让颜色的亮度也产生变化，其余是生成大小和空间前后位置随时间运用柏林噪音生成平滑变化的小圆圈。

第1章

向量

参考1-7、1-8、1-9

1-7


1-8


1-9


代码：

class Mover{

  PVector location;

  PVector velocity;

  PVector acceleration;

  float topspeed;

  float t = 0;

  Mover(){

    location = new PVector(width/2, height/2);

    velocity = new PVector(0, 0);

    acceleration = new PVector(-noise(t-1), noise(t));

    topspeed = 10;

  }

  void update(){

    t+=1;

    if(t>175) t = 0;

    acceleration.add(PVector.random2D());

    acceleration.mult(random(2));

    velocity.add(acceleration);

    velocity.limit(topspeed);

    location.add(velocity);

  }

  void display(){

    stroke(0);

    fill(175-t);

    ellipse(location.x, location.y, 16, 16);

  }

  void checkEdges(){

    if(location.x>width){

      location.x = 0;

    }else if(location.x<0){

      location.x = width;

    }

    if(location.y>height){

      location.y = 0;

    }else if(location.y<0){

      location.y = height;

    }

  }

}

Mover m;

void setup(){

  size(200,200);

  smooth();

  m = new Mover();

}

void draw(){

  m.update();

  m.display();

  m.checkEdges();

}

结果图：


思路：

1-8、1-9代码大致相同，在1-8的基础上修改加速度acceleration的初值，由noise()柏林噪音赋值，添加上1-9修改加速度随机方向的代码。由于代码最后会出现由小圆球组成的乱线，难以分辨，所以修改了颜色，随时间变化。


第2章

力

参考2-1、2-2、2-3、2-4

2-1


2-2


2-3


2-4


代码：

class Mover{

  PVector location;

  PVector velocity;

  PVector acceleration;

  float mass;

  Mover(){

    location = new PVector(30, 30);

    velocity = new PVector(0, 0);

    acceleration = new PVector(0, 0);

    mass = 1;

  }

  void setLocation(PVector location){

    this.location = location;

  }

  void setVeciloty(PVector veciloty){

    this.velocity = veciloty;

  }

  void setMass(float mass){

    this.mass = mass;

  }

  void applyForce(PVector force){

    PVector f = PVector.div(force,mass);

    acceleration.add(f);

  }

  void update(){

    velocity.add(acceleration);

    location.add(velocity);

    acceleration.mult(0);

  }

  void display(){

    stroke(0);

    fill(175);

    ellipse(location.x, location.y, mass*16, mass*16);

  }

  void checkEdges(){

    if(location.x>width){

      location.x = width;

      velocity.x *= -1;

    } else if(location.x<0){

      location.x = 0;

      velocity.x *= -1;

    }

    if(location.y>height){

      velocity.y *= -1;

      location.y = height;

    }

  }

}

Mover[] movers = new Mover[100];

void setup(){

  size(600,300);

  for(int i = 0; i<movers.length; i++){

    movers[i] = new Mover();

    movers[i].setMass(random(0.1,5));

  }

}

void draw(){

  background(255);

  for(int i = 0; i<movers.length; i++){

    PVector wind = new PVector(0.01, 0);

    float m = movers[i].mass;

    PVector gravity = new PVector(0, 0.1*m);

    float normal = 1;

    float c = 0.01;

    float frictionMag = c*normal;

    PVector friction = movers[i].velocity.get();

    //friction.div(movers[i].mass);

    friction.mult(-1);

    friction.normalize();

    friction.mult(frictionMag);

    movers[i].applyForce(friction);

    movers[i].applyForce(wind);

    movers[i].applyForce(gravity);

    movers[i].update();

    movers[i].display();

    movers[i].checkEdges();

  }

}

结果图：


思路：

2-1、2-2、2-3、2-4其实是一步步完善的代码，将它们结合起来就能得到一个较为真实的小球在受重力和风力作用下的运动状态，这里代码稍微不同的是，书上的代码给小球赋重力是通过构造方法而我是添加了set函数


第3章

震荡

参考3-4、3-10

3-4


3-10


代码：

float theta = 0;

float r = 0;

float s = 5;

Pendulm p;

class Pendulm{

  PVector location;

  PVector origin;

  float r;

  float angle;

  float aVelocity;

  float aAcceleration;

  float damping;

  Pendulm(PVector origin_,float r_){

    origin = origin_.get();

    location = new PVector();

    r = r_;

    angle = PI/4;

    aVelocity = 0.0;

    aAcceleration = 0.0;

    damping = 0.995;

  }

  void setR(float x){

    r = x;

  }

  void go(){

    update();

    display();

  }

  void update(){

    float gravity = 0;

    aAcceleration = (-1*gravity/r)*sin(angle);

    aVelocity += aAcceleration;

    angle += aVelocity;

    aVelocity += damping;

  }

  void display(){

    location.set(r*sin(angle),r*cos(angle),0);

    location.add(origin);

    stroke(0);

    //line(origin.x,origin.y,location.x,location.y);

    fill(175);

    ellipse(location.x, location.y, 8,8);

  }

}

void setup(){

  p = new Pendulm(new PVector(width/2, height/2),r);

  size(400, 400);

  background(0);

  smooth();

}

void love(){

  pushMatrix();

  fill(225,0,0);

  noStroke();

  ellipseMode(CENTER);

  pushMatrix();

  rotate(-QUARTER_PI);

  translate(-s/2.0, 0);

  ellipse(0, 0, s, s);

  rect(-s/2.0, 0, s, s);

  popMatrix();

  rotate(QUARTER_PI);

  translate(s/2.0, 0);

  ellipse(0, 0, s, s);

  popMatrix();

}

void wiredcicle1(){

  for(float t = 0, theta1 = 0; t<r; t += 0.5,theta1 += 0.5){

    float tx = t*cos(theta1);

    float ty = t*sin(theta1);

    noStroke();

    fill(0,0,225);

    ellipse(tx+width/2, ty+height/2, 4, 4);

  }

}

void wiredcicle2(){

  for(float t = 0, theta1 = 0; t<r; t += 1,theta1 += 1){

    float tx = t*cos(theta1+10);

    float ty = t*sin(theta1+10);

    noStroke();

    fill(240,120,0);

    ellipse(tx+width/2, ty+height/2, 5, 5);

  }

}

void wiredcicle3(){

  for(float t = 0, theta1 = 0; t<r; t += 2,theta1 += 2){

    float tx = t*cos(theta1+50);

    float ty = t*sin(theta1+50);

    noStroke();

    fill(255);

    ellipse(tx+width/2, ty+height/2, 6, 6);

  }

}

void draw(){

  clear();

  p.setR(1.2*r+10);

  p.go();

  s+=0.01;

  wiredcicle1();

  wiredcicle2();

  wiredcicle3();

  float x = r*cos(theta);

  float y = r*sin(theta);

  //noStroke();

  //fill(255);

  //ellipse(x+width/2, y+height/2, 4, 4);

  translate(width/2+x,height/2+y-0.5*s+8);

  rotate(theta/10);

  love();

  theta += 0.05;

  r += 0.05;

}

结果图：


思路：

这里应用了3-4的变形，即3-4下面的思考题，螺旋形生成图中的蓝黄白点，只需要将theta变大，就不会出现连续的线，而外围旋转的灰点则是应用了钟摆


第4章

粒子系统

参考4-1、4-3

4-1


4-3


代码：

class Particle {

  PVector location;

  PVector velocity;

  PVector acceleration;

  float lifespan;

  Particle(PVector l) {

    // The acceleration

    acceleration = new PVector(0, 0.05);

    // circel's x and y ==> range

    velocity = new PVector(random(-1, 1), random(-2, 0));

    // apawn's position

    location = l.copy();

    // the circle life time

    lifespan = 255.0;

  }

  void run() {

    update();

    display();

  }

  void update() {

    velocity.add(acceleration);

    location.add(velocity);

    lifespan-=1.0;

  }

  boolean isDead() {

    if (lifespan <= 0) {

      return true;

    } else {

      return false;

    }

  }

  void display() {

    // border

    stroke(0, lifespan);

    // border's weight

    strokeWeight(1);

    float r = random(0,255);

    float g = random(0,255);

    float b = random(0,255);

    // random the circle's color

    fill(r,g,b, lifespan);

    // draw circle

    ellipse(location.x, location.y, 3, 3);

  }

}

class ParticleSystem {

  ArrayList<Particle> particles;

  PVector origin;

  ParticleSystem(PVector position) {

    origin = position.copy();

    particles = new ArrayList<Particle>();

  }

  void addParticle() {

    particles.add(new Particle(origin));

  }

  void run() {

    for (int i = particles.size()-1; i >= 0; i--) {

      Particle p = particles.get(i);

      p.run();

      if (p.isDead()) {

        particles.remove(i);

      }

    }

  }

}

ParticleSystem ps;

void setup() {

  size(640, 360);

  ps = new ParticleSystem(new PVector(width/2, 50));

}

void draw() {

  background(0);

  ps.addParticle();

  ps.run();

}

结果图：


思路：

粒子类和粒子系统类基本都是按照书上的代码来的，改动不大，加上了随机的粒子颜色，让粒子看起来更加好看了一点

39

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,451评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,172评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,782评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,709评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,733评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,578评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,320评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,241评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,686评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,715评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,336评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2赞 355

推荐阅读更多精彩内容