From 81201b793cc93c54d97194d4077c224b0b73b83a Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 3 Aug 2022 10:58:45 +0200 Subject: [PATCH] generative svg walkthrough --- tool/net/demo/gensvg/1/index.lua | 55 +++++++++++++++++++++ tool/net/demo/gensvg/2/index.lua | 64 ++++++++++++++++++++++++ tool/net/demo/gensvg/3/index.lua | 75 ++++++++++++++++++++++++++++ tool/net/demo/gensvg/4/index.lua | 71 ++++++++++++++++++++++++++ tool/net/demo/gensvg/5/index.lua | 76 ++++++++++++++++++++++++++++ tool/net/demo/gensvg/6/index.lua | 77 +++++++++++++++++++++++++++++ tool/net/demo/gensvg/7/index.lua | 81 ++++++++++++++++++++++++++++++ tool/net/demo/gensvg/8/index.lua | 85 ++++++++++++++++++++++++++++++++ tool/net/demo/gensvg/9/index.lua | 82 ++++++++++++++++++++++++++++++ tool/net/demo/gensvg/index.lua | 77 +++++++++++++++++++++++++++++ 10 files changed, 743 insertions(+) create mode 100644 tool/net/demo/gensvg/1/index.lua create mode 100644 tool/net/demo/gensvg/2/index.lua create mode 100644 tool/net/demo/gensvg/3/index.lua create mode 100644 tool/net/demo/gensvg/4/index.lua create mode 100644 tool/net/demo/gensvg/5/index.lua create mode 100644 tool/net/demo/gensvg/6/index.lua create mode 100644 tool/net/demo/gensvg/7/index.lua create mode 100644 tool/net/demo/gensvg/8/index.lua create mode 100644 tool/net/demo/gensvg/9/index.lua create mode 100644 tool/net/demo/gensvg/index.lua diff --git a/tool/net/demo/gensvg/1/index.lua b/tool/net/demo/gensvg/1/index.lua new file mode 100644 index 000000000..61049bceb --- /dev/null +++ b/tool/net/demo/gensvg/1/index.lua @@ -0,0 +1,55 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local function render() + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local primary = math.random(360) + Write('') + Write('') +end + +Write(top) +Write("

An SVG Canvas

") +render() + +Write('') +Write(EscapeHtml([[ Write('')]])) +Write('') +Write('
') +Write('Back') +Write('Next') +Write('
') +Write(bottom) \ No newline at end of file diff --git a/tool/net/demo/gensvg/2/index.lua b/tool/net/demo/gensvg/2/index.lua new file mode 100644 index 000000000..026c61315 --- /dev/null +++ b/tool/net/demo/gensvg/2/index.lua @@ -0,0 +1,64 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() +local function render() + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,90%%,90%%);"', + seed * 360) + Write('') + Write('') +end + +Write(top) +Write("

Add Random Color

") +Write("

Refresh for a new random seed

") +render() + +Write("seed: " .. seed) +Write('') +Write(EscapeHtml( + [[local style = string.format('style="background-color: hsl(%s,90%%,90%%);"', seed * 360)]])) +Write('
') +Write(EscapeHtml( + [[Write('')]])) +Write('') +Write('
') +Write('Back') +Write('Next') +Write('
') +Write(bottom) diff --git a/tool/net/demo/gensvg/3/index.lua b/tool/net/demo/gensvg/3/index.lua new file mode 100644 index 000000000..9793b057f --- /dev/null +++ b/tool/net/demo/gensvg/3/index.lua @@ -0,0 +1,75 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() + +local function rect(x, y, w, h, rx) + return string.format('', + x, y, w, h, rx) +end + +local function writeBlock(i, j) + Write('') + Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, sqsize, sqsize)) + Write('') +end + +local function render() + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,90%%,90%%);"', + seed * 360) + Write('') + for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end + Write('') +end + +Write(top) +Write("

Add A Grid of SVG Rectangles

") +render() + +Write('') +Write(EscapeHtml( + [[string.format('', x, y, w, h, rx)]])) +Write('
') +Write(EscapeHtml( + [[for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end]])) +Write('') +Write('
') +Write('Back') +Write('Next') +Write('
') +Write(bottom) diff --git a/tool/net/demo/gensvg/4/index.lua b/tool/net/demo/gensvg/4/index.lua new file mode 100644 index 000000000..454396c77 --- /dev/null +++ b/tool/net/demo/gensvg/4/index.lua @@ -0,0 +1,71 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() + +local function rect(x, y, w, h, rx) + return string.format('', + x, y, w, h, math.random(5,12)) +end + +local function writeBlock(i, j) + Write('') + Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, sqsize, sqsize)) + Write('') +end + +local function render() + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,90%%,90%%);"', + seed * 360) + Write('') + for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end + Write('') +end + +Write(top) +Write("

Randomize Plumpness

") +render() +Write('') +Write(EscapeHtml( + [[string.format('', x, y, w, h, math.random(5,15))]])) +Write('') +Write('
') +Write('Back') +Write('Next') +Write('
') +Write(bottom) diff --git a/tool/net/demo/gensvg/5/index.lua b/tool/net/demo/gensvg/5/index.lua new file mode 100644 index 000000000..2e954f64b --- /dev/null +++ b/tool/net/demo/gensvg/5/index.lua @@ -0,0 +1,76 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() +local sat = 80 +local light = 60 + +local function rect(x, y, w, h, rx) + local style = string.format('fill="hsla(%s, %s%%, %s%%, %s)"', + seed * 360 - 180, sat, light, math.random(100)/100.0) + return string.format( + '', x, y, + w, h, math.random(5, 12), style) +end + +local function writeBlock(i, j) + Write('') + Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, sqsize, sqsize)) + Write('') +end + +local function render() + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"', + seed * 360, sat, light) + Write('') + for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end + Write('') +end + +Write(top) +Write("

SVG fill 🙈

") +render() +Write('') +Write(EscapeHtml( + [[string.format('fill="hsla(%s, %s%%, %s%%, %s)"', seed * 360 - 180, sat, light, math.random(100)/100.0))]])) +Write('') +Write('
') +Write('Back') +Write('Next') +Write('
') +Write(bottom) diff --git a/tool/net/demo/gensvg/6/index.lua b/tool/net/demo/gensvg/6/index.lua new file mode 100644 index 000000000..543e47bf9 --- /dev/null +++ b/tool/net/demo/gensvg/6/index.lua @@ -0,0 +1,77 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() +local sat = 80 +local light = 60 + +local function rect(x, y, w, h, rx) + local style = string.format('fill="hsla(%s, %s%%, %s%%, %s)"', + seed * 360 - 180, sat, light, math.random(100)/100.0) + return string.format( + '', x, y, + w, h, math.random(5, 12), style) +end + +local function writeBlock(i, j) + if math.random() < 0.25 then return end + Write('') + Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, sqsize, sqsize)) + Write('') +end + +local function render() + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"', + seed * 360, sat, light) + Write('') + for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end + Write('') +end + +Write(top) +Write("

Let's Skip Some

") +render() +Write('') +Write(EscapeHtml( + [[if math.random() < 0.25 then return end]])) +Write('') +Write('
') +Write('Back') +Write('Next') +Write('
') +Write(bottom) diff --git a/tool/net/demo/gensvg/7/index.lua b/tool/net/demo/gensvg/7/index.lua new file mode 100644 index 000000000..dda37594b --- /dev/null +++ b/tool/net/demo/gensvg/7/index.lua @@ -0,0 +1,81 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() +local sat = 80 +local light = 60 + +local function rect(x, y, w, h, rx) + local style = string.format('fill="hsla(%s, %s%%, %s%%, %s)"', + seed * 360 - 180, sat, light, + math.random(100) / 100.0) + return string.format( + '', x, y, + w, h, math.random(5, 12), style) +end + +local function writeBlock(i, j) + if math.random() < 0.25 then return end + local cellsize = (math.random() > 0.25) and sqsize or 3 * sqsize + Write('') + Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, cellsize, cellsize)) + Write('') +end + +local function render() + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"', + seed * 360, sat, light) + Write('') + for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end + Write('') +end + +Write(top) +Write("

Embiggen Some

") +Write('') +Write('') +render() + +Write('') +Write(EscapeHtml([[local cellsize = (math.random() > 0.25) and sqsize or 3 * sqsize]])) +Write('') +Write('
') +Write('Back') +Write('Next') +Write('
') +Write(bottom) diff --git a/tool/net/demo/gensvg/8/index.lua b/tool/net/demo/gensvg/8/index.lua new file mode 100644 index 000000000..fd0398ea2 --- /dev/null +++ b/tool/net/demo/gensvg/8/index.lua @@ -0,0 +1,85 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() +local sat = 80 +local light = 60 + +local function rect(x, y, w, h, rx) + local style = string.format('fill="hsla(%s, %s%%, %s%%, %s)"', + seed * 360 - 180, sat, light, + math.random(100) / 100.0) + return string.format( + '', x, y, + w, h, math.random(5, 12), style) +end + +local function writeBlock(i, j) + if math.random() < 0.25 then return end + local cellsize = (math.random() > 0.25) and sqsize or 3 * sqsize + Write('') + Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, cellsize, cellsize)) + Write('') +end + +local function render() + nrows = nrows * 5 + ncols = ncols * 5 + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"', + seed * 360, sat, light) + Write('') + for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end + Write('') +end + +Write(top) +Write("

Zoom Out

") +Write('') +Write('') +render() + +Write('') +Write(EscapeHtml([[nrows = nrows * 5]])) +Write('
') +Write(EscapeHtml([[ncols = ncols * 5]])) +Write('') +Write('
') +Write('Back') +Write('Next') +Write('
') +Write(bottom) diff --git a/tool/net/demo/gensvg/9/index.lua b/tool/net/demo/gensvg/9/index.lua new file mode 100644 index 000000000..b7e2632ee --- /dev/null +++ b/tool/net/demo/gensvg/9/index.lua @@ -0,0 +1,82 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() +local sat = 80 +local light = 70 + +local function rect(x, y, w, h, rx) + local style = string.format('class="shadow" fill="hsla(%s, %s%%, %s%%, %s)"', + seed * 360 - 180, sat, light, + math.random(100) / 100.0) + return string.format( + '', x, y, + w, h, math.random(5, 12), style) +end + +local function writeBlock(i, j) + if math.random() < 0.45 then return end + local cellsize = (math.random() > 0.25) and sqsize or math.random(1,4) * sqsize + Write('') + Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, cellsize, cellsize)) + Write('') +end + +local function render() + nrows = nrows * 3 + ncols = ncols * 3 + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"', + seed * 360, sat, light) + Write('') + for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end + Write('') +end + +Write(top) +Write("

CSS drop-shadow filter

") +Write('') +Write('') +render() + +Write('') +Write(EscapeHtml([[.shadow { filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .25)); }]])) +Write('') +Write('
') +Write('Back') +Write('
') +Write(bottom) diff --git a/tool/net/demo/gensvg/index.lua b/tool/net/demo/gensvg/index.lua new file mode 100644 index 000000000..f9dd73b9a --- /dev/null +++ b/tool/net/demo/gensvg/index.lua @@ -0,0 +1,77 @@ +local top = [[ + + + + + + + + + + + + +]] + +local bottom = [[ + Show The Code + + +]] + +local nrows = 10 +local ncols = 10 +local sqsize = 20 +local seed = math.random() +local sat = 80 +local light = 70 + +local function rect(x, y, w, h, rx) + local style = string.format('class="shadow" fill="hsla(%s, %s%%, %s%%, %s)"', + seed * 360 - 180, sat, light, + math.random(100) / 100.0) + return string.format( + '', x, y, + w, h, math.random(5, 12), style) +end + +local function writeBlock(i, j) + if math.random() < 0.45 then return end + local cellsize = (math.random() > 0.25) and sqsize or math.random(1,4) * sqsize + Write('') + Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, cellsize, cellsize)) + Write('') +end + +local function render() + nrows = nrows * 3 + ncols = ncols * 3 + local xsize = nrows * sqsize + local ysize = ncols * sqsize + local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"', + seed * 360, sat, light) + Write('') + for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end + Write('') +end + +Write(top) +Write("

Let's Generate Some SVG

") +Write("

If you don't like it, maybe refresh?

") +render() +Write('
') +Write('Walk Through') +Write('
') +Write(bottom) \ No newline at end of file