Use 'x' as the variable. Example: 2*x + 1 or Math.pow(x, 2)
Evaluate Specific Point
Result: f() =
Understanding Piecewise Functions
A piecewise function is a function that is defined by different expressions at different intervals of its domain. Unlike simple linear or quadratic functions that apply the same rule to every input, a piecewise function behaves like a "modular" machine, switching its logic based on the input value provided.
Real-World Example: Tax Brackets
Income tax is a classic piecewise function. If you earn $0 to $10,000, you might pay 10%. If you earn $10,001 to $40,000, you pay 15%. The rule (the percentage) changes depending on which "piece" of the income domain your salary falls into.
How to Graph a Piecewise Function
To graph these functions manually, follow these steps:
Identify the boundaries: Note the x-values where the function changes (the "break points").
Evaluate endpoints: Check the value of each sub-function at the boundaries. If the condition is "less than or equal to" (≤), use a solid dot. If it is "less than" (<), use an open circle to indicate the point is not included.
Plot individual pieces: Sketch each sub-function only within its allowed domain.
Check for continuity: If the pieces meet at the same y-value at the boundary, the function is continuous. If they don't, it has a jump discontinuity.
Common Notations and Syntax
In math textbooks, piecewise functions are usually written with a large curly bracket. For this calculator, we use JavaScript math notation:
Multiplication: Use * (e.g., 3*x)
Powers: Use Math.pow(x, 2) for x² or Math.pow(x, 3) for x³
Absolute Value: Use Math.abs(x)
Square Root: Use Math.sqrt(x)
Example Calculation
Consider the function defined as:
f(x) = x + 1 if x < 0
f(x) = x² if x ≥ 0
If you choose x = -2, it falls into the first piece. f(-2) = -2 + 1 = -1. If you choose x = 3, it falls into the second piece. f(3) = 3² = 9.
function processPiecewise() {
var b1 = parseFloat(document.getElementById('boundary1').value);
var b2 = parseFloat(document.getElementById('boundary2').value);
var e1 = document.getElementById('expr1').value;
var e2 = document.getElementById('expr2').value;
var e3 = document.getElementById('expr3').value;
var evalX = parseFloat(document.getElementById('evalX').value);
// Update labels
document.getElementById('lbl_b1').innerText = b1;
document.getElementById('lbl_b2').innerText = b2;
// Evaluate specific point
var result;
try {
if (evalX < b1) {
result = evalExpr(e1, evalX);
} else if (evalX < b2) {
result = evalExpr(e2, evalX);
} else {
result = evalExpr(e3, evalX);
}
document.getElementById('pw-result').style.display = 'block';
document.getElementById('resX').innerText = evalX;
document.getElementById('resVal').innerText = result.toFixed(4);
} catch (e) {
alert("Error in math expression. Please check your syntax.");
}
drawGraph(b1, b2, e1, e2, e3);
}
function evalExpr(expr, x) {
// Simple safety replacement for 'x'
// Using a regex to find 'x' but not inside words
var sanitized = expr.replace(/\bx\b/g, "(" + x + ")");
return eval(sanitized);
}
function drawGraph(b1, b2, e1, e2, e3) {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// Clear
ctx.clearRect(0, 0, width, height);
// Grid setup
var minX = -10, maxX = 10;
var minY = -10, maxY = 10;
function toCanvasX(x) { return (x – minX) * (width / (maxX – minX)); }
function toCanvasY(y) { return height – (y – minY) * (height / (maxY – minY)); }
// Draw Axes
ctx.strokeStyle = '#ddd';
ctx.beginPath();
for(var i = minX; i <= maxX; i++) {
ctx.moveTo(toCanvasX(i), 0);
ctx.lineTo(toCanvasX(i), height);
ctx.moveTo(0, toCanvasY(i));
ctx.lineTo(width, toCanvasY(i));
}
ctx.stroke();
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(toCanvasX(0), 0); ctx.lineTo(toCanvasX(0), height);
ctx.moveTo(0, toCanvasY(0)); ctx.lineTo(width, toCanvasY(0));
ctx.stroke();
// Draw Function
ctx.lineWidth = 3;
var step = 0.1;
// Piece 1
ctx.strokeStyle = '#e74c3c';
ctx.beginPath();
var started = false;
for (var x = minX; x < b1; x += step) {
try {
var y = evalExpr(e1, x);
if (!started) { ctx.moveTo(toCanvasX(x), toCanvasY(y)); started = true; }
else { ctx.lineTo(toCanvasX(x), toCanvasY(y)); }
} catch(e) {}
}
ctx.stroke();
// Piece 2
ctx.strokeStyle = '#2ecc71';
ctx.beginPath();
started = false;
for (var x = b1; x < b2; x += step) {
try {
var y = evalExpr(e2, x);
if (!started) { ctx.moveTo(toCanvasX(x), toCanvasY(y)); started = true; }
else { ctx.lineTo(toCanvasX(x), toCanvasY(y)); }
} catch(e) {}
}
ctx.stroke();
// Piece 3
ctx.strokeStyle = '#3498db';
ctx.beginPath();
started = false;
for (var x = b2; x <= maxX; x += step) {
try {
var y = evalExpr(e3, x);
if (!started) { ctx.moveTo(toCanvasX(x), toCanvasY(y)); started = true; }
else { ctx.lineTo(toCanvasX(x), toCanvasY(y)); }
} catch(e) {}
}
ctx.stroke();
// Points at boundaries
ctx.fillStyle = '#000';
try {
var val1 = evalExpr(e1, b1);
var val2 = evalExpr(e2, b1);
var val3 = evalExpr(e2, b2);
var val4 = evalExpr(e3, b2);
// Open circles (simple representation)
ctx.beginPath(); ctx.arc(toCanvasX(b1), toCanvasY(val1), 4, 0, Math.PI*2); ctx.stroke();
ctx.beginPath(); ctx.arc(toCanvasX(b1), toCanvasY(val2), 4, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(toCanvasX(b2), toCanvasY(val3), 4, 0, Math.PI*2); ctx.stroke();
ctx.beginPath(); ctx.arc(toCanvasX(b2), toCanvasY(val4), 4, 0, Math.PI*2); ctx.fill();
} catch(e) {}
}
// Initial run
window.onload = function() {
processPiecewise();
};