From 07cd190730e654e828edbdeea52aa092ddda470f Mon Sep 17 00:00:00 2001 From: elioat Date: Fri, 5 Jan 2024 21:58:00 -0500 Subject: * --- js/name-gen/app.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++ js/name-gen/index.html | 37 ++++++++++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 js/name-gen/app.js create mode 100644 js/name-gen/index.html 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 @@ + + + + + Name Generator + + + + +

Name Generator

+ +

+ + + \ No newline at end of file -- cgit 1.4.1-2-gfad0