Back to Documentation
Try STL.Show

Advanced Parameters Tutorial

Master complex parametric relationships and create sophisticated configurators.

Advanced

Prerequisites

Completed First Configurator tutorial
Basic understanding of JSCAD syntax
Familiarity with parameter types and ranges

What You'll Learn

Linked parameters and dependencies
Mathematical relationships
Conditional parameters
Parameter validation
Advanced UI controls
Performance optimization

Linked Parameters

Creating Parameter Dependencies

Linked parameters create relationships between values, ensuring your model stays consistent.

Example: Gear System

Primary Parameters:
• Number of teeth (T)
• Module (M) - tooth size
Derived Parameters:
• Pitch diameter = T × M
• Outer diameter = (T + 2) × M
• Root diameter = (T - 2.5) × M

When users change teeth or module, all related dimensions update automatically.

Implementation

function main(params) {
const { teeth, module } = params;
// Derived parameters
const pitchDiameter = teeth * module;
const outerDiameter = (teeth + 2) * module;
const rootDiameter = (teeth - 2.5) * module;
// Use derived values in geometry
}

Mathematical Relationships

Complex Calculations

Trigonometric Functions

Example: Hexagon Pattern
• Angle = 360° ÷ number of sides
• Side length = radius × sin(angle/2) × 2
• Height = radius × cos(angle/2) × 2

Exponential Growth

Example: Spiral Pattern
• Radius = baseRadius × (growthFactor ^ turns)
• Spacing = baseSpacing × (spacingFactor ^ turns)
• Total length = sum of all segments

Code Example

function calculateHexagon(radius, sides) {
const angle = 360 / sides;
const sideLength = radius * Math.sin(angle/2 * Math.PI/180) * 2;
const height = radius * Math.cos(angle/2 * Math.PI/180) * 2;
return { sideLength, height, angle };
}

Conditional Parameters

Show/Hide Based on Conditions

Conditional parameters show or hide UI controls based on other parameter values.

Example: Phone Stand

Primary: Include cable management? (Yes/No)
Conditional: Hole diameter (only if cable management = Yes)
Conditional: Number of holes (only if cable management = Yes)

Implementation

function main(params) {
const { includeCableMgmt, holeDiameter, numHoles } = params;
let result = baseStand;
if (includeCableMgmt) {
// Add cable management holes
result = addCableHoles(result, holeDiameter, numHoles);
}
return result;
}

Parameter Validation

Ensuring Valid Inputs

Range Validation

Min/Max Values:
• Width: 10-100mm
• Height: 5-50mm
• Thickness: 1-10mm
Step Values:
• Teeth: 8, 12, 16, 20, 24
• Material: PLA, ABS, PETG

Logical Validation

Dependencies:
• Hole diameter ≤ Wall thickness
• Screw length ≤ Material thickness
• Pattern spacing ≥ Minimum gap
Warnings:
• Thin walls may break
• Small features may not print

Validation Code

function validateParams(params) {
const errors = [];
if (params.holeDiameter > params.wallThickness) {
errors.push('Hole diameter cannot exceed wall thickness');
}
if (params.width < 10 || params.width > 100) {
errors.push('Width must be between 10-100mm');
}
return errors;
}

Advanced UI Controls

Enhanced User Experience

Custom Sliders

Non-linear scales, logarithmic ranges

Dropdown Menus

Preset options, material choices

Toggle Switches

Feature enable/disable

UI Configuration Example

const uiConfig = {
width: {
type: 'slider',
min: 10, max: 100, step: 1,
label: 'Overall Width (mm)'
},
material: {
type: 'select',
options: ['PLA', 'ABS', 'PETG'],
label: 'Material Type'
},
includeHoles: {
type: 'toggle',
label: 'Include Mounting Holes'
}
};

Performance Optimization

Making Your Configurators Fast

Optimization Techniques

Use efficient boolean operations
Cache complex calculations
Limit parameter ranges
Simplify geometry when possible

Common Pitfalls

Excessive boolean operations
Unnecessary high-resolution meshes
Complex mathematical operations
Too many parameters at once

You're Now an Advanced Configurator Creator! 🎉

With these advanced techniques, you can create sophisticated, professional-grade configurators.

Start Building Advanced Configurators Explore More Documentation
Previous: AI JSCAD