# How to create angled SVG file from an image?

**URL:** <https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618>\
**Category:** Coding Questions\
**Created:** [October 4, 2021, 9:54pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618 "2021-10-04T21:54:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ajones](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@Ajones](https://discourse.processing.org/u/Ajones)\
**Post date:** [October 4, 2021, 9:54pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/1 "2021-10-04T21:54:52Z")

</div>

Hello,  
I am using [sine waves portrait] by [iamrobin] and I would like to change the angle on the lines also I would like to save the result as an SVG file instead of a PNG.  
I have been reading for 2 days now but I am very new to this and I can not get it to work.  
I would appreciate any help  
Alex

 ![Screen Shot 2021-10-05 at 2.32.01 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1203fc9441939bb9fd14a747536ada57a56681e6.png)

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 4, 2021, 10:50pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/2 "2021-10-04T22:50:30Z")

</div>

Welcome @Ajones

Are you using P5.js or Processing? Can you provide a direct link to the code?

---

<div class="post-metadata">

**Author:** ![Ajones](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@Ajones](https://discourse.processing.org/u/Ajones)\
**Post date:** [October 4, 2021, 11:47pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/3 "2021-10-04T23:47:21Z")

</div>

P5.  
Here is the link where I found the code.  
[https://editor.p5js.org/iamrobin/sketches/slHrTQQEc](https://editor.p5js.org/iamrobin/sketches/slHrTQQEc)

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 5, 2021, 12:59am UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/4 "2021-10-05T00:59:08Z")

</div>

If you’re using [editor.p5js.org](http://editor.p5js.org), then follow these steps –

Click on the **\<** button to reveal your sketch files. Edit the contents of the _index.html_ file to match the code below:

 ![index.html](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6a478fcbc8de4d71246e522e206bae296ba0fcdf.png)

Now, you can export sketches as SVG. Here’s some example code:

 ![sketch.js](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/30ef25bb8d19dff0569d905c584d7a6c881bb360.png)

To change the angle of the lines (from horizontal to vertical?), you’ll want to draw columns instead of rows. Look at flipping the nesting of the loops – so, swapping `for (let gridY = 0; gridY < img.height; gridY++)` and `for (let gridX = 0; gridX < img.width; gridX++)` and making the necessary adjustments.

---

<div class="post-metadata">

**Author:** ![Ajones](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@Ajones](https://discourse.processing.org/u/Ajones)\
**Post date:** [October 5, 2021, 3:04pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/5 "2021-10-05T15:04:24Z")

</div>

Thank you very much for your help, so if I need to draw the lines in a specific angle should I add angle degree to Y and X ?

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 5, 2021, 7:26pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/6 "2021-10-05T19:26:12Z")

</div>

It’s not that simple, I’m afraid. Firstly, when you mention “angle”, are you referring to the `angle` variable? That’s used for the `sin()` function to control the waviness (not rotation of the lines).

The code draws a rectangular grid that’s the same width and height as the canvas. So, even if you did rotate the lines, you’d end up with gaps –

![Untitled-1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/84343562dd95e42b555b15e6541e8fb2920e0165.png)

---

<div class="post-metadata">

**Author:** ![Ajones](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@Ajones](https://discourse.processing.org/u/Ajones)\
**Post date:** [October 5, 2021, 7:35pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/7 "2021-10-05T19:35:31Z")

</div>

Not that angle I actually put 60 instead of “angle” to get a better result in image translation also I tried “Rotate” but it rotated the image. I wanted the image to be straight just the lines being diagonal so I can control the angle.  
I attached an image to my original post.

Thank you

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 5, 2021, 8:44pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/8 "2021-10-05T20:44:49Z")

</div>

The code works using a regular grid to sample and draw vertices. Simplified, it looks something like this (except your sketch connects the dots horizontally or vertically) –

 ![regular](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/970a8cc2b2824eb38409af253f91b343022fbb11.png)

What you need to do is shift the position of the points to construct diagonal lines –

 ![offset](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1dc5be207ce75e9563a1b25b4593376385e4e1dc.png)

To avoid wedge-shaped gaps at the top-right and bottom-left, you can start the grid above (and end it below) the visible canvas area.

---

<div class="post-metadata">

**Author:** ![Ajones](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@Ajones](https://discourse.processing.org/u/Ajones)\
**Post date:** [October 5, 2021, 8:59pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/9 "2021-10-05T20:59:38Z")

</div>

Thank you very much , I will give that a try I let you know

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 7, 2021, 5:42pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618/10 "2021-10-07T17:42:13Z")

</div>

For rendering (not coordinate data), you may additionally use the transformation matrix with `shearY(angle)`, then draw your rectangular points as normal, and they will display as sheared at the angle you specify.

- [shearY reference](https://p5js.org/reference/#/p5/shearY)
- example sketch: https://editor.p5js.org/jeremydouglass/sketches/uCyErvcw-

https://preview.p5js.org/jeremydouglass/embed/uCyErvcw-