Difference between revisions of "Template:Duesseldorf/2021 gras"

Line 1: Line 1:
 
<html>
 
<html>
−
<style>
 
−
</style>
 
  
 
<script>
 
<script>
Line 10: Line 8:
 
/**
 
/**
 
Original Author: Lucas Mota Ribeiro
 
Original Author: Lucas Mota Ribeiro
 +
Edited by iGem 2021 Düsseldorf
 
This project creates an adaptive array of leafs and animate them.
 
This project creates an adaptive array of leafs and animate them.
 
*/
 
*/
Line 21: Line 20:
  
 
var MID_HEIGHT = 2; // The height of the middle of the leaf.
 
var MID_HEIGHT = 2; // The height of the middle of the leaf.
−
var HEIGHT = 42; // Leaf Height.
+
var HEIGHT = 72; // Leaf Height.
−
var WIDTH = 4; // Leaf width.
+
var WIDTH = 6; // Leaf width.
−
var distance = 5; // Distance between leafs.
+
var distance = 6; // Distance between leafs.
 
var ANGLE = Math.PI / 2; // The angle tha the leaf starts.
 
var ANGLE = Math.PI / 2; // The angle tha the leaf starts.
−
var RANDOMNESS  = 17; // How random these parameters are the leaf's array.
+
var RANDOMNESS  = 42; // How random these parameters are the leaf's array.
 
var time = 0; // Time counter.
 
var time = 0; // Time counter.
 
var leafColor = ['#3AAA35', '#006633', '#8BCB60']; // Color of the leaf.
 
var leafColor = ['#3AAA35', '#006633', '#8BCB60']; // Color of the leaf.
  
 
var FPS = 30;
 
var FPS = 30;
−
var SPEED = 1.75;
+
var SPEED = 1;
−
var LAMBDA = 0.05;
+
var LAMBDA = 0.005;
  
 
/*!
 
/*!
Line 41: Line 40:
 
     */
 
     */
 
     var grass = [];
 
     var grass = [];
 +
    var colors = [];
  
 
     /*!
 
     /*!
Line 87: Line 87:
 
     * Create leafs.
 
     * Create leafs.
 
     */
 
     */
