J'ai deux points (x, y) début et terminer. Je veux animer du début à la fin, mais au lieu de passer une manière linéaire, je veux créer un chemin incurvé.
Je suis sûr que je ne cherche pas une assouplie parce que je ne veux pas affecter la vitesse d'animation, Je veux juste calculer un chemin incurvé.
J'ai compris que j'avais besoin d'une sorte de point de contrôle, comme indiqué dans cette image:
mais je ne sais pas comment la mettre en œuvre. J'aimerais aimer créer une fonction qui a pris les paramètres suivants où le pourcentage serait un nombre de 0 à 100% et où 0 retournerait la position de départ et 100% de Position finale. La solution n'a pas besoin d'être dans l'objectif-C, cela pourrait être dans n'importe quel langage de programmation. Je ne peux tout simplement pas avoir la tête autour des maths :)
3 Réponses :
regarder Cocoa's Bezier Chemins: (NsbezierPath) .
On dirait que cela ne prendrait pas en charge les courbes quadratiques bézier, vous devez donc Convertir en Cubic .
La solution n'a pas besoin d'être dans l'objectif-C, cela pourrait être dans n'importe quel langage de programmation. Je ne peux tout simplement pas avoir la tête autour des maths
Je ne suis pas en mesure de donner du code, mais si vous êtes après une compréhension des calculs impliqués, je peux expliquer comment cela fonctionne pour la courbe quadruple.
Comprendre d'abord ce que le point de contrôle a une incidence mathématiquement. Le point de contrôle et les deux points définis définissent les gradients de la ligne dessinée au point de courant et le point final. Vous pouvez calculer le gradient des deux lignes à l'aide de M = (Y-Y1) / (x-x1).
Mathématiquement ce que vous essayez de résoudre ensuite ce jeu d'équations pour A, B, C:
hache ^ 2 + bx + C contient les points de début et de fin
2AX + B est égal aux gradients correspondants à la valeur X correspondante.
à ce point, vous avez quadratique qui peut être utilisé pour dessiner la ligne.
J'ai vu cela au travail et je voulais prendre une photo à la maison. Après avoir regardé Cet exemple de Wikipedia depuis un certain temps, je pense que j'ai compris, que faire et ci-dessous vous trouverez un exemple, que je vais expliquer maintenant.
Je vais utiliser un intervalle de temps entre 0 et 1. Tout nombre entre le temps est le temps fraction de l'animation. Ce que vous voulez, c'est d'obtenir la localisation de vous "point d'intérêt" à une fraction de temps donnée. La première étape est que vous avez trois points entre ces deux points calculés ( la position de votre p> a code>, b code>, c code> connecté par deux lignes ( g => [AB] code>, h => [BC] code>). Pour chacune de ces lignes, vous devrez calculer des points qui errent entre le point de départ et le poids p (g) code> respectivement entre le point de poids et le point final p (h) code> à une fraction de temps donnée. p> p (g) code> et p (h) code>) Vous dessinez une troisième ligne ( Appelons-le y code>). Quelque part sur cette ligne est votre "point d'intérêt". Mais où? Encore une fois, vous devez calculer la position d'un point sur la ligne y code> (appelé p (y) code>) voyager à partir de p g (g) code> à p (h) code>. p> p (y) code> est ce que vous recherchez. p>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
