Post Reply 
Little explorations with HP calculators (no Prime)
10-31-2017, 06:23 PM (This post was last modified: 10-31-2017 06:24 PM by pier4r.)
Post: #246
RE: Little explorations with HP calculators (no Prime)
On a side note, recently I was trying to find a minimalist wallpaper with the German flag. My search skills did not help.

Since at the end a desktop wallpaper is a 2d image, I decided to attack the problem with some math, 50g and highcharts.js for plotting (or html5 canvas when things get rough, although highcharts.js is quite neat).

So far I got this, that for me is quite satisfying.

https://i.imgur.com/THesJyE.png
preview
[Image: THesJyEm.png]

the problem is that the canvas is pretty big, 3840 x 2880 and the points I used from a sine function are not much.

hp50g code
Code:

gpPlotSines
  \<<
    @remark: mode should be in degrees!
    @ it uses listExt of DavidM

    @Plan: see gpSlightlyRandomFunctions

    @2017-10-28: amplitude, offset and highchart setup are important elements
    @ that play together a role to let the graph be as you wish.

    36             "lvIterations"            DROP
    10             "lvIncrementDegrees"      DROP
    2              "lvPeriods"               DROP
    {}             "lvResultValues"          DROP
    1000           "lvAmplitude"             DROP
    1000000        "lvOffset"                DROP
    0              "lvStartingAngle"         DROP
    0              "lvElementsToPackInList"  DROP

    \->
    lvIterations
    lvIncrementDegrees
    lvPeriods
    lvResultValues
    lvAmplitude
    lvOffset
    lvStartingAngle
    lvElementsToPackInList

    \<<
      0 lvIterations 1 - 
      @ the sine is periodical so one does not necessarily need to compute it
      @ all the time, if the computation returns always the same results.
      @ because computing 1000 SINes is slow, about 613 seconds with the 50g.
      @ while repeating the same block of 24 values, takes circa 3 seconds.
      @ some big difference.
      @ but this is complicated when the increment is not a divisor of 360,
      @ so let's make it proper.
      FOR lvIndex
        lvStartingAngle lvIncrementDegrees lvIndex * +
        SIN

        @amplitude and offset
        lvAmplitude *
        @0 RND
        IP
        lvOffset +

        @leave it on the stack
        @and count
        'lvElementsToPackInList' 1 STO+
      NEXT

      @pack the list of values
      lvElementsToPackInList \->LIST
      @not needed: 'lvResultValues' STO

      gpConvertListToJsArray
    \>>
  \>>

  gpConvertListToJsArray
  \<<
    @input a list
    @transform in string
    \->STR
    @replace the string opening and closing with squared brackets
    "{" "[" SREPL DROP
    "}" "]" SREPL DROP

    @replace the "." of the real numbers with no decimals (assuming integers)
    "." "," SREPL
    DROP @drop the number of replacements
  \>>

  gpConvertJsArrayToList
  \<<
    @input a string
    @replace the string opening and closing with squared brackets
    "[" "{" SREPL DROP
    "]" "}" SREPL DROP

    @replace the "," (assuming integers)
    "," "." SREPL DROP

    @transform from string
    OBJ\->
  \>>

highcharts.js code
Code:

