diff options
| author | elioat <elioat@tilde.institute> | 2024-01-05 21:58:00 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-01-05 21:58:00 -0500 |
| commit | 07cd190730e654e828edbdeea52aa092ddda470f (patch) | |
| tree | 1950e538153e067a04a6f7b82a6b87b0c46af04c | |
| parent | 33b312ff13f1fa41a1a5859f6f9303dd25c2a485 (diff) | |
| download | tour-07cd190730e654e828edbdeea52aa092ddda470f.tar.gz | |
*
| -rw-r--r-- | js/name-gen/app.js | 51 | ||||
| -rw-r--r-- | js/name-gen/index.html | 37 |
2 files changed, 88 insertions, 0 deletions
diff --git a/js/name-gen/app.js b/js/name-gen/app.js new file mode 100644 index 0000000..b658147 --- /dev/null +++ b/js/name-gen/app.js @@ -0,0 +1,51 @@ +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +const syllables = ["fro", "gan", "ar", "leg", "gim", "bil", "sam", "pip", "mer", "bor", "do", "dalf", "gorn", "olas", "li", "bo", "wise", "pin", "ry", "omir"]; + +const colors = {}; +syllables.forEach(syllable => { + const firstLetter = syllable.charAt(0).toLowerCase(); + const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16); + colors[firstLetter] = randomColor; +}); + +const generateName = () => { + const nameLength = Math.floor(Math.random() * 3) + 2; + const nameSyllables = Array.from({ length: nameLength }, () => syllables[Math.floor(Math.random() * syllables.length)]); + const name = nameSyllables.join('').charAt(0).toUpperCase() + nameSyllables.join('').slice(1); + return { name, nameSyllables }; +}; + +const drawName = (nameSyllables) => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + const shapeColorMap = {}; + nameSyllables.forEach((syllable, i) => { + let color = shapeColorMap[syllable] || (shapeColorMap[syllable] = colors[syllable.charAt(0).toLowerCase()] || 'black'); + ctx.fillStyle = color; + const sides = Math.floor(Math.random() * 6) + 3; + const centerX = i * 70 + 50; + const centerY = canvas.height / 2; + const radius = 20; + const angle = (Math.PI * 2) / sides; + ctx.beginPath(); + ctx.moveTo(centerX + radius * Math.cos(0), centerY + radius * Math.sin(0)); + Array.from({ length: sides }, (_, j) => { + const x = centerX + radius * Math.cos(angle * (j + 1)); + const y = centerY + radius * Math.sin(angle * (j + 1)); + ctx.lineTo(x, y); + }); + ctx.closePath(); + ctx.fill(); + }); +}; + +const updateName = () => { + const { name, nameSyllables } = generateName(); + document.getElementById('name').textContent = name; + drawName(nameSyllables); +}; + +document.getElementById('generate').addEventListener('click', updateName); + +updateName(); \ No newline at end of file diff --git a/js/name-gen/index.html b/js/name-gen/index.html new file mode 100644 index 0000000..d709709 --- /dev/null +++ b/js/name-gen/index.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Name Generator</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + body { + padding: 2em; + font-family: sans-serif; + text-align: center; + } + h1 { + font-size: 2em; + margin: 0.5em 0; + } + h2 { + font-size: 1.5em; + margin: 0.5em 0; + } + button { + font-size: 1.5em; + margin: 0.5em 0; + } + canvas { + margin: 0.5em 0; + } + </style> +</head> +<body> + <h1>Name Generator</h1> + <button id="generate">Call upon a new hero</button> + <h2 id="name"></h2> + <canvas id="canvas" width="500" height="50"></canvas> + <script src="app.js"></script> +</body> +</html> \ No newline at end of file |