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

[madscijr]

I came across this animation code at codepen, it doesn't look like a lot of code, but I'm sufficiently rusty/inept at JavaScript that converting it to QB64PE is not happening. 
In any case check it out, it's pretty neat...

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;
});

[bplus]

@madscijr thats just a plasma variation see my Plasma Study although it might be fun to do a mirror effect one side shrinking one side expanding using _PutImage like in the animation you found.

bplus Plasma Studies:
https://qb64phoenix.com/forum/showthread...27#pid1527

[Jack]

Grok AI gave this https://grok.com/share/c2hhcmQtMg%3D%3D_...cc41aa5c6d
but all I get is a black screen

Code: (Select All)

' 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

[bplus]

Thanks @Jack I threw out the color subroutines and threw up my own coloring scheme LOL

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

[madscijr]

Thanks for replying - dang! I'm going to have to wait til tomorrow to run that - can't wait to see! 
If it's a fairly "apples to apples" translation it might even teach me something about equivalent JavaScript / QB64PE commands? What is this "plasma" you mention? Is that a technique or a certain effect?

[bplus]

Ahhhhh, a much more satisfying color scheme!

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

   

[mrbcx]

Ahhhhh, a much more satisfying color scheme!

You never cease to amaze me.

[Jack]

well done @bplus

[SpriggsySpriggs]

Here is a one-shot attempt by my personally trained model on NotebookLM. Code works perfectly with zero edits. There is a nice, smooth transition between colors.
Prompt:

Make some plasma animation code

   

Code: (Select All)

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

[madscijr]

Great work guys!

I'm going to see if I can get bplus's code to replicate the exact look & colors of the original. I'm a sucker for lo-fi graphics and rainbows. 

@SpriggsySpriggs, how do you train your ai? Like, do you talk to it about different techniques in English and show it code samples? Direct it to web links?