Искажение круга изображения при обработке / p5js - PullRequest
Новая
       108

Искажение круга изображения при обработке / p5js

1 голос
/ 02 августа 2020

Я пытаюсь реализовать функцию искажения круга в Processing / p5 js. Вот два примера того, чего я хочу достичь:

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

Оба примера реализуют одну и ту же функциональность - исходное изображение искажено в двумерный круг с внутренним и внешним радиусом.

Я пытался перевести код из примера jsfiddle в свой эскиз Processing / p5 js, но у меня был ограниченный успех.

Вот мой код и получившееся изображение: 

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();
}

Исходное изображение: Original image

and result of code результат кода

Кто-нибудь может сказать мне, где я ошибаюсь?

1 Ответ

0 голосов
/ 02 августа 2020

Я не очень знаком с обработкой, но похоже, что люди в ваших примерах используют другую библиотеку, чем обработка. Таким образом, хотя функции кажутся одинаковыми, возможно, есть небольшие различия, что приводит к другому результату.

...