# Image Circle Distortion in p5js

**URL:** <https://discourse.processing.org/t/image-circle-distortion-in-p5js/22993>\
**Category:** Coding Questions\
**Created:** [August 2, 2020, 2:23pm UTC](https://discourse.processing.org/t/image-circle-distortion-in-p5js/22993 "2020-08-02T14:23:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![leejdotjohnson](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@leejdotjohnson](https://discourse.processing.org/u/leejdotjohnson)\
**Post date:** [August 2, 2020, 2:23pm UTC](https://discourse.processing.org/t/image-circle-distortion-in-p5js/22993/1 "2020-08-02T14:23:37Z")

</div>

I am trying to implement a circle distortion function in p5js. Here is an example of what I want to achieve:

[Example](http://jsfiddle.net/hto1s6fy)

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:

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

```

[Result of code](https://i.stack.imgur.com/T0gAn.png)

Please is anyone able to tell me where I am going wrong?

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 3, 2020, 1:04pm UTC](https://discourse.processing.org/t/image-circle-distortion-in-p5js/22993/2 "2020-08-03T13:04:16Z")

</div>

Hello,  
I have slightly modified your code below not for optimization but to get the concept working. I remove a push/pop call in your while loop and use `rotate(angle);` to make it more simple, in case you are wondering.  
You need to fix the stitching of the beginning at final angle so it seems.

Original and resulting image below. Remark: white edges in original image is due to copy and paste in the forum but not present in the actual image.

Kf

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2372376bcd753a47ba83c965e0c2d4ff2c3f6ebe.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1cef9aa4db5e505341794d39b083d61db588df69.jpeg)

```javascript
//NOTE:
// SET deltaSlice to 1 in setup or any non-zero value. This is the slice from the source image

function draw() {

  push();
  translate(cx, cy);
  rotate(-Math.PI / 2.0);

  while (angle < limit ) {

    rotate(step);   
    angle += step;

    let ratio = angle / limit;
    let x = ratio * img.width;
    image(img, 0, 0, deltaSlice, outerRadius, x, 0, deltaSlice, height);
 
  } //while

  pop();
}

```

---

<div class="post-metadata">

**Author:** ![leejdotjohnson](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@leejdotjohnson](https://discourse.processing.org/u/leejdotjohnson)\
**Post date:** [August 3, 2020, 4:31pm UTC](https://discourse.processing.org/t/image-circle-distortion-in-p5js/22993/3 "2020-08-03T16:31:26Z")

</div>

Thank you very much! I shall study your code in Web Editor later and see what happens …

---

<div class="post-metadata">

**Author:** ![leejdotjohnson](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@leejdotjohnson](https://discourse.processing.org/u/leejdotjohnson)\
**Post date:** [August 3, 2020, 5:42pm UTC](https://discourse.processing.org/t/image-circle-distortion-in-p5js/22993/4 "2020-08-03T17:42:12Z")

</div>

Marking kfrajer’s post as the solution. Many thanks kfrajer!

After altering my code a desired result is produced:

 ![result](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4132c02d5e7b44984d79c6ffbe63a27d5af61617.png)