There will be a new app released in a few days, this is the guide for that app.
Texture Generator App
This app allows you to to apply a texture pattern to fill a selected shape. If you need the texture to span multiple shapes, you must combine the shapes and then select the shape. This app does not generate a true “texture” with variable depths, but rather mimics the effect when using v-carve tool paths.
You can also choose to use your own custom texture by providing an svg path to use as the texture. The path will be patterned in the x and y directions to fill the selected shape.
Parameters:
- Texture Type - Choose many type of predefined textures. Can add more textures to the list as requested.
- Scale Texture - Scale the texture in the X & Y directions. By default, the y scale is set to be equal to the x scale.
- Rotate Texture - Rotate the texture in degrees
- Translate Texture - Move the texture along the x or y axis. Distance is set as a percentage of the texture size. So moving the texture 50 in the x direction would mean moving 50% of the texture width.
- Texture Padding - Put additional space between instances of a pattern. Specified as a percentage of the texture width or height.
- Texture Offset - Allows you to thicken or thin the texture by a desired amount. Can be positive or negative. When offsetting negatively, the texture may no longer line up properly. You may need to have negative padding as well to compensate.
- Texture Margin - Allows for a margin between the texture and the source shape. Can be positive or negative.
- Texture and Source Depth - By default the source shape will be set to 0 depth and the texture depth will be set to the material thickness. This can be changed to achieve different effects.
- Randomize - For some textures you can have the texture randomly rotated by 90 degrees to achieve a random effect. Only works on textures where the aspect ratio of the texture is 1-to-1.
Custom Textures
If you want to use your own texture you will need to get the svg path for the texture you want.
For example, here is the source for the inventables texture: Easel - Sample Texture
As you can see this is a single shape (1 path). You then export this as an svg and then copy the path data inside the svg (Between the quotes). You can then paste this path data in the custom texture portion of the app to see your own texture.
Suggestions
If you have suggestions on how to improve the app. Please let me know!
Cheers,
Ethan
10 Likes
Outstanding!
Looking forward to trying it.
Just to let everyone know, Inventables finished reviewing and published this app. Let me know if you run into any issues!
1 Like
Really cool, @EthanKinney!
I don’t use Easel much, but I might start.
Thanks for the hard work you’ve put into this.
I keep getting a error that reads "Object doesn’t support property or method ‘hypot’. I am trying to add texture to a simple square shape from easel. I selected the shape before trying to activate the texturing app. is there something I need to do differently?
Craig
Hi Craig,
You’ll see that error when using Internet Explorer as it does not support some modern javascript features and functions. If you use virtually any other browser it should work fine.
I see that same error when I use internet explorer.
Cheers,
Ethan
Thanks Ethan,
i will try it again using Chrome.
Craig
I cannot wait to try this. Thank you!
A suggestion… as people use it, please post some pics here so we can learn from each other and all get the most from it.
2 Likes
I was messing around with this today, and was trying out the following simple SVG file: https://www.heropatterns.com/svg/death-star.zip
I copy and pasted the path below (e.g. the SVG path w/out the quotes") and I kept getting this error:
“TypeError: null is not an object (evaluating ‘volumes[i].shape’)”
Suggestions ?
M20 10a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm15 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zM20 75a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zm30-65a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm0 65a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zM35 10a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zM5 45a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zm60 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10z
Hmm… Not sure what’s going on, I have the same issue with that path. But i was able to get it working by importing the svg into easel (into a new workpiece) then export that workpiece and then extract the path data from that svg:
M -0.20833333333333331 -0.4427083333333333 C -0.20833333333333331 -0.4828021020270573 -0.16493055555555552 -0.5078607074606348 -0.13020833333333331 -0.4878138231137728 C -0.11409369391882794 -0.47851003170991435 -0.10416666666666666 -0.46131591614105016 -0.10416666666666666 -0.4427083333333333 C -0.10416666666666666 -0.4427083333333333 -0.10416666666666666 0.078125 -0.10416666666666666 0.078125 C -0.10416666666666666 0.11821876869372401 -0.14756944444444445 0.1432773741273016 -0.18229166666666666 0.12323048978043956 C -0.19840630608117205 0.1139266983765812 -0.20833333333333331 0.09673258280771686 -0.20833333333333331 0.078125 C -0.20833333333333331 0.078125 -0.20833333333333331 -0.4427083333333333 -0.20833333333333331 -0.4427083333333333 C -0.20833333333333331 -0.4427083333333333 -0.20833333333333331 -0.4427083333333333 -0.20833333333333331 -0.4427083333333333 M -0.05208333333333333 -0.078125 C -0.05208333333333333 -0.11821876869372401 -0.00868055555555558 -0.14327737412730146 0.026041666666666664 -0.12323048978043949 C 0.042156306081172046 -0.11392669837658105 0.05208333333333333 -0.09673258280771686 0.05208333333333333 -0.078125 C 0.05208333333333333 -0.078125 0.05208333333333333 0.4427083333333333 0.05208333333333333 0.4427083333333333 C 0.05208333333333333 0.48280210202705726 0.00868055555555558 0.5078607074606349 -0.026041666666666664 0.48781382311377286 C -0.042156306081172046 0.4785100317099145 -0.05208333333333333 0.46131591614105016 -0.05208333333333333 0.4427083333333333 C -0.05208333333333333 0.4427083333333333 -0.05208333333333333 -0.078125 -0.05208333333333333 -0.078125 C -0.05208333333333333 -0.078125 -0.05208333333333333 -0.078125 -0.05208333333333333 -0.078125 M -0.20833333333333331 0.234375 C -0.20833333333333331 0.19428123130627606 -0.16493055555555552 0.16922262587269837 -0.13020833333333331 0.18926951021956043 C -0.11409369391882794 0.1985733016234188 -0.10416666666666666 0.21576741719228312 -0.10416666666666666 0.234375 C -0.10416666666666666 0.234375 -0.10416666666666666 0.4427083333333333 -0.10416666666666666 0.4427083333333333 C -0.10416666666666666 0.48280210202705726 -0.14756944444444445 0.5078607074606349 -0.18229166666666666 0.48781382311377286 C -0.19840630608117205 0.4785100317099145 -0.20833333333333331 0.46131591614105016 -0.20833333333333331 0.4427083333333333 C -0.20833333333333331 0.4427083333333333 -0.20833333333333331 0.234375 -0.20833333333333331 0.234375 C -0.20833333333333331 0.234375 -0.20833333333333331 0.234375 -0.20833333333333331 0.234375 M 0.10416666666666666 -0.4427083333333333 C 0.10416666666666666 -0.4828021020270573 0.14756944444444442 -0.5078607074606348 0.18229166666666666 -0.4878138231137728 C 0.19840630608117205 -0.47851003170991435 0.20833333333333331 -0.46131591614105016 0.20833333333333331 -0.4427083333333333 C 0.20833333333333331 -0.4427083333333333 0.20833333333333331 0.078125 0.20833333333333331 0.078125 C 0.20833333333333331 0.11821876869372401 0.16493055555555555 0.1432773741273016 0.13020833333333331 0.12323048978043956 C 0.11409369391882794 0.1139266983765812 0.10416666666666666 0.09673258280771686 0.10416666666666666 0.078125 C 0.10416666666666666 0.078125 0.10416666666666666 -0.4427083333333333 0.10416666666666666 -0.4427083333333333 C 0.10416666666666666 -0.4427083333333333 0.10416666666666666 -0.4427083333333333 0.10416666666666666 -0.4427083333333333 M 0.10416666666666666 0.234375 C 0.10416666666666666 0.19428123130627606 0.14756944444444442 0.16922262587269837 0.18229166666666666 0.18926951021956043 C 0.19840630608117205 0.1985733016234188 0.20833333333333331 0.21576741719228312 0.20833333333333331 0.234375 C 0.20833333333333331 0.234375 0.20833333333333331 0.4427083333333333 0.20833333333333331 0.4427083333333333 C 0.20833333333333331 0.48280210202705726 0.16493055555555555 0.5078607074606349 0.13020833333333331 0.48781382311377286 C 0.11409369391882794 0.4785100317099145 0.10416666666666666 0.46131591614105016 0.10416666666666666 0.4427083333333333 C 0.10416666666666666 0.4427083333333333 0.10416666666666666 0.234375 0.10416666666666666 0.234375 C 0.10416666666666666 0.234375 0.10416666666666666 0.234375 0.10416666666666666 0.234375 M -0.05208333333333333 -0.4427083333333333 C -0.05208333333333333 -0.4828021020270573 -0.00868055555555558 -0.5078607074606348 0.026041666666666664 -0.4878138231137728 C 0.042156306081172046 -0.47851003170991435 0.05208333333333333 -0.46131591614105016 0.05208333333333333 -0.4427083333333333 C 0.05208333333333333 -0.4427083333333333 0.05208333333333333 -0.234375 0.05208333333333333 -0.234375 C 0.05208333333333333 -0.194281231306276 0.00868055555555558 -0.16922262587269854 -0.026041666666666664 -0.1892695102195605 C -0.042156306081172046 -0.19857330162341894 -0.05208333333333333 -0.21576741719228312 -0.05208333333333333 -0.234375 C -0.05208333333333333 -0.234375 -0.05208333333333333 -0.4427083333333333 -0.05208333333333333 -0.4427083333333333 C -0.05208333333333333 -0.4427083333333333 -0.05208333333333333 -0.4427083333333333 -0.05208333333333333 -0.4427083333333333 M -0.3645833333333333 -0.078125 C -0.3645833333333333 -0.11821876869372401 -0.3211805555555555 -0.14327737412730146 -0.2864583333333333 -0.12323048978043949 C -0.27034369391882795 -0.11392669837658105 -0.26041666666666663 -0.09673258280771686 -0.26041666666666663 -0.078125 C -0.26041666666666663 -0.078125 -0.26041666666666663 0.4427083333333333 -0.26041666666666663 0.4427083333333333 C -0.26041666666666663 0.48280210202705726 -0.3038194444444444 0.5078607074606349 -0.33854166666666663 0.48781382311377286 C -0.354656306081172 0.4785100317099145 -0.3645833333333333 0.46131591614105016 -0.3645833333333333 0.4427083333333333 C -0.3645833333333333 0.4427083333333333 -0.3645833333333333 -0.078125 -0.3645833333333333 -0.078125 C -0.3645833333333333 -0.078125 -0.3645833333333333 -0.078125 -0.3645833333333333 -0.078125 M -0.3645833333333333 -0.4427083333333333 C -0.3645833333333333 -0.4828021020270573 -0.3211805555555555 -0.5078607074606348 -0.2864583333333333 -0.4878138231137728 C -0.27034369391882795 -0.47851003170991435 -0.26041666666666663 -0.46131591614105016 -0.26041666666666663 -0.4427083333333333 C -0.26041666666666663 -0.4427083333333333 -0.26041666666666663 -0.234375 -0.26041666666666663 -0.234375 C -0.26041666666666663 -0.194281231306276 -0.3038194444444444 -0.16922262587269854 -0.33854166666666663 -0.1892695102195605 C -0.354656306081172 -0.19857330162341894 -0.3645833333333333 -0.21576741719228312 -0.3645833333333333 -0.234375 C -0.3645833333333333 -0.234375 -0.3645833333333333 -0.4427083333333333 -0.3645833333333333 -0.4427083333333333 C -0.3645833333333333 -0.4427083333333333 -0.3645833333333333 -0.4427083333333333 -0.3645833333333333 -0.4427083333333333 M 0.26041666666666663 -0.078125 C 0.26041666666666663 -0.11821876869372401 0.3038194444444445 -0.14327737412730146 0.33854166666666663 -0.12323048978043949 C 0.35465630608117193 -0.11392669837658105 0.3645833333333333 -0.09673258280771686 0.3645833333333333 -0.078125 C 0.3645833333333333 -0.078125 0.3645833333333333 0.4427083333333333 0.3645833333333333 0.4427083333333333 C 0.3645833333333333 0.48280210202705726 0.32118055555555547 0.5078607074606349 0.2864583333333333 0.48781382311377286 C 0.270343693918828 0.4785100317099145 0.26041666666666663 0.46131591614105016 0.26041666666666663 0.4427083333333333 C 0.26041666666666663 0.4427083333333333 0.26041666666666663 -0.078125 0.26041666666666663 -0.078125 C 0.26041666666666663 -0.078125 0.26041666666666663 -0.078125 0.26041666666666663 -0.078125 M 0.26041666666666663 -0.4427083333333333 C 0.26041666666666663 -0.4828021020270573 0.3038194444444445 -0.5078607074606348 0.33854166666666663 -0.4878138231137728 C 0.35465630608117193 -0.47851003170991435 0.3645833333333333 -0.46131591614105016 0.3645833333333333 -0.4427083333333333 C 0.3645833333333333 -0.4427083333333333 0.3645833333333333 -0.234375 0.3645833333333333 -0.234375 C 0.3645833333333333 -0.194281231306276 0.32118055555555547 -0.16922262587269854 0.2864583333333333 -0.1892695102195605 C 0.270343693918828 -0.19857330162341894 0.26041666666666663 -0.21576741719228312 0.26041666666666663 -0.234375 C 0.26041666666666663 -0.234375 0.26041666666666663 -0.4427083333333333 0.26041666666666663 -0.4427083333333333 C 0.26041666666666663 -0.4427083333333333 0.26041666666666663 -0.4427083333333333 0.26041666666666663 -0.4427083333333333
My guess is when you import that svg into easel, there is some important information other than just the path data that is needed. So after it’s imported and downloaded, it’s been “transformed” into what easel can easily understand and what my app can understand.
I think it may be the “a” tags in the path data. From what i remember, the api I use doesn’t accept those currently. Note how in the path data i posted (the data exported from easel) has removed these and uses the “c” tag instead.
Not entirely sure, but at least you should be able to move forward now.
Cheers,
Ethan
Yes, I discovered the same thing independently. It seems like Easel only deals with precisely defined Curve-to commands rather than allowing the fuller set of SVG Arc and other commands. Not sure why this is, but seems to be a limitation for easel. Seems like if you want to take any arbitrary path, you need to put it through the Easel import/export pipeline, which is rather irritating .
I have some other api’s i might be able to use to bypass that limitation. I’ll have to do some experimentation and let you know.
Uncaught TypeError: Cannot set property ‘cut’ of null
Ethan I just found your app today and it’s really cool! However, I first tried it on an animal shape I imported from the internet and it worked great. Then I tried it on another shape from the internet and I got the above error. I am not technical at all so I have no idea why the second shape did not work. I didn’t change any parameters in either case - just chose different textures.
Hi Cindy,
Can you share the svg shape that you used?
When I tried it again I could see part of the outline, but no texture.
Thanks for your reply.
Hi hey I just shared a file and in the meantime I determined that the outline was a double wide outline with 2 sets of edit points. I deleted one set of edit points and now it works!! Anyway, thanks and I can’t wait to experiment with this app.
Yep! That would do it. Glad you were able to figure it out.
Happy Carving!
I’m really new to CNC work and would like some assistance with actually generating the path to create the custom texture. My understanding is that i have to import the shape that I want as my texture and then export the cutting path into the “custom texture” portion in the tool. What I’m struggling with is actually getting that path information.
Hi @PlacidoRivera,
So to get the custom path info, you need to export your workpiece to an svg. File > export.
(Make sure there is only one shape in the export (ie you have selected everything and done a combine)
after you do, navigate in the zip file to your design.svg file and open that up.
You then need to find the main path in this svg file and locate the “d” element in the path. It will look something like d="M0 … ". You will want to copy everything between the quotes.
Then paste this in the custom path portion of the app.
Hope this helps!
Cheers,
Ethan
1 Like
