API tools faq
paste
Guest User

Untitled

a guest
Jan 17th, 2019
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>JS Bin</title>
  7. <style id="jsbin-css">
  8. html,
  9. body {
  10. background: #111;
  11. text-align: center;
  12. }
  13.  
  14. canvas {
  15. margin: 0 auto;
  16. box-sizing: content-box;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <canvas id="c"></canvas>
  22. <script id="jsbin-javascript">
  23. var canvas,
  24. ctx,
  25. sphere = new Sphere3D(40),
  26. distance = 300,
  27. mouse = {
  28. down: false,
  29. button: 1,
  30. x: 0,
  31. y: 0,
  32. px: 0,
  33. py: 0
  34. },
  35. modify = 1;
  36.  
  37. window.requestAnimFrame =
  38. window.requestAnimationFrame ||
  39. window.webkitRequestAnimationFrame ||
  40. window.mozRequestAnimationFrame ||
  41. window.oRequestAnimationFrame ||
  42. window.msRequestAnimationFrame ||
  43. function(callback) {
  44. window.setTimeout(callback, 1000 / 60);
  45. };
  46.  
  47. Number.prototype.clamp = function(min, max) {
  48. return Math.min(Math.max(this, min), max);
  49. };
  50.  
  51. function Point3D() {
  52. this.x = 0;
  53. this.y = 0;
  54. this.z = 0;
  55. }
  56.  
  57. function Sphere3D(radius) {
  58. this.point = new Array();
  59. this.color = "rgb(100,255,0)"
  60. this.radius = (typeof(radius) == "undefined") ? 20.0 : radius;
  61. this.radius = (typeof(radius) != "number") ? 20.0 : radius;
  62.  
  63. this.numberOfVertexes = 0;
  64.  
  65. for (alpha = 0; alpha <= 6.28; alpha += 0.17) {
  66. p = this.point[this.numberOfVertexes] = new Point3D();
  67.  
  68. p.x = Math.cos(alpha) * this.radius;
  69. p.y = 0;
  70. p.z = Math.sin(alpha) * this.radius;
  71. this.numberOfVertexes++;
  72. }
  73.  
  74. for (var direction = 1; direction >= -1; direction -= 2) {
  75. for (var beta = 0.19; beta < 1.445; beta += 0.17) {
  76. var radius = Math.cos(beta) * this.radius;
  77. var fixedY = Math.sin(beta) * this.radius * direction;
  78.  
  79. for (var alpha = 0; alpha < 6.28; alpha += 0.17) {
  80. p = this.point[this.numberOfVertexes] = new Point3D();
  81.  
  82. p.x = Math.cos(alpha) * radius;
  83. p.y = fixedY;
  84. p.z = Math.sin(alpha) * radius;
  85.  
  86. this.numberOfVertexes++;
  87. }
  88. }
  89. }
  90. }
  91.  
  92. function rotateX(point, radians) {
  93. var y = point.y;
  94. point.y = (y * Math.cos(radians)) + (point.z * Math.sin(radians) * -1.0);
  95. point.z = (y * Math.sin(radians)) + (point.z * Math.cos(radians));
  96. }
  97.  
  98. function rotateY(point, radians) {
  99. var x = point.x;
  100. point.x = (x * Math.cos(radians)) + (point.z * Math.sin(radians) * -1.0);
  101. point.z = (x * Math.sin(radians)) + (point.z * Math.cos(radians));
  102. }
  103.  
  104. function rotateZ(point, radians) {
  105. var x = point.x;
  106. point.x = (x * Math.cos(radians)) + (point.y * Math.sin(radians) * -1.0);
  107. point.y = (x * Math.sin(radians)) + (point.y * Math.cos(radians));
  108. }
  109.  
  110. function drawPoint(ctx, x, y, size, color) {
  111. ctx.save();
  112. ctx.beginPath();
  113. ctx.fillStyle = color;
  114. ctx.arc(x, y, size, 0, 2 * Math.PI, true);
  115. ctx.fill();
  116. ctx.restore();
  117. }
  118.  
  119. function drawPointWithGradient(ctx, x, y, size, gradient) {
  120. var reflection;
  121.  
  122. reflection = size / 4;
  123. // 0 - 5
  124. var middle = canvas.width / 2;
  125. var a = mouse.y - middle;
  126.  
  127. ctx.save();
  128. ctx.translate(x, y);
  129. /*var reflectionX = Math.max(Math.min((mouse.px - (canvas.width / 2)) / (canvas.width / 2) * 5, 4), -4);
  130. var reflectionY = Math.max(Math.min((mouse.py - (canvas.height / 2)) / (canvas.height / 2) * 5, 4), -4);
  131. var radgrad = ctx.createRadialGradient(reflectionX, reflectionY, 0.5, 0, 0, size);*/
  132. var radgrad = ctx.createRadialGradient(-reflection, -reflection, reflection, 0, 0, size);
  133.  
  134. var r = 1,
  135. g = 1,
  136. b = 200;
  137.  
  138. var color = "rgb(" + r + "," + g + "," + b + ")";
  139. radgrad.addColorStop(0, '#FFFFFF');
  140. radgrad.addColorStop(gradient, color);
  141. radgrad.addColorStop(1, 'rgba(1,159,98,0)');
  142.  
  143. ctx.fillStyle = radgrad;
  144. ctx.fillRect(-size, -size, size * 2, size * 2);
  145. ctx.restore();
  146. }
  147.  
  148. function projection(xy, z, xyOffset, zOffset, distance) {
  149. return ((distance * xy) / (z - zOffset)) + xyOffset;
  150. }
  151.  
  152. function update() {
  153. ctx.save();
  154. ctx.clearRect(0, 0, canvas.width, canvas.height);
  155.  
  156. for (i = 0; i < sphere.numberOfVertexes; i++) {
  157.  
  158. p.x = sphere.point[i].x;
  159. p.y = sphere.point[i].y;
  160. p.z = sphere.point[i].z;
  161.  
  162. rotateX(p, Math.sin(+new Date / 360));
  163. rotateY(p, Math.cos(+new Date / 360));
  164.  
  165. //if (mouse.down) {
  166. modify = Math.min(Math.abs(mouse.px - (canvas.width / 2)) / (canvas.width / 2) * 1.25, 1.25);
  167. //}
  168. //else if(modify > 1) {
  169. // modify -= .0001;
  170. //}
  171.  
  172. x = projection(p.x, p.z * modify, canvas.width / 2.0, 100.0, distance);
  173. y = projection(p.y, p.z * modify, canvas.height / 2.0, 100.0, distance);
  174.  
  175. if ((x >= 0) && (x < canvas.width)) {
  176. if ((y >= 0) && (y < canvas.height)) {
  177. if (p.z < 0) {
  178. drawPoint(ctx, x, y, 1, "rgba(200,200,200,0.6)");
  179. } else {
  180. drawPointWithGradient(ctx, x, y, 5, 0.8);
  181. }
  182. }
  183. }
  184. }
  185. ctx.restore();
  186.  
  187. requestAnimFrame(update);
  188. }
  189.  
  190. function start() {
  191.  
  192. canvas.onmousemove = function (e) {
  193. mouse.px = mouse.x;
  194. mouse.py = mouse.y;
  195. var rect = canvas.getBoundingClientRect();
  196. mouse.x = e.clientX - rect.left,
  197. mouse.y = e.clientY - rect.top,
  198.  
  199. e.preventDefault();
  200. };
  201.  
  202. canvas.onmouseup = function (e) {
  203. mouse.down = false;
  204. e.preventDefault();
  205. };
  206.  
  207. canvas.onmousedown = function (e) {
  208. mouse.down = true;
  209. e.preventDefault();
  210. };
  211.  
  212. update();
  213. }
  214.  
  215. window.onload = function() {
  216.  
  217. canvas = document.getElementById('c');
  218. ctx = canvas.getContext('2d');
  219. canvas.width = 800;
  220. canvas.height = 600;
  221.  
  222. start();
  223. };
  224. </script>
  225.  
  226.  
  227. <script id="jsbin-source-css" type="text/css">html,
  228. body {
  229. background: #111;
  230. text-align: center;
  231. }
  232.  
  233. canvas {
  234. margin: 0 auto;
  235. box-sizing: content-box;
  236. }</script>
  237.  
  238. <script id="jsbin-source-javascript" type="text/javascript">var canvas,
  239. ctx,
  240. sphere = new Sphere3D(40),
  241. distance = 300,
  242. mouse = {
  243. down: false,
  244. button: 1,
  245. x: 0,
  246. y: 0,
  247. px: 0,
  248. py: 0
  249. },
  250. modify = 1;
  251.  
  252. window.requestAnimFrame =
  253. window.requestAnimationFrame ||
  254. window.webkitRequestAnimationFrame ||
  255. window.mozRequestAnimationFrame ||
  256. window.oRequestAnimationFrame ||
  257. window.msRequestAnimationFrame ||
  258. function(callback) {
  259. window.setTimeout(callback, 1000 / 60);
  260. };
  261.  
  262. Number.prototype.clamp = function(min, max) {
  263. return Math.min(Math.max(this, min), max);
  264. };
  265.  
  266. function Point3D() {
  267. this.x = 0;
  268. this.y = 0;
  269. this.z = 0;
  270. }
  271.  
  272. function Sphere3D(radius) {
  273. this.point = new Array();
  274. this.color = "rgb(100,255,0)"
  275. this.radius = (typeof(radius) == "undefined") ? 20.0 : radius;
  276. this.radius = (typeof(radius) != "number") ? 20.0 : radius;
  277.  
  278. this.numberOfVertexes = 0;
  279.  
  280. for (alpha = 0; alpha <= 6.28; alpha += 0.17) {
  281. p = this.point[this.numberOfVertexes] = new Point3D();
  282.  
  283. p.x = Math.cos(alpha) * this.radius;
  284. p.y = 0;
  285. p.z = Math.sin(alpha) * this.radius;
  286. this.numberOfVertexes++;
  287. }
  288.  
  289. for (var direction = 1; direction >= -1; direction -= 2) {
  290. for (var beta = 0.19; beta < 1.445; beta += 0.17) {
  291. var radius = Math.cos(beta) * this.radius;
  292. var fixedY = Math.sin(beta) * this.radius * direction;
  293.  
  294. for (var alpha = 0; alpha < 6.28; alpha += 0.17) {
  295. p = this.point[this.numberOfVertexes] = new Point3D();
  296.  
  297. p.x = Math.cos(alpha) * radius;
  298. p.y = fixedY;
  299. p.z = Math.sin(alpha) * radius;
  300.  
  301. this.numberOfVertexes++;
  302. }
  303. }
  304. }
  305. }
  306.  
  307. function rotateX(point, radians) {
  308. var y = point.y;
  309. point.y = (y * Math.cos(radians)) + (point.z * Math.sin(radians) * -1.0);
  310. point.z = (y * Math.sin(radians)) + (point.z * Math.cos(radians));
  311. }
  312.  
  313. function rotateY(point, radians) {
  314. var x = point.x;
  315. point.x = (x * Math.cos(radians)) + (point.z * Math.sin(radians) * -1.0);
  316. point.z = (x * Math.sin(radians)) + (point.z * Math.cos(radians));
  317. }
  318.  
  319. function rotateZ(point, radians) {
  320. var x = point.x;
  321. point.x = (x * Math.cos(radians)) + (point.y * Math.sin(radians) * -1.0);
  322. point.y = (x * Math.sin(radians)) + (point.y * Math.cos(radians));
  323. }
  324.  
  325. function drawPoint(ctx, x, y, size, color) {
  326. ctx.save();
  327. ctx.beginPath();
  328. ctx.fillStyle = color;
  329. ctx.arc(x, y, size, 0, 2 * Math.PI, true);
  330. ctx.fill();
  331. ctx.restore();
  332. }
  333.  
  334. function drawPointWithGradient(ctx, x, y, size, gradient) {
  335. var reflection;
  336.  
  337. reflection = size / 4;
  338. // 0 - 5
  339. var middle = canvas.width / 2;
  340. var a = mouse.y - middle;
  341.  
  342. ctx.save();
  343. ctx.translate(x, y);
  344. /*var reflectionX = Math.max(Math.min((mouse.px - (canvas.width / 2)) / (canvas.width / 2) * 5, 4), -4);
  345. var reflectionY = Math.max(Math.min((mouse.py - (canvas.height / 2)) / (canvas.height / 2) * 5, 4), -4);
  346. var radgrad = ctx.createRadialGradient(reflectionX, reflectionY, 0.5, 0, 0, size);*/
  347. var radgrad = ctx.createRadialGradient(-reflection, -reflection, reflection, 0, 0, size);
  348.  
  349. var r = 1,
  350. g = 1,
  351. b = 200;
  352.  
  353. var color = "rgb(" + r + "," + g + "," + b + ")";
  354. radgrad.addColorStop(0, '#FFFFFF');
  355. radgrad.addColorStop(gradient, color);
  356. radgrad.addColorStop(1, 'rgba(1,159,98,0)');
  357.  
  358. ctx.fillStyle = radgrad;
  359. ctx.fillRect(-size, -size, size * 2, size * 2);
  360. ctx.restore();
  361. }
  362.  
  363. function projection(xy, z, xyOffset, zOffset, distance) {
  364. return ((distance * xy) / (z - zOffset)) + xyOffset;
  365. }
  366.  
  367. function update() {
  368. ctx.save();
  369. ctx.clearRect(0, 0, canvas.width, canvas.height);
  370.  
  371. for (i = 0; i < sphere.numberOfVertexes; i++) {
  372.  
  373. p.x = sphere.point[i].x;
  374. p.y = sphere.point[i].y;
  375. p.z = sphere.point[i].z;
  376.  
  377. rotateX(p, Math.sin(+new Date / 360));
  378. rotateY(p, Math.cos(+new Date / 360));
  379.  
  380. //if (mouse.down) {
  381. modify = Math.min(Math.abs(mouse.px - (canvas.width / 2)) / (canvas.width / 2) * 1.25, 1.25);
  382. //}
  383. //else if(modify > 1) {
  384. // modify -= .0001;
  385. //}
  386.  
  387. x = projection(p.x, p.z * modify, canvas.width / 2.0, 100.0, distance);
  388. y = projection(p.y, p.z * modify, canvas.height / 2.0, 100.0, distance);
  389.  
  390. if ((x >= 0) && (x < canvas.width)) {
  391. if ((y >= 0) && (y < canvas.height)) {
  392. if (p.z < 0) {
  393. drawPoint(ctx, x, y, 1, "rgba(200,200,200,0.6)");
  394. } else {
  395. drawPointWithGradient(ctx, x, y, 5, 0.8);
  396. }
  397. }
  398. }
  399. }
  400. ctx.restore();
  401.  
  402. requestAnimFrame(update);
  403. }
  404.  
  405. function start() {
  406.  
  407. canvas.onmousemove = function (e) {
  408. mouse.px = mouse.x;
  409. mouse.py = mouse.y;
  410. var rect = canvas.getBoundingClientRect();
  411. mouse.x = e.clientX - rect.left,
  412. mouse.y = e.clientY - rect.top,
  413.  
  414. e.preventDefault();
  415. };
  416.  
  417. canvas.onmouseup = function (e) {
  418. mouse.down = false;
  419. e.preventDefault();
  420. };
  421.  
  422. canvas.onmousedown = function (e) {
  423. mouse.down = true;
  424. e.preventDefault();
  425. };
  426.  
  427. update();
  428. }
  429.  
  430. window.onload = function() {
  431.  
  432. canvas = document.getElementById('c');
  433. ctx = canvas.getContext('2d');
  434. canvas.width = 800;
  435. canvas.height = 600;
  436.  
  437. start();
  438. };</script></body>
  439. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!