Gerade mit bestimmten Winkel / bestimmter Länge in array zeichnen (How to?)

Nina Scholz · 23. Dezember 2017

Hey.

Ich habe einen javascript array der wie folgt aussieht:

Code

var array=[
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000'
 ]

Alles anzeigen

Ich möchte in diesen Array (2d matrix) eine Linie mit ...

* einem bestimmten Winkel

* einer bestimmten Länge

* einem bestimmten Startpunkt

...einzeichnen und habe hierfür diese Funktion geschrieben:

Code

Array.prototype.draw_line = function(startX, startY, length, angle) {
  var matrix = this, radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians)
  for (var i=0; i<length; i++) {
      var x=startX+i;
      var y=Math.round(sin*(x-startX)) + startY
    try {
      var point = matrix[y].split('');point[x] = 'Ä';matrix[y] = point.toString().replace(/,/g,'');
    } catch(e) {}
  }
  
  var point = matrix[startY].split('');point[startX] = 'X';matrix[startY] = point.toString().replace(/,/g,'');
    return matrix;
}

Alles anzeigen

Doch an dieser Stelle haben mich meine Mathe-Kenntnisse leider verlassen!!

Ich möchte die Linie von einem bestimmten Startpunkt (x/y) in der 2d-Matrix starten lassen und sie mit einem bestimmten Winkel zwischen (0° und 359°) kippen. Leider funktioniert meine obige Funktion nicht wirklich gut / richtig, weshalb ich mich über kleine Verbesserungen seeeeeehr freuen würde

Code

var length = 27, startX=7, startY=8, angle=0°;
var array=[
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '0000000X1111111111111111111111111100000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000'
]
 


var length = 7, startX=15, startY=8, angle=45°;
var array=[
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000001000000000000000000000',
 '000000000000000000010000000000000000000000',
 '000000000000000000100000000000000000000000',
 '0000000000000000010000000000000000000000000',
 '0000000000000000100000000000000000000000000',
 '0000000000000001000000000000000000000000000',
 '00000000000000X000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000'
]
 


var length = ~25, startX=27, startY=6, angle=~150°;
var array=[
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '011111100000000000000000000000000000000000',
 '000000111111000000000000000000000000000000',
 '000000000001111100000000000000000000000000',
 '000000000000000111111111000000000000000000',
 '000000000000000000000001111X00000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000',
 '000000000000000000000000000000000000000000'
]

Alles anzeigen

Liebe Grüße, Nina

Hier das passende jsfiddle <--

Code

var array=[
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000'
 ]Array.prototype.draw_line = function(startX, startY, length, angle) {
  var matrix = this, radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians)

  for (var i=0; i<length; i++) {
        var x=startX+i;
        var y=Math.round(sin*(x-startX)) + startY
    try {
      var point = matrix[y].split('');point[x] = 'Ä';matrix[y] = point.toString().replace(/,/g,'');
    } catch(e) {}
  }
  

  var point = matrix[startY].split('');point[startX] = 'X';matrix[startY] = point.toString().replace(/,/g,'');
    return matrix;
}

console.log(array.draw_line(15,9,10,90).join('\n'))

Alles anzeigen

---

Edit: Diese Abbildung verdeutlicht die Winkel der Gerade.

https://picload.org/view/ddrao…2017-12-23um11.3.png.html

basti1012 · 23. Dezember 2017

dein bild ist sehr klein da sieht man nix . und fiddle ist gerade mal wieder down wie immer

Nina Scholz · 23. Dezember 2017

Zitat von basti1012

dein bild ist sehr klein da sieht man nix . und fiddle ist gerade mal wieder down wie immer

geändert!

Sempervivum · 23. Dezember 2017

Meine Lösung:

Code

    <div id="o"></div>
    <script>
        var array = [
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000'
        ]



        Array.prototype.draw_line = function (startX, startY, length, angle) {
            var matrix = this,
            radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians);
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].split('');

            for (var i = 0; i < length; i++) {
                var dx = Math.round(i * cos);
                var dy = Math.round(i * sin);
                matrix[startY + dy][startX + dx] = 'X';
            }
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].join();
            console.log(matrix);
            document.getElementById("o").innerHTML = matrix.join("<br>");
        }


        array.draw_line(15, 3, 10, 60);

    </script>

Alles anzeigen

Sempervivum · 23. Dezember 2017

PS: Ich hatte mir dein Bild nicht richtig angesehen und die Orientierung des Winkels nicht berücksichtigt. So sollte es passen:

Code

    <div id="o"></div>
    <script>
        var array = [
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000'
        ]



        Array.prototype.draw_line = function (startX, startY, length, angle) {
            var matrix = this,
            radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians);
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].split('');

            for (var i = 0; i < length; i++) {
                var x = startX + Math.round(i * cos);
                var y = startY - Math.round(i * sin);
                if (x >= 0 && y >= 0 && x < matrix[0].length && y < matrix.length) matrix[y][x] = 'X';
            }
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].join();
            console.log(matrix);
            document.getElementById("o").innerHTML = matrix.join("<br>");
        }


        array.draw_line(15, 3, 10, 60);

    </script>

Alles anzeigen

basti1012 · 23. Dezember 2017

könnt ihr mal für dummis wie mich mal erklären wozu man das brauch ,und was der code da macht ?? ich sehe da nur 0 und ein paar x .

Sempervivum · 23. Dezember 2017

Das ist eine grundlegende Funktion, die man braucht, wenn man ein Grafikprogramm entwickelt: Zeichnen einer Geraden. Ein Feldelement entspricht dann einem Pixel. 0 = Pixel ist weiß, X = Pixel ist schwarz.

basti1012 · 23. Dezember 2017

also etwas wasich wohl nie brauchen würde. Um das zu verstehen habe ich da mal etwas rum gespielt. habe da ein setinterval eingebaut und jetzt dreht es sich da wie ein zeiger von einer uhr. schönes spielzeug ,aber gott sei dank werde ich das wohl nie brauchen .aber wieder was dazu gelernt

Gerade mit bestimmten Winkel / bestimmter Länge in array zeichnen (How to?)

Jetzt mitmachen!

Teilen

Tags