−
     function createLeafs(){
+
 
−
        randCounter = 0;
+
     function setLeafParams (leaf, dist, paralAng){
−
        for (var dist = 0; dist < canvas.width + 50; dist += distance) {
+
              
−
             var leaf={}
+
−
            var paralAng=ANGLE-Math.PI/2;
+
 
             leaf.rand0 = nextRand();
 
             leaf.rand0 = nextRand();
 
             leaf.rand1 = nextRand();
 
             leaf.rand1 = nextRand();
 
             leaf.rand2 = nextRand();
 
             leaf.rand2 = nextRand();
  
−
            //console.log(leaf.rand0+" "+leaf.rand1+" "+leaf.rand2+" "+(((leaf.rand0-5)/5)*HEIGHT*RANDOMNESS/100)+HEIGHT);
 
 
             leaf.Y0 = canvas.height + 5;
 
             leaf.Y0 = canvas.height + 5;
 
             leaf.X0 = dist;
 
             leaf.X0 = dist;
Line 110: Line 107:
 
             leaf.path1 = new Path2D('M '+leaf.X0+' '+leaf.Y0+' q '+leaf.X3+' -'+leaf.Y3+' '+leaf.X1+' -'+leaf.Y1);
 
             leaf.path1 = new Path2D('M '+leaf.X0+' '+leaf.Y0+' q '+leaf.X3+' -'+leaf.Y3+' '+leaf.X1+' -'+leaf.Y1);
 
             leaf.path2 = new Path2D('M '+leaf.X0+' '+leaf.Y0+' q '+leaf.X4+' -'+leaf.Y4+' '+leaf.X1+' -'+leaf.Y1);
 
             leaf.path2 = new Path2D('M '+leaf.X0+' '+leaf.Y0+' q '+leaf.X4+' -'+leaf.Y4+' '+leaf.X1+' -'+leaf.Y1);
 +
        return leaf;
 +
    }
 +
    function createLeafs(){
 +
        randCounter = 0;
 +
        let paralAng=ANGLE-Math.PI/2;
 +
        for (var dist = 0; dist < canvas.width + 50; dist += distance) {
 +
            colors.push(leafColor[getRandomInt(3)]);
 +
           
 +
            var leaf={}
 +
            leaf = setLeafParams(leaf, dist, paralAng);
 +
           
 
             grass.push(leaf); // Add lead to array.
 
             grass.push(leaf); // Add lead to array.
 
         }
 
         }
Line 126: Line 134:
 
             var paralAng = ANGLE-Math.PI/2+time_ang;
 
             var paralAng = ANGLE-Math.PI/2+time_ang;
 
             var aux;
 
             var aux;
 +
 
             leaf.rand0 = nextRand();
 
             leaf.rand0 = nextRand();
 
             leaf.rand1 = nextRand();
 
             leaf.rand1 = nextRand();
Line 131: Line 140:
 
             aux = ((leaf.rand0 - 5) * HEIGHT * RANDOMNESS / 500);
 
             aux = ((leaf.rand0 - 5) * HEIGHT * RANDOMNESS / 500);
 
             tHeight =aux+HEIGHT;
 
             tHeight =aux+HEIGHT;
−
            /*if(i==0){
+
 
−
              console.log(">>"+typeof(aux) +" "+typeof(HEIGHT)+" "+typeof(tHeight));
+
−
            }*/
+
 
             tMheight = ((((leaf.rand1-5)/5)*MID_HEIGHT*RANDOMNESS/100)+MID_HEIGHT);
 
             tMheight = ((((leaf.rand1-5)/5)*MID_HEIGHT*RANDOMNESS/100)+MID_HEIGHT);
 
             tWidth = ((((leaf.rand2-5)/5)*WIDTH*RANDOMNESS/100)+WIDTH);
 
             tWidth = ((((leaf.rand2-5)/5)*WIDTH*RANDOMNESS/100)+WIDTH);
  
−
            //console.log(leaf.rand0+" "+leaf.rand1+" "+leaf.rand2+" "+((((leaf.rand0-5)/5)*HEIGHT*RANDOMNESS/100)+HEIGHT));
 
−
            //
 
 
             leaf.Y0 = canvas.height+5;
 
             leaf.Y0 = canvas.height+5;
 
             leaf.X0 = dist;
 
             leaf.X0 = dist;
Line 152: Line 157:
 
             leaf.path1 =new Path2D('M '+leaf.X0+' '+leaf.Y0+' q '+leaf.X3+' '+(-leaf.Y3)+' '+leaf.X1+' '+(-leaf.Y1));
 
             leaf.path1 =new Path2D('M '+leaf.X0+' '+leaf.Y0+' q '+leaf.X3+' '+(-leaf.Y3)+' '+leaf.X1+' '+(-leaf.Y1));
 
             leaf.path2 =new Path2D('M '+leaf.X0+' '+leaf.Y0+' q '+leaf.X4+' '+(-leaf.Y4)+' '+leaf.X1+' '+(-leaf.Y1));
 
             leaf.path2 =new Path2D('M '+leaf.X0+' '+leaf.Y0+' q '+leaf.X4+' '+(-leaf.Y4)+' '+leaf.X1+' '+(-leaf.Y1));
 +
 +
            aux = ((leaf.rand0 - 5) * HEIGHT * RANDOMNESS / 500);
 +
 +
            tHeight =aux+HEIGHT;
 +
            tMheight = ((((leaf.rand1-5)/5)*MID_HEIGHT*RANDOMNESS/100)+MID_HEIGHT);
 +
            tWidth = ((((leaf.rand2-5)/5)*WIDTH*RANDOMNESS/100)+WIDTH);
 +
 +
           
 
             grass.push(leaf);
 
             grass.push(leaf);
 
         }
 
         }
−
        // var k =3;
+
         ctx.lineWidth = 1;
−
        //console.log("ANGLE:"+Math.floor(ANGLE*180/Math.PI)+" P0:"+grass[k].X0+" "+(400-grass[k].Y0)+" P1:"+(grass[k].X0+grass[k].X1)+" "+grass[k].Y1+" P2:"+(grass[k].X0+grass[k].X2)+" "+grass[k].Y2+" P3:"+(grass[k].X0+grass[k].X3)+" "+grass[k].Y3+" P4:"+(grass[k].X0+grass[k].X4)+" "+grass[k].Y4);
