互动媒体技术《代码本色》

最新推荐文章于 2020-09-01 11:23:44 发布
最新推荐文章于 2020-09-01 11:23:44 发布
阅读量238 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44209391/article/details/103549209
版权

《代码本色》——Processing编程

0随机游走

效果图

在这里插入图片描述

理论

random（）函数生成“伪随机数”
Perlin噪声的noise（）函数生成随机数

关键代码

//使用random（）函数，随机改变生成圆的颜色与大小
void display() {
    int a = int(random(1,15));
     int r = int(random(0,255));
     int g = int(random(0,255));
     int b = int(random(0,255));
    stroke(r,g,b);
    ellipse(x,y,a,a);
  }

//随机游走
 
  void step() {
  x = map(noise(tx),0,1,0,width);
  y = map(noise(ty),0,1,0,height);
  
  tx += 0.01;
  ty += 0.01;
  }

1向量

效果图

在这里插入图片描述

理论

向量通常被绘制为一个带箭头的线段，线段的长度代表向量的大小，箭头的方向代表向量的方向。
模拟生态系统，实现一组物体同时向鼠标加速运动。
运用到了：向量加法
速度变化依靠加速度的加法运算： velocity.add(acceleration);
位置的变化运用了速度的加法运算： position.add(velocity);
加速度数值运用了向量减法： acceleration = PVector.sub(mouse,position);

关键代码

应用示例1.11并进行了修改与拓展

//边缘检测
void checkEdges(){
  
    if(position.x>width){
       position.x=0;
    }else if(position.x<0){
        position.x = width;
    }
    if(position.y>height){
       position.y=0;
    }else if(position.y<0){
        position.y = height;
    }
  }

运动数值：

//加速度数值
  PVector mouse = new PVector(mouseX,mouseY);
    acceleration = PVector.sub(mouse,position);
    acceleration.normalize();
    acceleration.mult(0.5);
//加速度改变速度，速度改变位置    
    velocity.add(acceleration);
    velocity.limit(topspeed);
    position.add(velocity);

闪烁的圆圈

 void display() {
    int r = int(random(0,255));
    int g = int(random(0,255));
    int b = int(random(0,255));
    stroke(0);
    strokeWeight(2);
    fill(r,g,b);
    ellipse(position.x,position.y,18,18);
  }

2力

效果图

在这里插入图片描述

理论

力是一个向量，它使有质量的物体产生加速。
牛顿三大定律（从Processing角度）：
1、在平衡状态下，对象的速度向量始终是常量。
2、力总是成双成对的出现，且大小相等、方向相反。
3、在模拟物体之间引力时，需要同时计算作用力和反作用力。

实验代码

给了5个质量不同的小球，通过改变小球的半径，体现小球的大小，越大的小球质量响应越大。赋予了重力和风力。其中重力是每个小球运动速度不同的主要原因。

class Mover {

  PVector position;
  PVector velocity;
  PVector acceleration;
  float mass;

  Mover(float m) {
    position = new PVector(0,0);
    velocity = new PVector(0,0);
    acceleration = new PVector(0,0);
    mass = m;
  }
  
  void applyForce(PVector force) {
    PVector f = PVector.div(force,mass);
    acceleration.add(f);
  }
  
  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    acceleration.mult(0);
  }

  void display() {
    stroke(0);
    strokeWeight(2);
    fill(mass*23+23,mass*30+22,mass*8+82);
    ellipse(position.x,position.y,mass*16,mass*16);
  }

  void checkEdges() {

    if (position.x > width) {
      position.x = width;
      velocity.x *= -1;
    } else if (position.x < 0) {
      velocity.x *= -1;
      position.x = 0;
    }

    if (position.y > height) {
      velocity.y *= -1;
      position.y = height;
    }

  }

}

Mover[] movers = new Mover[5];

void setup() {
  size(640,480);
  for(int i = 0;i < movers.length; i++){
  movers[i] = new Mover(random(1,6));
  }
}

