Jump to content

3D Sinus Wave (Javascript version)

Gianni

By Gianni,
in AutoIt Example Scripts

 Share

Recommended Posts

Gianni Universalist

Gianni

Posted
Posted (edited)

just for further fun Here is a Javascript version of the nice 3D sine wave posted from @UEZ

This version uses this nice javascript library:(http://visjs.org/graph3d_examples.html).  (All the 'dirty' work is done by the javascript library, so the whole credit goes of course to that library and not to me...) I've simply injected all the html/javascript stuff into a BrowserControl embedded into an AutoIt GUI.

Have fun :)

#include <GUIConstantsEx.au3>
Example()
Exit

Func Example()
    Local $oIE = ObjCreate("Shell.Explorer.2") ; Create a BrowserControl
    Local $hGUI = GUICreate("3D Sinus wave animation demo", 660, 650, 30, 30)
    GUICtrlCreateObj($oIE, 0, 0, 660, 650) ; Place BrowserControl on the GUI
    GUISetState() ;Show GUI
    $oIE.navigate('about:blank')
    While Not String($oIE.readyState) = 'complete' ; wait for about:blank
        Sleep(100)
    WEnd

    ; this waits till the document is ready to be used (portion of code from IE.au3)
    While Not (String($oIE.readyState) = "complete" Or $oIE.readyState = 4)
        Sleep(100)
    WEnd
    While Not (String($oIE.document.readyState) = "complete" Or $oIE.document.readyState = 4)
        Sleep(100)
    WEnd

    $oIE.document.Write(_GetHTML()) ; inject lising directly to the HTML document:
    $oIE.document.close() ; close the write stream
    $oIE.document.execCommand("Refresh")

    ; -----------------------------
    ; Loop until the user exits.
    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE
                ExitLoop
        EndSwitch
    WEnd
    ; the end
    $oIE = 0 ; Remove IE from memory.
    GUIDelete($hGUI) ; Remove GUI
EndFunc   ;==>Example

Func _GetHTML()
    Local $sHTML = _
            "<!doctype html>" & @CRLF & _
            "<html>" & @CRLF & _
            "<head>" & @CRLF & _
            "    <meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />" & @CRLF & _
            "  <title></title>" & @CRLF & _
            "" & @CRLF & _
            "  <style type=""text/css"">" & @CRLF & _
            "    body {" & @CRLF & _
            "      font: 10pt arial;" & @CRLF & _
            "    }" & @CRLF & _
            "  </style>" & @CRLF & _
            "" & @CRLF & _
            "  <script type=""text/javascript"" src=""https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.0/vis.min.js""></script>" & @CRLF & _
            "" & @CRLF & _
            "  <script type=""text/javascript"">" & @CRLF & _
            "    var data = null;" & @CRLF & _
            "    var graph = null;" & @CRLF & _
            "    var x0, x1, x2" & @CRLF & _
            "    function custom(x, y, t) {" & @CRLF & _
            "      // change this function to change the graph" & @CRLF & _
            "           x0 = 20 - t/180;" & @CRLF & _
            "           x1 = (x/x0)*(x/x0) + t/10;" & @CRLF & _
            "           y1 = (y/x0)*(y/x0) + t/10;" & @CRLF & _
            "           return Math.sin(Math.sqrt(x1+y1));" & @CRLF & _
            "    }" & @CRLF & _
            "    // Called when the Visualization API is loaded." & @CRLF & _
            "    function drawVisualization() {" & @CRLF & _
            "      // Create and populate a data table." & @CRLF & _
            "      data = new vis.DataSet();" & @CRLF & _
            "      // create some nice looking data with sin/cos" & @CRLF & _
            "      var steps = 25;" & @CRLF & _
            "      var axisMax = 314;" & @CRLF & _
            "      var tMax = 800;" & @CRLF & _
            "      var axisStep = axisMax / steps;" & @CRLF & _
            "      for (var t = 300; t <= tMax; t = t + 50) {" & @CRLF & _
            "        for (var x = -axisMax; x < axisMax; x+=axisStep) {" & @CRLF & _
            "          for (var y = -axisMax; y < axisMax; y+=axisStep) {" & @CRLF & _
            "            var value = custom(x, y, t);" & @CRLF & _
            "            data.add([" & @CRLF & _
            "              {x:x,y:y,z:value,filter:t,style:value}" & @CRLF & _
            "            ]);" & @CRLF & _
            "          }" & @CRLF & _
            "        }" & @CRLF & _
            "      }" & @CRLF & _
            "" & @CRLF & _
            "      // specify options" & @CRLF & _
            "      var options = {" & @CRLF & _
            "        width:  '600px'," & @CRLF & _
            "        height: '600px'," & @CRLF & _
            "        style: 'surface'," & @CRLF & _
            "        showPerspective: true," & @CRLF & _
            "        showGrid: false," & @CRLF & _
            "        showShadow: false," & @CRLF & _
            "        // showAnimationControls: false," & @CRLF & _
            "        keepAspectRatio: true," & @CRLF & _
            "        verticalRatio: 0.085, // 0.5," & @CRLF & _
            "        animationInterval: 100, // milliseconds" & @CRLF & _
            "        animationPreload: true," & @CRLF & _
            "        animationAutoStart: true," & @CRLF & _
            "        filterValue: 'time'" & @CRLF & _
            "      };" & @CRLF & _
            "" & @CRLF & _
            "      // create our graph" & @CRLF & _
            "      var container = document.getElementById('mygraph');" & @CRLF & _
            "      graph = new vis.Graph3d(container, data, options);" & @CRLF & _
            "    }" & @CRLF & _
            "  </script>" & @CRLF & _
            "</head>" & @CRLF & _
            "" & @CRLF & _
            "<body onload=""drawVisualization();"">" & @CRLF & _
            "<div id=""mygraph""></div>" & @CRLF & _
            "" & @CRLF & _
            "<div id=""info""></div>" & @CRLF & _
            "</body>" & @CRLF & _
            "</html>"
    Return $sHTML
EndFunc   ;==>_GetHTML

 

Edited by Chimp

 

image.jpeg.9f1a974c98e9f77d824b358729b089b0.jpeg Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Link to comment
Share on other sites
UEZ Universalist

UEZ

Posted
Posted

Nice example. I like the idea of embedding JS code. There are plenty of cool gfx examples. :thumbsup:

Please don't send me any personal message and ask for support! I will not reply!

Selection of finest graphical examples at Codepen.io

The own fart smells best! ✌
Her 'sikim hıyar' diyene bir avuç tuz alıp koşma!
¯\_(ツ)_/¯  ٩(●̮̮̃•̃)۶ ٩(-̮̮̃-̃)۶ૐ

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...