1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
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", "thor", "mor", "ven", "zel", "xan"];
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)]);
if (Math.random() < 0.5) {
const vowels = ['a', 'e', 'i', 'o', 'u', 'y', 'ou', 'ey'];
const randomVowel = vowels[Math.floor(Math.random() * vowels.length)];
nameSyllables[nameLength - 1] += randomVowel;
}
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();
|