anyone good at javascript want to help convert a cool animation to QB64PE?

Code: (Select All)

// inversion by yuku

// JavaScript from 

// https://codepen.io/yukulele/pen/qEEvrmO

// See also WebGL version (better perf!):

// https://codepen.io/yukulele/pen/oggVygw



"use strict";

window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;

const canvas = document.createElement("canvas");

const ctx = canvas.getContext("2d", { alpha: false });

let w; //wiewport width

let h; //wiewport height

let zoomFactor = 0;

let zoom = 1;

let imageData = ctx.createImageData(100, 100);

document.body.appendChild(canvas);



const r = 250;

const r2 = r * r;

function draw() {

  const c = 20 * zoom;

  const now = performance.now() / 1000;

  for (let x = 0; x < w; x++) {

    const x0 = x - w / 2;

    const x2 = x0 * x0;

    for (let y = 0; y <= h / 2; y++) {

      const y0 = y - h / 2;

      const f = r2 / (x2 + y0 * y0);

      const x1 = x0 * f;

      const y1 = y0 * f;

      const cx = Math.cos(now + x1 / c / 10);

      const cy = Math.cos(y1 / c / 10);

      const hue = Math.floor((cx - cy) * 9) / 9;



      const rgb = hueToRGB(hue, 1, 0.5);



      imageData.data[(y * w + x) * 4 + 0] = rgb[0];

      imageData.data[(y * w + x) * 4 + 1] = rgb[1];

      imageData.data[(y * w + x) * 4 + 2] = rgb[2];



      imageData.data[((h - y) * w + x) * 4 + 0] = rgb[0];

      imageData.data[((h - y) * w + x) * 4 + 1] = rgb[1];

      imageData.data[((h - y) * w + x) * 4 + 2] = rgb[2];

      ctx.fillStyle = `hsl(${hue * 360}, 100%, 50%)`;

      ctx.fillRect(x, y, 1, 1);

    }

  }



  ctx.putImageData(imageData, 0, 0);

}



function resize() {

  w = canvas.width = Math.round((window.innerWidth * devicePixelRatio) / 3);

  h = canvas.height = Math.round((window.innerHeight * devicePixelRatio) / 3);

  imageData = ctx.createImageData(w, h);

  imageData.data.fill(255);

  draw();

}



async function loop() {

  draw();

  requestAnimationFrame(loop);

}



window.addEventListener("resize", resize);

resize();

loop();



/**

 * @param   Number  h       The hue

 * @return  Array           The RGB representation

 */

function hueToRGB(h) {

  const r = hue2rgb(h + 1 / 3);

  const g = hue2rgb(h);

  const b = hue2rgb(h - 1 / 3);



  return [r * 255, g * 255, b * 255];

}

function hue2rgb(t) {

  t = ((t % 1) + 1) % 1;

  if (t < 1 / 6) return 6 * t;

  if (t < 1 / 2) return 1;

  if (t < 2 / 3) return 4 - t * 6;

  return 0;

}



addEventListener("dblclick", () => {

  document.fullscreenElement

    ? document.exitFullscreen()

    : canvas.requestFullscreen();

});



document.addEventListener("wheel", (event) => {

  zoomFactor += event.deltaY;

  zoom = 1.0005 ** zoomFactor;

});

