Processing 案例 | 字母在宠物小精灵上翩翩起舞

最新推荐文章于 2024-03-07 16:52:12 发布

小小酥梨

最新推荐文章于 2024-03-07 16:52:12 发布

阅读量3.8k

点赞数 8

CC 4.0 BY-SA版权

文章标签： Processing noise函数极坐标系

本文链接：https://blog.youkuaiyun.com/weixin_38937890/article/details/90634509

本文介绍了如何使用Processing实现字母在精灵形象上动态舞动的效果，基于大佬的Circular Hello Curves作品，详细解析了代码流程，包括构造函数、更新和显示方法，并展示了拓展案例Broken Heart，让字母在心形上变化。文章还提出了进一步的拓展思路，如泪汪汪的眼睛和更多形状的扭曲效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

最近听见一种说法：“雷神”分为两种，一种存在于漫威宇宙，一种存在于宝可梦宇宙。前者身形高大，能抵挡一切病毒、辐射和毒气攻击，手持“雷神之锤”还可操纵雷电风暴天气。后者是一只黄皮电耗子，体重超标，容易感冒，疑似靠脸吃饭，放电方式成迷。

最近大家肯定都被下面这个靠脸吃饭的黄皮耗子萌到了吧！
在这里插入图片描述
是滴，这就是最近大火的电影《大侦探皮卡丘》里面的那一只，让人不禁感叹：原来你是这样的皮卡丘。

但今天我们的主角不是皮卡丘。大家都知道这部电影是改编自游戏《精灵宝可梦》，里面有各种各样的精灵，而皮卡丘只是其中一只。今天我们的主角是一只比较特殊的精灵——百变怪。
在这里插入图片描述
这次它站c位的原因不是它有变成任何精灵这种无与伦比的能力，而是它碰巧出现在了下面的这个作品中。

观察作品，可以发现一个个字母在看上去好像在这只黑黑的百变怪身上有规律的跳舞，很有律动感。

这件作品Circular Hello Curves是大佬Vamoss用P5.js写的，我用Processing实现了相同的效果。

在讲解完这个作品后，我会给大家看看我在次基础上进行的拓展——Broken Heart，大家可以想一想到底是看见可什么伤心的消息，才让一颗漂亮的心扭曲成如此模样？
在这里插入图片描述
心急的同学可以看看在线效果Broken Heart。

原作品：Circular Hello Curves

现在我们就来介绍如何实现Circular Hello Curves。

主流程

第一步我们来看一下代码的主要流程。首先我们声明一个类型为Shape的全局变量，这个就是百变怪和字母的混合体。然后在setup函数对其进行声明，传入的参数分别是这个混合体中心的坐标和需要绘制的文字内容。接下在draw函数中对这个混合体不断得进行刷新和绘制。最后监听鼠标移动事件，在鼠标进行移动的时候对字体进行旋转。

Shape s;
void setup() {
   
   
  size(600, 600);
  s = new Shape(width / 2, height /2, 100, "Circular Hello Curves");
}  

void draw() {
   
   
  background(255);
  s.update();
  s.display();
}

void mouseMoved() {
   
   
  s.rotateText();
}

class Shape{
   
   }

构造函数

第二步我们来看看Shape对象的构造函数，看一看这个混合体由什么构成，需要初始化什么东西。

分析下面的构造函数我们可以得到如下的发现。

百变怪是由一系列点围成的，每一个点由它的极坐标表示，而它所在的极坐标系是以Shape的x，y为坐标原点的。用一个PVector存储每一个点，其中x维度代表的是该点的方向，y维度代表的是该点的长度。初始化的时候在 $2\pi)$ 的范围内给每一个点设置一个方向。

然后给每一个字符分配一个PVector，用来存储它的极坐标以及它旋转的角度，其中x维度代表的是方向，y维度代表的是长度，z维度是旋转的角度。初始化的时候只用初始化每一个字符的方向。假设该字符所占用的弧长近似等于它的宽度，根据弧度制角度的计算公式，可以计算出它对应的夹角，从而依次计算每个字符的方向。

  Shape(float _x, float _y, float _r, String _text) {
   
   
    x = _x;
    y = _y;
    r = _r; 
    text = _text;

	//初始化构成百变怪的点。
    points = new ArrayList();
    for (int i = 0; i < SEGMENT; i++) {
   
   
      float theta = map(i, 0, SEGMENT - 1, 0, TAU);
      
      //初始化每一个的方向
      points.ad