Databases
StackOverflow2013
Postsdbo
POGrass like smoothing animation on beziercurve?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGrass like smoothing animation on beziercurve?
    primarykey
    data
    text
    <p>This is what I am trying to achieve--<a href="http://cssdeck.com/labs/4ksohwya" rel="nofollow">GRASS Animation</a>(Desired animation)</p> <p>This is where the project is standing currently <a href="http://jsfiddle.net/jayeshjain24/UmSss/2/" rel="nofollow">--My hair animation</a></p> <p>This is a more structurised code of the above code --My hair animation(by markE)<a href="http://jsfiddle.net/m1erickson/8K825/" rel="nofollow">--markE`s code of hair animation</a></p> <p><strong>PROBLEM:--</strong></p> <p>I am able to give movements to hairs but animation should be more like wavy grass like freeflowing.Its not very smooth now.What can be done to make the hairs flow in more natural manner. Please provide me with a small sample if possible!!!</p> <pre><code> &lt;canvas id="myCanvas" width="500" height="500" style="background-color: antiquewhite" &gt;&lt;/canvas&gt; </code></pre> <p>JAVASCRIPT</p> <pre><code>//mouse position var x2=0; var y2=0; window.addEventListener("mousemove",function(){moving(event);init()},false) //these variables define the bend in our bezier curve var bend9=0; var bend8=0; var bend7=0; var bend6=0; var bend5=0; var bend4=0; var bend3=0; var bend2=0; var bend1=0; //function to get the mouse cordinates function moving(event) { bend_value();//this function is defined below try { x2 = event.touches[0].pageX; y2 = event.touches[0].pageY; } catch (error) { try { x2 = event.clientX; y2 = event.clientY; } catch (e) { } } try { event.preventDefault(); } catch (e) { } if(between(y2,204,237) &amp;&amp; between(x2,115,272)) { console.log("Xmove="+x2,"Ymove="+y2) } } //function for declaring range of bezier curve function between(val, min, max) { return val &gt;= min &amp;&amp; val &lt;= max; } (function() { hair = function() { return this; }; hair.prototype={ draw_hair:function(a,b,c,d,e,f,g,h){ var sx =136+a;//start position of curve.used in moveTo(sx,sy) var sy =235+b; var cp1x=136+c;//control point 1 var cp1y=222+d; var cp2x=136+e;//control point 2 var cp2y=222+f; var endx=136+g;//end points var endy=210+h; var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // context.clearRect(0, 0,500,500); context.strokeStyle="grey"; context.lineWidth="8"; context.beginPath(); context.moveTo(sx,sy); context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,endx,endy); context.lineCap = 'round'; context.stroke(); // context.restore(); // context.save(); } }; })(); //this function provides and calculate the bend on mousemove function bend_value(){ var ref1=135;//this is ref point for hair or curve no 1 var ref2=150;//hair no 2 and so on var ref3=165; var ref4=180; var ref5=195; var ref6=210; var ref7=225; var ref8=240; var ref9=255; if(between(x2,115,270) &amp;&amp; between(y2,205,236)) { if(x2&gt;=135 &amp;&amp; x2&lt;=145){bend1=(x2-ref1)*(2.2);} if(x2&lt;=135 &amp;&amp; x2&gt;=125){bend1=(x2-ref1)*(2.2);} if(x2&gt;=150 &amp;&amp; x2&lt;=160){bend2=(x2-ref2)*(2.2);} if(x2&lt;=150 &amp;&amp; x2&gt;=140){bend2=(x2-ref2)*(2.2);} if(x2&gt;=165 &amp;&amp; x2&lt;=175){bend3=(x2-ref3)*(2.2);} if(x2&lt;=165 &amp;&amp; x2&gt;=155){bend3=(x2-ref3)*(2.2);} if(x2&gt;=180 &amp;&amp; x2&lt;=190){bend4=(x2-ref4)*(2.2);} if(x2&lt;=180 &amp;&amp; x2&gt;=170){bend4=(x2-ref4)*(2.2);} if(x2&gt;=195 &amp;&amp; x2&lt;=205){bend5=(x2-ref5)*(2.2);} if(x2&lt;=195 &amp;&amp; x2&gt;=185){bend5=(x2-ref5)*(2.2);} if(x2&gt;=210 &amp;&amp; x2&lt;=220){bend6=(x2-ref6)*(2.2);} if(x2&lt;=210 &amp;&amp; x2&gt;=200){bend6=(x2-ref6)*(2.2);} if(x2&gt;=225 &amp;&amp; x2&lt;=235){bend7=(x2-ref7)*(2.2);} if(x2&lt;=225 &amp;&amp; x2&gt;=215){bend7=(x2-ref7)*(2.2);} if(x2&gt;=240 &amp;&amp; x2&lt;=250){bend8=(x2-ref8)*(2.2);} if(x2&lt;=240 &amp;&amp; x2&gt;=230){bend8=(x2-ref8)*(2.2);} if(x2&gt;=255 &amp;&amp; x2&lt;=265){bend9=(x2-ref9)*(2.2);} if(x2&lt;=255 &amp;&amp; x2&gt;=245){bend9=(x2-ref9)*(2.2);} } } function init(){//this function draws each hair/curve var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var clear=context.clearRect(0, 0,500,500); var save=context.save(); // /* console.log("bend2="+bend2) // console.log("bend3="+bend3) // console.log("bend4="+bend4) // console.log("bend5="+bend5) // console.log("bend6="+bend6) // console.log("bend7="+bend7) // console.log("bend8="+bend8) // console.log("bend9="+bend9)*/ hd1 = new hair();//hd1 stands for hair draw 1.this is an instance created for drawing hair no 1 clear; hd1.draw_hair(0,0,0,0,0,0,0+bend1/2,0);//these parameters passed to function drawhair and bend is beint retrieved from function bend_value() save; hd2 = new hair(); clear; hd2.draw_hair(15,0,15,0,15,0,15+bend2/2,0); save; hd3 = new hair(); clear; hd3.draw_hair(30,0,30,0,30,0,30+bend3/2,0); save; hd4 = new hair(); clear; hd4.draw_hair(45,0,45,0,45,0,45+bend4/2,0); save; hd5 = new hair(); clear; hd5.draw_hair(60,0,60,0,60,0,60+bend5/2,0); save; } window.onload = function() { init(); disableSelection(document.body) } function disableSelection(target){ if (typeof target.onselectstart!="undefined") //IE target.onselectstart=function(){return false} else if (typeof target.style.MozUserSelect!="undefined") //Firefox target.style.MozUserSelect="none" else //All other ie: Opera target.onmousedown=function(){return false} target.style.cursor = "default" } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLeonardo Da Codinchi
    1. USLeonardo Da Codinchi
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGrass like smoothing animation on beziercurve?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POGrass like smoothing animation on beziercurve?
      1. USCaptainBli
      1. VTFavorite
    3. VO
      singulars
      1. POGrass like smoothing animation on beziercurve?
      1. USJordan Gray
      1. VTFavorite
    1. COThe grass code seems to be keeping track of the current timestamp, and using that to position stuff as a function of time. For example, here: `var inc_punta_hierba= Math.sin(time*0.0005);`
      singulars
      1. POGrass like smoothing animation on beziercurve?
      1. USbfavaretto
    2. COYes,I agree but what if i want the animation on mousemove?
      singulars
      1. POGrass like smoothing animation on beziercurve?
      1. USLeonardo Da Codinchi
    3. CO@bfavaretto:can you elaborate how thats happening onload if not for mouse move.I am finding it difficult to understand the time part!!!and sin and cos part which determines the movement!!
      singulars
      1. POGrass like smoothing animation on beziercurve?
      1. USLeonardo Da Codinchi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload