diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 302161d..577f470 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -31,10 +31,10 @@ function toMatrix(t) { // prettier-ignore return [ - t[0], t[1], 0, t[2], - t[3], t[4], 0, t[5], - 0, 0, 1, 0, - t[6], t[7], 0, t[8] + t[0], t[1], 0, t[2], + t[3], t[4], 0, t[5], + 0, 0, 1, 0, + t[6], t[7], 0, t[8] ]; } @@ -42,7 +42,7 @@ loadTexture(); } else { image.addEventListener("load", () => { - loadTexture(); + loadTexture(); }); } @@ -52,8 +52,8 @@ document.addEventListener("myPointsChanged", (event) => { const points = event.detail.reduce( - (result, { x, y }) => [...result, x / 150 - 1, 1 - y / 150], - [] + (result, { x, y }) => [...result, x / 960 - 1, 1 - y / 640], + [] ); const transform = new PerspT([1, -1, -1, -1, -1, 1, 1, 1], points); @@ -68,8 +68,8 @@ function createPlane(gl) { const positionBuffer = createBuffer( - gl, - [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0] + gl, + [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0] ); return { @@ -186,15 +186,15 @@ gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D( - gl.TEXTURE_2D, - 0, - gl.RGBA, - 1, - 1, - 0, - gl.RGBA, - gl.UNSIGNED_BYTE, - pixel + gl.TEXTURE_2D, + 0, + gl.RGBA, + 1, + 1, + 0, + gl.RGBA, + gl.UNSIGNED_BYTE, + pixel ); return texture; @@ -205,11 +205,11 @@ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source); if (isPowerOf2(source.naturalWidth) && isPowerOf2(source.naturalHeight)) { - gl.generateMipmap(gl.TEXTURE_2D); + gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); } } @@ -227,13 +227,39 @@ // } + // 7360 x 4912 + // 1712, 1408 + // 3049, 428 + // 5712, 2983 + // 4354, 4209 + + // 1920 x 1281 + // 447, 367 + // 795, 112 + // 1490, 778 + // 1136, 1098 + + // const points = [ + // { x: 795, y: 112 }, + // { x: 1490, y: 778 }, + // { x: 1136, y: 1098 }, + // { x: 447, y: 367 } + // ]; + const points = [ - { x: 211, y: 41 }, - { x: 130, y: 50 }, - { x: 85, y: 247 }, - { x: 173, y: 261 } + { x: 795, y: 112 }, + { x: 447, y: 367 }, + { x: 1136, y: 1098 }, + { x: 1490, y: 778 }, ]; + // const points = [ + // { x: 200, y: 100 }, // RT + // { x: 100, y: 100 }, // LT + // { x: 100, y: 200 }, // LB + // { x: 1490, y: 778 } // RB + // ]; + const event = new CustomEvent("myPointsChanged", { detail: points }); document.dispatchEvent(event); @@ -250,7 +276,7 @@ // draw foreground let base_image = new Image(); - base_image.src = "/images/mockup-test.png"; + base_image.src = "/images/smartphone-on-dark-background_1920px.png"; base_image.onload = function() { rctx.drawImage(base_image, 0, 0); } @@ -267,10 +293,12 @@
- +