How to use pts - 10 common examples

_renderChart() {
    // Given the data, distribute bars across the space's size
    let w = (this.space.size.x) / this.props.data.length;
    let bars = this.props.data.map( (d,i) => {
      return new Group( new Pt(i*w, this.space.size.y), new Pt( i*w, this.space.size.y-d*this.space.size.y-1) );
    });
    
    // Draw a line controlled by mouse pointer
    let line = new Group(new Pt(0, this.space.pointer.y), new Pt( this.space.size.x, this.space.pointer.y ) );
    this.form.stroke("#fff", 3).line( line, 10, "circle" );

    // Draw the bars and also check intersection with the pointer's line
    let intersects = bars.map( (b, i) => {
      this.form.stroke("#123",w-1).line( bars[i]  );
      return Line.intersectLine2D( b, line )
    });

    // Draw intersection points
    this.form.fillOnly("#f6c").points( intersects, w/2 );
  }

this.renderChart = () => {

      // Given the data, distribute bars across the space's size
      let w = (this.space.size.x) / this.props.data.length;
      let bars = this.props.data.map( (d,i) => {
        return new Group( new Pt(i*w, this.space.size.y), new Pt( i*w, this.space.size.y-d*this.space.size.y-1) );
      });
      
      // Draw a line controlled by mouse pointer
      let line = new Group(new Pt(0, this.space.size.y/2), new Pt( this.space.size.x, this.space.pointer.y ) );
      this.form.stroke("#fff", 3).line( line, 10, "circle" );

      // Draw the bars and also check intersection with the pointer's line
      let intersects = bars.map( (b, i) => {
        this.form.stroke("#123",w-1).line( bars[i]  );
        return Line.intersectLine2D( b, line )
      });

      // Draw intersection points
      this.form.fillOnly("#f6c").points( intersects, w/2 );
      
    }

_renderChart() {
    // Given the data, distribute bars across the space's size
    let w = (this.space.size.x) / this.props.data.length;
    let bars = this.props.data.map( (d,i) => {
      return new Group( new Pt(i*w, this.space.size.y), new Pt( i*w, this.space.size.y-d*this.space.size.y-1) );
    });
    
    // Draw a line controlled by mouse pointer
    let line = new Group(new Pt(0, this.space.pointer.y), new Pt( this.space.size.x, this.space.pointer.y ) );
    this.form.stroke("#fff", 3).line( line, 10, "circle" );

    // Draw the bars and also check intersection with the pointer's line
    let intersects = bars.map( (b, i) => {
      this.form.stroke("#123",w-1).line( bars[i]  );
      return Line.intersectLine2D( b, line )
    });

    // Draw intersection points
    this.form.fillOnly("#f6c").points( intersects, w/2 );
  }

createChart() {
    
    // Create Space and Form
    // pass the ref canvas element directly into CanvasSpace
    this.space = new CanvasSpace( this.ptsCanvas ).setup({bgcolor: this.props.bgcolor || "#6cf", resize: true, retina: true});
    this.form = this.space.getForm();

    
    this.renderChart = () => {

      // Given the data, distribute bars across the space's size
      let w = (this.space.size.x) / this.props.data.length;
      let bars = this.props.data.map( (d,i) => {
        return new Group( new Pt(i*w, this.space.size.y), new Pt( i*w, this.space.size.y-d*this.space.size.y-1) );
      });
      
      // Draw a line controlled by mouse pointer
      let line = new Group(new Pt(0, this.space.size.y/2), new Pt( this.space.size.x, this.space.pointer.y ) );
      this.form.stroke("#fff", 3).line( line, 10, "circle" );

      // Draw the bars and also check intersection with the pointer's line

// A demo of convex hull using pts.js. We are using webpack to bundle this demo into "dist/bundle.js".
// Source code licensed under Apache License 2.0.
// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)

import {CanvasSpace, Create, Polygon} from "pts";


// Initiate Space and Form
var space = new CanvasSpace("#pts").setup({bgcolor: "#09F", resize: true, retina: true});
var form = space.getForm();

let landmarks;

space.add({

  start: (bound) => {
    // Make a face with 30 radial points with slight randomness
    let radius = space.size.minValue().value/3;
    landmarks = Create.radialPts( space.center, radius, 30  );
    landmarks.map( p => p.add( 50*(Math.random() - Math.random()) ) )

  },

  animate: (time, ftime) => {

_create() {
    // Create a line and a grid, and convert them to `Noise` points
    let gd = Create.gridPts( this.space.innerBound, 20, 20 );
    this.noiseGrid = Create.noisePts( gd, 0.05, 0.1, 20, 20 );
  }

_create() {
    // Create a line and a grid, and convert them to `Noise` points
    let gd = Create.gridPts( this.space.innerBound, 20, 20 );
    this.noiseGrid = Create.noisePts( gd, 0.05, 0.1, 20, 20 );
  }

_create() {
    // Create a line and a grid, and convert them to `Noise` points
    let gd = Create.gridPts( this.space.innerBound, 20, 20 );
    this.noiseGrid = Create.noisePts( gd, 0.05, 0.1, 20, 20 );
  }

_create() {
    // Create a line and a grid, and convert them to `Noise` points
    let gd = Create.gridPts( this.space.innerBound, 20, 20 );
    this.noiseGrid = Create.noisePts( gd, 0.05, 0.1, 20, 20 );
  }

private readonly renderer2: Renderer2,
    private readonly canvas: HTMLCanvasElement,
    readonly bufferService: BufferService,
    readonly socketService: SocketService
  ) {
    (window as any).canvasComponent = this;
    this.renderer2.appendChild(this.elRef.nativeElement, this.canvas);
    this.ctx = this. canvas.getContext('2d')!;

    this.space = new CanvasSpace(this.canvas, () => this.ready$.next(true)).setup({
      bgcolor: '0xFF0000',
      resize: false,
      retina: false,
    });

    this.form = new CanvasForm(this.space);

    this.animate = new Observable(subscriber => {
      this.space.add((t, dt) => subscriber.next({ t: t!, dt: dt! }));
    });

    this.pointer = new Observable(subscriber => {
      let { left, top } = this.canvas.getBoundingClientRect();
      this.space.add({
        resize: () => {
          const rect = this.canvas.getBoundingClientRect();
          left = rect.left;
          top = rect.top;
          // { left, top } = rect;
          // { left, top } = this.canvas.getBoundingClientRect();
        },
        action: (t, x, y) => subscriber.next(new Pt(x - left, y - top)),