SHARE
TWEET

Untitled

a guest Jan 24th, 2020 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>bad three dimensional thing</title>
  5. <style>
  6. canvas { border: 1px solid black; border-radius:5px }
  7. body { background-image: url(https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png);}
  8. </style>
  9.  
  10. </head>
  11. <canvas width=500 height=500 id=canvas></canvas><br>
  12. <input type="range" id="zx" min="-5" max="5" step="0.05" value="0.5"><span id=zxd>0.5</span><br>
  13. <input type="range" id="zy" min="-5" max="5" step="0.05" value="0.5"><span id=zyd>0.5</span><br>
  14. <input type="checkbox" checked id="spin"><label for=spin>spin</label>
  15. <script>
  16. var zx = 0.5;
  17. var zy = 0.5;
  18.  
  19. document.getElementById("zx").addEventListener("input", function(e) {
  20.     var val = this.value;
  21.     zx = val;
  22.     document.getElementById("zxd").innerHTML = val.toString();
  23.     go();
  24. });
  25. document.getElementById("zy").addEventListener("input", function(e) {
  26.     var val = this.value;
  27.     zy = val;
  28.     document.getElementById("zyd").innerHTML = val.toString();
  29.     go();
  30. });
  31.  
  32. var canvas = document.getElementById("canvas");
  33. var ctx = canvas.getContext("2d");
  34.  
  35. function rotVert(v,th) {
  36.     var c = Math.cos(th);
  37.     var s = Math.sin(th);
  38.    
  39.     return [c*v[0] + s*v[2], v[1], -s*v[0] + c*v[2]];
  40. }
  41.  
  42. function projVert(v) {
  43.     return [v[0] + zx*v[2], v[1] + zy*v[2]];
  44. }
  45.  
  46. function niceVert(v) {
  47.     return [70*v[0]+250, 70*v[1]+200]
  48. }
  49.  
  50. var vertices = [
  51.     [-1,-1,-1],
  52.     [-1,-1, 1],
  53.     [-1, 1,-1],
  54.     [-1, 1, 1],
  55.     [ 1,-1,-1],
  56.     [ 1,-1, 1],
  57.     [ 1, 1,-1],
  58.     [ 1, 1, 1]
  59. ];
  60.  
  61. ctx.fillStyle = "red";
  62. ctx.strokeStyle = "white";
  63.  
  64. var angle = 0;
  65. var frame = 0;
  66.  
  67. var gradient = ctx.createLinearGradient(0,0,500,0);
  68. gradient.addColorStop("0","magenta");
  69. gradient.addColorStop("0.5","orange");
  70. gradient.addColorStop("1.0","lightsteelblue");
  71.  
  72. ctx.font = "80px sans serif";
  73.  
  74. function go() {
  75.     ctx.fillStyle="purple";
  76.     ctx.fillRect(0,0,500,500);
  77.     ctx.fillStyle=gradient;
  78.     for (var i = 0; i < 8; i++) {
  79.         var v = vertices[i];
  80.         var p = niceVert(projVert(rotVert(v,angle)));
  81.         ctx.fillRect(p[0]-10,p[1]-10,20,20);
  82.     }
  83.    
  84.     for (var i = 0; i < 8; i++) {
  85.         for (var j = 0; j < 8; j++) {
  86.             var v1 = vertices[i];
  87.             var v2 = vertices[j];
  88.             var d = 0;
  89.             for (var p = 0; p < 3; p++) {
  90.                 if (v1[p]  != v2[p]) {
  91.                     d += 1;
  92.                 }
  93.             }
  94.             if (d==1) {
  95.                 var p1 = niceVert(projVert(rotVert(v1,angle)));
  96.                 var p2 = niceVert(projVert(rotVert(v2,angle)));
  97.                 ctx.beginPath();
  98.                 ctx.moveTo(p1[0],p1[1]);
  99.                 ctx.lineTo(p2[0],p2[1]);
  100.                 ctx.stroke();
  101.             }
  102.         }
  103.     }
  104.    
  105.     ctx.fillStyle = gradient;
  106.     var x = (frame % 100)*3;
  107.     ctx.fillText("yuor text here",x,450);
  108. }
  109.  
  110. function step() {
  111.     go();
  112.     if (document.getElementById("spin").checked) {
  113.         angle += 0.05;
  114.     }
  115.     frame += 1;
  116.     requestAnimationFrame(step);
  117. }
  118. step();
  119.  
  120.  
  121. </script>
RAW Paste Data
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
Top