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
Welcome @Ajones
Are you using P5.js or Processing? Can you provide a direct link to the code?
P5.
Here is the link where I found the code.
https://editor.p5js.org/iamrobin/sketches/slHrTQQEc
If you’re using 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:
Now, you can export sketches as SVG. Here’s some example code:
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.
1 Like
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 ?
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 –
1 Like
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
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) –
What you need to do is shift the position of the points to construct diagonal lines –
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.
1 Like
Thank you very much , I will give that a try I let you know
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.
1 Like