Piecewise Function Evaluator & Point Generator
A piecewise function is a function defined by multiple sub-functions, each applying to a different interval in the domain. This calculator allows you to define up to three pieces of a function and then evaluate it at a specific x-value or generate a table of points for graphing.
How to Use:
- Define Each Piece: For each piece, enter its function expression and the domain condition.
- Function Expression: Use standard JavaScript math syntax.
- Use
x as the variable.
- For multiplication, use
* (e.g., 2*x, not 2x).
- For powers, use
Math.pow(base, exponent) (e.g., Math.pow(x, 2) for x squared).
- Other Math functions:
Math.sqrt(x), Math.sin(x), Math.cos(x), Math.abs(x), etc.
- Domain Condition: Use standard JavaScript logical operators.
< (less than), <= (less than or equal to)> (greater than), >= (greater than or equal to)== (equal to), != (not equal to)&& (AND), || (OR)- Example:
x < 0, x >= 0 && x < 2, x >= 2
- Evaluate at a Point: Enter an 'x' value and click "Evaluate Function".
- Generate Points for Graphing: Enter a start X, end X, and step size, then click "Generate Points Table".
Example Piecewise Function:
Consider the function f(x) defined as:
f(x) = { 2x + 1, if x < 0
{ x^2, if 0 <= x < 2
{ 5, if x >= 2
To input this into the calculator:
- Piece 1: Function:
2*x + 1, Domain: x < 0
- Piece 2: Function:
Math.pow(x, 2), Domain: x >= 0 && x < 2
- Piece 3: Function:
5, Domain: x >= 2
If you evaluate this function at x = -1, it uses the first piece: 2*(-1) + 1 = -1.
If you evaluate at x = 1, it uses the second piece: Math.pow(1, 2) = 1.
If you evaluate at x = 3, it uses the third piece: 5.
.piecewise-function-calculator-container {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.piecewise-function-calculator-container h2,
.piecewise-function-calculator-container h3 {
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 20px;
}
.piecewise-function-calculator-container label {
display: inline-block;
width: 150px;
margin-bottom: 8px;
font-weight: bold;
}
.piecewise-function-calculator-container input[type="text"],
.piecewise-function-calculator-container input[type="number"] {
width: calc(100% – 160px);
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.piecewise-function-calculator-container button {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
margin-right: 10px;
}
.piecewise-function-calculator-container button:hover {
background-color: #0056b3;
}
.piecewise-function-calculator-container .piece-input {
border: 1px solid #e0e0e0;
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
background-color: #fff;
}
.piecewise-function-calculator-container .piece-input h4 {
margin-top: 0;
color: #555;
}
.piecewise-function-calculator-container pre {
background-color: #eee;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
}
.piecewise-function-calculator-container table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.piecewise-function-calculator-container table,
.piecewise-function-calculator-container th,
.piecewise-function-calculator-container td {
border: 1px solid #ddd;
}
.piecewise-function-calculator-container th,
.piecewise-function-calculator-container td {
padding: 8px;
text-align: center;
}
.piecewise-function-calculator-container th {
background-color: #f2f2f2;
}
function evaluatePiece(funcStr, domainStr, x_val) {
var x = x_val; // Make x available in the eval scope
var conditionMet = false;
var funcResult = null;
// Evaluate domain condition
try {
conditionMet = eval(domainStr);
} catch (e) {
return { error: "Invalid domain condition: " + e.message };
}
if (conditionMet) {
// Evaluate function
try {
funcResult = eval(funcStr);
} catch (e) {
return { error: "Invalid function expression: " + e.message };
}
return { value: funcResult };
}
return { value: null }; // Condition not met
}
function calculatePiecewise() {
var func1 = document.getElementById("func1").value;
var domain1 = document.getElementById("domain1").value;
var func2 = document.getElementById("func2").value;
var domain2 = document.getElementById("domain2").value;
var func3 = document.getElementById("func3").value;
var domain3 = document.getElementById("domain3").value;
var xValueInput = document.getElementById("xValue").value;
var resultDiv = document.getElementById("evaluationResult");
if (xValueInput === "" || isNaN(parseFloat(xValueInput))) {
resultDiv.innerHTML = "Please enter a valid number for X-value.";
return;
}
var x_eval = parseFloat(xValueInput);
var result = null;
var error = null;
// Try Piece 1
if (domain1.trim() !== "") {
var piece1Eval = evaluatePiece(func1, domain1, x_eval);
if (piece1Eval.error) {
error = piece1Eval.error;
} else if (piece1Eval.value !== null) {
result = piece1Eval.value;
}
}
// Try Piece 2 if Piece 1 didn't match and no error yet
if (result === null && error === null && domain2.trim() !== "") {
var piece2Eval = evaluatePiece(func2, domain2, x_eval);
if (piece2Eval.error) {
error = piece2Eval.error;
} else if (piece2Eval.value !== null) {
result = piece2Eval.value;
}
}
// Try Piece 3 if Piece 1 & 2 didn't match and no error yet
if (result === null && error === null && domain3.trim() !== "") {
var piece3Eval = evaluatePiece(func3, domain3, x_eval);
if (piece3Eval.error) {
error = piece3Eval.error;
} else if (piece3Eval.value !== null) {
result = piece3Eval.value;
}
}
if (error) {
resultDiv.innerHTML = "Error: " + error;
} else if (result !== null) {
resultDiv.innerHTML = "f(" + x_eval + ") = " + result.toFixed(4);
} else {
resultDiv.innerHTML = "f(" + x_eval + ") is undefined (x is outside all defined domains).";
}
}
function generatePointsTable() {
var func1 = document.getElementById("func1").value;
var domain1 = document.getElementById("domain1").value;
var func2 = document.getElementById("func2").value;
var domain2 = document.getElementById("domain2").value;
var func3 = document.getElementById("func3").value;
var domain3 = document.getElementById("domain3").value;
var tableStartXInput = document.getElementById("tableStartX").value;
var tableEndXInput = document.getElementById("tableEndX").value;
var tableStepInput = document.getElementById("tableStep").value;
var tableResultDiv = document.getElementById("pointsTableResult");
if (tableStartXInput === "" || isNaN(parseFloat(tableStartXInput)) ||
tableEndXInput === "" || isNaN(parseFloat(tableEndXInput)) ||
tableStepInput === "" || isNaN(parseFloat(tableStepInput))) {
tableResultDiv.innerHTML = "Please enter valid numbers for Start X, End X, and Step Size.";
return;
}
var startX = parseFloat(tableStartXInput);
var endX = parseFloat(tableEndXInput);
var step = parseFloat(tableStepInput);
if (step = endX) {
tableResultDiv.innerHTML = "Start X must be less than End X.";
return;
}
var tableHTML = "
| X | f(X) |
|---|
";
var errorOccurred = false;
for (var x_val = startX; x_val <= endX; x_val += step) {
var result = null;
var error = null;
// Evaluate for current x_val
if (domain1.trim() !== "") {
var piece1Eval = evaluatePiece(func1, domain1, x_val);
if (piece1Eval.error) { error = piece1Eval.error; }
else if (piece1Eval.value !== null) { result = piece1Eval.value; }
}
if (result === null && error === null && domain2.trim() !== "") {
var piece2Eval = evaluatePiece(func2, domain2, x_val);
if (piece2Eval.error) { error = piece2Eval.error; }
else if (piece2Eval.value !== null) { result = piece2Eval.value; }
}
if (result === null && error === null && domain3.trim() !== "") {
var piece3Eval = evaluatePiece(func3, domain3, x_val);
if (piece3Eval.error) { error = piece3Eval.error; }
else if (piece3Eval.value !== null) { result = piece3Eval.value; }
}
if (error) {
tableResultDiv.innerHTML = "Error generating table: " + error;
errorOccurred = true;
break;
}
var y_val_display = (result !== null) ? result.toFixed(4) : "Undefined";
tableHTML += "| " + x_val.toFixed(2) + " | " + y_val_display + " |
";
}
tableHTML += "
";
if (!errorOccurred) {
tableResultDiv.innerHTML = tableHTML;
}
}