Curves improve

src/bundles/plotly/curve_functions.ts

@@ -47,7 +47,7 @@
  * ```
  */
 export function r_of(pt: Point): number {
-  return pt.color.r * 255;
+  return pt.color[0] ?? 0 * 255;
 }
 
 /**
@@ -62,7 +62,7 @@
  * ```
  */
 export function g_of(pt: Point): number {
-  return pt.color.g * 255;
+  return pt.color[1] ?? 0 * 255;
 }
 
 /**
@@ -77,7 +77,7 @@
  * ```
  */
 export function b_of(pt: Point): number {
-  return pt.color.b * 255;
+  return pt.color[2] ?? 0 * 255;
 }
 export function generatePlot(
   type: string,
@@ -98,6 +98,7 @@
     z_s.push(z_of(point));
     color_s.push(`rgb(${r_of(point)},${g_of(point)},${b_of(point)})`);
   }
+
   const plotlyData: Data = {
     x: x_s,
     y: y_s,
@@ -106,6 +107,9 @@
       size: 2,
       color: color_s,
     },
+    line: {
+      color: color_s,
+    },
   };
   return new CurvePlot(
     draw_new_curve,
@@ -119,5 +123,5 @@
 }
 
 function draw_new_curve(divId: string, data: Data, layout: Partial<Layout>) {
-  Plotly.newPlot(divId, [data], layout);
-}
+  Plotly.react(divId, [data], layout);
+}

src/bundles/plotly/functions.ts

@@ -7,14 +7,17 @@ import context from 'js-slang/context';
 import Plotly, { type Data, type Layout } from 'plotly.js-dist';
 import {
   type Curve,
-  type CurvePlot,
+  CurvePlot,
   type CurvePlotFunction,
   DrawnPlot,
   type ListOfPairs,
 } from './plotly';
 import { generatePlot } from './curve_functions';
+import { get_duration, get_wave, is_sound } from './sound_functions';
+import { type Sound } from '../sound/types';
+
+let drawnPlots: (DrawnPlot | CurvePlot)[] = [];
 
-const drawnPlots: (DrawnPlot | CurvePlot)[] = [];
 context.moduleContexts.plotly.state = {
   drawnPlots,
 };
@@ -121,7 +124,6 @@ export function new_plot(data: ListOfPairs): void {
   drawnPlots.push(new DrawnPlot(draw_new_plot, data));
 }
 
-
 /**
  * Adds a new plotly plot to the context which will be rendered in the Plotly Tabs
  * @example
@@ -236,7 +238,6 @@ export function new_plot_json(data: any): void {
   drawnPlots.push(new DrawnPlot(draw_new_plot_json, data));
 }
 
-
 /**
  * @param data The data which plotly will use
  * @param divId The id of the div element on which the plot will be displayed
@@ -309,34 +310,159 @@ function createPlotFunction(
 /**
  * Returns a function that turns a given Curve into a Drawing, by sampling the
  * Curve at `num` sample points and connecting each pair with a line.
- * The parts between (0,0) and (1,1) of the resulting Drawing are shown in the window.
  *
  * @param num determines the number of points, lower than 65535, to be sampled.
  * Including 0 and 1, there are `num + 1` evenly spaced sample points
  * @return function of type Curve → Drawing
  * @example
  * ```
- * draw_connected(100)(t => make_point(t, t));
+ * draw_connected_2d(100)(t => make_point(t, t));
  * ```
  */
 export const draw_connected_2d = createPlotFunction(
-  'scatter',
-  { mode: 'lines' },
+  'scattergl',
+  {
+    mode: 'lines',
+  },
   {
     xaxis: { visible: false },
     yaxis: {
       visible: false,
       scaleanchor: 'x',
     },
   },
-
+  true,
 );
 
