d3WebGL/index.html at master · benjbach/d3WebGL · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>d3webgl</title>
	<script src="lib/three.js"></script>
	<script src="d3webgl.js"></script>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div><h1>D3WebGL Tests</h1>
	</div>

	<div id="canvases">
		<div id="circles-div">
			<h3>Circles</h3>
		</div>
		<div id="rect-div">
			<h3>Rectangles</h3>
		</div>
		<div id="lines-div">
			<h3>Lines</h3>
		</div>
	</div>

	<script>
		var WIDTH = 300;
		var HEIGHT = 300;
		var ELEMENT_COUNT = 50;

		var dataSet = new Array(ELEMENT_COUNT).fill(0);

		// CIRCLES
		var webgl = d3webgl.initWebGL('circles-div', WIDTH, HEIGHT);
		var circles = webgl.selectAll()
			.data(dataSet)
			.append('circle')
				.attr('x', () => Math.random() * WIDTH - WIDTH/2)
				.attr('y', () => Math.random() * -HEIGHT+ HEIGHT/2)
				.attr('r', 5)
				.style('fill', '#000000')
				.style('opacity',  ()=>Math.random())

		webgl.render();

		// LINES
		webgl = d3webgl.initWebGL('rect-div', WIDTH, HEIGHT);
		var circles = webgl.selectAll()
			.data(dataSet)
			.append('rect')
				.attr('x', () => Math.random() * WIDTH - WIDTH/2)
				.attr('y', () => Math.random() * -HEIGHT+ HEIGHT/2)
				.attr('width', 20)
				.attr('height', 20)
				.attr('r', 5)
				.style('fill', '#000000')
				.style('stroke', '#ff0000')
				.style('opacity',  ()=>Math.random())

		webgl.render();


		// RECT
		webgl = d3webgl.initWebGL('lines-div', WIDTH, HEIGHT);
		var circles = webgl.selectAll()
			.data(dataSet)
			.append('line')
				.attr('x1', () => Math.random() * WIDTH - WIDTH/2)
				.attr('y1', () => Math.random() * -HEIGHT+ HEIGHT/2)
				.attr('x2', () => Math.random() * WIDTH - WIDTH/2)
				.attr('y2', () => Math.random() * -HEIGHT+ HEIGHT/2)
				.style('stroke', '#000000')
				.style('opacity',  ()=>Math.random())

		webgl.render();


	</script>

</body>
</html>