Check out a free preview of the full Creative Coding with Canvas & WebGL course
The "Penplotter" Lesson is part of the full, Creative Coding with Canvas & WebGL course featured in this preview video. Here's what you'd learn in this lesson:
Matt introduces the penplotter template for applications such as wood etching.
Transcript from the "Penplotter" Lesson
[00:00:02]
>> Mathew DesLauriers: Yeah, I'll just show one more thing here which is the pen plotter stuff. Because this might be useful if you're doing SVG graphics or anything like that. Instead of doing a sketch around Web GL or 2D if you do, sorry, Canvas-sketch. And let's call it, the file penplotter.
[00:00:24]
And then you can do new-template is equal to pen plot. It might be penplotter, penplotter, penplot.
>> Mathew DesLauriers: And what that's gonna do is it's gonna start us off with a basic penplotter file.
>> Mathew DesLauriers: And the difference of this one is when you save it, and you go to your downloads, it creates two different files.
[00:00:48]
It crates an SVG file, and a PNG file. And so, this SVG file is already set up to include all of the path information that we've defined in the file. And so, it looks like this, it's just
>> Mathew DesLauriers: One sec.
>> Mathew DesLauriers: Yeah, and so, this is sort of the idea is that the template itself, it just spits out this whole file.
[00:01:23]
And really, the only main thing to be mindful of is this last line. Instead of returning render, we return a function that uses this utility render poly lines. And this is from the canvas sketch util slash penplot module. And this method here, what it's doing is it's basically saying okay, with the given set of lines that you're giving me, I'm going to make it into a set of commands that could be run through a SVG file or an AxiDraw pen plotter like a mechanical pen plotter.
[00:01:56]
And you can use the same SVG file for a CNC machine to do laser cutting. So if you had like a piece of wood, and you wanted to engrave or etch or laser cut all of these lines, you can just go to a wood shop or any shop that will have a CNC.
[00:02:10]
Most of them will in most cities. And usually, you can just say, hey, I have an SVG file, and I want to etch it onto a piece of wood. You can actually use the exact same dimensions here. You can say my piece of wood is 8, 4 size, and they will sometimes help you out and they'll sometimes just say okay, this is the CNC machine, here's how you use it.
[00:02:30]
You put down a piece of wood or whatever the material is, acrylic or anything. And then you just feed these svg files into the machine, this literal file, and you end up with an etched result. And it's pretty fun, pretty beautiful, and you can create little jewelry, or you can create prints that are instead of being printed with ink maybe they're printed with a laser cutter burning a pattern into the wood itself.
[00:02:59]
So it's kinda fun.
>> Mathew DesLauriers: Yeah, and the way it's working is just by the render function is just returning some objects instead of returning the canvas or instead of just having a regular render function, it returns a file. In this case, an svg file.
>> Mathew DesLauriers: So if I write a render function that looks like this where maybe here is where you have your canvas rendering stuff, and at the end of your canvas rendering stuff you return the data that you want to export and the data that you actually want to generate as an image.
[00:03:44]
And so, in this case it's an array of different files. You can have an array of just one file or two different files.
>> Mathew DesLauriers: And when you hit Cmd+S, it's gonna generate those two different files. And in this case, we're just generating text files. But yeah, as I was saying earlier, you can imagine that it can be used for g code or for svg or JSON, or 3D exports
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops