-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (61 loc) · 2.19 KB
/
index.html
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
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Image Generator</title>
</head>
<body>
<br>
<textarea id="data" cols="80" rows="20"></textarea>
<br>
<button onclick="generate()">Generate</button>
<script src="random.js"></script>
<script src="distinct-color-generator.js"></script>
<script src="utils.js"></script>
<script>
let dataEl = document.querySelector("#data");
let canvas = Utils.canvas(200, 200);
document.body.prepend(canvas);
let dcg = new DistinctColorGenerator();
generate();
function generate() {
Random.int(0,1) == 0
? Utils.fill(canvas, dcg.generate())
: Utils.gradientFill(canvas, [...dcg.generateMultiple(2, 3)]);
let rectWidth = Random.int(canvas.width * 0.2, canvas.width * 0.8);
let rectHeight = Random.int(canvas.height * 0.2, canvas.height * 0.8);
let circleRadius = Random.int(canvas.width * 0.5 * 0.2, canvas.width * 0.5 * 0.8);
let rectStrokeStyle = Random.pick([null, dcg.generate()]);
let circleStrokeStyle = Random.pick([null, dcg.generate()]);
Utils.drawRect(
canvas,
Random.int(0, canvas.width - rectWidth),
Random.int(0, canvas.height - rectHeight),
rectWidth,
rectHeight,
rectStrokeStyle,
rectStrokeStyle ? Random.pick([null, dcg.generate()]) : dcg.generate(),
);
Utils.drawCircle(
canvas,
Random.int(0 + circleRadius, canvas.width - circleRadius),
Random.int(0 + circleRadius, canvas.height - circleRadius),
circleRadius,
circleStrokeStyle,
circleStrokeStyle ? Random.pick([null, dcg.generate()]) : dcg.generate(),
);
Utils.drawChar(canvas, Random.letter(), {
font : "50px Arial",
fillStyle : dcg.generate(),
});
Utils.drawChar(canvas, Random.int(0, 9), {
font : "50px Arial",
fillStyle : dcg.generate(),
});
dataEl.textContent = Utils.toData(canvas, { asRaw: true })
dcg.reset();
}
</script>
</body>
</html>