<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"
></script>
<script>
var canvasWidth = 600,
canvasHeight = canvasWidth,
padding = 100,
length = 8,
margin = 4,
strokeWidth = 1,
columns = getNoOfCols(canvasWidth),
rows = getNoOfRows(canvasHeight),
lineColor = "#FFF"
function getNoOfCols(width) {
var totalLength = 0,
noOfCols = 0
margin = margin || 0
while (totalLength < width - 2 * padding) {
totalLength += margin + length
noOfCols++
}
return noOfCols
}
function getNoOfRows(height) {
return getNoOfCols(height, length, margin)
}
function setup() {
createCanvas(canvasWidth, canvasHeight)
background(0)
strokeWeight(strokeWidth)
stroke(lineColor)
translate(width / 6, height / 6)
for (var i = 0; i < rows - 1; i++) {
for (var j = 0; j < columns - 1; j++) {
const test = (length * i * i) / 2
const currentOffset = {
x: j * length + (j + 1) * margin + length,
y: (i + 1) * margin + i * length + strokeWidth,
}
const centerPoint = {
x: (currentOffset.x + (currentOffset.x + length)) / 2,
y: (currentOffset.y + (currentOffset.y + length)) / 2,
}
push()
translate(currentOffset.x - 2 * margin, currentOffset.y - 2 * margin)
rotate((((i + 1) * 2) / (j + 1)) * 2.5)
const alpha = map(
(j * 2 + 10) / (i * 4 + 10),
0,
rows / columns,
0,
255,
)
const ugh = color(255, 255, 255, alpha)
stroke(ugh)
line(0, 0, 0 + length, 0)
pop()
}
}
}
</script>
<style>
body {
background-color: #222;
}
</style>