JSDM

HTML

3
1
<body>
2
  <canvas id='uniform distribution''></canvas>
3
</body>

CSS

xxxxxxxxxx
5
 
1
body{
2
  background: #000000;
3
  margin: 0px;
4
  padding: 0px;
5
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

188
 
1
2
/*****************************************************************************
3
The MIT License (MIT)
4
5
Copyright (c) 2014 Andi Smithers
6
7
Permission is hereby granted, free of charge, to any person obtaining a copy
8
of this software and associated documentation files (the "Software"), to deal
9
in the Software without restriction, including without limitation the rights
10
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
copies of the Software, and to permit persons to whom the Software is
12
furnished to do so, subject to the following conditions:
13
14
The above copyright notice and this permission notice shall be included in
15
all copies or substantial portions of the Software.
16
17
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23
THE SOFTWARE.
24
*****************************************************************************/
25
26
// conceptualized and written by andi smithers
27
28
// constant options
29
const focalDepth = 80;
30
const focalPoint = 256;
31
32
33
// variables
34
var centreX;
35
var centreY;
36
var mouseX;
37
var mouseY;
38
var spawnX;
39
var spawnY;
40
var frameCount=0;
41
42
// variables
43
const maxpoints = 4096;
44
var pointcloud = [];
45
46
// uniform distribution of a randomized unit vector
47
function RandomNormal()
48
{
49
  var theta = Math.random() * Math.PI * 2;
50
  var nz = 1 - 2*Math.random();
51
  var phi = Math.acos(nz);
52
  var nx = Math.sin(theta)*Math.sin(phi);
53
  var ny = Math.cos(theta)*Math.sin(phi);
54
  
55
  return {x:nx, y:ny, z:nz};
56
}
57
58
function InitRandomDistribution()
59
{
60
   for (var i=0; i<maxpoints;i++)
61
   {
62
       pointcloud.push(RandomNormal());
63
   }
64
}
65
66
var theta = 0;
67
var phi = 0;
68
function RenderRandomDistribution()
69
{ 
70
    theta+=0.01;
71
    phi+=0.01;
72
    var scale = 20* canvas.height/500;
73
    context.beginPath();
74
    for (var i=0; i<pointcloud.length; i++)
75
    {
76
        var point = pointcloud[i];
77
      
78
        var x1 = point.x * Math.cos(theta) - point.z*Math.sin(theta);
79
        var z1 = point.x * Math.sin(theta) + point.z*Math.cos(theta);
80
        var y1 = point.y * Math.cos(phi) - z1*Math.sin(phi);
81
        var z1 = point.y * Math.sin(phi) + z1*Math.cos(phi);
82
        x1*=scale;
83
        z1*=scale;
84
        y1*=scale;
85
        if (z1+focalDepth<0) continue;
86
        var depth = focalPoint*3 / (z1 + focalDepth );
87
    
88
        var x = x1 * depth + centreX;
89
        var y = y1 * depth + centreY;
90
        var sz = depth * 0.2;
91
92
        // fill a rect
93
        context.rect(x,y, sz, sz);
94
    }
95
  
96
    context.fillStyle = '#ffffff';
97
    context.fill();
98
}
99
100
// initialization
101
102
function init()
103
{
104
  // setup canvas and context
105
canvas = document.getElementById('uniform distribution');
106
context = canvas.getContext('2d');
107
  
108
  // set canvas to be window dimensions
109
  resize();
110
111
  // create event listeners
112
  canvas.addEventListener('mousemove', mouseMove);
113
  canvas.addEventListener('click', mouseClick);
114
  window.addEventListener('resize', resize);
115
116
  // initialze variables  
117
  InitRandomDistribution();
118
}
119
120
121
// input functions
122
123
function mouseMove(event) 
124
{
125
var rect = canvas.getBoundingClientRect();
126
127
mouseX = event.clientX - rect.left,
128
mouseY = event.clientY - rect.top
129
}
130
131
function mouseClick()
132
{
133
}
134
135
function resize()
136
{
137
  canvas.width = window.innerWidth;
138
  canvas.height = window.innerHeight;
139
    // compute centre of screen
140
  centreX = canvas.width/2;
141
  centreY = canvas.height/2;
142
}
143
144
145
// rendering functions
146
147
function render()
148
{
149
 
150
  context.fillStyle = 'black';
151
  context.clearRect(0, 0, canvas.width, canvas.height); 
152
  
153
  RenderRandomDistribution();
154
  
155
  context.globalAlpha = 1.0;
156
  context.font = '20pt Calibri';
157
  context.fillStyle = 'rgb(255,255,0)';
158
  context.textAlign = "center";
159
  context.fillText('Random Normal', canvas.width/2, 25);
160
  context.fillText('Or randomized unit vector with a uniform distribution', canvas.width/2, 45);
161
  context.fillText('alternatively, even distribution of points on a the surface of a sphere', canvas.width/2, canvas.height-25);
162
163
}
164
165
// movement functions
166
167
function update()
168
{ 
169
}
170
171
// per frame tick functions
172
173
function animate()
174
{
175
  frameCount++;
176
  // movement update
177
  update();
178
  // render update
179
  render();
180
  // trigger next frame
181
  requestAnimationFrame(animate);
182
}
183
184
185
186
// entry point
187
init();
188
animate();</script>
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................