' QB64 translation of JavaScript inversion effect ' Original: https://codepen.io/yukulele/pen/qEEvrmO ' Set up graphics screen (640x480, 32-bit color) Dim Shared w As Integer, h As Integer Dim Shared zoom As Single, zoomFactor As Single Dim Shared r As Single, r2 As Single Dim Shared imageHandle As Long w = 640 h = 480 zoom = 1 zoomFactor = 0 r = 250 r2 = r * r Screen _NewImage(w, h, 32) imageHandle = _NewImage(w, h, 32) _Dest imageHandle ' Main loop Do _Limit 60 ' Approximate 60 FPS Drawit _PutImage , imageHandle, 0 ' Copy image to screen HandleInput _Display Loop Until _KeyDown(27) ' Exit on ESC Sub Drawit Dim x As Integer, y As Integer Dim x0 As Single, y0 As Single, x2 As Single Dim f As Single, x1 As Single, y1 As Single Dim cx As Single, cy As Single, hue As Single Dim rgb(2) As Integer Dim c As Single Dim now As Single now = Timer / 1000 c = 20 * zoom For x = 0 To w - 1 x0 = x - w / 2 x2 = x0 * x0 For y = 0 To h / 2 y0 = y - h / 2 f = r2 / (x2 + y0 * y0) x1 = x0 * f y1 = y0 * f cx = Cos(now + x1 / c / 10) cy = Cos(y1 / c / 10) hue = Int((cx - cy) * 9) / 9 HueToRGB hue, rgb() ' Set pixels (top half) PSet (x, y), _RGB32(rgb(0), rgb(1), rgb(2)) ' Mirror to bottom half PSet (x, h - y - 1), _RGB32(rgb(0), rgb(1), rgb(2)) Next Next End Sub Sub HueToRGB (h As Single, rgb() As Integer) Dim r As Single, g As Single, b As Single r = Hue2RGB(h + 1 / 3) g = Hue2RGB(h) b = Hue2RGB(h - 1 / 3) rgb(0) = r * 255 rgb(1) = g * 255 rgb(2) = b * 255 End Sub Function Hue2RGB! (t As Single) t = ((t Mod 1) + 1) Mod 1 If t < 1 / 6 Then Hue2RGB! = 6 * t ElseIf t < 1 / 2 Then Hue2RGB! = 1 ElseIf t < 2 / 3 Then Hue2RGB! = 4 - t * 6 Else Hue2RGB! = 0 End If End Function Sub HandleInput Dim k As Long While _MouseInput: Wend ' Clear mouse buffer k = _KeyHit If k = 43 Then ' + key for zoom in zoomFactor = zoomFactor + 10 zoom = 1.0005 ^ zoomFactor ElseIf k = 45 Then ' - key for zoom out zoomFactor = zoomFactor - 10 zoom = 1.0005 ^ zoomFactor ElseIf k = 19200 + 68 Then ' F11 for fullscreen toggle If _FullScreen = 0 Then _FullScreen _SquarePixels Else _FullScreen _Off End If End If End Sub

Code: (Select All)

' QB64 translation of JavaScript inversion effect

' Original: https://codepen.io/yukulele/pen/qEEvrmO



'            *** BIG MOD BY BPLUS ***



' Set up graphics screen (640x480, 32-bit color)

Dim Shared w As Integer, h As Integer

Dim Shared zoom As Single, zoomFactor As Single

Dim Shared r As Single, r2 As Single

Dim Shared imageHandle As Long



w = 640

h = 480

zoom = 1

zoomFactor = 0

r = 250

r2 = r * r



Screen _NewImage(w, h, 12)

imageHandle = _NewImage(w, h, 32)

'_Dest imageHandle



' Main loop

Do

    _Limit 60 ' Approximate 60 FPS

    Drawit

    '_PutImage , imageHandle, 0 ' Copy image to screen

    HandleInput

    _Display

Loop Until _KeyDown(27) ' Exit on ESC



Sub Drawit

    Dim x As Integer, y As Integer

    Dim x0 As Single, y0 As Single, x2 As Single

    Dim f As Single, x1 As Single, y1 As Single

    Dim cx As Single, cy As Single, hue As Single

    Dim rgb(2) As Integer

    Dim c As Single

    Dim now As Single



    now = Timer(.01)

    c = 10 * zoom



    For x = 0 To w - 1

        x0 = x - w / 2

        x2 = x0 * x0

        For y = 0 To h / 2

            y0 = y - h / 2

            f = r2 / (x2 + y0 * y0)

            x1 = x0 * f

            y1 = y0 * f

            cx = Cos(now + x1 / c / 16)

            cy = Cos(y1 / c / 16)

            hue = Int((cx - cy) * 16) / 16



            ' Set pixels (top half)

            PSet (x, y), hue

            ' Mirror to bottom half

            PSet (x, h - y - 1), hue

        Next

    Next



End Sub



