Next, we exported the drawing as an SVG file. Since it contained many shapes, we wanted to avoid manually extracting the coordinates of each vertex and converting them to JavaScript. To speed up the process, a team member developed a JavaScript program that automatically converted SVG path data (Code that SVGs can read that draws a shape) into Processing.js code. For instance, it transformed

<path fill="#810000" d="m573.95276 291.24933l-17.044617 39.774292l-23.485596 -16.666656z" fill-rule="evenodd"/>

into

fill(129, 0, 0, 255, 100);
stroke(0, 0, 0);
beginShape();
vertex(573.95, 291.25);
vertex(556.91, 331.02);
vertex(533.42, 314.36);
endShape(CLOSE);

After converting all the shapes and formatting it into JavaScript, we pasted it into CodeHS. We then imported the Processing.js library to run our file successfully.

https://codehs.com/sandbox/id/python-graphics-tkinter-u3VWCf

canvas.create_polygon([574, 291, 557, 331, 533, 314], fill="#810000", outline="black")

and immediately began building a project that would convert processing.js polygons:

fill(129, 0, 0, 255, 100); stroke(0, 0, 0); beginShape(); vertex(573.95, 291.25); vertex(556.91, 331.02); vertex(533.42, 314.36); endShape(CLOSE);

into tkinter polygons. We needed this tool as we had hundreds of polygons and thousands of points that we would've needed to write out in tkinter if we chose to manually write out code for each polygon. Once we created our refactoring tool, we converted all the processing.js polygons and pasted the output into a tkinter project on CodeHS and ran our file successfully.

Mentor - Youssef

Mentor - Tanmay

Mentor - Chloe

Mentor - Henry

Mentor - Victor