Draw a parametric box with loops on X,Y (SVG)

Creative Coding / Visual Experiments

an ongoing coding/research seminar

http://creativecoding.xyz

What's happening here

• we use a double loop; one for the X axis and one for the Y axis: repeat_x and repeat_y
• inside these loops we define each “faces” coordinates sets in a variable: top_face, side_face and front_face. They are then assembled and stored in an array: polygon_points.
• later on we use the array to insert new polygons in the svg element.

What to do from here

The polygons are now existing in the page.

• Play with variables: what if we wanted to make them bigger or smaller.
• How would you add more polygons?
• How would you change the style of the boxes?
• We want a (fake) isometric view; how would you do it?