void draw() {
  background(255);
for(int i=0;i<movers.length;i++){
  PVector wind = new PVector(0.01,0);
  PVector gravity = new PVector(0,0.1*movers[i].mass);
  movers[i].applyForce(wind);
  movers[i].applyForce(gravity);


  movers[i].update();
  movers[i].display();
  movers[i].checkEdges();
}
}

3振荡

效果图

改变球的半径，且将球的重力与球的半径相关联: gravity = 0.01*ballr
不同大小的球的不同：
在这里插入图片描述
在这里插入图片描述

理论

进入粒子系统，运用三角函数。
rotate（）函数用于旋转物体
在这里插入图片描述
在这里插入图片描述
运用三角函数与力来模拟钟摆：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

关键代码

//加速度、速度、角度变化
 float gravity = 0.01*ballr;                              
      aAcceleration = (-1 * gravity / r) * sin(angle);  
      aVelocity += aAcceleration;                 
      aVelocity *= damping;                       
      angle += aVelocity;

停止摇动判断：

void stopDragging() {
    if (dragging) {
      aVelocity = 0; 
      dragging = false;
    }
  }

图形绘制：

 void display() {
    position.set(r*sin(angle), r*cos(angle), 0);         
    position.add(origin);                            
    stroke(0);
    strokeWeight(2);
    // Draw the arm
    line(origin.x, origin.y, position.x, position.y);
    ellipseMode(CENTER);
    fill(175);
    if (dragging) fill(0);
    // Draw the ball
    ellipse(position.x, position.y, ballr, ballr);
  }

4粒子系统

效果图

在这里插入图片描述

理论

"粒子系统"就是由一系列独立对象组成的集合。
创建单个粒子系统的类：PracticeSystem
创建一个ArrayList存放多个粒子系统：ArrayList particles;
点击鼠标即可新加一个粒子系统：

void mousePressed() {
  systems.add(new ParticleSystem(1,new PVector(mouseX,mouseY)));
}

关键代码

对4.4的示例进行了拓展，主要修改了单个粒子的形状、使其颜色并不一样，形状也有所变换，且能闪烁

void display() {
    stroke(0, lifespan);
    strokeWeight(1);

    float r = random(0,255);

    float g = random(0,255);

    float b = random(0,255);

    fill(r,g,b, lifespan);

   // ellipse(position.x,position.y,12,12);
      float k=random(1,10);

    line(position.x-k,position.y,position.x+k,position.y);

    ellipse(position.x+k,position.y,8,8);

    ellipse(position.x-k,position.y,8,8);   

    line(position.x,position.y-k,position.x,position.y+k);

    ellipse(position.x,position.y+k,8,8);

    ellipse(position.x,position.y-k,8,8);

  }

完整代码为：

class Particle {
  PVector position;
  PVector velocity;
  PVector acceleration;
  float lifespan;

  Particle(PVector l) {
    acceleration = new PVector(0,0.05);
    velocity = new PVector(random(-1,1),random(-2,0));
    position = l.get();
    lifespan = 255;
  }

  void run() {
    update();
    display();
  }

  // Method to update position
  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 2.0;
  }

  // Method to display
  void display() {
    stroke(0, lifespan);
    strokeWeight(1);

    float r = random(0,255);

    float g = random(0,255);

    float b = random(0,255);

    fill(r,g,b, lifespan);

   // ellipse(position.x,position.y,12,12);
      float k=random(1,10);

    line(position.x-k,position.y,position.x+k,position.y);

    ellipse(position.x+k,position.y,8,8);

    ellipse(position.x-k,position.y,8,8);   

    line(position.x,position.y-k,position.x,position.y+k);

    ellipse(position.x,position.y+k,8,8);

    ellipse(position.x,position.y-k,8,8);

  }
  
  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }
}

class ParticleSystem {

  ArrayList<Particle> particles;    // An arraylist for all the particles
  PVector origin;        // An origin point for where particles are birthed

  ParticleSystem(int num, PVector v) {
    particles = new ArrayList<Particle>();   // Initialize the arraylist
    origin = v.get();                        // Store the origin point
    for (int i = 0; i < num; i++) {
      particles.add(new Particle(origin));    // Add "num" amount of particles to the arraylist
    }
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }

