Starr Rose Mesh

starr_rose_mesh

			// set some global vars
			var _c;
			 
			// params for making rose flower play with these settings to make all kinds of different shapes
			var a = 8;
			var b = 16;
			var c = 16;
			 
			// number of flowers to draw. each one progressively smaller
			var shades = 10;
			 
			var radius = 20;
			 
			function draw(){
			    _c = ctx;
			     
			    // move to center of canvas
			    _c.translate(can.width/4,can.height/4);
			     
			    // main loop controls how many flowers are drawn
			    for(var j=1; j<shades;j++){
			     
			      _c.beginPath();
			       
			      // secondary loop controls the drawing of each flower
			      for(var i=0; i<360;i++){
			        var rad = deg2rads(i);
			        rose(rad, radius);  
			      }
			       
			      // make radius jump larger for first flower  and 10 for every other one
			      radius -= (j === 1) ? 25: 5;
			      _c.closePath();
			       
			      // fill color for stroke and fill/ automaitcally gets darker for every flower drawn
			      // can be reversed by starting with a small number and adding j eg Math.floor(20*j)
			      _c.fillStyle = 'rgba(0,'+Math.floor(70/j)+',0,.6)';
			      _c.strokeStyle = 'rgba(0,'+Math.floor(70/j)+',0,.6)';
			      _c.fill();
			      _c.stroke();
			    }
			 
			}
			 
			function deg2rads(d){
			    return d * Math.PI / 180;
			}

			 
			function rose(radian, r) {
			       
			 
			      var k = 2 + Math.sin( a * radian ) / 2;
			      var tt = radian + Math.sin( b * radian ) / c;
			 
			      var valueX = r * k * Math.cos( tt );
			      var valueY = -(r * k * Math.sin( tt ));
			       
			      //un-comment below for a cool effect. instead of drawing along a path every point on the flower is drawn back to the center of the flower
			      _c.moveTo(0,0); // shaded flower effect
			      _c.lineTo(valueX, valueY);
			       
			}