Dragon Way ~

Werbeanzeige

marcgfx

Treue Seele

Beiträge: 236

31.05.2017, 01:22

Vielleicht findest du ja einen Anwendungsfall, probiers aus! Für mich war es zu langsam.

Devader DevLog - Devader spielen

Zum Seitenanfang

BlueCobold

Community-Fossil

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

31.05.2017, 06:33

Zitat von »@zimmer«

Wieso denkst du putimagedata ist nicht für Bewegung gedacht?

Fragen wir mal andersrum: Welchen Vorteil siehst du gegenüber einem drawImage?

Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

Zum Seitenanfang

@zimmer

Alter Hase

Beiträge: 1 135

Wohnort: NRW Germany

31.05.2017, 07:52

Ich bin ja am Code umstrukturieren und die struktur ist kaotisch und unflexibel. Aber bei drawImage habe ich ca. 5 Zeilen vorbereitungs Befehle für das zeichnen im canvas, und die sind alle im loop Intervall.
Selbst das clear ist fragwürdig, wenn ich putimagedata nehmen könnte, bei transparent wäre auch extra Code fuers Zurücksetzen der Werte, was wieder eine extra Zeile wäre.

Marcgfx, stimmt, zum ausprobieren sind Anwendungsbereich Fälle echt gut, merke ich mir

Ich habe einen gefunden aber nicht ausprobiert

Zum Seitenanfang

TypeOverride

Treue Seele

Beiträge: 268

31.05.2017, 16:05

Ach kommt schon. Der Inhalt ist der den man sich denken kann.

Nagut hier kommt inhalt:
Es geht nicht zwangsläufig darum ob du mehr Zeilen oder weniger Zeilen verwenden must um ein visuelles Ergebnis nach deinen wünschen zu erzielen. Hier liegt die performance im Vordergrund. Und auch dass du Funktionen entfremdest.

Mein Tip. Mehr lesen rund um das thema und dann weitermqchen.

Zum Seitenanfang

@zimmer

Alter Hase

Beiträge: 1 135

Wohnort: NRW Germany

31.05.2017, 20:12

Habe versucht das spiel Feld zu verzerren um einen 3d Effekt zu bekommen. Den Code habe ich von hier ich würde mich sehr freuen wenn erklären kann wie die Pixel immer breiter gezeichnet werden?

also es gibt aber ein weiße Linie die mich stört und so wie ich verstehe durch den Algorithmus, der nur mit ganzen Pixeln rechnet, entsteht auch die Verzerrung in den Dreiecken. Aber führen sie bitte die Bestellung so aus.
code:

Inhalt anzeigen/verstecken

Quellcode

<!DOCTYPE HTML>
<html>
 <head>
    <meta charset="utf-8">
  </head>
<body>
<canvas id='cv' width=1024 height=444></canvas>
<img src='online.png' id='bunny' />
<script type="text/javascript">//<![CDATA[
window.onload=function(){
//     Fills a flat triangle using bresenham algorithm.
//     Requires v2.y == v3.y  &&   v2.x<=v3.x
function fillFlatBaseTriangleLR(v1, v2, v3) {
    var vTmp1 = {
        x: v1.x,
        y: v1.y
    };
    var vTmp2 = {
        x: v1.x,
        y: v1.y
    };

    var d1 = { x: Math.abs(v2.x - v1.x),
        y: Math.abs(v2.y - v1.y)
    };

    var d2 =   {
        x: Math.abs(v3.x - v1.x),
        y: Math.abs(v3.y - v1.y)
    };

    var sign1 = {
        x: sign(v2.x - v1.x),
        y: sign(v2.y - v1.y)
    };

    var sign2 = {
        x: sign(v3.x - v1.x),
        y: sign(v3.y - v1.y)
    };

    var itAxe1 = 'y',
        itConvAxe1 = 'x';
    var itAxe2 = 'y',
        itConvAxe2 = 'x';

    var tmp = 0;
    if (d1.y > d1.x) { // swap axes
        itAxe1 = 'x';
        itConvAxe1 = 'y';
    }

    if (d2.y > d2.x) { // swap axes
        itAxe2 = 'x';
        itConvAxe2 = 'y';
    }

    var e1 = 2 * d1[itAxe1] - d1[itConvAxe1];
    var e2 = 2 * d2[itAxe2] - d2[itConvAxe2];

    var limit = d1[itConvAxe1];
    for (var i = 0; i <= limit; i++) {
        //        drawHLine(vTmp1.x, vTmp2.x, vTmp2.y);

        var relY1 = Math.abs((vTmp1[itConvAxe1] - v1[itConvAxe1]) / d1[itConvAxe1]);
        var relY2 = Math.abs((vTmp2[itConvAxe2] - v1[itConvAxe2]) / d2[itConvAxe2]);
        // console.log(relY1, relY2);

        drawHLineText(vTmp1.x, vTmp2.x, vTmp2.y,
        v1.u + (v2.u - v1.u) * relY1, v1.v + (v2.v - v1.v) * relY1,
        v1.u + (v3.u - v1.u) * relY2, v1.v + (v3.v - v1.v) * relY2);

        while (e1 >= 0) {
            vTmp1[itAxe1] += sign1[itAxe1];
            e1 = e1 - 2 * d1[itConvAxe1];
        }

        vTmp1[itConvAxe1] += sign1[itConvAxe1];

        e1 = e1 + 2 * d1[itAxe1];

        // have right line reach same y as left line.
        while (vTmp2.y != vTmp1.y) {
            while (e2 >= 0) {
                vTmp2[itAxe2] += sign2[itAxe2];
                e2 = e2 - 2 * d2[itConvAxe2];
            }

            vTmp2[itConvAxe2] += sign2[itConvAxe2];
            e2 = e2 + 2 * d2[itAxe2];
        }
    }

}

function fillFlatBaseTriangle(v1, v2, v3) {
    if (v2.x > v3.x) {
        return fillFlatBaseTriangleLR(v1, v3, v2);
    } else {

        return fillFlatBaseTriangleLR(v1, v2, v3);
    }
}

function rasterizeTriangle(v1, v2, v3) {
    points[0] = v1;
    points[1] = v2;
    points[2] = v3;
    points.sort(sortOnY);
    v1 = points[0];
    v2 = points[1];
    v3 = points[2];

    if (v2.y == v3.y) {
        return fillFlatBaseTriangle(v1, v2, v3);
    }

    if (v1.y == v2.y) {
        return fillFlatBaseTriangle(v3, v1, v2);
    }

    // split the triangle 
    var v4x = (v1.x + ((v2.y - v1.y) / (v3.y - v1.y)) * (v3.x - v1.x));
    var v4 = {
        x: v4x,
        y: v2.y,
        u: 0,
        v: 0
    };
    var relLength = lengthP(v1, v4) / lengthP(v1, v3);
    v4.u = v1.u + relLength * (v3.u - v1.u);
    v4.v = v1.v + relLength * (v3.v - v1.v);
    fillFlatBaseTriangle(v1, v2, v4);
    fillFlatBaseTriangle(v3, v2, v4);
    return;
}

var points = [null, null, null];

function sortOnY(a, b) {
    return a.y - b.y
};

// --------------------------------------------
// --------------------------------------------

var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5);


function sign(x) {
    if (x == 0) return 0;
    return x > 0 ? 1 : -1;
}

function sq(x) {
    return x * x; 
}

function lengthP(a, b) {
    return Math.sqrt(sq(a.x - b.x) + sq(a.y - b.y));
}

function drawHLine(x1, x2, y) {
    ctx.beginPath();
    ctx.moveTo(x1, y);
    ctx.lineTo(x2, y);
    ctx.stroke();
}

var prevY = -1;

function drawHLineText(x1, x2, y, u1, v1, u2, v2) {
    if (prevY == y) return;
    prevY = y;
    x1 = 0 | x1;
    x2 = 0 | x2;
    y = 0 | y;
    var du = (u2 - u1);
    var dv = (v2 - v1);
    var len = (x2 - x1) + 1;
    du /= len;
    dv /= len;
    for (var i = 0; len; len--, i++) {
        ctx.drawImage(textureCanvas, u1 + i * du, v1 + i * dv, du, dv, x1 + i, y, 1, 1);
    }
}

var textureCanvas = document.createElement('canvas');


var bunny = new Image();
bunny.src= 'online.png';
textureCanvas.width = bunny.width;
textureCanvas.height = bunny.height;
var textCtx = textureCanvas.getContext('2d');
textCtx.drawImage(bunny, 0, 0);
document.body.appendChild(textureCanvas);
var v1 = {
    x: 50,
    y: 00,
    u: 0,
    v: 0
};
var v2 = {
    x: bunny.width-50,
    y: 0,
    u: bunny.width,
    v: 0
};

var v3 = {
    x: 0,
    y: 444,
    u: 0,
    v: bunny.height
};

var v5 = {
    x: bunny.width,
    y: 444,
    u: bunny.width,
    v: bunny.height
};

textCtx.strokeRect(v1.u, v1.v, v2.u - v1.u, v2.v - v1.v);
textCtx.strokeRect(v1.u, v1.v, v3.u - v1.u, v3.v - v1.v);


var mouse = {
    x: 0,
    y: 0,
    down: false,
    dragging: null
};

var cornerPoints = [v1, v2, v3, v5];

function nearestPoint(pt) {
    var dist = 1e12,
        res = null;
    for (var __i = 0; __i < cornerPoints.length; __i++) {

        var thisDist = lengthP(pt, cornerPoints[__i]);
        console.log('skk ' + __i + ' dst ' + thisDist + ' ' + cornerPoints[__i].x + ' ' + cornerPoints[__i].y);
        if (thisDist < dist) {
            console.log('fnd' + thisDist);
            dist = thisDist;
            res = cornerPoints[__i];
        }
    }
    if (dist < 8) return res;
    return null;
}


