mathdoodle/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Fundamental Theorem of Algebra


## index.html
<!doctype html>
<html>
  <head>
    <base href='/'>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <!-- SCRIPTS-MARKER -->
    <!-- SYSTEM-SHIM-MARKER -->
  </head>
  <body>
    <canvas id='canvas'></canvas>
    <hr/>
    <ul>
      <li>
        <a href='https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API' target='_blank'>Canvas API</a>
      </li>
    </ul>
    <script>
    // CODE-MARKER
    </script>
    <script>
    System.defaultJSExtensions = true
    System.import('./script')
    </script>
  </body>
</html>

## package.json
{
    "uuid": "df1de71b-00c5-4700-9474-995658d5c71a",
    "description": "Fundamental Theorem of Algebra",
    "dependencies": {
        "DomReady": "1.0.0",
        "davinci-eight": "7.4.4"
    },
    "operatorOverloading": true,
    "name": "fundamental-theorem of algebra",
    "version": "0.1.0",
    "author": "David Geo Holmes",
    "keywords": [
        "HTML5",
        "Canvas",
        "Complex",
        "Wessel"
    ],
    "linting": true,
    "hideConfigFiles": true
}

## script.ts
// Using a Multivector in the plane as a complex number!
import { Geometric2 as Complex } from 'davinci-eight'
import { Color } from 'davinci-eight'

//
// Plot a "complex" function in the Wessel Plane.
//

/**
 * The "complex" function that we wish to visualize.
 */
function f(z: Complex): Complex {
    return z * (z * (z + 1) + 6) - 20
}

function lightnessFromMagnitude(r: number) {
    return 2 * sigmoid(r) - 1.0
}

function sigmoid(t: number) {
    return 1 / (1 + Math.exp(-t * t / 2000))
}

class MinMax {
    public min: number
    public max: number
    constructor(min: number, max: number) {
        this.min = min
        this.max = max
    }
    /**
     * Converts the argument, s, usually in the range [0,1] to a value in the range [min,max].
     */
    transform(s: number): number {
        return s * (this.max - this.min) + this.min
    }
}

const canvas = <HTMLCanvasElement> document.getElementById('canvas')

// This is the range of the Wessel Plane that we are interested in.
const xRange = new MinMax(-8, 8)
const yRange = new MinMax(-8, 8)

// The number of pixels is a compromise of speed and resolution.
canvas.height = 100
canvas.width = 100

const ctx = <CanvasRenderingContext2D> canvas.getContext('2d')

const z = new Complex()
for (let i = 0; i < canvas.width; i++) {
    for (let j = 0; j <= canvas.height; j++) {
        z.a = xRange.transform(i / canvas.width)
        z.b = yRange.transform((canvas.height - j) / canvas.height)
        const result = f(z)
        // Convert direction of complex number to a color using HSL.
        const H = Math.atan2(result.b, result.a)  // Equivalent to arg of a complex number.
        const S = 1
        // const L = 0.5;
        // Experiment with visualizing the magnitude.
        const L = lightnessFromMagnitude(f(z).magnitude())
        const color = Color.fromHSL(H, S, L)
        ctx.fillStyle = `rgb(${Math.round(color.r * 255)},${Math.round(color.g * 255)},${Math.round(color.b * 255)})`
        ctx.fillRect(i, j, 1, 1)
    }
}

## style.css
#canvas {
  position: absolute;
  background-color: #cccccc;
  top: 50px;
  left: 50px;
  height: 400px;
  width: 400px;
}

## tsconfig.json
{
    "allowJs": false,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "system",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "traceResolution": true
}

