ProcessingJoy ——爱如烟尘【JAVA】

刺骨的言语ヽ痛彻心扉 2022-12-31 14:28 145阅读 0赞

### 效果图 ###

![20201230111227192.gif][]

### Heart.pde ###

class Heart{
      float seed = random(10,1000);
      float offset = random(TWO_PI);
      
      float ff = random(0.5,2.5);
      float sw = random(0.8,1.8);
      
      float part = 0.1+0.5*pow(random(1),2.0);
      float rf = random(0.5,1.15);
      
      float d = random(10,120);
      int m = 500; ///< 500 个点
      OpenSimplexNoise noise = new OpenSimplexNoise(); ///< 噪声，用于扰动心形
      
      float R = 150;
      float xh(float p){
        return R/15.0*16*pow(sin(p),3);
      }
      float yh(float p){
        return  R/15.0*(-13*cos(p) +5*cos(2*p) + 2*cos(3*p) + cos(4*p));
      }
    
      void show(float q){
        for(int i=0;i<m;i++){
          
          float p = 1.0*i/m;
          float theta = offset + part*TWO_PI*i/m;
          
          float rad = 1.3f;
          int per = 2;
          
          float xx = rf*xh(theta) + pow(p,3.0f)*d*(float)noise.eval(seed + rad*cos(TWO_PI*(per*p-q)),rad*sin(TWO_PI*(per*p-q)));
          float yy = rf*yh(theta) + pow(p,3.0f)*d*(float)noise.eval(2*seed + rad*cos(TWO_PI*(per*p-q)),rad*sin(TWO_PI*(per*p-q)));
          
          strokeWeight(sw);
          stroke(255,ff*18*sin(PI*p));
          
          point(xx,yy);
        }
      }
    }

其中关键的代码（如下所示）代表的公式可以绘制出心形（将 360° 分成了 m 份，然后每个位置放置一个点，只要划分的足够细，就可以看起来像是一个完整的 ♥）

float R = 150;
      float xh(float p){
        return R/15.0*16*pow(sin(p),3);
      }
      float yh(float p){
        return  R/15.0*(-13*cos(p) +5*cos(2*p) + 2*cos(3*p) + cos(4*p));
      }

对应函数示意图如下所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ_size_16_color_FFFFFF_t_70][]

然后通过叠加 Simplex 噪声的扰动，我们就可以模拟出烟尘的效果。

### HeartSmoke.pde（主入口） ###

接着我们构造多层的心形烟尘，并将它们叠加起来

float t, c;
    
    //
    
    int samplesPerFrame = 5;
    int numFrames = 100;        
    float shutterAngle = .6;
    
    int n = 250; ///< 250 层 ♥
    
    Heart[] array = new Heart[n];
    
    void setup(){
      size(600,600,P3D);
    
      for(int i=0;i<n;i++){
        array[i] = new Heart();
      }
    }
    
    void show(){
      background(0);
      push();
      translate(width/2,height/2);
      
      for(int i=0;i<n;i++){
        array[i].show(t);
      }
      
      pop();
    }
    
    void draw() {
    
        t = mouseX*1.0/width;
        c = mouseY*1.0/height;
        if (mousePressed)
          println(c);
          
        frameCount = 0;
        show();
    
        /// @note 保存序列 gif，后期可用 gifsicle 合成真正的 gif
        // saveFrame("fr###.gif");
    }
    
    void keyPressed(){
      if(key == 'r' || key == 'R'){
        recording = !recording;
        println("recording:" + recording);
      }
    }

最后附上 OpenSimplexNoise.pde（由于代码过长，为了不影响阅读，所以上传到百度网盘），关于噪声的详解可以看我之前写的一篇[文章 ][Link 1]

> 链接：https://pan.baidu.com/s/1uKqedakxkcjx3xrqZzAGDA  
> 提取码：u8ru  
>

### 如何合成 GIF ###

gifsicle 下载链接：https://www.lcdf.org/gifsicle/

下载安装完成之后，打开命令行工具，执行以下命令（默认各帧的命名模式为 fr\*.gif） ，最终生成 anim.gif，各帧的延迟为 10 / 100 s

gifsicle --delay=10 --loop fr*.gif > anim.gif

gifsicle 支持的更加复杂的命令行请参见

