I am trying to implement a circle distortion function in p5js. Here is an example of what I want to achieve:
In the example an original image is distorted into a 2d circle with an inner and outer radius.
I have been trying to translate the code from the example into my p5js sketch, but I have had limited success.
Here is my code and the resulting image:
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();
}
Please is anyone able to tell me where I am going wrong?