返回列表 回复 发帖

助教

Rank: 1

UID
81263 
帖子
53 
精华
2 
积分
167 
1#
打印
tT
wuyudi发表于 2023-3-31 00:21 | 只看该作者

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

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

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

订阅 TOP

助教

Rank: 1

UID
81263 
帖子
53 
精华
2 
积分
167 
2#
wuyudi发表于 2023-3-31 00:24 | 只看该作者
上图，这图渲染仅 2s. 画板则需要很久。
下载.png
  1. class Complex {
  2.   // By chatGPT
  3.   constructor(real, imaginary) {
  4.     this.real = real;
  5.     this.imaginary = imaginary || 0;
  6.   }

  8.   add(other) {
  9.     return new Complex(
  10.       this.real + other.real,
  11.       this.imaginary + other.imaginary
  12.     );
  13.   }

  15.   sub(other) {
  16.     return new Complex(
  17.       this.real - other.real,
  18.       this.imaginary - other.imaginary
  19.     );
  20.   }

  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.   }

  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. }

  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. }

  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. }

  86. function draw() {
  87.   background(0);
  88.   plot();
  89.   img.updatePixels();
  90.   image(img, 0, 0);
  91. }
复制代码
回复 引用

TOP

助教

Rank: 1

UID
81263 
帖子
53 
精华
2 
积分
167 
3#
wuyudi发表于 2023-3-31 00:29 | 只看该作者
基本的框架就在楼上了，为了操作方便，定义了一个 Complex 的 class, 但是这样每次都要 new Complex, 所以定义辅助函数 cpx(x,y)。
setup 函数用于初始化，只会运行一次。draw 会不停运行。但是设定 noLoop 后仅运行一次，适合分形渲染这类耗时巨大的工作。
回复 引用

TOP

助教

Rank: 1

UID
81263 
帖子
53 
精华
2 
积分
167 
4#
wuyudi发表于 2023-3-31 00:33 | 只看该作者
几个要点：
  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 的对应坐标，再计算对应着色参数。
回复 引用

TOP

助教

Rank: 1

UID
81263 
帖子
53 
精华
2 
积分
167 
5#
wuyudi发表于 2023-3-31 00:40 | 只看该作者
因为本帖主要是展示简单例子，所以就不设置复杂的上色函数了。

下载 (1).png
  1. class Complex {
  2.   // By chatGPT
  3.   constructor(real, imaginary) {
  4.     this.real = real;
  5.     this.imaginary = imaginary || 0;
  6.   }

  8.   add(other) {
  9.     return new Complex(
  10.       this.real + other.real,
  11.       this.imaginary + other.imaginary
  12.     );
  13.   }

  15.   sub(other) {
  16.     return new Complex(
  17.       this.real - other.real,
  18.       this.imaginary - other.imaginary
  19.     );
  20.   }

  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.   }

  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. }

  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. }

  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. }

  87. function draw() {
  88.   background(0);
  89.   plot();
  90.   img.updatePixels();
  91.   image(img, 0, 0);
  92. }
复制代码
回复 引用

TOP

返回列表