-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path11.html
105 lines (80 loc) · 2.78 KB
/
11.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<!--
#### Notes
1. In [lines 53-62](https://github.com/DGMD-E-15/Processing-
Tutorial-01/blob/master/11.html#L53-62), we draw a regular grid where in each
cell we have a squares with a circle at its centers.
2. The size of the circle drawn at a grid position depends on its distance
from the mouse’s position. (lines [55](https://github.com/DGMD-E-15
/Processing-Tutorial-01/blob/master/11.html#L55) and
[60](https://github.com/DGMD-E-15/Processing-
Tutorial-01/blob/master/11.html#L60)).
3. Change [line 55](https://github.com/DGMD-E-15/Processing-
Tutorial-01/blob/master/11.html#L55) to `var dotSize = gridSize;` to see a
version of the grid that is not interactive.
4. The distances are measured in `gridSize` units, and that is why we multiply
them by the grid size to draw them in the correct `px` dimensions in commands
on lines like [58](https://github.com/DGMD-E-15/Processing-
Tutorial-01/blob/master/11.html#L58) and [60](https://github.com/DGMD-E-15
/Processing-Tutorial-01/blob/master/11.html#L60).
-->
<head>
<script src='processing-1.4.1.js'></script>
<style>
canvas {
outline: none;
}
/* So that when we click, the canvas isn't outlined */
</style>
</head>
<body>
<canvas></canvas>
</body>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
function sketch(p) {
var x, y;
function setup() {
p.size(400, 300);
p.ellipseMode(p.CENTER);
p.println("width: " + p.width + ", height: " + p.height);
x = p.width / 2;
y = p.height / 2;
//p.noLoop();
}
function draw() {
// p.background(0);
p.fill(0, 15);
p.rect(0, 0, p.width, p.height);
grid(25);
trace(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY);
}
function grid(gridSize) {
var gridW = p.width / gridSize;
var gridH = p.height / gridSize;
var activeCol = p.floor(p.mouseX / gridSize);
var activeRow = p.floor(p.mouseY / gridSize);
for (var row = 0; row < gridH; row++) {
for (var col = 0; col < gridW; col++) {
var dotSize = gridSize * p.dist(row, col, activeRow, activeCol) / p.max(gridW, gridH);
p.noStroke();
p.fill(0, 64);
p.rect(col * gridSize, row * gridSize, gridSize, gridSize);
p.fill(0, 0, 255, 128);
p.ellipse((col + .5) * gridSize, (row + 0.5) * gridSize, dotSize, dotSize);
}
}
}
function trace(x1, y1, x2, y2) {
p.fill(255);
p.stroke(255);
p.ellipse(x1, y1, 5, 5);
p.line(x1, y1, x2, y2);
p.ellipse(x2, y2, 5, 5);
}
p.setup = setup;
p.draw = draw;
}
var p = new Processing(canvas, sketch); // actually attach and run the sketch
</script>
</html>