处理中的图像圆失真 / p5js答案

【问题标题】：Image Circle Distortion in Processing / p5js处理中的图像圆失真 / p5js
【发布时间】：2020-08-02 13:06:21
【问题描述】：

我正在尝试在 Processing / p5js 中实现圆形失真功能。以下是我想要实现的两个示例：

https://www.shadertoy.com/view/MsSSDz 和 http://jsfiddle.net/hto1s6fy

两个示例都实现了相同的功能 - 原始图像被扭曲为具有内外半径的二维圆。

我一直在尝试将 jsfiddle 示例中的代码翻译成我的 Processing / p5js 草图，但我的成功有限。

这是我的代码和生成的图像：

let img;
let cx;
let cy;
let innerRadius;
let outerRadius;
let startX;
let startY;
let endX;
let endY;

function preload() {
  img = loadImage('image.jpg');
}

function setup() {
  createCanvas(img.width, img.height);
  image(img, 0, 0);

  noLoop();

  cx = width / 2;
  cy = height / 2;
  innerRadius = 0;
  outerRadius = 320;
  startX = 0;
  startY = 0;
  endX = img.width;
  endY = img.height;
}

function draw() {
  let angle = 0;
  let step = 1 * atan2(1, outerRadius);
  let limit = 2 * PI;
  
  push();
  translate(cx, cy);
  while (angle < limit) {
    push();
    rotate(angle);
    translate(innerRadius, 0);
    rotate(-PI / 2);
    let ratio = angle / limit;
    let x = startX + ratio * (endX - startX);
    image(img, x, startY, 1, (endY - startY), 0, 0, 1, (outerRadius - innerRadius));
    pop();
    angle += step;
  }
  pop();
}

原图：

和代码结果

请问有谁能告诉我哪里出错了？

【问题讨论】：

标签： javascript image canvas processing p5.js

【解决方案1】：

我对处理不是很熟悉，但您的示例中的人似乎使用的库与处理不同。所以即使功能看起来一样，也可能是有细微的差别，导致结果不一样。

【讨论】：