function setupMouse(canvas, preventDefault) {
    var rectLeft, rectTop;
    var cssScaleX = canvas.width / canvas.offsetWidth;
    var cssScaleY = canvas.height / canvas.offsetHeight;
    var hook = canvas.addEventListener.bind(canvas);
    var mouseDown = updateMouseStatus.bind(null, true);
    var mouseUp = updateMouseStatus.bind(null, false);
    var mouseOut = function () {
        mouse.down = false;
    };
    hook('mousedown', mouseDown);
    hook('mouseup', mouseUp);
    hook('mouseout', mouseOut);
    hook('mousemove', updateCoordinates);
    hook('scroll', updateRect);

    function updateMouseStatus(b, e) {
        var previousMouseDown = mouse.down;
        mouse.down = b;
        updateCoordinates(e);

        if (!previousMouseDown && b) {
            var pt = nearestPoint(mouse);
            if (pt) mouse.dragging = pt;
            console.log(mouse.x, mouse.y, mouse.dragging);
            changed = true;
        }
        if (previousMouseDown && b && mouse.dragging) {
            mouse.dragging.x = mouse.x;
            mouse.dragging.y = mouse.y;
            changed = true;
        }

        if (!b) mouse.dragging = false;

        if (preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
    }

    function updateCoordinates(e) {
        mouse.x = (e.clientX - rectLeft) * cssScaleX;
        mouse.y = (e.clientY - rectTop) * cssScaleY;
        if (mouse.dragging) {
            mouse.dragging.x = mouse.x;
            mouse.dragging.y = mouse.y;
            changed = true;
        }
    }

    function updateRect() {
        var rect = canvas.getBoundingClientRect();
        rectLeft = rect.left;
        rectTop = rect.top;
    }
    updateRect();
};

var changed = true;

setupMouse(canvas, true);
rasterizeTriangle(v1, v2, v3);

function draw() {
    requestAnimationFrame(draw);
    if (!changed) return;
    changed = false;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#000';
    ctx.fillText('Grab the borders and move the mouse', 20, 10);
    rasterizeTriangle(v1, v2, v3);
    rasterizeTriangle(v5, v2, v3);
    if (mouse.dragging) {
        ctx.beginPath();
        ctx.arc(mouse.x, mouse.y, 5, 0, 6.28);
        ctx.stroke();
    }
};

draw();
}
</script>
   
  </body>
</html>

»@zimmer« hat folgendes Bild angehängt:

Zum Seitenanfang

Schorsch

Supermoderator

Beiträge: 5 145

Wohnort: Wickede

Beruf: Softwareentwickler

31.05.2017, 20:39

Ohne mir den Code angesehen zu haben. An der Linie wechselt die Perspektive. Guck dir mal oben rechts den Rand an. So soll das doch am Ende vermutlich gar nicht aussehen. Die weißen Punkte sind vermutlich einfach stellen an welchen nichts gerendert wird, eben durch die Verzerrung.
Versuch doch mal selbst zu überlegen wie dein Ergebnis aussehen soll und wie du das erreichen kannst. Dann ist es auch einfacher Fehler im Code zu lösen. Mit fremdem Code kann das schon mal schwierig sein. Vor allem wenn man nicht richtig versteht was dieser tut.

„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Zum Seitenanfang

BlueCobold

Community-Fossil

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

31.05.2017, 20:53

Das wird immer so aussehen, wenn man (in OpenGL/WebGL) ein Quad in 2D-Raum versucht so zu stauchen, als wäre es 3D. Das macht die Grafikkarte nur dann 'richtig', wenn auch wirklich die dritte Dimension benutzt wird. Ich hatte dazu hier schon mal vor Jahren ein Topic. Anders kann die Grafikkarte gar nicht wissen, wie bei einem Dreieck die Koordinaten der Texturen zu behandeln sind, denn dafür fehlt die (mathematisch) notwendige Information.
Die weißen Pixel stammen vermutlich daher, dass die beiden Dreiecke nicht exakt dieselben Eck-Koordinaten benutzen, sondern sie minimal voneinander abweichen. Ich habe nicht versucht den Code zu verstehen, das war mir zu viel Kauderwelsch und Chaos.

Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »BlueCobold« (31.05.2017, 21:44)

Zum Seitenanfang

@zimmer

Alter Hase

Beiträge: 1 135

Wohnort: NRW Germany

31.05.2017, 21:08

bei diesem spiel ist das auch so gemacht

und es ist mit defold 2d game engine gemacht, die beiden Kommentare sind bestimmt nur ein versehen oder?

Oder habt ihr was gegen mich?

Zum Seitenanfang

BlueCobold

Community-Fossil

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

31.05.2017, 21:44

Mein Kommentar war keineswegs ein Versehen, ich meine das, was ich sage.

Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]