Ergebnis 1 bis 5 von 5
  1. #1
    salazar ist offline Mitglied
    registriert
    22-01-2016
    Ort
    Düsseldorf
    Beiträge
    29

    Question 2D distance functions in JavaScript übersetzen

    Hi,
    vielleicht kann mir einer von euch helfen.
    Ich habe diese wirklich schöne Seite für "2D distance functions" gefunden:
    https://www.iquilezles.org/www/artic...unctions2d.htm

    Mein Problem, ich bekomme die functions nicht in JavaScript übersetzt. Mit der ersten function sdCircle ging das noch klar:
    HTML-Code:
    float sdCircle( vec2 p, float r )
    {
      return length(p) - r;
    }
    Wird zu:
    HTML-Code:
    float signedDistanceToCircle( p, center, radius )
    {
      const dx = p.x - center.x;
      const dy = p.y - center.y;
    
      return Math.sqrt( dx * dx + dy * dy ) - radius;
    }
    Aber z.B. bei der sdBox function hört es schon auf:
    HTML-Code:
    float sdBox( in vec2 p, in vec2 b )
    {
        vec2 d = abs(p)-b;
        return length(max(d,vec2(0))) + min(max(d.x,d.y),0.0);
    }
    Wie beim circle habe ich ein Object p (Point) mit x und y, ein Object center (Box center) mit x und y und eine float/Number size.
    Ich würde gerne die Distanz von p zur box mit der Größe size ermitteln.

    Danke und Gruß

    - - - Aktualisiert - - -

    Hey, habe es hinbekommen.
    Hier meine Lösung:
    HTML-Code:
    function signedDistanceToBox( p, center, size ) {
    
      const offsetX = Math.abs( p.x - center.x ) - size / 2;
      const offsetY = Math.abs( p.y - center.y ) - size / 2;
    
      const offsetMaxX = Math.max( offsetX, 0 );
      const offsetMaxY = Math.max( offsetY, 0 );
      const offsetMinX = Math.min( offsetX, 0 );
      const offsetMinY = Math.min( offsetY, 0 );
      
      const unsignedDst = Math.sqrt( offsetMaxX * offsetMaxX + offsetMaxY * offsetMaxY );
      const dstInsideBox = Math.max( offsetMinX, offsetMinY );
    
      return unsignedDst + dstInsideBox;
      
    }
    - - - Aktualisiert - - -








    Hey,
    jetzt ergibt sich doch noch eine Frage!

    Auf der zuvor schon angesprochenen Seite: https://www.iquilezles.org/www/artic...unctions2d.htm gibt es eine sdTriangle function:
    HTML-Code:
    float sdTriangle( in vec2 p, in vec2 p0, in vec2 p1, in vec2 p2 )
    {
        vec2 e0 = p1-p0, e1 = p2-p1, e2 = p0-p2;
        vec2 v0 = p -p0, v1 = p -p1, v2 = p -p2;
        vec2 pq0 = v0 - e0*clamp( dot(v0,e0)/dot(e0,e0), 0.0, 1.0 );
        vec2 pq1 = v1 - e1*clamp( dot(v1,e1)/dot(e1,e1), 0.0, 1.0 );
        vec2 pq2 = v2 - e2*clamp( dot(v2,e2)/dot(e2,e2), 0.0, 1.0 );
        float s = sign( e0.x*e2.y - e0.y*e2.x );
        vec2 d = min(min(vec2(dot(pq0,pq0), s*(v0.x*e0.y-v0.y*e0.x)),
                         vec2(dot(pq1,pq1), s*(v1.x*e1.y-v1.y*e1.x))),
                         vec2(dot(pq2,pq2), s*(v2.x*e2.y-v2.y*e2.x)));
        return -sqrt(d.x)*sign(d.y);
    }
    Hier mein aktuell noch wenig erfolgreicher Versuch diese function in JavaScript zu überführen:
    HTML-Code:
    function signedDistanceToTriangle( p, p0, p1, p2 ) {
    
      const edge0X = p1.x - p0.x;
      const edge0Y = p1.y - p0.y;
      const edge1X = p2.x - p1.x;
      const edge1Y = p2.y - p1.y;
      const edge2X = p0.x - p2.x;
      const edge2Y = p0.y - p2.y;
    
      const v0X = p.x - p0.x;
      const v0Y = p.y - p0.y;
      const v1X = p.x - p1.x;
      const v1Y = p.y - p1.y;
      const v2X = p.x - p2.x;
      const v2Y = p.y - p2.y;
    
      const pq0X = v0X - edge0X * clamp( dot( v0X, edge0X ) / dot( edge0X, edge0X ), 0, 1 );
      const pq0Y = v0Y - edge0Y * clamp( dot( v0Y, edge0Y ) / dot( edge0Y, edge0Y ), 0, 1 );
      const pq1X = v1X - edge1X * clamp( dot( v1X, edge1X ) / dot( edge1X, edge1X ), 0, 1 );
      const pq1Y = v1Y - edge1Y * clamp( dot( v1Y, edge1Y ) / dot( edge1Y, edge1Y ), 0, 1 );
      const pq2X = v2X - edge2X * clamp( dot( v2X, edge2X ) / dot( edge2X, edge2X ), 0, 1 );
      const pq2Y = v2Y - edge2Y * clamp( dot( v2Y, edge2Y ) / dot( edge2Y, edge2Y ), 0, 1 );
      
      const s = Math.sign( edge0X * edge2Y - edge0Y * edge2X );
    
      const dotPQ0X = dot( pq0X, pq0X );
      const dotPQ0Y = dot( pq0Y, pq0Y );
      const dotPQ1X = dot( pq1X, pq1X );
      const dotPQ1Y = dot( pq1Y, pq1Y );
      const dotPQ2X = dot( pq2X, pq2X );
      const dotPQ2Y = dot( pq2Y, pq2Y );
      
      const s0 = s * ( v0X * edge0Y - v0Y * edge0X );
      const s1 = s * ( v1X * edge1Y - v1Y * edge1X );
      const s2 = s * ( v2X * edge2Y - v2Y * edge2X );
    
      const dX = Math.min( Math.min( dotPQ0X, s0, dotPQ1X, s1 ), dotPQ2X, s2 );
      const dY = Math.min( Math.min( dotPQ0Y, s0, dotPQ1Y, s1 ), dotPQ2Y, s2 );
    
      //return -Math.sqrt( dX ) * Math.sign( dY );
      return -Math.sqrt( Math.abs( dX ) ) * Math.sign( dY );
    
    }
    
    function clamp( val, min, max ) {
    
      return Math.min( Math.max( min, val ), max );
      
    }
    
    function dot( v0, v1 ) {
    
      return v0 * v1 + v0 * v1;
      
    }
    Wie bei den anderen functions auch ist p wieder der Punkt (x,y) dessen Distanz es zu kalkulieren gilt zum triangle mit den Punkten p0 (x,y), p1 (x,y) und p2(x,y).
    Ein Problem besteht auf jeden Fall in der letzten Zeile:
    HTML-Code:
    return -Math.sqrt( dX ) * Math.sign( dY );
    Denn
    HTML-Code:
    -Math.sqrt( dX )
    ergibt NaN. Und somit gibt natürlich die function immer NaN als Ergebnis zurück. dX ist immer negativ, und das darf bei Math.sqrt ja nicht sein?!
    Ich vermute mal das Problem wird vorher schon wo im Code zu finden sein, auf dem Weg dX und dY zu berechnen. Nur leider komme ich nicht drauf. Vielleicht hat ja wer von euch den Überblick und kann helfen?

    Besten Dank und Grüße
    Geändert von salazar (12-09-2019 um 00:39 Uhr) Grund: Lösung gefunden

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.706

    AW: 2D distance functions in JavaScript übersetzen

    Kannst du ein jsfiddle machen womit man den Fehler nachstellen kann?
    Oder hast du consolen Ausgaben (F12 im Browser)?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    salazar ist offline Mitglied
    registriert
    22-01-2016
    Ort
    Düsseldorf
    Beiträge
    29

    AW: 2D distance functions in JavaScript übersetzen

    Hi, klar. Hatte ich vergessen. Hier geht´s lang zum aktuellen Stand: https://cutt.ly/SwFbY89
    Und hier lang geht es generell zum fiddle: https://cutt.ly/owFbqxw
    Geändert von salazar (12-09-2019 um 11:01 Uhr)

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.706

    AW: 2D distance functions in JavaScript übersetzen

    Gibt es denn jetzt noch einen Fehler? Ich sehe auf Anhieb in beiden keinen.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    salazar ist offline Mitglied
    registriert
    22-01-2016
    Ort
    Düsseldorf
    Beiträge
    29

    AW: 2D distance functions in JavaScript übersetzen

    Ja, die function signedDistanceToTriangle funktioniert aktuell zwar, aber nicht so wie gedacht. Ich habe einen Workaround geschrieben, aber der ist weniger performant.

Ähnliche Themen

  1. [FRAGE] Wie diesen PHP-Code in Javascript übersetzen?
    Von jsnew im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 01-08-2015, 11:02
  2. Antworten: 17
    Letzter Beitrag: 26-01-2014, 12:11
  3. Antworten: 0
    Letzter Beitrag: 22-07-2005, 14:15
  4. VBScript nach JavaScript übersetzen
    Von Quasi61 im Forum Allgemeines
    Antworten: 0
    Letzter Beitrag: 19-04-2005, 21:37
  5. Übersetzen in php!
    Von xxoes im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 23-05-2001, 17:11

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •