ajout doc main.js reglage bug footer et lisibilite css html

ChevalMonsieur · Oct 7, 2023 · 24dde7a · 24dde7a
1 parent c5553d0
commit 24dde7a
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 41 deletions.
diff --git a/general.css b/general.css
@@ -11,24 +11,28 @@
 
 body {
     font-family: 'Montserrat', sans-serif;
-    color: whitesmoke;
     background-color: black;
+    color: whitesmoke;
+
+    display: flex;
+    flex-direction: column;
     margin: 0;
+    min-height: 100vh;
 }
 
 input {
     background-color: black;
     color: whitesmoke;
+
     max-width: 50px;  
 }
 
 footer {
-    margin-top: 3rem;
-    padding: 1rem;
-    border-top: 1px solid whitesmoke;
+    margin-top: auto;
+}
 
-    display: flex;
-    justify-content: space-evenly;
+img {
+    color: whitesmoke;
 }
 
 /* CLASS */
@@ -43,12 +47,13 @@ footer {
 .visu {
     border: solid whitesmoke 1px;
     border-radius: 4px;
-
     margin-right: 1rem;
     width: 80%;
 }
 
 .bouton {
+    background-color: black;
+
     border: solid whitesmoke 1px;
     border-radius: 5px;
     padding: 0.3rem;
@@ -60,19 +65,18 @@ footer {
 
 .bouton:hover {
     transform: scale(1.1);
-    color: rgb(210,210,210);
     cursor: pointer;
+
+    color: rgb(210,210,210);
     font-weight: bold;
 }
 
 .boutonAbsolu {
     position: absolute;
-    background-color: black;
 }
 
 .boutonFixed {
     position: fixed;
-    background-color: black; 
     bottom: 1rem;
     right: 1rem;
 }
@@ -97,6 +101,7 @@ footer {
 
 .valueName {
     font-size: medium;
+
     margin: 0.5rem 0 0.5rem 0;
 }
 
@@ -105,16 +110,29 @@ footer {
     margin-left: 0.5rem;
     border: 0;
     border-bottom: 1px solid whitesmoke;
-    background-color: rgba(54, 41, 41, 0);
 }
 
 .presets {
     display: flex;
 }
 
+.first {
+    margin-left: 0;
+}
+
+.footer {
+    margin-top: 2.5rem;
+    padding: 1rem;
+    border-top: 1px solid whitesmoke;
+
+    display: flex;
+    justify-content: space-evenly;
+}
+
 .imageFooter {
     margin: 0.3rem 0 0.3rem 0;
     width: 2rem;
+
     transition: transform .2s;
 }
 
@@ -157,7 +175,8 @@ footer {
 }
 
 #duoTone:hover {
-    background: linear-gradient(to right, rgb(255, 247, 3) 0%, rgb(255, 77, 216) 100%);
+    background: linear-gradient(to right, rgb(255, 247, 3), rgb(255, 77, 216));
+
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -184,10 +203,6 @@ footer {
         font-size: 1rem;
     }
 
-    .valueName, .bouton {
-        font-size: 0.8rem;
-    }
-
     .visu {
         width: 75%;
     }
@@ -196,6 +211,10 @@ footer {
         width: 25%;
     }
 
+    .valueName, .bouton {
+        font-size: 0.8rem;
+    }
+
     .imageFooter {
         width: 1.5rem;
     }
@@ -204,17 +223,17 @@ footer {
 
 @media screen and (max-width: 600px) {
 
-    .valueName, .bouton {
-        font-size: 0.7rem;
-    }
-
     .visu {
         width: 70%;
     }
 
     .sideBar {
         width: 30%;
     }
+
+    .valueName, .bouton {
+        font-size: 0.7rem;
+    }
 
     footer {
         justify-content: center;

diff --git a/index.html b/index.html
@@ -84,7 +84,7 @@ <h3>Values :</h3>
 
         <h3> Presets :</h3>
         <div class="presets">
-            <p onclick="presetSandStream();" class="bouton" id="sandStream">sandStream</p>
+            <p onclick="presetSandStream();" class="bouton first" id="sandStream">sandStream</p>
             <p onclick="presetHighway()" class="bouton" id="highway">highway</p>
             <p onclick="presetGenerativeMap()" class="bouton" id="generativeMap">generative map</p>
             <p onclick="presetGlitch()" class="bouton" id="glitch">glitch</p>
@@ -93,10 +93,12 @@ <h3> Presets :</h3>
     </div>
 
     <footer>
-        <a href="https://www.linkedin.com/in/justin-hurson-0794b1253" target="_blank" title="contact me on Linkedin"><img class="imageFooter" src="images/logoLinkedin.png" alt="Logo Linkedin"></a>
-        <a href="https://github.com/ChevalMonsieur/AdaptiveFlowField" target="_blank" title="see the Github repository&#013of my project"><img class="imageFooter" src="images/logoGithub.png" alt="logo Github"></a>
-        <a href="https://mrcheval.itch.io" target="_blank" title="try out my games&#013on Itch.io"><img class="imageFooter" src="images/logoItch.png" alt="logo Itch.io"></a>
-        <a href="mailto:[email protected]" target="_blank" title="mail me"><img class="imageFooter" src="images/logoMail.png" alt="Logo Mail"></a>
+        <div class="footer">
+            <a href="https://www.linkedin.com/in/justin-hurson-0794b1253" target="_blank" title="contact me on Linkedin"><img class="imageFooter" src="images/logoLinkedin.png" alt="Logo Linkedin"></a>
+            <a href="https://github.com/ChevalMonsieur/AdaptiveFlowField" target="_blank" title="see the Github repository&#013of my project"><img class="imageFooter" src="images/logoGithub.png" alt="logo Github"></a>
+            <a href="https://mrcheval.itch.io" target="_blank" title="try out my games&#013on Itch.io"><img class="imageFooter" src="images/logoItch.png" alt="logo Itch.io"></a>
+            <a href="mailto:[email protected]" target="_blank" title="mail me"><img class="imageFooter" src="images/logoMail.png" alt="Logo Mail"></a>    
+        </div>
     </footer>
 </body>
 

diff --git a/main.js b/main.js
@@ -1,3 +1,7 @@
+///////////////////////////
+//    Canvas drawing     //
+///////////////////////////
+
 let nbPoints = 2000; // amount of points
 let points = []; // list of all points
 
@@ -16,9 +20,9 @@ let currentColor2; // 2nd color of the points (if needed)
 function setup() {
 
     // get size of div
-    if (window.innerWidth > 1920) {
+    if (window.innerWidth > 3000) {
         mainWidth = document.getElementById("main").clientWidth;
-        mainHeight = window.innerHeight - 300; // test
+        mainHeight = window.innerHeight - 400; // test
     } else {
         mainWidth = document.getElementById("main").clientWidth;
         mainHeight = document.getElementById("setterCanvaHeight").clientHeight + 25; // + 25 is a manual offset to make canvas slightly bigger than the sidebar
@@ -39,13 +43,15 @@ function setup() {
 }
 
 function draw() {
-    // add fade effect if fade != 0
+    // add fade effect if fade is not 0
     if (fadeSpeed > 0) {
         background(0, fadeSpeed);
     }
 
     for (vector of points) {
+        // if there are 2 colors, change color at the middle of the list
         if (points[Math.floor(points.length/2)] == vector && currentColor2 != null) stroke(currentColor2)
+
         // set the direction of the point with semi-random noise
         let direction = 2 * rotationScale * Math.PI * noise(vector.x / positionScale, vector.y / positionScale);
 
@@ -55,19 +61,19 @@ function draw() {
 
         // check if the point is off-screen and apply border rule
         switch (borderRule) {
-            case "randomTeleport":
+            case "randomTeleport": // teleport to random position
                 if (vector.x < 0 || vector.x > mainWidth || vector.y < 0 || vector.y > mainHeight) {
                     vector.x = random(mainWidth);
                     vector.y = random(mainHeight);
                 }
                 break;
-            case "linkedTeleport":
+            case "linkedTeleport": // teleport to opposite side (bottom = top, left = right)
                 if (vector.x < 0) vector.x = mainWidth;
                 if (vector.x > mainWidth) vector.x = 0;
                 if (vector.y < 0) vector.y = mainHeight;
                 if (vector.y > mainHeight) vector.y = 0;
                 break;
-            case "none":
+            case "none": // let the point go off-screen
             default:
                 break;
         }
@@ -97,7 +103,7 @@ function windowResized() {
 }
 
 function reset() {
-    //reset values
+    //refresh values
     stroke(currentColor);
     strokeWeight(size);
     background(0);
@@ -109,9 +115,8 @@ function reset() {
     }
 }
 
-
 ///////////////////////////
-//      Values HTML      //
+//  Setters Values HTML  //
 ///////////////////////////
 
 function inputNbParticle(event) {
@@ -140,7 +145,7 @@ function inputSpeed(event) {
 function inputSize(event) {
     if (event.keyCode === 13) { // check if enter is pressed
         size = document.getElementById("size").value; // change size
-        strokeWeight(size); // set size of points
+        strokeWeight(size); // apply size to stroke
         reset();
     }
 }
@@ -163,7 +168,7 @@ function inputOpacity(event) {
     if (event.keyCode === 13) { // check if enter is pressed
         opacity = Math.floor(document.getElementById("opacity").value); // change opacity (USE MATH.FLOOR BECAUSE STROKE DOESN'T ACCEPT FLOATS)
         currentColor.setAlpha(opacity); // set opacity in color
-        if (currentColor2 != null) currentColor2.setAlpha(opacity); // set opacity in color2 (if needed
+        if (currentColor2 != null) currentColor2.setAlpha(opacity); // set opacity in color2 (if needed)
         stroke(currentColor); // set color in RGBA
         reset();
     }
@@ -177,14 +182,14 @@ function inputFade(event) {
 }
 
 function inputBorderRule(inputBorderRule) {
-    if (inputBorderRule != null) {
+    if (inputBorderRule != null) { // makes it so that it doesn't change borderRule if inputBorderRule is null
         borderRule = inputBorderRule // change borderRule
     }
     reset();
 }
 
 function inputColor(inputColor, inputColor2) {
-    if (inputColor != null) {
+    if (inputColor != null) { // makes it so that it doesn't change color if inputColor is null (serves for apply all inputs when called with no values in html)
         currentColor = inputColor; // change color
         currentColor2 = inputColor2; // change 2nd color
     }
@@ -193,9 +198,11 @@ function inputColor(inputColor, inputColor2) {
 }
 
 function applyAllInputs(newBorderRule, newColor, newColor2) {
-    // calls all inputs with correct event.keycode (enter)
+    // inputColor needs to be called before inputOpacity and inputFadeSpeed
     inputBorderRule(newBorderRule);
     inputColor(newColor, newColor2);
+
+    // calls all inputsFunctions with correct event.keycode (enter)
     inputNbParticle({keyCode: 13});
     inputSpeed({keyCode: 13});
     inputSize({keyCode: 13});
@@ -207,13 +214,11 @@ function applyAllInputs(newBorderRule, newColor, newColor2) {
     reset();
 }
 
-
 ///////////////////////////
 //        Presets        //
 ///////////////////////////
 
 function presetSandStream() {
-
     // modify all values in html
     document.getElementById("nbPoints").value = 2000;
     document.getElementById("speed").value = 50;
@@ -230,6 +235,7 @@ function presetSandStream() {
 
 
 function presetHighway() {
+    // modify all values in html
     document.getElementById("nbPoints").value = 1000;
     document.getElementById("speed").value = 10;
     document.getElementById("size").value = 1;
@@ -244,6 +250,7 @@ function presetHighway() {
 }
 
 function presetGenerativeMap() {
+    // modify all values in html
     document.getElementById("nbPoints").value = 3000;
     document.getElementById("speed").value = 0.2;
     document.getElementById("size").value = 1;
@@ -258,6 +265,7 @@ function presetGenerativeMap() {
 }
 
 function presetGlitch() {
+    // modify all values in html
     document.getElementById("nbPoints").value = 2000;
     document.getElementById("speed").value = 150;
     document.getElementById("size").value = 0.1;
@@ -272,6 +280,7 @@ function presetGlitch() {
 }
 
 function presetDuoTone() {
+    // modify all values in html
     document.getElementById("nbPoints").value = 10000;
     document.getElementById("speed").value = 0.3;
     document.getElementById("size").value = 1;