Sub HandleInput

    Dim k As Long

    While _MouseInput: Wend ' Clear mouse buffer

    k = _KeyHit

    If k = 18432 Then ' + key for zoom in

        zoomFactor = zoomFactor + 10

        zoom = 1.0005 ^ zoomFactor

    ElseIf k = 20480 Then ' - key for zoom out

        zoomFactor = zoomFactor - 10

        zoom = 1.0005 ^ zoomFactor

    End If

    _Title "up arrow = zoom out, down arrow zoom in, zoom =" + Str$(zoom)

End Sub

Code: (Select All)

' QB64 translation of JavaScript inversion effect

' Original: https://codepen.io/yukulele/pen/qEEvrmO



'            *** BIG MOD Variation #2 BY BPLUS ***



' Set up graphics screen (640x480, 32-bit color)

Dim Shared w As Integer, h As Integer

Dim Shared zoom As Single, zoomFactor As Single

Dim Shared r As Single, r2 As Single

Dim Shared red, grn, blu

red = Rnd: grn = Rnd: blu = Rnd

w = 640

h = 480

zoom = 1

zoomFactor = 0

r = 250

r2 = r * r



Screen _NewImage(w, h, 32)



' Main loop

Do

    Drawit

    HandleInput

    _Display

Loop Until _KeyDown(27) ' Exit on ESC



Sub Drawit

    Dim x As Integer, y As Integer

    Dim x0 As Single, y0 As Single, x2 As Single

    Dim f As Single, x1 As Single, y1 As Single

    Dim cx As Single, cy As Single, hue As Single

    Dim c As Single

    Dim now As Single

    Dim clr As _Unsigned Long



    now = Timer(.01)

    c = 10 * zoom

    For x = 0 To w - 1

        x0 = x - w / 2

        x2 = x0 * x0

        For y = 0 To h / 2

            y0 = y - h / 2

            f = r2 / (x2 + y0 * y0)

            x1 = x0 * f

            y1 = y0 * f

            cx = Cos(now + x1 / c / 16)

            cy = Cos(y1 / c / 16)

            hue = Int((cx - cy) * 16) / 16

            clr = _RGB32(255 * Sin(cx * red * hue), 255 * Sin(hue * grn), 255 * Sin(cy * blu))

            ' Set pixels (top half)

            PSet (x, y), clr

            ' Mirror to bottom half

            PSet (x, h - y - 1), clr

        Next

    Next



End Sub



Sub HandleInput

    Dim k As Long

    While _MouseInput: Wend ' Clear mouse buffer

    k = _KeyHit

    If k = 18432 Then ' + key for zoom in

        zoomFactor = zoomFactor + 10

        zoom = 1.0005 ^ zoomFactor

    ElseIf k = 20480 Then ' - key for zoom out

        zoomFactor = zoomFactor - 10

        zoom = 1.0005 ^ zoomFactor

    End If

    _Title "up arrow = zoom out, down arrow zoom in, zoom =" + Str$(zoom)

End Sub

Screen _NewImage(640, 480, 32) ' Set up a 640x480 32-bit screen _Display ' Turn off auto-display Dim x As Single, y As Single, Time As Single ' Variables for position and time Dim r As Integer, g As Integer, b As Integer ' Variables for color components Time = 0 ' Initialize time Do ' Start the main animation loop _Limit 60 ' Limit to 60 frames per second Cls ' Clear the screen for the new frame Time = Time + 0.05 ' Increment time for animation effect For y = 0 To 479 ' Loop through rows For x = 0 To 639 ' Loop through columns ' Calculate plasma color using sine waves based on position and time ' Scale and offset sine results (-1 to 1) to range 0-255 for RGB r = CInt(((Sin((x + Time) * .03) + Sin((y + Time) * .05)) + 2) * 63.75) ' Red component g = CInt(((Sin((x + Time) * .05) + Sin((y + Time) * .03)) + 2) * 63.75) ' Green component b = CInt(((Sin((x + y + Time) * .04) + Sin(Sqr(x * x + y * y) * .02 + Time)) + 2) * 63.75) ' Blue component using combined pos and distance ' Draw the pixel with the calculated color PSet (x, y), _RGB32(r, g, b) Next x Next y _Display ' Show the completed frame on the screen Loop Until Len(InKey$) <> 0 ' Loop until a key is pressed End ' End the program