介绍一个使用门槛很低的绘图平台 p5 js。

wuyudi

此帖是给高中时的我一个交代。当时看到了向老师所著分形 50 例，心有余力不足。经历了几年后我力足了，故开此帖。

本帖代码都可以贴到 https://editor.p5js.org/ 左边的编辑器里，点左上角播放。右边就能出图。
相关入门在 https://p5js.org/zh-Hans/get-started/ ，不过直接对着下面的模板改也可以。

wuyudi

上图，这图渲染仅 2s. 画板则需要很久。

下载 (56.3 KB)

2023-3-31 00:24

1. class Complex {
   
2.   // By chatGPT
   
3.   constructor(real, imaginary) {
   
4.     this.real = real;
   
5.     this.imaginary = imaginary || 0;
   
6.   }
   
7. 
   
8.   add(other) {
   
9.     return new Complex(
   
10.       this.real + other.real,
    
11.       this.imaginary + other.imaginary
    
12.     );
    
13.   }
    
14. 
    
15.   sub(other) {
    
16.     return new Complex(
    
17.       this.real - other.real,
    
18.       this.imaginary - other.imaginary
    
19.     );
    
20.   }
    
21. 
    
22.   mul(other) {
    
23.     const real = this.real * other.real - this.imaginary * other.imaginary;
    
24.     const imaginary = this.real * other.imaginary + this.imaginary * other.real;
    
25.     return new Complex(real, imaginary);
    
26.   }
    
27. 
    
28.   div(other) {
    
29.     const denominator = pow(other.real, 2) + pow(other.imaginary, 2);
    
30.     const real =
    
31.       (this.real * other.real + this.imaginary * other.imaginary) / denominator;
    
32.     const imaginary =
    
33.       (this.imaginary * other.real - this.real * other.imaginary) / denominator;
    
34.     return new Complex(real, imaginary);
    
35.   }
    
36.   eq(other) {
    
37.     return this.imaginary === other.imaginary && this.real === other.real;
    
38.   }
    
39.   norm() {
    
40.     return sqrt(pow(this.real, 2) + pow(this.imaginary, 2));
    
41.   }
    
42. }
    
43. function cpx(x, y) {
    
44.   return new Complex(x, y);
    
45. }
    
46. let img;
    
47. const q0 = 1.45; // ,诱捕半径为 q0
    
48. function setup() {
    
49.   createCanvas(windowHeight, windowHeight);
    
50.   img = createImage(windowHeight, windowHeight);
    
51.   img.loadPixels();
    
52.   noLoop();
    
53. }
    
54. 
    
55. /**
    
56. * @param {p5.Vector} z
    
57. * s
    
58. */
    
59. function getLastColor(z, s) {
    
60.   // <-- c -> z
    
61.   let c = cpx(0.5, -0.5); // <-- z -> c
    
62.   for (let index = 0; index < 8; index++) {
    
63.     const newz = c.add(z.mul(z));
    
64.     if (newz.eq(z) || sq(newz.real) + sq(newz.imaginary) > 4) {
    
65.       return s;
    
66.     }
    
67.     z = newz;
    
68.     s = min(s, 3 * sqrt(abs(z.mul(z).real) + abs(z.mul(z).imaginary)));
    
69.   }
    
70.   return s;
    
71. }
    
72. 
    
73. function plot() {
    
74.   for (let i = 0; i < img.width; i++) {
    
75.     for (let j = 0; j < img.height; j++) {
    
76.       const px = map(i, 0, img.width, -2, 2);
    
77.       const py = map(j, 0, img.height, -2, 2);
    
78.       const c = getLastColor(cpx(px, py), q0); // 令色参数 s1= q0
    
79.       if (c < q0) {
    
80.         img.set(i, j, color(map(c, 0, 1, 0, 255)));
    
81.       }
    
82.     }
    
83.   }
    
84. }
    
85. 
    
86. function draw() {
    
87.   background(0);
    
88.   plot();
    
89.   img.updatePixels();
    
90.   image(img, 0, 0);
    
91. }

复制代码

wuyudi

基本的框架就在楼上了，为了操作方便，定义了一个 Complex 的 class, 但是这样每次都要 new Complex, 所以定义辅助函数 cpx(x,y)。
setup 函数用于初始化，只会运行一次。draw 会不停运行。但是设定 noLoop 后仅运行一次，适合分形渲染这类耗时巨大的工作。

