Skip to content

Instantly share code, notes, and snippets.

@sponrad

sponrad/fun_grid.html

Created August 23, 2022 16:21
Show Gist options
  • Save sponrad/0b49b07432fb0c221a5e32714cc3068f to your computer and use it in GitHub Desktop.
Save sponrad/0b49b07432fb0c221a5e32714cc3068f to your computer and use it in GitHub Desktop.
Download ZIP
script for those curvey grids i drew as a kid
Raw
fun_grid.html
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// canvas 0,0 is top left
function drawLine(x1, y1, x2, y2) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
// drawLine(0, 0, 500, 500);
// drawLine(500, 0, 0, 500);
drawLine(0, 0, 100, 500);
drawLine(0, 100, 200, 500);
drawLine(0, 200, 300, 500);
drawLine(0, 300, 400, 500);
drawLine(0, 400, 500, 500);
function drawFunGrid(point1, center, point2, count) {
// point1, point2, and center are [x, y] arrays
// count is number of lines
var l1XStep = (center[0] - point1[0]) / count;
var l1YStep = (center[1] - point1[1]) / count;
var l2XStep = (point2[0] - center[0]) / count;
var l2YStep = (point2[1] - center[1]) / count;
for (var i = 0; i <= count; i++) {
drawLine(
point1[0] + (l1XStep * i),
point1[1] + (l1YStep * i),
center[0] + (l2XStep * i),
center[1] + (l2YStep * i),
);
}
}
function redraw(count) {
ctx.clearRect(0, 0, 1000, 1000);
ctx.beginPath();
drawFunGrid(
[500, 0],
[500, 500],
[1000, 500],
count
);
drawFunGrid(
[500, 0],
[500, 500],
[0, 500],
count
);
drawFunGrid(
[0, 500],
[500, 500],
[500, 1000],
count
);
drawFunGrid(
[1000, 500],
[500, 500],
[500, 1000],
count
);
}
var i = 10;
var step = 1;
// redraw(i);
function doRedraw() {
redraw(i);
if (i > 30 && step === 1) step = -1;
if (i < 10 && step === -1) step = 1;
i = i + step;
}
// setInterval(doRedraw, 100);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment