-
Notifications
You must be signed in to change notification settings - Fork 1
/
blur_01.html
125 lines (101 loc) · 12.9 KB
/
blur_01.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UNCERTAINTY BLUR</title>
<script type="text/javascript" src="js/d3.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Width and height ()
var w = window.innerWidth;
var h = w/4;
//Resolution
var res = w*h;
//Margins
var wMargin = w*.2;
var hMargin = h*.2;
//Letter outlines
var letters = [[116.0, 176.0], [105.0, 176.0], [101.0, 169.5], [98.97959, 164.7347], [91.58672, 172.37755], [82.29506, 177.56335], [71.6157, 179.76204], [61.07868, 179.78374], [50.50552, 177.43414], [41.2803, 171.87859], [34.982918, 162.9923], [33.00374, 152.52832], [33.0, 142.0], [33.0, 131.0], [33.0, 120.0], [33.0, 109.0], [33.0, 98.0], [33.0, 87.0], [33.0, 76.0], [39.5, 72.0], [49.0, 73.0], [49.0, 84.0], [49.0, 95.0], [49.0, 106.0], [49.0, 117.0], [49.0, 128.0], [49.0, 139.0], [49.254326, 149.55753], [53.987892, 159.50217], [62.901234, 164.91357], [73.0448, 165.9392], [83.436195, 163.2298], [91.5, 156.5], [96.70168, 146.72241], [98.80628, 135.97496], [99.0, 125.5], [99.0, 114.5], [99.0, 103.5], [99.0, 92.5], [99.0, 81.5], [100.0, 72.0], [111.0, 72.0], [116.0, 77.5], [116.0, 88.5], [116.0, 99.5], [116.0, 110.5], [116.0, 121.5], [116.0, 132.5], [116.0, 143.5], [116.0, 154.5], [116.0, 165.5], [116.0, 176.0], [145.0, 72.0], [156.0, 72.0], [160.0, 78.5], [160.0, 89.0], [166.9096, 79.98063], [175.0, 73.5], [185.44897, 69.82653], [195.5639, 69.00267], [206.41896, 70.292274], [216.51796, 74.649704], [223.91795, 81.984375], [227.69638, 92.410034], [228.0, 103.0], [228.0, 114.0], [228.0, 125.0], [228.0, 136.0], [228.0, 147.0], [228.0, 158.0], [228.0, 169.0], [224.5, 176.0], [213.5, 176.0], [211.0, 168.0], [211.0, 157.0], [211.0, 146.0], [211.0, 135.0], [211.0, 124.0], [211.0, 113.0], [210.9596, 102.31877], [208.19386, 92.010216], [200.37999, 84.97997], [190.0, 83.00001], [179.71469, 84.86083], [170.61664, 91.13535], [164.74515, 99.91412], [161.63034, 110.49028], [161.0, 120.5], [161.0, 131.5], [161.0, 142.5], [161.0, 153.5], [161.0, 164.5], [161.0, 175.5], [151.0, 176.0], [145.0, 171.5], [145.0, 160.5], [145.0, 149.5], [145.0, 138.5], [145.0, 127.5], [145.0, 116.5], [145.0, 105.5], [145.0, 94.5], [145.0, 83.5], [145.0, 72.5], [145.0, 72.0], [336.0, 107.0], [325.0, 107.0], [317.86392, 102.189354], [313.29327, 92.67194], [305.06094, 86.01108], [293.99997, 83.99999], [284.06906, 85.89533], [275.20038, 92.28622], [269.6353, 100.76698], [266.2992, 111.34218], [265.06418, 122.4901], [265.29022, 132.60318], [267.33002, 143.38977], [272.01636, 153.57495], [279.24323, 161.28728], [289.17633, 165.47636], [299.6821, 165.64395], [309.49924, 161.52444], [316.29956, 152.79109], [319.62878, 142.1657], [328.0, 140.0], [336.80908, 141.72023], [334.6667, 152.22221], [330.33334, 162.22221], [323.66986, 170.29628], [314.25793, 176.2553], [303.63153, 179.27824], [293.47632, 179.99774], [282.165, 178.695], [272.25885, 174.99524], [263.08502, 168.255], [256.6018, 160.25174], [251.87558, 150.58542], [249.09117, 139.85616], [248.04037, 128.80702], [248.29585, 118.24852], [249.8491, 107.55326], [253.07788, 97.12259], [258.3988, 87.30647], [265.42114, 79.2908], [274.50757, 73.16735], [284.61584, 69.852844], [295.1437, 69.00873], [306.21017, 70.1537], [316.35583, 73.61479], [325.0421, 79.99392], [331.28925, 89.09918], [334.76904, 99.36687], [336.0, 107.0], [444.0, 130.0], [433.0, 130.0], [422.0, 130.0], [411.0, 130.0], [400.0, 130.0], [389.0, 130.0], [378.0, 130.0], [367.0, 130.0], [368.04166, 140.625], [372.04166, 150.625], [378.67493, 159.19926], [388.09296, 164.58264], [398.47433, 165.99702], [409.1355, 163.9881], [418.06274, 157.63988], [423.74304, 148.35416], [432.0, 145.0], [441.90405, 145.5293], [438.87402, 155.74219], [433.0381, 165.30469], [425.14737, 172.31198], [415.29614, 177.1715], [404.87192, 179.53513], [394.3524, 179.94609], [383.54214, 178.42795], [373.30896, 174.39107], [364.38013, 167.54433], [357.9551, 159.18489], [353.48596, 149.36491], [350.90894, 138.45291], [350.02524, 127.76992], [350.35318, 117.36511], [352.14908, 106.41693], [355.65143, 96.220955], [361.34216, 86.58748], [368.63052, 78.861046], [377.8346, 73.06173], [388.034, 69.87869], [398.51767, 69.0024], [409.4724, 70.2699], [420.03772, 74.07957], [428.66034, 79.7181], [435.94446, 87.99999], [440.45035, 97.31569], [442.7868, 108.30624], [443.75723, 119.39507], [444.00003, 129.99997], [444.0, 130.0], [367.0, 116.0], [378.0, 116.0], [389.0, 116.0], [400.0, 116.0], [411.0, 116.0], [422.0, 116.0], [425.68, 109.96], [422.5152, 99.5824], [416.008, 90.969604], [406.6, 85.44], [396.50153, 84.00369], [385.875, 86.12501], [376.5, 92.50001], [370.61987, 100.91993], [367.54166, 111.18055], [367.0, 116.0], [517.0, 86.0], [505.9413, 87.47959], [495.53317, 91.27551], [487.78125, 98.375], [484.09778, 108.714355], [483.0332, 119.42969], [483.0, 130.0], [483.0, 141.0], [483.0, 152.0], [483.0, 163.0], [483.0, 174.0], [474.5, 176.0], [466.0, 174.0], [466.0, 163.0], [466.0, 152.0], [466.0, 141.0], [466.0, 130.0], [466.0, 119.0], [466.0, 108.0], [466.0, 97.0], [466.0, 86.0], [466.0, 75.0], [473.5, 72.0], [482.0, 74.0], [482.0, 85.0], [484.21463, 87.358986], [490.7066, 78.56198], [498.84375, 71.8125], [509.50146, 69.00488], [517.0, 71.5], [517.0, 82.5], [517.0, 86.0], [569.0, 72.0], [569.0, 83.0], [560.5, 85.0], [552.0, 87.0], [552.0, 98.0], [552.0, 109.0], [552.0, 120.0], [552.0, 131.0], [552.0, 142.0], [552.0, 153.0], [553.16956, 163.54498], [562.8047, 166.0], [569.0, 170.0], [567.39795, 179.21745], [556.463, 179.99852], [545.8877, 178.58984], [537.84314, 172.23979], [536.0, 162.0], [536.0, 151.0], [536.0, 140.0], [536.0, 129.0], [536.0, 118.0], [536.0, 107.0], [536.0, 96.0], [536.0, 85.0], [525.5, 85.0], [521.0, 79.0], [524.5, 72.0], [535.5, 72.0], [536.0, 62.0], [536.0, 51.0], [538.5, 43.0], [549.5, 43.0], [552.0, 51.0], [552.0, 62.0], [552.5, 72.0], [563.5, 72.0], [569.0, 72.0], [587.0, 103.0], [588.656, 91.8616], [593.536, 82.0696], [601.61597, 74.997604], [612.04443, 70.85111], [622.696, 69.217606], [633.1756, 69.08923], [644.3257, 70.42768], [654.54004, 73.924034], [662.6598, 80.27663], [667.375, 90.437515], [668.0, 101.0], [668.0, 112.0], [668.0, 123.0], [668.0, 134.0], [668.0, 145.0], [668.0, 156.0], [670.81055, 165.4429], [681.0, 167.0], [681.0, 177.5], [671.17017, 179.9132], [660.6686, 178.8639], [653.3831, 171.87427], [648.66394, 168.59845], [639.2934, 174.37001], [629.18896, 178.24896], [618.3097, 179.94794], [607.594, 179.29767], [597.20215, 175.82716], [588.80176, 169.39645], [583.4053, 159.88165], [582.0035, 149.41696], [583.6155, 139.3935], [588.18365, 130.22449], [595.98517, 123.88461], [605.7449, 120.29591], [615.6574, 117.891975], [626.16, 116.91], [636.06824, 115.56569], [646.36743, 112.20409], [651.0, 103.5], [649.69336, 93.40445], [642.0864, 86.41976], [631.5278, 84.111115], [620.6666, 84.50001], [610.63116, 88.0503], [604.43256, 96.33019], [599.5, 103.0], [588.5, 103.0], [587.0, 103.0], [620.0, 166.0], [631.2552, 164.6448], [641.10474, 160.0752], [648.1897, 152.68875], [651.0, 142.5], [651.0, 131.5], [647.1111, 126.27778], [636.0, 128.5], [626.3755, 130.04282], [616.0417, 132.08333], [605.8067, 136.91333], [599.75543, 144.76326], [599.7913, 155.49345], [606.26996, 163.1203], [617.073, 165.90817], [620.0, 166.0], [715.0, 72.0], [715.0, 83.0], [715.0, 94.0], [715.0, 105.0], [715.0, 116.0], [715.0, 127.0], [715.0, 138.0], [715.0, 149.0], [715.0, 160.0], [715.0, 171.0], [709.5, 176.0], [698.5, 176.0], [698.0, 166.0], [698.0, 155.0], [698.0, 144.0], [698.0, 133.0], [698.0, 122.0], [698.0, 111.0], [698.0, 100.0], [698.0, 89.0], [698.0, 78.0], [702.5, 72.0], [713.5, 72.0], [715.0, 72.0], [715.0, 31.0], [715.0, 42.0], [714.5, 52.0], [703.5, 52.0], [698.0, 47.0], [698.0, 36.0], [703.5, 31.0], [714.5, 31.0], [715.0, 31.0], [743.0, 72.0], [754.0, 72.0], [758.0, 78.5], [758.0, 89.0], [764.90955, 79.98063], [773.0, 73.5], [783.449, 69.82653], [793.5639, 69.00267], [804.41895, 70.292274], [814.5176, 74.649704], [821.91797, 81.984375], [825.6964, 92.410034], [826.0, 103.0], [826.0, 114.0], [826.0, 125.0], [826.0, 136.0], [826.0, 147.0], [826.0, 158.0], [826.0, 169.0], [822.5, 176.0], [811.5, 176.0], [809.0, 168.0], [809.0, 157.0], [809.0, 146.0], [809.0, 135.0], [809.0, 124.0], [809.0, 113.0], [808.95953, 102.31877], [806.19385, 92.010216], [798.38, 84.97997], [788.0, 83.00001], [777.715, 84.86083], [768.6174, 91.13535], [762.7451, 99.91412], [759.6303, 110.49028], [759.0, 120.5], [759.0, 131.5], [759.0, 142.5], [759.0, 153.5], [759.0, 164.5], [759.0, 175.5], [749.0, 176.0], [743.0, 171.5], [743.0, 160.5], [743.0, 149.5], [743.0, 138.5], [743.0, 127.5], [743.0, 116.5], [743.0, 105.5], [743.0, 94.5], [743.0, 83.5], [743.0, 72.5], [743.0, 72.0], [890.0, 72.0], [890.0, 83.0], [881.5, 85.0], [873.0, 87.0], [873.0, 98.0], [873.0, 109.0], [873.0, 120.0], [873.0, 131.0], [873.0, 142.0], [873.0, 153.0], [874.16956, 163.54498], [883.8047, 166.0], [890.0, 170.0], [888.39795, 179.21745], [877.463, 179.99852], [866.8877, 178.58984], [858.84314, 172.23979], [857.0, 162.0], [857.0, 151.0], [857.0, 140.0], [857.0, 129.0], [857.0, 118.0], [857.0, 107.0], [857.0, 96.0], [857.0, 85.0], [846.5, 85.0], [842.0, 79.0], [845.5, 72.0], [856.5, 72.0], [857.0, 62.0], [857.0, 51.0], [859.5, 43.0], [870.5, 43.0], [873.0, 51.0], [873.0, 62.0], [873.5, 72.0], [884.5, 72.0], [890.0, 72.0], [972.0, 72.0], [983.0, 72.0], [988.7986, 75.29102], [985.0227, 85.63424], [981.2468, 95.977455], [977.47095, 106.32067], [973.69507, 116.663925], [969.9192, 127.007225], [966.1433, 137.35052], [962.36743, 147.69382], [958.59155, 158.03712], [954.8157, 168.3804], [951.0398, 178.7237], [947.2639, 189.06697], [943.5501, 199.02423], [937.8766, 208.60083], [929.8176, 215.72247], [919.18787, 218.92001], [909.03125, 218.21875], [905.0, 210.5], [906.9167, 202.30556], [917.7785, 202.57613], [925.78955, 196.34488], [930.16693, 186.86111], [933.83405, 176.47221], [930.8042, 166.50229], [927.2888, 156.0548], [923.9332, 146.08218], [920.41785, 135.63474], [916.90247, 125.18729], [913.3871, 114.73984], [909.8717, 104.29238], [906.3563, 93.84493], [902.84094, 83.397484], [899.32556, 72.950035], [908.5, 72.0], [916.9529, 74.858826], [920.4468, 85.34119], [923.9407, 95.82355], [927.4346, 106.30591], [930.92847, 116.78827], [934.42236, 127.27063], [937.91626, 137.75299], [941.25134, 147.75888], [944.6858, 148.2907], [948.39453, 137.9302], [952.1033, 127.56971], [955.812, 117.209206], [959.52075, 106.8487], [963.2295, 96.4882], [966.93823, 86.12769], [970.647, 75.76719], [972.0, 72.0]];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Append group to hold blurred dots
var blurGroup = svg.append("g")
.attr("filter", "url(#blur)");
//Append group to hold sharp dots
var gridGroup = svg.append("g");
//Scaling mechanism to fit to page
var xScale = d3.scaleLinear()
.domain([0,d3.max(letters, function(d) {return Math.round(d[0])})])
.range([wMargin,w-wMargin]);
var yScale = d3.scaleLinear()
.domain([0,d3.max(letters, function(d) {return Math.round(d[0])/4})])
.range([hMargin,h-hMargin]);
//This is where the blur is applied to the SVG
var filter = svg.append("defs")
.append("filter")
.attr("id", "blur")
.append("feGaussianBlur")
.attr("stdDeviation", 10);
//This is the slider mechanism for changing the blur level, can be changed permanently with the stdDeviation value above
d3.select("body").append("input")
.attr("type", "range")
.attr("min", 0)
.attr("max", 100)
.attr("value", 50)
.on("change", blur);
//Draw circles
var grid = gridGroup.selectAll("circle")
.data(letters)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", wMargin/200)
.attr("clip-path", "url(#ellipse-clip)");
var text = blurGroup.selectAll("circle")
.data(letters)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", wMargin/200);
//Defining the clipping path that reveals the sharp dots underneath the blur
svg.append("clipPath") // define a clip path
.attr("id", "ellipse-clip") // give the clipPath an ID
.append("circle") // shape it as an ellipse
.attr("id", "circle-clip")
.attr("cx", 175) // position the x-centre
.attr("cy", 100) // position the y-centre
.attr("r", hMargin);
// This attaches the clipping Mask to the mouse cursor
var x = 100;
var y = 100;
svg.on("mousemove" , function(){
var x = d3.mouse(this)[0];
var y = d3.mouse(this)[1];
svg.select("#circle-clip")
.attr('cx', x)
.attr('cy', y)
});
//The blur function is defined here
function blur() {
filter.attr("stdDeviation", this.value / 5);
};
</script>
</body>
</html>