-export const draw_3D_points = createPlotFunction(
+/**
+ * Returns a function that turns a given 3D Curve into a Drawing, by sampling the
+ * 3D Curve at `num` sample points and connecting each pair with a line.
+ *
+ * @param num determines the number of points, lower than 65535, to be sampled.
+ * Including 0 and 1, there are `num + 1` evenly spaced sample points
+ * @return function of type 3D Curve → Drawing
+ * @example
+ * ```
+ * draw_connected_3d(100)(t => make_point(t, t));
+ * ```
+ */
+export const draw_connected_3d = createPlotFunction(
   'scatter3d',
+  { mode: 'lines' },
+  {},
+  true,
+);
+
+/**
+ * Returns a function that turns a given Curve into a Drawing, by sampling the
+ * Curve at num sample points. The Drawing consists of isolated points, and does not connect them.
+ * When a program evaluates to a Drawing, the Source system displays it graphically, in a window,
+ *
+ * * @param num determines the number of points, lower than 65535, to be sampled.
+ * Including 0 and 1, there are `num + 1` evenly spaced sample points
+ * @return function of type 2D Curve → Drawing
+ * @example
+ * ```
+ * draw_points_2d(100)(t => make_point(t, t));
+ */
+export const draw_points_2d = createPlotFunction(
+  'scatter',
   { mode: 'markers' },
   {
-
+    xaxis: { visible: false },
+    yaxis: {
+      visible: false,
+      scaleanchor: 'x',
+    },
   },
   true,
 );
+
+/**
+ * Returns a function that turns a given 3D Curve into a Drawing, by sampling the
+ * 3D Curve at num sample points. The Drawing consists of isolated points, and does not connect them.
+ * When a program evaluates to a Drawing, the Source system displays it graphically, in a window,
+ *
+ * * @param num determines the number of points, lower than 65535, to be sampled.
+ * Including 0 and 1, there are `num + 1` evenly spaced sample points
+ * @return function of type 3D Curve → Drawing
+ * @example
+ * ```
+ * draw_points_3d(100)(t => make_point(t, t));
+ */
+export const draw_points_3d = createPlotFunction(
+  'scatter3d',
+  { mode: 'markers' },
+  {},
+);
+
+/**
+ * Visualizes the sound on a 2d line graph
+ * @param sound the sound which is to be visualized on plotly
+ */
+export const draw_sound_2d = (sound: Sound) => {
+  const FS: number = 44100; // Output sample rate
+  if (!is_sound(sound)) {
+    throw new Error(
+      `draw_sound_2d is expecting sound, but encountered ${sound}`,
+    );
+    // If a sound is already displayed, terminate execution.
+  } else if (get_duration(sound) < 0) {
+    throw new Error('draw_sound_2d: duration of sound is negative');
+  } else {
+    // Instantiate audio context if it has not been instantiated.
+
+    // Create mono buffer
+    const channel: number[] = [];
+    const time_stamps: number[] = [];
+    const len = Math.ceil(FS * get_duration(sound));
+
+    const wave = get_wave(sound);
+    for (let i = 0; i < len; i += 1) {
+      time_stamps[i] = i / FS;
+      channel[i] = wave(i / FS);
+    }
+
+    let x_s: number[] = [];
+    let y_s: number[] = [];
+
+    for (let i = 0; i < channel.length; i += 1) {
+      x_s.push(time_stamps[i]);
+      y_s.push(channel[i]);
+    }
+
+    const plotlyData: Data = {
+      x: x_s,
+      y: y_s,
+    };
+    const plot = new CurvePlot(
+      draw_new_curve,
+      {
+        ...plotlyData,
+        type: 'scattergl',
+        mode: 'lines',
+        line: { width: 0.5 },
+      } as Data,
+      {
+        xaxis: {
+          type: 'linear',
+          title: 'Time',
+          anchor: 'y',
+          position: 0,
+          rangeslider: { visible: true },
+        },
+        yaxis: {
+          type: 'linear',
+          visible: false,
+        },
+        bargap: 0.2,
+        barmode: 'stack',
+      },
+    );
+    if (drawnPlots) drawnPlots.push(plot);
+  }
+};
+
+function draw_new_curve(divId: string, data: Data, layout: Partial<Layout>) {
+  Plotly.react(divId, [data], layout);
+}

src/bundles/plotly/index.ts

@@ -7,7 +7,8 @@
   new_plot,
   new_plot_json,
   draw_connected_2d,
-  draw_3D_points,
-} from './functions';
-
-export { draw_sound_2d } from './sound_functions';
+  draw_connected_3d,
+  draw_points_2d,
+  draw_points_3d,
+  draw_sound_2d,
+} from './functions';

src/bundles/plotly/plotly.ts

@@ -1,5 +1,6 @@
 import { type Data, type Layout } from 'plotly.js-dist';
 import { type ReplResult } from '../../typings/type_helpers';
+import type { Pair } from 'js-slang/dist/stdlib/list';
 
 /**
  * Represents plots with a draw method attached
@@ -37,15 +38,14 @@
 
 export type ListOfPairs = (ListOfPairs | any)[] | null;
 export type Data2d = number[];
-export type Color = { r: number, g: number, b: number };
+export type Color = { r: number; g: number; b: number };
 
 export type DataTransformer = (c: Data2d[]) => Data2d[];
-export type CurvePlotFunction = ((func: Curve) => CurvePlot);
+export type CurvePlotFunction = (func: Curve) => CurvePlot;
 
-export type Curve = ((n: number) => Point);
+export type Curve = (n: number) => Point;
 export type CurveTransformer = (c: Curve) => Curve;
 
-
 /** Encapsulates 3D point with RGB values. */
 export class Point implements ReplResult {
   constructor(
@@ -57,3 +57,6 @@
 
   public toReplString = () => `(${this.x}, ${this.y}, ${this.z}, Color: ${this.color})`;
 }
+
+export type Wave = (...t: any) => number;
+export type Sound = Pair<Wave, number>;