Announcements of available shared folders


Postby oliver » Tue Feb 08, 2011 6:06 pm

Plot provides plotting functions and is meant to augment the built-in graphing abilities.
Functions developed here may find their way into the calculator core in updates.

In v1.0, the principal function is lines. It plots a vector of y's [y1, y2, ...], or a vector of (x,y)-points [[x1, y1], [x2, y2], ...].
The values must be real numbers.

[4,7.1,5,3.3,6,2], lines
[[3,4],[6,7],[2,1]], lines

Two example users of this function are included:

star draws a {p,q} star polygon if a two-component vector is provided as input, or a {x,3} star polygon if a single integer number is provided as input.
{15,7} star
Star15_7.png (13.74 KiB) Viewed 20714 times

noise draws a plot of random numbers.
Noise100.png (11.37 KiB) Viewed 20714 times

As with other graphics, you can double-tap the display to see the plot full-screen, and you can two-finger tap to take a screenshot.

lines can be customized through user-defined settings of fields within a calculator.vars.plotParams global variable.
The fields and their defaults are:
{ "autoscale": true, "keepAspect": true, "flip": true, "strokeStyle": 'rgb(128, 128, 255)', "closePath": false, "lineWidth": 1.0 }

autoscale: whether the data should be scaled to fit the screen, or data points should map to pixel locations 1:1
keepAspect: if autoscaling, whether the aspect ratio should be kept; if so, the plot will be centered
flip: whether the origin should be the bottom left (true), or the top left (false)
strokeStyle: the CSS3 stroke style to be applied to the lines; for details, see HTML5 Canvas documentation
closePath: whether the last point should connect to the first
lineWidth: width of the lines in screen pixels

You're welcome to add functions to this folder and submit them for inclusion in the shared version.
Site Admin
Posts: 433
Joined: Sat May 01, 2010 2:11 pm

Note to Programmers

Postby oliver » Tue Feb 08, 2011 6:26 pm

The code for star and noise makes for easy-to-read example code, that shows you how to use lines with customized plotting options.
It also shows you how to check your inputs to make sure they're of the supported type, using MorphEngine's "typeOf" function.

Here's the code for star:
Code: Select all
function (x) {
    // make sure input is of supported type
    if (!(calculator.typeOf(x) == "vector" || calculator.typeOf(x) == "number"))
        throw Error("wrong type of argument");

    var points = [];

    var p, q;
    if (calculator.typeOf(x) == "vector") {
        p = x[0]; q = x[1] || 3;
        if (gcd(p, q) != 1)
            throw Error("params may not have a common factor");
    else {
        p = x; q = 3;
        while (gcd(p, q) != 1)

    for (var k=p; k>0; k--)
        points.push([cos(k*q*2*pi/p), sin(k*q*2*pi/p)]);
    calculator.vars.plotParams = { "strokeStyle": 'green', "closePath": true };

- an error is thrown if the input is not suitable. The "wrong type of argument" text will appear localized to the user.
- calculator functions, such as gcd(), can be simply called without any scoping. These are not normal JavaScript functions, nor are they global. Remember, MorphEngine morphs. The scope chain is extended to include calculator functions.
- the global calculator.vars.plotParams is used to communicate plotting attributes to lines. In this case, the color is changed to 'green' (a valid CSS3 color designation; you could also use something like 'rgb(0.0, 1.0, 0.0)'), and closePath is set to complete the star polygon.
- Plot.lines is used to call lines. With star being located in the same folder as lines, you could also more simply call lines(points). The "Plot." scoping is used to make this function usable in other folders, too, and show how your own user function, likely located in a different folder, might use lines.

The code for noise is:
Code: Select all
function(size) {
    if (typeof size != "number")
        throw Error("wrong type of argument");

    var v = [];
    for (var i=0; i<size; i++)
        v[i] = random();
    calculator.vars.plotParams = { "strokeStyle": 'gray', "keepAspect": false };

Note, here plotParams are modified for a different color, and for not keeping the aspect ratio. Latter makes that the noise values extend over the entire available height of the display.

Both example programs make use of autoscaling. This implies that the range of the data points doesn't matter. The lines function will determine the range and map it to the display so that all data points are visible.
Site Admin
Posts: 433
Joined: Sat May 01, 2010 2:11 pm

Note to Extenders

Postby oliver » Tue Feb 08, 2011 6:37 pm

lines may provide useful code if you're looking into building your own graphics functions.

As you soon as you call
in a function, the calculator switches to graphics mode and an HTML5 Canvas object, named canvas, is available for your use.

The code in lines is regular Canvas element code.
Vectors and matrices in MorphEngine are native JavaScript arrays, so you can directly work with these in JavaScript code with no MorphEngine API knowledge necessary.
(I do recommend you check the type of your inputs, though, as mentioned in the preceding note. Another common localized error msg to throw is "bad arg", if your input is of the correct type but out-of-range, or otherwise unsuitable.)

The lines function is very basic.
Know that you can deploy under MorphEngine any of the several excellent Canvas-based 2-D (and 3-D) drawing and charting JS frameworks available. This is done simply by instantiating the framework with the canvas object and using API-specific functions. (See the reference documentation for the require() function which will dynamically link in .js code (for the framework of your choice), and asset localization of .js files.)
Site Admin
Posts: 433
Joined: Sat May 01, 2010 2:11 pm


Postby oliver » Thu Mar 24, 2011 9:45 am

Added spiral example.
Full parametric plotting will be available soon but you can get started here.
Change t2vec to plot another kind of parametric graph.
Site Admin
Posts: 433
Joined: Sat May 01, 2010 2:11 pm

Parametric, Butterfly

Postby oliver » Tue Apr 26, 2011 1:08 am

Added parametric for arbitrary cartesian parametric function plot drawing.
It takes two real inputs, and one integer: The start and end values of the independent plot variable, and the number of plot points to be generated.

Added Butterfly as an example of using parametric. The eq variable in this folder contains the equations for the known "Butterfly" transcendental curve:
Butterfly Equations.png
Butterfly Equations.png (7.66 KiB) Viewed 20640 times

Here's the full-screen result of tapping Butterfly:
Butterfly.png (53.79 KiB) Viewed 20640 times

Internally, parametric uses the calculator.functionFromExpression() MorphEngine function to compute 2-D plot points, and the lines function from this folder to draw them.
Site Admin
Posts: 433
Joined: Sat May 01, 2010 2:11 pm

Added "integers"

Postby oliver » Mon Jul 18, 2011 5:40 pm

Added "integers", a function that plots an expression or function in an integer range.

For example,
Code: Select all
≪ "phi" 1 100 Plot.integers Plot.lines ≫

will plot the values for Euler's totient for integers 1 through 100.
Site Admin
Posts: 433
Joined: Sat May 01, 2010 2:11 pm

Re: Plot

Postby oliver » Mon Oct 21, 2013 10:10 pm

Added points. It works like lines but plots points. You can set the color and point size by specifying color and size properties, respectively, in calculator.vars.plotParams (an options object).

Also upgraded integers to work with more functions and only output an array of values, vs. plotting them. That is, you'll need to call lines or points now after integers (I edited the previous post so that example already reflects the change). While longer to type this gives you now greater flexibility. (Not to mention that you could use the function in different contexts now.)
Site Admin
Posts: 433
Joined: Sat May 01, 2010 2:11 pm

Return to Downloadable Folders / Shared Data

Who is online

Users browsing this forum: No registered users and 1 guest