Press the green flag.
I woke up this morning to start my final Getting Unstuck project, and took some time first to explore the projects already in the studio. When I saw @karenb's beautiful project, I paused at something she wrote in her reflection about "how to express this image as coordinate pairs to be drawn with the pen." That sent me down a bit of a rabbit hole trying to figure out how you would do that. At first, I wanted to transform the image itself into individual lines that could be drawn with the pen — but the image has so many curves that I wasn't sure the pen tool could capture well without using using very short lines that combined to become curve-like. And even still, I didn't have any idea how to calculate what those lines would be. Out of curiosity, I downloaded the flower image to look at it in more detail. And that's when I discovered it was an SVG (vector graphics) file! Amazing. There *must* be a way to edit the SVG file to animate the drawing of the stroke. After some research, I found that there is (for the curious, it's the stroke-dasharray and stroke-dashoffset properties). But trying it on the image, it didn't work at all. Flower stayed intact, and I couldn't get it to animate drawing. What's the reason why? It turns out that this image isn't actually two curves tracing the shape of the flower — it's two *invisible* curves that outline the flower, and then the invisible curves are filled in with a black fill color to make it look like a line. I don't know why that's the case, but it meant the whole offset animation trick wasn't going to work. But I do have an SVG editor on my computer (Boxy SVG, would recommend!), so I figured I'd trace the original flower image and try to re-create one that's just one smooth (and importantly, animatable) path. That took some precision, and the result definitely isn't perfect, but at least gives a flower image that looks similar for which I can animate the drawing of the curve. This animation is pretty straightforward to do in CSS on a website, but was less obvious how to translate into Scratch. The simplest solution ended up being to write a Python program to take the original SVG and output about 240 new versions of the SVG, each at a different stage of the animation. Those SVGs were then uploaded to Scratch as different costumes of the same sprite. Animate the changing of the costumes, and here's the result! It's time for work now, and I haven't yet actually started on *my* Day 10 Getting Unstuck project - so I'll probably have to do that after work this evening! Maybe I'll try to livestream it just to connect with more Getting Unstuck people on this last day, inspired by 's YouTube streams as well. And thank you to for her reflections that inspired this journey of learning so much more about how vector graphics files work!
