This is a p5.js sketch that allows you to draw a Frieze.
It was inspired by Ch. 30 “Strip Friezes” of Barrow’s 100 Essential Things You didn’t know you didn’t know about Math & the Arts (amazon.com).
pWill save the canvas as a PNG to your computer.
cWill clear the canvas and allow you to start over.
Click + Drag(within the lighter grey area) will draw a line, which will be repeated based on the Frieze settings.
- URL parameters:
tileWidth=###will set the width of the light grey drawing area.
tileHeight=###will set the height of the light grey drawing area.
transform=hvtWill configure the transformation for each step. You can leave
hmeans the lines will be horizontally flipped
vmeans the lines will be vertically flipped
tshould always be included, otherwise you won’t see any repetition
horizReflect=0will disable the second row of the frieze, which is a horizontal reflection. Setting it
=1will turn reflection back on.
strokeWeight=#.#allows you to control the pixel weight of the lines; values between 0.5 and 4 are the general range you want to be in.
- 100 Essential Things You didn’t know you didn’t know about Math & the Arts - Chapter 30: “Strip Friezes”
- YouTube: The Mathematics of Friezes - Crystal clear explanation of Friezes.
With Horiztonal Reflection:
Without Horizontal Reflection::