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. };