wuyudi

几个要点：

1. if (newz.eq(z) || sq(newz.real) + sq(newz.imaginary) > 4) {

复制代码

这一行就是出界 / 不动点的判断。可以对运算剪枝。

1. s = min(s, 3 * sqrt(abs(z.mul(z).real) + abs(z.mul(z).imaginary)));

复制代码

这一行是更新 s, 即陷阱参数。

1.   for (let i = 0; i < img.width; i++) {
   
2.     for (let j = 0; j < img.height; j++) {
   
3.       const px = map(i, 0, img.width, -2, 2);
   
4.       const py = map(j, 0, img.height, -2, 2);

复制代码

这些是对画布的每个点，计算 -2,2 的对应坐标，再计算对应着色参数。

wuyudi

因为本帖主要是展示简单例子，所以就不设置复杂的上色函数了。

下载 (140.65 KB)

2023-3-31 00:40

1. class Complex {
   
2.   // By chatGPT
   
3.   constructor(real, imaginary) {
   
4.     this.real = real;
   
5.     this.imaginary = imaginary || 0;
   
6.   }
   
7. 
   
8.   add(other) {
   
9.     return new Complex(
   
10.       this.real + other.real,
    
11.       this.imaginary + other.imaginary
    
12.     );
    
13.   }
    
14. 
    
15.   sub(other) {
    
16.     return new Complex(
    
17.       this.real - other.real,
    
18.       this.imaginary - other.imaginary
    
19.     );
    
20.   }
    
21. 
    
22.   mul(other) {
    
23.     const real = this.real * other.real - this.imaginary * other.imaginary;
    
24.     const imaginary = this.real * other.imaginary + this.imaginary * other.real;
    
25.     return new Complex(real, imaginary);
    
26.   }
    
27. 
    
28.   div(other) {
    
29.     const denominator = pow(other.real, 2) + pow(other.imaginary, 2);
    
30.     const real =
    
31.       (this.real * other.real + this.imaginary * other.imaginary) / denominator;
    
32.     const imaginary =
    
33.       (this.imaginary * other.real - this.real * other.imaginary) / denominator;
    
34.     return new Complex(real, imaginary);
    
35.   }
    
36.   eq(other) {
    
37.     return this.imaginary === other.imaginary && this.real === other.real;
    
38.   }
    
39.   norm() {
    
40.     return sqrt(pow(this.real, 2) + pow(this.imaginary, 2));
    
41.   }
    
42. }
    
43. function cpx(x, y) {
    
44.   return new Complex(x, y);
    
45. }
    
46. let img;
    
47. const q0 = 1; // ,诱捕半径为 q0
    
48. function setup() {
    
49.   createCanvas(windowHeight, windowHeight);
    
50.   img = createImage(windowHeight, windowHeight);
    
51.   img.loadPixels();
    
52.   noLoop();
    
53. }
    
54. 
    
55. /**
    
56. * @param {p5.Vector} z
    
57. * s
    
58. * @param {Vector} first 点#为诱捕点(或点陷阱中心),
    
59. */
    
60. function getLastColor(c, s, first) {
    
61.   // <-- c -> z
    
62.   let z = cpx(0, 0);
    
63.   for (let index = 0; index < 30; index++) {
    
64.     const newz = c.add(z.mul(z));
    
65.     if (newz.eq(z) || newz.norm() > 2) {
    
66.       return s;
    
67.     }
    
68.     z = newz;
    
69.     s = min(s, abs(1 - z.norm()));
    
70.   }
    
71.   return s;
    
72. }
    
73. 
    
74. function plot() {
    
75.   for (let i = 0; i < img.width; i++) {
    
76.     for (let j = 0; j < img.height; j++) {
    
77.       const px = map(i, 0, img.width, -2, 2);
    
78.       const py = map(j, 0, img.height, -2, 2);
    
79.       const c = getLastColor(cpx(px, py), q0, cpx(0));
    
80.       if(c < q0){
    
81.       img.set(i, j, color(255 - map(c, 0, 1, 0, 255)));
    
82.       }
    
83.     }
    
84.   }
    
85. }
    
86. 
    
87. function draw() {
    
88.   background(0);
    
89.   plot();
    
90.   img.updatePixels();
    
91.   image(img, 0, 0);
    
92. }

复制代码