+
−
         ctx.lineWidth = 2;
+
  
 
         for(var i = 0; i < grass.length; i++){
 
         for(var i = 0; i < grass.length; i++){
−
             ctx.fillStyle = leafColor[getRandomInt(3)];
+
            let color = colors[i];
 +
             ctx.fillStyle = color;
 
             var leaf = grass[i];
 
             var leaf = grass[i];
 
             ctx.fill(leaf.path1);
 
             ctx.fill(leaf.path1);
Line 165: Line 177:
 
             //ctx.strokeStyle = "rgba(1,62,4,0.5)";
 
             //ctx.strokeStyle = "rgba(1,62,4,0.5)";
  
−
             // console.log(typeof(leaf.X0));
+
             ctx.strokeStyle = '#eeffee';
−
            var grad = ctx.createLinearGradient(leaf.X0 + leaf.X1, leaf.Y0 - leaf.Y1, leaf.X0, leaf.Y0);
+
−
            var opacity = 0; //55% visible
+
−
            grad.addColorStop(0,'rgba(1,62,4,'+opacity+')');
+
−
 
+
−
            grad.addColorStop(0.2, leafColor[getRandomInt(3)]);
+
−
            grad.addColorStop(1, leafColor[getRandomInt(3)]);
+
−
            ctx.strokeStyle = grad;
+
  
 
             ctx.beginPath();
 
             ctx.beginPath();
Line 178: Line 183:
 
             ctx.lineTo(leaf.X0+leaf.X1, leaf.Y0-leaf.Y1);
 
             ctx.lineTo(leaf.X0+leaf.X1, leaf.Y0-leaf.Y1);
 
             ctx.stroke();
 
             ctx.stroke();
−
            /*ctx.fillStyle = '#000';
 
−
            if(i == 0){
 
−
                ctx.font="20px Georgia";
 
−
                ctx.fillText("x0:"+leaf.X0+" y0:"+leaf.Y0,10,10);
 
−
                ctx.fillText("x1:"+leaf.X1+" y1:"+leaf.Y1,10,40);
 
−
                ctx.fillText("x2:"+leaf.X2+" y2:"+leaf.Y2,10,70);
 
−
                ctx.fillText("x3:"+leaf.X3+" y3:"+leaf.Y3,10,100);
 
−
                ctx.fillText("x4:"+leaf.X4+" y4:"+leaf.Y4,10,130);
 
−
        ctx.fillText("r0:"+leaf.rand0+" r1:"+leaf.rand1+" r2:"+leaf.rand2,500,20);
 
−
                ctx.fillText("Height:"+tHeight.toString(),10,160);
 
−
                ctx.fillText("Width:"+tWidth,10,190);
 
−
                ctx.fillRect(leaf.X0+leaf.X2-5/2,leaf.Y0-leaf.Y2-5/2,5,5);
 
−
            }*/
 
 
         }
 
         }
 
     }
 
     }
Line 212: Line 204:
  
 
     createLeafs();
 
     createLeafs();
−
    console.log("HI");
 
 
     // Updates canvas for a certain FPS.
 
     // Updates canvas for a certain FPS.
 +
    var timeDir = 1;
 +
    var timeDirSteps = 0;
 
     window.setInterval(function () {
 
     window.setInterval(function () {
 +
        SPEED = 0.5
 
         resizeCanvas();
 
         resizeCanvas();
 
         drawGrass(time);
 
         drawGrass(time);
−
         time = (time<=360) ? ++time : 0;
+
        prevTime = time;
 +
         time = (time<=260) ? time + (timeDir) : 0;
 +
        if(time <= 260 && time >= 0){
 +
            time = time + (timeDir);
 +
        }else{
 +
            time = 0;
 +
        }
 +
        if(timeDirSteps >= 30){
 +
            if(getRandomInt(2) === 0){
 +
                timeDir *= -1;
 +
                timeDirSteps = 0;
 +
            }
 +
        }
 +
        timeDirSteps++;
 +
       
 +
       
 
     }, 1000/FPS);
 
     }, 1000/FPS);
 
}
 
}

Revision as of 10:29, 6 October 2021