☰

Funny Faces

try to take over the world

  1. // ==UserScript==
  2. // @name        Funny Faces
  3. // @namespace   Violentmonkey Scripts
  4. // @match       *://*/*
  5. // @grant       none
  6. // @version     1.0
  7. // @author      @basti564
  8. // @description try to take over the world
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12.  
  13. var canvas = document.createElement('canvas');
  14. canvas.width = window.innerWidth;
  15. canvas.height = window.innerHeight;
  16. document.body.appendChild(canvas);
  17. var ctx = canvas.getContext('2d');
  18.  
  19. var mouse = {
  20.   x: 0,
  21.   y: 0,
  22.   down: false
  23. };
  24.  
  25. var objects = [];
  26.  
  27. function addObject(x, y, w, h, vx, vy, ax, ay, color) {
  28.   objects.push({
  29.     x: x,
  30.     y: y,
  31.     w: w,
  32.     h: h,
  33.     vx: vx,
  34.     vy: vy,
  35.     ax: ax,
  36.     ay: ay,
  37.     color: color
  38.   });
  39. }
  40.  
  41. addObject(100, 100, 50, 50, 0, 0, 0, 0.1, '#ff0000');
  42. addObject(200, 100, 50, 50, 0, 0, 0, 0.1, '#00ff00');
  43. addObject(300, 100, 50, 50, 0, 0, 0, 0.1, '#0000ff');
  44. addObject(400, 100, 50, 50, 0, 0, 0, 0.1, '#ffff00');
  45. addObject(500, 100, 50, 50, 0, 0, 0, 0.1, '#00ffff');
  46. addObject(600, 100, 50, 50, 0, 0, 0, 0.1, '#ff00ff');
  47.  
  48. function drawObject(obj) {
  49.   ctx.fillStyle = obj.color;
  50.   ctx.fillRect(obj.x, obj.y, obj.w, obj.h);
  51. }
  52.  
  53.  
  54. function draw() {
  55.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  56.   for (var i = 0; i < objects.length; i++) {
  57.     drawObject(objects[i]);
  58.   }
  59. }
  60.  
  61. function update() {
  62.   for (var i = 0; i < objects.length; i++) {
  63.     updateObject(objects[i]);
  64.   }
  65. }
  66.  
  67. function loop() {
  68.   draw();
  69.   update();
  70.   requestAnimationFrame(loop);
  71. }
  72.  
  73. function onMouseMove(e) {
  74.   mouse.x = e.clientX;
  75.   mouse.y = e.clientY;
  76. }
  77.  
  78. function onMouseDown(e) {
  79.   mouse.down = true;
  80. }
  81.  
  82. function onMouseUp(e) {
  83.   mouse.down = false;
  84. }
  85.  
  86. canvas.addEventListener('mousemove', onMouseMove);
  87. canvas.addEventListener('mousedown', onMouseDown);
  88. canvas.addEventListener('mouseup', onMouseUp);
  89.  
  90. loop();
  91.  
  92. function updateObject(obj) {
  93.   if (mouse.down && mouse.x >= obj.x && mouse.x <= obj.x + obj.w && mouse.y >= obj.y && mouse.y <= obj.y + obj.h) {
  94.     obj.x = mouse.x - obj.w / 2;
  95.     obj.y = mouse.y - obj.h / 2;
  96.   } else {
  97.     obj.vx += obj.ax;
  98.     obj.vy += obj.ay;
  99.     obj.x += obj.vx;
  100.     obj.y += obj.vy;
  101.     if (obj.x < 0) {
  102.       obj.x = 0;
  103.       obj.vx = -obj.vx;
  104.     }
  105.     if (obj.y < 0) {
  106.       obj.y = 0;
  107.       obj.vy = -obj.vy;
  108.     }
  109.     if (obj.x + obj.w > canvas.width) {
  110.       obj.x = canvas.width - obj.w;
  111.       obj.vx = -obj.vx;
  112.     }
  113.     if (obj.y + obj.h > canvas.height) {
  114.       obj.y = canvas.height - obj.h;
  115.       obj.vy = -obj.vy;
  116.     }
  117.     for (var i = 0; i < objects.length; i++) {
  118.       if (objects[i] !== obj) {
  119.         if (obj.x < objects[i].x + objects[i].w && obj.x + obj.w > objects[i].x && obj.y < objects[i].y + objects[i].h && obj.y + obj.h > objects[i].y) {
  120.           obj.x = obj.x - obj.vx;
  121.           obj.y = obj.y - obj.vy;
  122.           obj.vx = -obj.vx;
  123.           obj.vy = -obj.vy;
  124.         }
  125.       }
  126.     }
  127.   }
  128. }
  129.  
  130. function drawObject(obj) {
  131.   ctx.fillStyle = obj.color;
  132.   ctx.fillRect(obj.x, obj.y, obj.w, obj.h);
  133.   ctx.fillStyle = '#000000';
  134.   ctx.beginPath();
  135.   ctx.arc(obj.x + obj.w / 2, obj.y + obj.h / 2, obj.w / 2, 0, 2 * Math.PI);
  136.   ctx.fill();
  137.   ctx.fillStyle = '#ffffff';
  138.   ctx.beginPath();
  139.   ctx.arc(obj.x + obj.w / 2 - obj.w / 4, obj.y + obj.h / 2 - obj.h / 4, obj.w / 8, 0, 2 * Math.PI);
  140.   ctx.fill();
  141.   ctx.beginPath();
  142.   ctx.arc(obj.x + obj.w / 2 + obj.w / 4, obj.y + obj.h / 2 - obj.h / 4, obj.w / 8, 0, 2 * Math.PI);
  143.   ctx.fill();
  144.   ctx.beginPath();
  145.   ctx.arc(obj.x + obj.w / 2, obj.y + obj.h / 2 + obj.h / 4, obj.w / 4, 0, Math.PI);
  146.   ctx.fill();
  147. };