Overview
[Detailed description of what this class does and why it's useful]
Key Features
- [Feature 1]
- [Feature 2]
- [Feature 3]
- [Feature 4]
Note: [Important information about dependencies, requirements, or usage context]
Constructor
new SW[ClassName](param1, param2, ...)
[Description of what the constructor does]
Parameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
param1 |
[Type] | [Default value or "required"] | [Description] |
param2 |
[Type] | [Default value] | [Description] |
Example Usage:
// Basic example
let obj1 = new SW[ClassName](param1);
// With optional parameters
let obj2 = new SW[ClassName](param1, param2, param3);
// Using SWColor for styling
let customColor = new SWColor(120, 100, 78); // HSB: green
let obj3 = new SW[ClassName](param1, customColor);
Tip: [Helpful tip about constructor usage]
Properties
| Property | Type | Description |
|---|---|---|
property1 |
[Type] | [Description of what this property stores/controls] |
property2 |
[Type] | [Description] |
Warning: [Any important warnings about property usage or modification]
Methods
[Method Category Name]
methodName(param1, param2)
[Description of what this method does]
Parameters:param1([Type]): [Description]param2([Type], optional): [Description]
// Example usage
myObject.[methodName](value1, value2);
anotherMethod()
[Description]
// Example
myObject.anotherMethod();
[Another Method Category]
utilityMethod(param)
[Description]
Parameters:param([Type]): [Description]
// Example
let result = myObject.utilityMethod(inputValue);
console.log(result);
Usage Examples
Example 1: Basic Usage
let myObject;
function setup() {
createCanvas(400, 400);
colorMode(HSB, 360, 100, 100, 100);
// Create instance
myObject = new SW[ClassName](/* parameters */);
}
function draw() {
background(0, 0, 86); // HSB: light gray
// Use the object
myObject.draw();
}
Example 2: [Specific Use Case]
let myObject;
function setup() {
createCanvas(600, 600);
colorMode(HSB, 360, 100, 100, 100);
// More complex setup
myObject = new SW[ClassName](/* parameters */);
myObject.someMethod();
}
function draw() {
background(0, 0, 94); // HSB: very light gray
// Animation or interaction
myObject.update();
myObject.draw();
}
function mousePressed() {
// User interaction
myObject.handleClick(mouseX, mouseY);
}
Example 3: Integration with Other SketchWave Classes
let myObject;
let myGrid;
let myPoints = [];
function setup() {
createCanvas(500, 500);
colorMode(HSB, 360, 100, 100, 100);
// Create grid
myGrid = new SWGrid({
UL: new SWPoint(-10, 10),
LR: new SWPoint(10, -10)
});
// Create object that works with grid
myObject = new SW[ClassName](/* parameters */);
// Create some points
for (let i = 0; i < 5; i++) {
let pt = new SWPoint(
random(-8, 8),
random(-8, 8),
undefined,
6,
new SWColor(random(360), 70, 80)
);
myPoints.push(pt);
}
}
function draw() {
background(0, 0, 94); // HSB: very light gray
myGrid.draw();
myObject.drawOnGrid(myGrid);
for (let pt of myPoints) {
pt.drawOnGrid(myGrid);
}
}
Best Practices
Use HSB Color Mode
- Always set
colorMode(HSB, 360, 100, 100, 100)in setup() - Use SWColor instances for consistent styling
- HSB provides intuitive color selection (hue, saturation, brightness)
[Best Practice 2 Title]
- [Guideline]
- [Guideline]
[Best Practice 3 Title]
// Good practice example
function draw() {
background(0, 0, 86); // HSB: light gray
// Draw in correct order
myGrid.draw(); // Grid first
myObject.draw(); // Objects on top
}
[Best Practice 4 Title]
- [Guideline]
- [Guideline]
Integration Notes
Required Dependencies
<!-- p5.js library -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>
<!-- SketchWave classes (in order) -->
<script src="scripts/swColor.js"></script>
<script src="scripts/swPoint.js"></script>
<script src="scripts/sw[ClassName].js"></script>
<!-- Add other dependencies as needed -->
<!-- Your sketch script -->
<script src="scripts/mySketch.js"></script>
Working with Other SketchWave Classes
// SWPoint integration
let myPoint = new SWPoint(5, 3, undefined, 8, swRed, "P");
myObject.addPoint(myPoint);
// SWGrid integration
let myGrid = new SWGrid({UL: new SWPoint(-10, 10), LR: new SWPoint(10, -10)});
myObject.drawOnGrid(myGrid);
// SWColor integration
let customColor = new SWColor(240, 100, 78); // HSB: blue
myObject.setColor(customColor);
Common Patterns
// Pattern 1: [Description]
// [Example code]
// Pattern 2: [Description]
// [Example code]
// Pattern 3: [Description]
// [Example code]
Complete Source Code
View or copy the complete source code for the SW[ClassName] class:
▶ Show Source Code
/*
File: sw[ClassName].js
Date: [DATE]
Author: klp
Workspace: [WORKSPACE_NAME]
Purpose: SW[ClassName] class for SketchWaveJS
Comment(s): [Additional comments]
TODO:
- [Any pending tasks]
=== Notes ===:
- This class assumes p5.js and SWColor are loaded in the environment.
- [Additional notes about the class]
- [Dependencies and requirements]
- [Usage considerations]
*/
console.log("[sw[ClassName].js] SW[ClassName] class loaded.");
class SW[ClassName] {
/**
* Constructor for SW[ClassName]
* @param {Type} param1 - Description
* @param {Type} param2 - Description (optional)
*/
constructor(param1, param2 = defaultValue) {
// Initialize properties
this.property1 = param1;
this.property2 = param2;
// Add more initialization as needed
}//end constructor
/**
* [Method description]
* @param {Type} param - Description
* @returns {Type} Description of return value
*/
methodName(param) {
// Method implementation
}//end methodName
/**
* Draw the object (for p5.js integration)
*/
draw() {
// Drawing implementation
// Use this.property1, this.property2, etc.
}//end draw
/**
* Draw the object on a grid (user coordinates)
* @param {SWGrid} grid - The grid to use for coordinate transformation
*/
drawOnGrid(grid) {
// Convert user coordinates to screen coordinates
let screenPos = grid.userToScreen(this.x, this.y);
// Draw using screen coordinates
}//end drawOnGrid
/**
* [Additional method]
*/
anotherMethod() {
// Implementation
}//end anotherMethod
/**
* Get string representation
* @returns {string} String representation of the object
*/
toString() {
return `SW[ClassName](property1: ${this.property1}, property2: ${this.property2})`;
}//end toString
/**
* Log all properties for debugging
*/
logAllInfo() {
console.log(this.toString());
// Log additional details as needed
}//end logAllInfo
}//end SW[ClassName] class
// Usage example (commented out):
// let myObject;
// function setup() {
// createCanvas(400, 400);
// colorMode(HSB, 360, 100, 100, 100);
// myObject = new SW[ClassName](param1, param2);
// }
// function draw() {
// background(0, 0, 86); // HSB: light gray
// myObject.draw();
// }
Ready to use SW[ClassName]? Check out the examples above and start building! For more SketchWave classes, visit the Classes Overview page.