Usage: gifsicle [OPTION | FILE | FRAME]...
    
    Mode options: at most one, before any filenames.
      -m, --merge                   Merge mode: combine inputs, write stdout.
      -b, --batch                   Batch mode: modify inputs, write back to
                                    same filenames.
      -e, --explode                 Explode mode: write N files for each input,
                                    one per frame, to 'input.frame-number'.
      -E, --explode-by-name         Explode mode, but write 'input.name'.
    
    General options: Also --no-OPTION for info and verbose.
      -I, --info                    Print info about input GIFs. Two -I's means
                                    normal output is not suppressed.
          --color-info, --cinfo     --info plus colormap details.
          --extension-info, --xinfo --info plus extension details.
          --size-info, --sinfo      --info plus compression information.
      -V, --verbose                 Prints progress information.
      -h, --help                    Print this message and exit.
          --version                 Print version number and exit.
      -o, --output FILE             Write output to FILE.
      -w, --no-warnings             Don't report warnings.
          --no-ignore-errors        Quit on very erroneous input GIFs.
          --conserve-memory         Conserve memory at the expense of speed.
          --multifile               Support concatenated GIF files.
    
    Frame selections:               #num, #num1-num2, #num1-, #name
    
    Frame change options:
      --delete FRAMES               Delete FRAMES from input.
      --insert-before FRAME GIFS    Insert GIFS before FRAMES in input.
      --append GIFS                 Append GIFS to input.
      --replace FRAMES GIFS         Replace FRAMES with GIFS in input.
      --done                        Done with frame changes.
    
    Image options: Also --no-OPTION and --same-OPTION.
      -B, --background COL          Make COL the background color.
          --crop X,Y+WxH, --crop X,Y-X2,Y2
                                    Crop the image.
          --crop-transparency       Crop transparent borders off the image.
          --flip-horizontal, --flip-vertical
                                    Flip the image.
      -i, --interlace               Turn on interlacing.
      -S, --logical-screen WxH      Set logical screen to WxH.
      -p, --position X,Y            Set frame position to (X,Y).
          --rotate-90, --rotate-180, --rotate-270, --no-rotate
                                    Rotate the image.
      -t, --transparent COL         Make COL transparent.
    
    Extension options:
          --app-extension N D       Add an app extension named N with data D.
      -c, --comment TEXT            Add a comment before the next frame.
          --extension N D           Add an extension number N with data D.
      -n, --name TEXT               Set next frame's name.
          --no-comments, --no-names, --no-extensions
                                    Remove comments (names, extensions) from input.
    Animation options: Also --no-OPTION and --same-OPTION.
      -d, --delay TIME              Set frame delay to TIME (in 1/100sec).
      -D, --disposal METHOD         Set frame disposal to METHOD.
      -l, --loopcount[=N]           Set loop extension to N (default forever).
      -O, --optimize[=LEVEL]        Optimize output GIFs.
      -U, --unoptimize              Unoptimize input GIFs.
      -j, --threads[=THREADS]       Use multiple threads to improve speed.
    
    Whole-GIF options: Also --no-OPTION.
          --careful                 Write larger GIFs that avoid bugs in other
                                    programs.
          --change-color COL1 COL2  Change COL1 to COL2 throughout.
      -k, --colors N                Reduce the number of colors to N.
          --color-method METHOD     Set method for choosing reduced colors.
      -f, --dither                  Dither image after changing colormap.
          --gamma G                 Set gamma for color reduction [2.2].
          --lossy[=LOSSINESS]       Alter image colors to shrink output file size
                                    at the cost of artifacts and noise.
          --resize WxH              Resize the output GIF to WxH.
          --resize-width W          Resize to width W and proportional height.
          --resize-height H         Resize to height H and proportional width.
          --resize-fit WxH          Resize if necessary to fit within WxH.
          --scale XFACTOR[xYFACTOR] Scale the output GIF by XFACTORxYFACTOR.
          --resize-method METHOD    Set resizing method.
          --resize-colors N         Resize can add new colors up to N.
          --transform-colormap CMD  Transform each output colormap by shell CMD.
          --use-colormap CMAP       Set output GIF's colormap to CMAP, which can
                                    be 'web', 'gray', 'bw', or a GIF file.
    
    Report bugs to <ekohler@gmail.com>.
    Too much information? Try 'gifsicle --help | more'.

### 螺旋线效果 ###

如果对开头的心形公式进行修改，还可以构造出螺旋线的效果

![20201230125529943.gif][]

具体代码为(它代码由于为了实现复杂的效果添加了一些多余的代码，实际上构造螺旋线的核心变量就是 p, theta, r, x, y)

for(int k=0;k<K;k++){
        for(int i=1;i<n;i++){
          float p = (1.0*(i+0*t)/n)%1; ///< [0., 1.]
          
          float pp = pow(p,0.5);
          
          float c1 = 0.1+ease(constrain(map(p,0.85,1,1,0),0,1),2.0);
          float c2 = ease(constrain(map(p,0,.02,0,1),0,1),2.0);
          
          float theta = turns*TWO_PI*pow(0.1+0.9*pp,0.5);
    
          float r = 0.4*width*pow(p,0.5); ///< 240.*pow(p, .5)
          
          float x = r*cos(theta);
          
          float y = r*sin(theta)+(0.25*width-0.25*width*pow(0.05+0.95*p,0.4+0.03*cos(TWO_PI*t))); 
    
          
          float l = 25*c1*c2*constrain(map(y,-height/2,height/2-100,2.0,0),0.12,1);
          
          float part = 20.0;
          float dx = l*(float)noise.eval(12+0.79*k+rad*cos(TWO_PI*(part*p-t)),rad*sin(TWO_PI*(part*p-t)),30*p);
          float dy = l*(float)noise.eval(92+0.79*k+rad*cos(TWO_PI*(part*p-t)),rad*sin(TWO_PI*(part*p-t)),30*p);
    
          
          stroke(255*c1,30*c1);
          point(x+dx,y+dy);
        }
      }

核心变量构造的函数示意图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ_size_16_color_FFFFFF_t_70 1][]

###  ###

[20201230111227192.gif]: /images/20221120/fce60a1f0656492db5ead5095da49201.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201230111726578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ==,size_16,color_FFFFFF,t_70
[Link 1]: https://panda1234lee.blog.csdn.net/article/details/52085375
[20201230125529943.gif]: https://img-blog.csdnimg.cn/20201230125529943.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201230124848280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ==,size_16,color_FFFFFF,t_70