HTML5 Game - Plot math function in graph

Description

Plot math function in graph
Demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Graph functions</title>
<style>
  body {//from w w  w . j a v a 2 s. c om
  background-color: #666;
}
#canvas {
  background-color: #fff;
}
</style>
</head>
<body>
<canvas id="canvas" width="700" height="500"></canvas>
<script>
'use strict'
class Graph {
    constructor(context, xmin, xmax, ymin, ymax, x0, y0, xwidth, ywidth) {
        this.ctx = context;
        this.x_orig = x0;
        this.y_orig = y0;

        this.xmin = xmin;
        this.ymin = ymin;
        this.xmax = xmax;
        this.ymax = ymax;

        this.x_displ_scal = (xmax - xmin) / xwidth;
        this.y_displ_scal = (ymax - ymin) / ywidth;

    }
    drawgrid(xmajor, xminor, ymajor, yminor) {
        let tw = 15;
        let th = 20;
        let txpos = this.x_orig - tw;
        let typos = this.y_orig;

        let x_min_rel = this.xmin / this.x_displ_scal;
        let x_max_rel = this.xmax / this.x_displ_scal;
        let y_min_rel = this.ymin / this.y_displ_scal;
        let y_max_rel = this.ymax / this.y_displ_scal;
        let x_min = x_min_rel + this.x_orig;
        let x_max = x_max_rel + this.x_orig;
        let y_min = this.y_orig - y_min_rel;
        let y_max = this.y_orig - y_max_rel;
        let x_tick_major = xmajor / this.x_displ_scal;
        let x_tick_minor = xminor / this.x_displ_scal;
        let y_tick_major = ymajor / this.y_displ_scal;
        let y_tick_minor = yminor / this.y_displ_scal;
        // draw major grid lines
        this.ctx.strokeStyle = '#999999';
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        let yValue = y_max;
        do {
            this.ctx.moveTo(x_min, yValue);
            this.ctx.lineTo(x_max, yValue);
            yValue += y_tick_major;
        } while (yValue <= y_min);
        let xValue = x_min;
        do {
            this.ctx.moveTo(xValue, y_min);
            this.ctx.lineTo(xValue, y_max);
            xValue += x_tick_major;
        } while (xValue <= x_max);
        this.ctx.stroke();
        // draw minor grid lines      
        this.ctx.strokeStyle = '#cccccc';
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        yValue = y_max;
        do {
            this.ctx.moveTo(x_min, yValue);
            this.ctx.lineTo(x_max, yValue);
            yValue += y_tick_minor;
        } while (yValue <= y_min);
        xValue = x_min;
        do {
            this.ctx.moveTo(xValue, y_min);
            this.ctx.lineTo(xValue, y_max);
            xValue += x_tick_minor;
        } while (xValue <= x_max);
        this.ctx.stroke();
        //display values
        this.ctx.font = "10pt Arial";
        this.ctx.fillStyle = '#000000';
        this.ctx.textAlign = "right";
        this.ctx.textBaseline = "top";
        yValue = y_max;
        do {
            let y_displ = (this.y_orig - yValue) * this.y_displ_scal;
            this.ctx.fillText(y_displ, txpos + 5, yValue - th / 2);
            yValue += y_tick_major;
        } while (yValue <= y_min);
        this.ctx.textAlign = "left";
        this.ctx.textBaseline = "top";
        xValue = x_min;
        do {
            let x_displ = (xValue - this.x_orig) * this.x_displ_scal;
            this.ctx.fillText(x_displ, xValue - tw + 10, typos + 5);
            xValue += x_tick_major;
        } while (xValue <= x_max);
        this.drawaxes();
    }

    drawaxes() {
        let tw = 15;
        let th = 20;

        let x_min_rel = this.xmin / this.x_displ_scal;
        let x_max_rel = this.xmax / this.x_displ_scal;
        let y_min_rel = this.ymin / this.y_displ_scal;
        let y_max_rel = this.ymax / this.y_displ_scal;
        let x_min = x_min_rel + this.x_orig;
        let x_max = x_max_rel + this.x_orig;
        let y_min = this.y_orig - y_min_rel;
        let y_max = this.y_orig - y_max_rel;
        let txpos = this.x_orig - tw;
        let typos = this.y_orig;
        this.ctx.strokeStyle = '#000000';
        this.ctx.lineWidth = 2;
        this.ctx.beginPath();
        this.ctx.moveTo(x_min, this.y_orig);
        this.ctx.lineTo(x_max, this.y_orig);
        this.ctx.moveTo(this.x_orig, y_min);
        this.ctx.lineTo(this.x_orig, y_max);
        this.ctx.stroke();
        //axis labels
        this.ctx.font = "12pt Arial";
        this.ctx.fillStyle = '#000000';
        this.ctx.textAlign = "left";
        this.ctx.textBaseline = "top";
        this.ctx.fillText('x', x_max + 0.75 * tw, typos - th / 2);
        this.ctx.fillText('y', txpos + tw / 2 + 5, y_max - 1.5 * th);
    }
    plot(xArr, yArr) {
        let xpos = this.x_orig + xArr[0] / this.x_displ_scal;
        let ypos = this.y_orig - yArr[0] / this.y_displ_scal;
        this.ctx.strokeStyle = '#0000ff';
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        this.ctx.moveTo(xpos, ypos);
        this.ctx.arc(xpos, ypos, 1, 0, 2 * Math.PI, true);
        for (let i = 1; i < xArr.length; i++) {
            xpos = this.x_orig + xArr[i] / this.x_displ_scal;
            ypos = this.y_orig - yArr[i] / this.y_displ_scal;
            this.ctx.lineTo(xpos, ypos);
        }
        this.ctx.stroke();
    }
}

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d'); 

let graph = new Graph(context,-4,4,-10,10,275,210,450,350);
graph.drawgrid(10,2,2,5);  
let xA = new Array();
let yA = new Array();
let y1A = new Array();
for (let i=0; i<=100; i++){
  xA[i] = (i-50)*0.06;  
  yA[i] = f(xA[i]);      
}
graph.plot(xA,yA);

function f(x){
  let y;
  y = -0.5*Math.pow(x,5) + 3*Math.pow(x,3) + x*x - 2*x - 3;
  return y;
}

</script>
</body>
</html>
HTML5 Game - Plot math function in graph

Description

Demo

Related Topic
