base implementation

Author: kirjavascript

app/components/mappings/rotate.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
 import { exportSprite } from '#formats/image';
-import { rotateImageData } from '#util/rotsprite';
+import { rotateImageData, getRotateDiagonal } from '#util/rotsprite';
 import { Input, Slider, Item, Button, Modal } from '#ui';
 import { mappingState } from './state';
 
@@ -11,14 +11,58 @@ import { importState } from '../import/state';
 function rotateCurrentSprite(canvas, angle) {
     const spriteCanv = exportSprite(environment.currentSprite);
     const spriteCtx = spriteCanv.getContext('2d');
-    const { width, height } = spriteCanv;
-    const imageData = spriteCtx.getImageData(0, 0, width, height);
-    const rotatedData = rotateImageData(imageData, angle, width, height);
+    // const { width, height } = spriteCanv;
+    // const imageData = spriteCtx.getImageData(0, 0, width, height);
+    // const rotatedData = rotateImageData(imageData, angle, width, height);
+
+    // const ctx = canvas.getContext('2d');
+    // canvas.width = rotatedData.width;
+    // canvas.height = rotatedData.height;
+    // ctx.putImageData(rotatedData, 0, 0);
+
+
+    // add padding
+    const { diagonal, xMargin, yMargin } = getRotateDiagonal(spriteCanv.width, spriteCanv.height);
+    const width = diagonal;
+    const height = diagonal;
+
+    const copy = spriteCtx.getImageData(0, 0, spriteCanv.width, spriteCanv.height);
+
+    spriteCanv.width = diagonal;
+    spriteCanv.height = diagonal;
+
+    spriteCtx.putImageData(copy, xMargin, yMargin);
 
     const ctx = canvas.getContext('2d');
-    canvas.width = rotatedData.width;
-    canvas.height = rotatedData.height;
-    ctx.putImageData(rotatedData, 0, 0);
+    canvas.width = width;
+    canvas.height = height;
+
+    // rotate
+
+    const theta = angle * Math.PI / 180;
+    const alpha = -Math.tan(theta/2);
+    const beta = Math.sin(theta);
+
+
+
+    for (let y = 0; y < height; ++y) {
+        const shear = Math.round((y - height/2) * alpha);
+        ctx.drawImage(spriteCanv, 0, y, width, 1, shear, y, width, 1);
+    }
+    spriteCtx.clearRect(0, 0, width, height);
+    spriteCtx.drawImage(canvas, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    for (let x = 0; x < width; ++x) {
+        const shear = Math.round((x - width/2) * beta);
+        ctx.drawImage(spriteCanv, x, 0, 1, height, x, shear, 1, height);
+    }
+    spriteCtx.clearRect(0, 0, width, height);
+    spriteCtx.drawImage(canvas, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    for (let y = 0; y < height; ++y) {
+        const shear = Math.round((y - height/2) * alpha);
+        ctx.drawImage(spriteCanv, 0, y, width, 1, shear, y, width, 1);
+    }
 }
 
 export const Rotate = observer(() => {

app/util/rotsprite.js

@@ -1,8 +1,57 @@
+export function getRotateDiagonal(width, height) {
+    const diagonal =
+        1 + (0 | (2 * Math.sqrt(width ** 2 / 4 + height ** 2 / 4)));
+
+    const xMargin = Math.round((diagonal - width) / 2);
+    const yMargin = Math.round((diagonal - height) / 2);
+
+    return { diagonal: xMargin * 2 + width, xMargin, yMargin };
+}
+
+export function rotateImageData(imageData, angle, width, height) {
+    const { diagonal, xMargin, yMargin } = getRotateDiagonal(width, height);
+
+    const spriteData = addMarginToImageData(
+        imageData,
+        xMargin,
+        yMargin,
+    );
+
+    const data = new Uint32Array(diagonal ** 2);
+
+    for (let i = 0; i < spriteData.data.length; i += 4) {
+        const r = spriteData.data[i];
+        const g = spriteData.data[i + 1];
+        const b = spriteData.data[i + 2];
+        const a = spriteData.data[i + 3];
+        data[i / 4] = (a << 24) + (r << 16) + (g << 8) + b;
+    }
+
+    const rotated = rotSprite(
+        new Pixels(diagonal, diagonal, data),
+        (angle * Math.PI) / 180,
+    ).pixels;
+
+    const pixelData = new Uint8ClampedArray(data.length * 4);
+
+    for (let i = 0; i < data.length; i++) {
+        const value = rotated[i];
+
+        pixelData[i * 4] = (value >> 16) & 0xff;
+        pixelData[i * 4 + 1] = (value >> 8) & 0xff;
+        pixelData[i * 4 + 2] = value & 0xff;
+        pixelData[i * 4 + 3] = (value >> 24) & 0xff;
+    }
+
+    return new ImageData(pixelData, diagonal, diagonal);
+}
+
+// rotsprite
 // original algorithm Xenowhirl
 // stole code from ChaseMor/pxt-arcade-rotsprite
 // some generated with chatGPT
 
-export default function rotSprite(image, angle) {
+function rotSprite(image, angle) {
     image = scale2xImage(image);
     image = scale2xImage(image);
     image = scale2xImage(image);
@@ -169,51 +218,3 @@ export function addMarginToImageData(imageData, xMargin, yMargin) {
 
     return newImageData;
 }
-
-export function getRotateDiagonal(width, height) {
-    const diagonal =
-        1 + (0 | (2 * Math.sqrt(width ** 2 / 4 + height ** 2 / 4)));
-
-    const xMargin = Math.round((diagonal - width) / 2);
-    const yMargin = Math.round((diagonal - height) / 2);
-
-    return { diagonal: xMargin * 2 + width, xMargin, yMargin };
-}
-
-export function rotateImageData(imageData, angle, width, height) {
-    const { diagonal, xMargin, yMargin } = getRotateDiagonal(width, height);
-
-    const spriteData = addMarginToImageData(
-        imageData,
-        xMargin,
-        yMargin,
-    );
-
-    const data = new Uint32Array(diagonal ** 2);
-
-    for (let i = 0; i < spriteData.data.length; i += 4) {
-        const r = spriteData.data[i];
-        const g = spriteData.data[i + 1];
-        const b = spriteData.data[i + 2];
-        const a = spriteData.data[i + 3];
-        data[i / 4] = (a << 24) + (r << 16) + (g << 8) + b;
-    }
-
-    const rotated = rotSprite(
-        new Pixels(diagonal, diagonal, data),
-        (angle * Math.PI) / 180,
-    ).pixels;
-
-    const pixelData = new Uint8ClampedArray(data.length * 4);
-
-    for (let i = 0; i < data.length; i++) {
-        const value = rotated[i];
-
-        pixelData[i * 4] = (value >> 16) & 0xff;
-        pixelData[i * 4 + 1] = (value >> 8) & 0xff;
-        pixelData[i * 4 + 2] = value & 0xff;
-        pixelData[i * 4 + 3] = (value >> 24) & 0xff;
-    }
-
-    return new ImageData(pixelData, diagonal, diagonal);
-}