Final Lesson: Function Plotter in detail

1) First you need a text field for your equation and a plot button, and of course define your canvas

2) Javascript has this great method to evaluate an expression (for other compiled langauge, that is quite hard to do)

var x = 10;
var expression = "2*x+3"
alert(eval(expression))

See it in action.

x= Expression:

Give yourself a function to evaluate

function func(x) {
  var eq=document.getElementById("func").value;
  var result= eval("x="+x+";"+eq);
  return result; 
}

3) Figure out your coordinates

The function plotter has (-5,-5) to (5,5) in range. This is called your world coordinate.

Your plotting canvas is going from (0,0) to (500,500) in range. That is called the view coordinate.

You will need to do some transformation.

var  xvl = 0;
var  yvl = 0; // viewport is the Canvas

var  xvu = 500
var  yvu = 500

var  xwl = -5
var  ywl = -5
var  xwu = 5
var  ywu = 5

var  Sx = (xvu - xvl) / (xwu - xwl);
var  Sy = (yvu - yvl) / (ywu - ywl);
var  Tx = (xwu * xvl - xwl * xvu) / (xwu - xwl);
var  Ty = (ywu * yvl - ywl * yvu) / (ywu - ywl);

4) Give yourself a convenience function to plot line

function plotLine2D(context, x1, y1, x2, y2, c) {

  t_x1 = Sx * x1 + Tx;
  t_y1 = 500- (Sy * y1 + Ty);
  t_x2 = Sx * x2 + Tx;
  t_y2 = 500 -(Sy * y2 + Ty);


  if (c=="blue")  context.strokeStyle = "#00f"
  if (c=="black")  context.strokeStyle = "#000"

  context.lineWidth   = 2;

  context.beginPath();

  context.moveTo(t_x1, t_y1); 
  context.lineTo(t_x2, t_y2);

  context.stroke();
  context.closePath();

 }

5) Give yourself another convenience function to clear screen (with a black border)

function cls(context) {
context.fillStyle   = '#fff';
context.strokeStyle = '#f00';

context.beginPath();
context.moveTo(0,0);
context.lineTo(0,500);
context.lineTo(500,500);
context.lineTo(500,0);
context.fill();

context.closePath();
}

Now, all you have to do is

1) Plot axes:

  var  xmin = xwl;
  var  ymin = ywl;
  var  xmax = xwu;
  var  ymax = ywu;

  plotLine2D(context, xmin, 0, xmax, 0, "black"); // x-axis;
  plotLine2D(context, 0, ymin, 0, ymax, "black"); // y-axis;

2) Plot little ticks

  var tick = 1

  for (x = xmin; x <= xmax; x += tick) {
   plotLine2D(context,x, -0.1, x, 0.1, "black");
  }
  for (y = ymin; y <= ymax; y += tick) {
   plotLine2D(context,-0.1, y, 0.1, y, "black");
  }

3) do a loop to plot 100 little segments.

  var dx = (xmax - xmin) / 100;
  var x, y, oldx, oldy;
 
  var hasError = false
  x = xmin;
  y = func(x);

  oldx = x;
  oldy = y;
  while (x <= xmax) {
   x = x + dx;
   y = func(x);
 
   plotLine2D(context, oldx, oldy, x, y, "blue");
   oldx = x;
   oldy = y;

  }// while

Ok just copy everything here. View Source look for [BEGIN]

f(x) = (For trig functions, use Math.sin, Math.cos, Math.tan)

Your browser does not support the canvas element.

This is my first Android App but unfortunately not many is willing to pay just $1. (Too many people made free ones that are better)

Lesson 8: HTML5 canvas

HTML is originally intended for simple text, and drawing, audio and video was originally achieved by browser plugins such as Flash and Java Applets.. until HTML5 (about 2008). Super duper slide show here: http://slides.html5rocks.com/#landing-slide. I actually only used just some of its features. Note: not all browsers support all features.

This is a great link for experimenting with it: http://www.w3schools.com/html/html5_canvas.asp.

First, define a canvas, with an apology note for old browsers.

<canvas id="myCanvas1" width="200" height="200" style="border:1px solid blue;">
Sorry, your browser does not support canvas
</canvas>

Then we need javascript to draw. You will need to get the "context". Then call the methods within the context to draw lines, text, images. This tells you all the things you can do with it: http://www.w3schools.com/tags/ref_canvas.asp

This is an example to draw line.

var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.closePath();
ctx.stroke();

from (0,0) - (200,100)

With specific width and color

var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.lineWidth = 10;
ctx.strokeStyle = '#ff0000';
ctx.closePath();

ctx.stroke();

with specific width and style (color)

Sorry, your browser does not support canvas

Draw a filled rectangle

var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");

ctx.fillStyle = 'green';
ctx.fillRect(30,30,100,100);

Draw Arc (Cricle). x, y, radius, start angle, end angle (in radians). (Radian is an alternative to degree measure. There are 2π radian in 360°)

var c=document.getElementById("myCanvas1");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

var c=document.getElementById("myCanvas1");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.rotate(20*Math.PI/180)
ctx.fillText("Hello World!",10,50);

Now I showed you almost everything you need to do the function plotter.