  void addParticle() {
    particles.add(new Particle(origin));
  }

  // A method to test if the particle system still has particles
  boolean dead() {
    if (particles.isEmpty()) {
      return true;
    } 
    else {
      return false;
    }
  }
}

ArrayList<ParticleSystem> systems;

void setup() {
  size(640,480);
  systems = new ArrayList<ParticleSystem>();
}

void draw() {
  background(230, 230, 250);
  for (ParticleSystem ps: systems) {
    ps.run();
    ps.addParticle(); 
  }
  
  fill(0);
}

void mousePressed() {
  systems.add(new ParticleSystem(1,new PVector(mouseX,mouseY)));
}
weixin_44209391
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FISH&FOOD——代码本色
qq_40301536的博客
05-06 465
目录游戏内容1.开始界面2.过度场景3.游戏场景功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 每次到了做作业的时候，...
代码本色--前五章编程习作（一）（processing）
qq_44647378的博客
01-04 588
代码本色–前五章编程习作（processing） 本文章主要是基于《代码本色》这本书的内容编写的拓展程序，使用语言为processing。 随机行为编程 提到随机，大家可能先想到的就是random了，日常编程需要随机数时，基本都是使用random去生成随机数，实际上random产生的随机数是服从均匀分布的，他也不是真正意义上的‘随机’数。在processing中，我们还可以产生服从正态分布的随机数...
Processing创意编程 -《代码本色》
weixin_44374653的博客
01-04 3772
Processing创意编程 -《代码本色》Introduction范例程序个人创新实现结果Chapter #1 Vectors范例程序个人创新实现结果Chapter #2 Forces范例程序个人创新实现结果Chapter #3 Oscillation范例程序个人创新实现结果Chapter #4 Systems范例程序个人创新实现结果 Introduction 范例程序 《代码本色》绪论中主要介...
《代码本色》 学习笔记
weixin_44550647的博客
01-05 312
第0章 引言 这一章的关键词是“随机”。 使用random()函数： 直接使用random(最大值)即可得到一个在0~最大值之间的随机浮点数。 void setup(){ frameRate(60); size(528,414); } void draw(){ //background(255); int r = int(random(255)); int g = in...
《代码本色》创意编程
weixin_44514166的博客
01-05 290
《代码本色》0-4章创意编程——互动媒体技术作业 1.第0章 随机游走 实现了矩形在二维空间中，朝着鼠标所在方向随机游走，颜色变化通过泊林噪声和映射噪声控制。 （1）路线的选择 设置一个[0,1]范围的随机数，根据随机数值的大小确定当前方块的走向。若随机数小于0.5，朝鼠标所在方向前进，即xdir=mouseX-x,ydir=mouseY-y;若随机数大于0.5，朝随机方向前进，利用random...
本色时代 dvbbs 7.0 sp2 修改版
12-27
总的来说，本色时代 dvbbs 7.0 SP2 修改版是一个集互动、娱乐、个性化于一体的论坛系统，其强大的功能和便捷的管理工具为运营者提供了丰富的可能性。但同时，也需要注意数据安全和系统维护，以确保论坛的稳定运行和...
wnm608_landingPage
04-11
对于视频和音频等媒体，CSS也能进行嵌入和播放控制，增强互动体验。 六、交互与动画 CSS3引入了过渡（transitions）、动画（animations）和变形（transforms）功能，为着陆页增加动态效果，提升用户体验。这些特性...
Personal-Website
03-08
3. **颜色与字体**：CSS允许定义色彩方案，通过颜色选择器或十六进制代码来设置背景色、文本色等。同时，可以控制字体家族、大小、行高和字母间距，以实现舒适且美观的文本阅读体验。 4. **动画效果**：为了增加...
renault_vertual_renewal：雷诺汽车韩国网站非官方更新
02-13
此外，CSS动画和过渡效果可能也被用来增加用户与网站的互动性，如按钮悬停效果、滚动动画等，这些都可以提高用户停留时间和满意度。 在色彩方面，CSS可以精确控制网站的颜色方案，包括背景色、文本色、链接色等。...
宠物小精灵索引
02-09
宠物小精灵索引是一个以宠物小精灵为主题的项目，可能是一个网站或者应用的源代码库，其核心技术标签为CSS，意味着这个项目在视觉设计和布局上有着深入的应用。接下来，我们将详细探讨CSS（层叠样式表）在创建这样一...
代码本色（英文版）配套程序
01-16
代码本色的英文版，程序部分，经典的processing进阶书籍，推荐购买正版书籍
代码本色+processing
J_George的博客
01-05 2392
创意编程 实验要求 参考《代码本色》0-4章节，针对每个章节，编写5个习作。要求每个习作至少参考2个案例且必须有一定拓展。 本次作业按照规定要求认真学习书上相关内容，并运行浏览学习了每一段给出的范例代码。每一个习作都至少参考2个案例并且结合自己的想法加以拓展。 代码本色 第0章 引言 在这一章中介绍了随机和噪声，在书中介绍的原理我们看的很清楚，在随机游走的过程中有两种情...
《代码本色》processing编程练习
weixin_43832884的博客
01-04 457
第0章 引言 通过构建walker类，创建两个walker对象，实现两个圆点的随机移动，以模仿笔墨的扩散。 代码如下： class Walker{ int x; int y; Walker(){ x=width/2; y=height/2; } void display(){ stroke(100,50,200); ellip...
互动媒体技术——代码本色
qq_44146105的博客
01-05 237
互动媒体技术——代码本色 参考《代码本色》的第0~4章内容及其实例程序，针对这5章分别编写1个习作（一共5个），每个习作都有不少于2个案例参考，且必须有一定的拓展，体现随机行为及牛顿运动学；代码大部分参照书上的文档以及浏览网上的创意。 第0章 引言 标题Perlin噪声生成起伏地形 Perlin噪声算法表现出了一定的自然性，因为它能生成符合自然排序（“平滑”）的伪随机 数序列。图I-5展示了Pe...
【编程书籍】《The Nature of Code》笔记 -《代码本色》6.自治智能体
归暮亭
09-01 471
转向力，流场，路径跟随，路径跟随，算法效率，优化技巧
互动媒体技术-代码本色-第1章
here_0199的博客
01-05 261
向量 1.概述 2.拓展与应用 一个简单的躲避小游戏，鼠标控制蓝色主角小球的运动，红色弹跳小球与主角发生碰撞时主角会死亡，控制主角躲避红色小球。 （1）红色弹跳小球 （2）鼠标控制小球 小球加速度：鼠标与小球位置之间向量的大小与方向决定加速度的大小与方向，使用向量减法确定加速度大小与方向，向量加法实现加速度引起的速度变化，速度引起的位置变化，改变小球位置。 Ball [] balls=new Ba...
互动媒体 代码本色
qq_46116575的博客
01-16 170
互动媒体 代码本色 代码1 随机游走 float t = 0.007; PVector p0=new PVector(0,400); void setup(){ size(800,800); color(255); smooth(); } int value =1; PVector p = new PVector(400,400); void draw(){ float sk = random(1...
《代码本色》习作实例编程
Ora_cat的博客
01-06 339
《代码本色》习作实例编程《代码本色》习作实例编程一、第0章：随机游走类的概率分布二、第1章：随机游走类的概率分布 《代码本色》习作实例编程 一、第0章：随机游走类的概率分布 概况：参考0.1-0.3的示例，并结合练习0.1,练习0.3的要求，实现的可设定向鼠标移动或向屏幕右下移动趋势的Walker类。 实现：根据0.3节的内容，我们可以使用random(1)生成范围为（0,1）的浮点数r，然后通过...
《代码本色》的应用
qq_43387305的博客
12-19 222
习作一 习作二 参考案例：1-1，1-6 实现小球在框内运动，到达边框时出现在别的地方
悟透JavaScript
06-19
数据沉静而文静，总试图保持自己的本色；而代码则活泼而有活力，不断尝试改变世界。这种数据和代码的关系，类似于物质能量之间的关系。 数据拥有惯性，如果没有代码的推动，她们会一直保持原有的状态。代码则如同...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值