tweak colors and settings

hackr-sh · hackr-sh · commit d100d329ff96 · 2022-09-28T17:11:35.000Z
update readme
update website description
diff --git a/README.md b/README.md
@@ -11,6 +11,12 @@ This website will be the homepage for all of my projects. Any and all projects w
 ## Todo for this page:
 - Add links to pages
 - Update favicon to be an ico
+- Add ability to toggle dark mode and light mode
+- Add ability to change dot radius
+- Add ability to change dot colors (ish)
+- Add ability to change dot spacing
+- Add ability to get dot to follow cursor instead of tilt
+- Add animation to show that the plane is clickable
 
 ## Possible Projects:
 - Mobile Monopoly Client
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
@@ -12,7 +12,8 @@ const Home: NextPage = () => {
     }}>
       <Head>
         <title>hackr labs</title>
-        <meta name="description" content="Generated by create next app" />
+        <meta name="description" content="colorful dots go brrr" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"></meta>
         <link rel="icon" href="/hackrlabs.png" />
         <style>{`body { margin: 0px; padding: 0px; background-image: linear-gradient(120deg, #000000, #030303); overscroll-behavior-y: contain; touch-action: none; user-select: none; }`}</style>
       </Head>
diff --git a/web/util/Canvas.tsx b/web/util/Canvas.tsx
@@ -6,8 +6,8 @@ import React, { useRef, useEffect } from 'react'
 
 const GRAVITY: number = 9.81;
 const GRAVITY_MULTIPLIER: number = 0.05;
-const RADIUS: number = 5;
-const SPACING: number = 50;
+const RADIUS: number = 2;
+const SPACING: number = 35;
 const MAX_VELOCITY: number = 100;
 const EXTERNAL_PADDING_PERCENT: number = 0.05;
 let X_PADDING: number = 0;
@@ -218,8 +218,8 @@ class Square {
     this.reset_from_x = this.x;
     this.reset_from_y = this.y;
     this.color = checkOnImageMap(initial_x, initial_y)
-      ? `#${(Math.random() * 100).toString(16).slice(0, 2)}${(Math.random() * 175).toString(16).slice(0, 2)}${(Math.random() * 255).toString(16).slice(0, 2)}`
-      : "#222222"
+      ? `#${(Math.random() * 70 + 100).toString(16).slice(0, 2)}${(Math.random() * 100 + 100).toString(16).slice(0, 2)}${(Math.random() * 155 + 100).toString(16).slice(0, 2)}`
+      : "#FFFFFF22"
     console.log(this.initial_x, this.initial_y);
   }
 