<!DOCTYPE html>
  <html>
    <html lang="en"> 
    <head>
      <meta charset="utf-8"/>
      <title>Three functions german colors</title>
      <!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->
      <script src="highcharts_6_0_2.js"></script>
      <!-- <script src="https://code.highcharts.com/modules/exporting.js"></script> -->
      <script src="highcharts_6_0_2_exporting.js"></script>
    </head>  
    <body>
      <!-- <div id="chart_div" style="min-width: 310px; height: 400px; margin: 0 auto"></div> -->
      <!-- <div id="chart_div" style="width: 1920px; height: 1440px; margin: 0 auto"></div> -->
      <div id="chart_div" style="width: 1920px; height: 1440px; margin: 0 auto"></div>
      <script>
        var container_element = document.getElementById("chart_div");
        Highcharts.chart(container_element , {
            title: {
              text: null
            },

            subtitle: {
              text: null
            },

            yAxis: {
              visible: false,
              min: 998500,
              max: 1001000,
            },

            xAxis: {
              visible: false,
              min: 24,  //quick way to leave data points in, but put them outside the graph.
            },

            chart: {
              marginLeft: 0,
              //backgroundColor: '#2bb71b',
              //backgroundColor: '#3dce7c',
              //backgroundColor: '#21a515',
              //backgroundColor: '#53a34c',
              backgroundColor: '#4156a3',
              /*
              backgroundColor: {
                  //top to bottom
                  linearGradient: { 
                    x1: 0, y1: 0, 
                    x2: 0, y2: 1, 
                  },
                  stops: [
                      [0, '#e5e4e3'],
                      [1, '#6d6d6c'],
                  ]
              },
              */
            },

            /*
            plotOptions: {
              series: {
                pointStart: 10
              }
            },
            */

            legend: {
              enabled: false,
            },

            series: [
              {
                name: null,
                //black
                color: '#000000',
                lineWidth: 40,
                marker: { 
                  enabled : false,
                },
                visible: true,
                enableMouseTracking: false,
                index: 3,
                // 999035 with amplitude 1000 and offset 1000000 is sin(75)
                data: [ 999035, 999030, 999026, 999022, 999019, 999016, 999013, 999010, 999008, 999006,
999004, 999003, 999002, 999001, 999001, 999000, 999001, 999001, 999002, 999003, 999004, 999006, 
999008, 999010, 999013, 999016, 999019, 999022, 999026, 999030, 999035, 999039, 999044, 999049, 
999055, 999061, 999067, 999073, 999080, 999087, 999094, 999102, 999109, 999118, 999126, 999134, 
999143, 999152, 999162, 999171, 999181, 999191, 999202, 999212, 999223, 999234, 999246, 999257, 
999269, 999281, 999293, 999306, 999319, 999331, 999344, 999358, 999371, 999385, 999399, 999413, 
999427, 999441, 999456, 999471, 999485, 999500, 999516, 999531, 999547, 999562, 999578, 999594, 
999610, 999626, 999642, 999658, 999675, 999691, 999708, 999725, 999742, 999759, 999776, 999793, 
999810, 999827, 999844, 999861, 999879, 999896, 999913, 999931, 999948, 999966, 999983, ]
              }, 
              {
                name: null,
                //red
                color: '#f22121',
                lineWidth: 40,
                marker: { 
                  enabled : false,
                },
                visible: true,
                enableMouseTracking: false,
                index: 2,
                data: [ 999087, 999080, 999073, 999067, 999061, 999055, 999049, 999044, 999039, 999035, 
999030, 999026, 999022, 999019, 999016, 999013, 999010, 999008, 999006, 999004, 999003, 999002, 
999001, 999001, 999000, 999001, 999001, 999002, 999003, 999004, 999006, 999008, 999010, 999013, 
999016, 999019, 999022, 999026, 999030, 999035, 999039, 999044, 999049, 999055, 999061, 999067, 
999073, 999080, 999087, 999094, 999102, 999109, 999118, 999126, 999134, 999143, 999152, 999162, 
999171, 999181, 999191, 999202, 999212, 999223, 999234, 999246, 999257, 999269, 999281, 999293, 
999306, 999319, 999331, 999344, 999358, 999371, 999385, 999399, 999413, 999427, 999441, 999456, 
999471, 999485, 999500, 999516, 999531, 999547, 999562, 999578, 999594, 999610, 999626, 999642,
 999658, 999675, 999691, 999708, 999725, 999742, 999759, 999776, 999793, 999810, 999827, ]
              },
              {
                name: null,
                //gold
                color: '#ffcf0f',
                lineWidth: 40,
                marker: { 
                  enabled : false,
                },
                visible: true,
                enableMouseTracking: false,
                index: 1,
                data: [ 999162, 999152, 999143, 999134, 999126, 999118, 999109, 999102, 999094, 999087, 
999080, 999073, 999067, 999061, 999055, 999049, 999044, 999039, 999035, 999030, 999026, 999022, 
999019, 999016, 999013, 999010, 999008, 999006, 999004, 999003, 999002, 999001, 999001, 999000, 
999001, 999001, 999002, 999003, 999004, 999006, 999008, 999010, 999013, 999016, 999019, 999022, 
999026, 999030, 999035, 999039, 999044, 999049, 999055, 999061, 999067, 999073, 999080, 999087, 
999094, 999102, 999109, 999118, 999126, 999134, 999143, 999152, 999162, 999171, 999181, 999191, 
999202, 999212, 999223, 999234, 999246, 999257, 999269, 999281, 999293, 999306, 999319, 999331, 
999344, 999358, 999371, 999385, 999399, 999413, 999427, 999441, 999456, 999471, 999485, 999500, 
999516, 999531, 999547, 999562, 999578, 999594, 999610, 999626, 999642, 999658, 999675, ]
              },
            ],
        });
      </script>
    </body>
  </html>

Wikis are great, Contribute :)
Find all posts by this user
Quote this message in a reply
Post Reply 


Messages In This Thread
RE: Little explorations with HP calculators (no Prime) - pier4r - 10-31-2017 06:23 PM



User(s) browsing this thread: 1 Guest(s)