mejoras

ffanecaa · Nov 26, 2024 · d7fe40d · d7fe40d
1 parent 70d5c30
commit d7fe40d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -7,10 +7,11 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <div class="section">
     <canvas id="canvas"></canvas>
 <div class="controls">
 
-    <button id ="btnC" class="btnC">control</button>
+    <button id ="btnC" class="btnC">Generar</button>
     <div>
        <input id ="spread" type ="range" min ="0.1" max="3.1" step="0.1" value ="1">
        <label for="spread">Spread:</label>
@@ -21,7 +22,7 @@
     </div>
     <button id="btcReset">Reset!</button>
 </div>
-
+</div>
 
 
     <script src="script.js"></script>

diff --git a/script.js b/script.js
@@ -3,14 +3,14 @@ window.addEventListener('load', function(){
   const canvas = document.getElementById('canvas')
   let ctx = canvas.getContext('2d')
 
-  cw = canvas.width = innerWidth
-  ch = canvas.height = innerHeight
+  cw = canvas.width = (innerWidth-150)
+  ch = canvas.height = (innerHeight-150)
 
   ctx.fillStyle ='green'
 
 //   ctx.lineWidth = Math.floor(Math.random()*20+10)
   ctx.lineCap = "round"
-  ctx.shadowColor = "rgba(0,0,0,0.7)"
+  ctx.shadowColor = "rgba(0,0,10,0.7)"
   ctx.shadowOffsetX = 10
   ctx.shadowOffsetY = 5
   ctx.shadowBlur = 10
@@ -21,16 +21,17 @@ window.addEventListener('load', function(){
 
 
   //let size = 200 lo automatizamos
-  let size = cw <ch ? cw*0.3: ch*0.3
+  let size = cw < ch ? cw*0.232 : ch*0.232
 
   //let maxLevel = 4 lo paso a const mas eficiente
    // let branches = 4  idem
 
   let sides = 5
   let scala =0.5
   let spread = 0.5//rotacion valor en radianes
-  let color = 'hsl('+ Math.random()*360+',100%,50%)'
+  let color = 'hsl('+ Math.random()*40+',20%,90%)'
   let lineWidth =Math.floor(Math.random()*20 +10)
+
 /*controlador */
 let btnC = document.getElementById("btnC")
 let btnReset = document.getElementById('btcReset')
@@ -97,10 +98,10 @@ function drawBranch ( level){
 
 
 function controlFractal(){
-     sides = Math.floor(Math.random() * 7 +2)
+     sides = Math.floor(Math.random() * 7 +4)
      scala = Math.random() * 0.2 + 0.4
-     spread = Math.random() * 2.9 +0.1
-     color = 'hsl('+ Math.random()*360+',100%,50%)'
+     spread = Math.random() * 1.8 +0.1
+     color = 'hsl('+ Math.random()*50+',80%,50%)'
      lineWidth = Math.floor(Math.random()*20 +10)
 
 
@@ -117,7 +118,7 @@ function resetFractal(){
     sides = 5
      scala = 0.5
      spread =0.7
-     color = 'hsl(290,100%,50%)'
+     color = 'hsl(90,100%,50%)'
      lineWidth = 20
 }
 

diff --git a/style.css b/style.css
@@ -1,17 +1,50 @@
+:root{
+    --mt-color1:#403139;
+    --mt-color2:#77A1A6;
+    --mt-color3:#D8D9D7;
+    --mt-color4:#594731;
+    --mt-color5:#BF988F;
+    --mt-color6:red;
+}
+
+
+
+
 *{
     margin:0;
     padding: 0;
-    box-sizing: border-box;
-    background-color: #069DBF;
+    box-sizing: border-box;}
+   body{ 
+    background: linear-gradient(
+        135deg,
+        var(--mt-color1),
+        var(--mt-color2),
+        var(--mt-color3),
+
+        var(--mt-color5)
+    )
+}
+.section{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    justify-content:center ;
+    align-items: center;
 }
 
-#canvas{
-    background-color: #069DBF;
+/* #canvas{
+    
+  
     position: absolute;
     top:50%;
-    left:50%;
+    left: 55%;
+  
+   
+ 
     transform: translate(-50%,-50%);
-}
+} */
 
 .controls{
     position: absolute;