## tslint.json
{
    "rules": {
        "array-type": [
            true,
            "array"
        ],
        "curly": false,
        "comment-format": [
            true,
            "check-space"
        ],
        "eofline": true,
        "forin": true,
        "jsdoc-format": true,
        "new-parens": true,
        "no-conditional-assignment": false,
        "no-consecutive-blank-lines": true,
        "no-construct": true,
        "no-for-in-array": true,
        "no-inferrable-types": [
            true
        ],
        "no-magic-numbers": false,
        "no-shadowed-variable": true,
        "no-string-throw": true,
        "no-trailing-whitespace": [
            true,
            "ignore-jsdoc"
        ],
        "no-var-keyword": true,
        "one-variable-per-declaration": [
            true,
            "ignore-for-loop"
        ],
        "prefer-const": true,
        "prefer-for-of": true,
        "prefer-function-over-method": false,
        "prefer-method-signature": true,
        "radix": true,
        "semicolon": [
            true,
            "never"
        ],
        "trailing-comma": [
            true,
            {
                "multiline": "never",
                "singleline": "never"
            }
        ],
        "triple-equals": true,
        "use-isnan": true
    }
}
	<!doctype html>
	<html>
	<head>
	<base href='/'>
	<!-- STYLES-MARKER -->
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- SCRIPTS-MARKER -->
	<!-- SYSTEM-SHIM-MARKER -->
	</head>
	<body>
	<canvas id='canvas'></canvas>
	<hr/>
	<ul>
	<li>
	<a href='https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API' target='_blank'>Canvas API</a>
	</li>
	</ul>
	<script>
	// CODE-MARKER
	</script>
	<script>
	System.defaultJSExtensions = true
	System.import('./script')
	</script>
	</body>
	</html>
	{
	"uuid": "df1de71b-00c5-4700-9474-995658d5c71a",
	"description": "Fundamental Theorem of Algebra",
	"dependencies": {
	"DomReady": "1.0.0",
	"davinci-eight": "7.4.4"
	},
	"operatorOverloading": true,
	"name": "fundamental-theorem of algebra",
	"version": "0.1.0",
	"author": "David Geo Holmes",
	"keywords": [
	"HTML5",
	"Canvas",
	"Complex",
	"Wessel"
	],
	"linting": true,
	"hideConfigFiles": true
	}
	// Using a Multivector in the plane as a complex number!
	import { Geometric2 as Complex } from 'davinci-eight'
	import { Color } from 'davinci-eight'

	//
	// Plot a "complex" function in the Wessel Plane.
	//

	/**
	* The "complex" function that we wish to visualize.
	*/
	function f(z: Complex): Complex {
	return z * (z * (z + 1) + 6) - 20
	}

	function lightnessFromMagnitude(r: number) {
	return 2 * sigmoid(r) - 1.0
	}

	function sigmoid(t: number) {
	return 1 / (1 + Math.exp(-t * t / 2000))
	}

	class MinMax {
	public min: number
	public max: number
	constructor(min: number, max: number) {
	this.min = min
	this.max = max
	}
	/**
	* Converts the argument, s, usually in the range [0,1] to a value in the range [min,max].
	*/
	transform(s: number): number {
	return s * (this.max - this.min) + this.min
	}
	}

	const canvas = <HTMLCanvasElement> document.getElementById('canvas')

	// This is the range of the Wessel Plane that we are interested in.
	const xRange = new MinMax(-8, 8)
	const yRange = new MinMax(-8, 8)

	// The number of pixels is a compromise of speed and resolution.
	canvas.height = 100
	canvas.width = 100

	const ctx = <CanvasRenderingContext2D> canvas.getContext('2d')

	const z = new Complex()
	for (let i = 0; i < canvas.width; i++) {
	for (let j = 0; j <= canvas.height; j++) {
	z.a = xRange.transform(i / canvas.width)
	z.b = yRange.transform((canvas.height - j) / canvas.height)
	const result = f(z)
	// Convert direction of complex number to a color using HSL.
	const H = Math.atan2(result.b, result.a) // Equivalent to arg of a complex number.
	const S = 1
	// const L = 0.5;
	// Experiment with visualizing the magnitude.
	const L = lightnessFromMagnitude(f(z).magnitude())
	const color = Color.fromHSL(H, S, L)
	ctx.fillStyle = `rgb(${Math.round(color.r * 255)},${Math.round(color.g * 255)},${Math.round(color.b * 255)})`
	ctx.fillRect(i, j, 1, 1)
	}
	}
	#canvas {
	position: absolute;
	background-color: #cccccc;
	top: 50px;
	left: 50px;
	height: 400px;
	width: 400px;
	}
	{
	"allowJs": false,
	"declaration": true,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"jsx": "react",
	"module": "system",
	"noImplicitAny": true,
	"noImplicitReturns": true,
	"noImplicitThis": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"preserveConstEnums": true,
	"removeComments": false,
	"sourceMap": true,
	"strictNullChecks": true,
	"suppressImplicitAnyIndexErrors": true,
	"target": "es5",
	"traceResolution": true
	}
	{
	"rules": {
	"array-type": [
	true,
	"array"
	],
	"curly": false,
	"comment-format": [
	true,
	"check-space"
	],
	"eofline": true,
	"forin": true,
	"jsdoc-format": true,
	"new-parens": true,
	"no-conditional-assignment": false,
	"no-consecutive-blank-lines": true,
	"no-construct": true,
	"no-for-in-array": true,
	"no-inferrable-types": [
	true
	],
	"no-magic-numbers": false,
	"no-shadowed-variable": true,
	"no-string-throw": true,
	"no-trailing-whitespace": [
	true,
	"ignore-jsdoc"
	],
	"no-var-keyword": true,
	"one-variable-per-declaration": [
	true,
	"ignore-for-loop"
	],
	"prefer-const": true,
	"prefer-for-of": true,
	"prefer-function-over-method": false,
	"prefer-method-signature": true,
	"radix": true,
	"semicolon": [
	true,
	"never"
	],
	"trailing-comma": [
	true,
	{
	"multiline": "never",
	"singleline": "never"
	}
	],
	"triple-equals": true,
	"use-isnan": true
	}
	}