SW[ClassName] Reference

[Brief one-line description of the class]

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]
Returns: [Return type and description, or "None" if void]
// 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.