Function Graph

function f(x) {

return x*x*x;

}

let cx, cy, unit;

let maxX, minX, step;

let x, y;

function setup() {

unit = 190;

step = 0.05;

mathCanvas(400, 400, unit);

x = minX;

}

function draw() {

background(255);

mathAxis();

//graph

strokeWeight(3);

stroke("blue");

for (let X = minX; X <= maxX; X += step) {

let sx = X;

let sy = f(X);

let ex = X + step;

let ey = f(X + step);

mathLine(sx, sy, ex, ey);

}

//animation

y = f(x);

stroke("yellow");

mathLine(x, 0, x, y);

mathLine(0, y, x, y);

fill("red");

mathCircle(x, y, 15);

x += step;

if (x > maxX) x = minX;

}

function mathCanvas(x, y, u) {

createCanvas(x, y);

cx = width / 2;

cy = height / 2;

unit = u;

minX = -cx / unit;

maxX = cx / unit;

}

function mathAxis() {

//Axis

strokeWeight(3);

stroke(127);

line(0, cy, width, cy);

line(cx, 0, cx, height);

//Scale

let l = 3;

for (let i = 1; i <= cx / unit; i++) {

let x = unit * i;

line(cx + x, cy - l, cx + x, cy + l);

line(cx - x, cy - l, cx - x, cy + l);

}

for (let i = 1; i <= cy / unit; i++) {

let y = unit * i;

line(cx + l, cy - y, cx - l, cy - y);

line(cx + l, cy + y, cx - l, cy + y);

}

//Number

strokeWeight(1);

fill(127);

textAlign(RIGHT);

for (let i = 1; i <= cx / unit; i++) {

let x = unit * i;

text(i, cx + x + 4, cy + 17);

text(-i, cx - x + 4, cy + 17);

}

for (let i = 1; i <= cy / unit; i++) {

let y = unit * i;

text(i, cx - 4, cy - y + 4);

text(-i, cx - 4, cy + y + 4);

}

//back to default

stroke(0);

fill(255);

}

function mathCircle(x, y, d) {

circle(cx + x * unit, cy - y * unit, d);

}

function mathLine(sx, sy, ex, ey) {

line(cx + sx * unit, cy - sy * unit,

cx + ex * unit, cy - ey * unit);

}