Comment implémenter les lignes sineWaveTo squareWaveTo et sawWaveTo dans le contexte 2d html5 canvas?

Je voudrais essayer une implémentation de sorte qu'ils puissent être utilisés d'une manière similaire à lineTo(). En partant du point actuel, étant donné les coordonnées de fin, les fonctions traceraient une ligne carrée, une ligne de scie ou une ligne sinusoïdale jusqu'aux coordonnées de fin. Je ne sais pas si nous pouvons factoriser à la fois l'amplitude et la fréquence parce que je suppose que cela causerait des problèmes avec la ligne finissant réellement sur le point final mais calculant la fréquence de distance et d'amplitude devrait. L'amplitude et la fréquence en tant que paramètres devrait être possible, en supposant que nous ajustons la fréquence proportionnelle à la distance. Jusqu'à présent, tout ce que j'ai trouvé est un exemple en ActionScript et je n'arrive pas à les adapter à une fonction de dessin au trait non animée comme je le souhaite.Comment implémenter les lignes sineWaveTo squareWaveTo et sawWaveTo dans le contexte 2d html5 canvas?

Toute aide est grandement appréciée, jusqu'à présent, j'ai trouvé toutes sortes de spirales funky mais rien de proche du but. Je ne suis pas un grand amateur de maths donc pseudo code bienvenue;)

Hahahah, "tumbleweed badge" ... il me semble que les piles mentales ont débordé.

Source

2010-09-30 Quickredfox

Essayez ceci pour faire bonne mesure. Ne fait que pécher(), mais, je suis sûr que vous serez en mesure de comprendre le reste. (Testé uniquement dans Firefox, BTW.)

<html> 

<head> 
<title>sin()</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" djConfig="parseOnLoad:true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script> 
<link rel="stylesheet" rev="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css" type="text/css" /> 
<link rel="stylesheet" rev="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" type="text/css" /> 
<style type="text/css"> 
#id_canvas { border:5px solid gray } 
</style> 

<script type="text/javascript"> 

dojo.require("dijit.form.VerticalSlider"); 
dojo.require("dijit.form.HorizontalSlider"); 
dojo.require("dijit.form.HorizontalRule"); 
dojo.require("dijit.form.VerticalRule"); 
dojo.require("dijit.form.HorizontalRuleLabels"); 
dojo.require("dijit.form.VerticalRuleLabels"); 
dojo.require("dojo.parser"); 

function myHandler() { 

    ctx.clearRect(0, 0, 640, 480); 

    var amp = dijit.byId('slider2').attr("value"); 
    var period = 1/dijit.byId('slider1').attr("value"); 

    ctx.beginPath(); 
    ctx.moveTo(0, 240); 
    for(i = 0; i <= 640; i++) { 
     ctx.lineTo(i, 240 - Math.sin((i/640)/period) * amp); 
    } 

    ctx.stroke(); 

} 

var canvas = null; 
var ctx = null; 

dojo.addOnLoad(function() { 
    canvas = document.getElementById('id_canvas'); 
    ctx = canvas.getContext('2d'); 

    myHandler(); 
}); 

</script> 

<body class="claro"> 

<table class="bla"> 
<tr> 
    <td><canvas id="id_canvas" width="640" height="480"></canvas></td> 
    <td rowspan="2"> 
     <div dojoType="dijit.form.VerticalSlider" name="horizontal1" 
      noValueIndicator="<span style='color:silver'>Click to edit</span>" 
      onChange="myHandler()" 
      value="100" 
      minimum="-240" 
      maximum="240" 
      pageIncrement="100" 
      showButtons="false" 
      intermediateChanges="true" 
      slideDuration="1" 
      style="margin-left:40px; width:30px; height: 480px;" 
      id="slider2" 
     ></div> 
    </td> 
</tr> 
<tr> 
    <td colspan="2"> 
    <br/> 
    <br/> 
     <div dojoType="dijit.form.HorizontalSlider" name="horizontal1" 
      noValueIndicator="<span style='color:silver'>Click to edit</span>" 
      onChange="myHandler()" 
      value="6.28291" 
      maximum="12.5663706" 
      minimum="0" 
      pageIncrement="100" 
      showButtons="false" 
      intermediateChanges="true" 
      slideDuration="1" 
      style="margin-left:40px; width:600px; height: 30px;" 
      id="slider1" 
     > 
      <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=11 style="height:5px;"></div> 
      <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:12px;"> 
       <li>0</li> 
       <li>PI</li> 
       <li>2PI</li> 
       <li>3PI</li> 
       <li>4PI</li> 
      </ol> 
     </div> 
    </td> 
</tr> 
</table> 

</body> 

</html>

On dirait: alt text

Source

2010-10-13 03:17:53 pp19dd

votre réponse est une bonne réponse mais je ne me sens pas, il répond à ma question parce que je suis dans cette voie. – Quickredfox

Pourtant, je blâme seulement la formulation de ma question pour laquelle je dois retravailler. Mais oui, c'est la formule générale pour une onde sinusoïdale, alors je me suis rendu compte que pour réaliser une fonction multiforme, l'implémentation finale serait plus au niveau de ce que bevierCurveTo fait: calculer des points cartésiens et dériver calculs à partir de cela. Je ne dirais pas que c'est exactement ce qu'il fait en interne mais je sais que c'est ce que je dois faire ... ma fonction de forme d'onde idéale accepterait de Axe, Ay à Bx, Par amp, freq, shape et si elle doit: dessinez une onde angulaire de A à B de "forme" – Quickredfox

Puis encore, peut-être que je suis complètement hors de ce sujet, peut-être que je dois penser à utiliser ctx.rotate, traduire en A et juste incrémenter les cycles d'onde jusqu'à B et tourner, traduire en arrière? – Quickredfox

Comment implémenter les lignes sineWaveTo squareWaveTo et sawWaveTo dans le contexte 2d html5 canvas?

Répondre

Questions connexes