Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Sketch

Sketch represents a p5.js Sketch. Is an interface to generate sketch files, find associated files, infer libraries, and scan directories for sketches that they contain.

A sketch can be an HTML sketch, or a script sketch.

Hierarchy

  • Sketch

Index

Methods Other

Methods Sketch conversion

Methods Sketch creation

Methods Sketch detection

Methods file generation

Properties

Accessors Libraries

Accessors Other

Other Methods

getHtmlContent

  • getHtmlContent(): Promise<string>

Sketch conversion Methods

Abstract convert

  • Convert an HTML sketch to a JavaScript-only sketch (by removing the HTML file), or a JavaScript sketch to an HTML sketch (by adding the HTML file).

    Before modifying the file system, this method verifies that the set of libraries will remain the same. Before removing an HTML file, it also verifies that the file included only the single script file, and no other non-library files.

    Parameters

    Returns Promise<void>

Sketch creation Methods

Static create

  • create(mainFile: string, options?: { description?: string; scriptFile?: string; title?: string }): Sketch

  • Parameters

    • mainFile: string
    • options: { description?: string; scriptFile?: string; title?: string } = {}
      • Optional description?: string
      • Optional scriptFile?: string
      • Optional title?: string

    Returns Sketch

Static fromDirectory

  • fromDirectory(dir: string, options?: { depth?: number; exclusions?: string[] }): Promise<Sketch>

  • Create a sketch from a directory. This method throws an exception if the directory does not contain a sketch index.html file, or contains multiple sketch files.

    Parameters

    • dir: string
    • Optional options: { depth?: number; exclusions?: string[] }
      • Optional depth?: number
      • Optional exclusions?: string[]

    Returns Promise<Sketch>

Static fromHtmlFile

  • fromHtmlFile(htmlFile: string): Promise<Sketch>

Static fromScriptFile

  • fromScriptFile(scriptFile: string): Promise<Sketch>

Sketch detection Methods

Static analyzeDirectory

  • analyzeDirectory(dir: string, options?: { exclusions?: string[] }): Promise<{ allFiles: string[]; sketches: Sketch[]; unassociatedFiles: string[] }>

  • Analyze the directory for sketch files. Returns a list of sketches, and files that aren't associated with any sketch.

    Parameters

    • dir: string
    • Optional options: { exclusions?: string[] }
      • Optional exclusions?: string[]

    Returns Promise<{ allFiles: string[]; sketches: Sketch[]; unassociatedFiles: string[] }>

Static fromFile

  • fromFile(filePath: string): Promise<Sketch>

  • Create a sketch from a file. filePath should be path to an HTML sketch file, a JavaScript sketch file, or a directory that contains exactly one sketch file.

    Parameters

    • filePath: string

    Returns Promise<Sketch>

Static isSketchDir

  • isSketchDir(dir: string, __namedParameters?: { depth: undefined | number; exclusions: undefined | string[] }): Promise<null | Sketch>

  • Tests whether the directory is a sketch directory. It is a sketch directory if it contains a single JavaScript sketch file, or a single HTML sketch file named index.html that includes this file.

    Parameters

    • dir: string
    • __namedParameters: { depth: undefined | number; exclusions: undefined | string[] } = {}
      • depth: undefined | number
      • exclusions: undefined | string[]

    Returns Promise<null | Sketch>

Static isSketchFile

  • isSketchFile(file: string): Promise<boolean>

  • Tests whether a file is an HTML or JavaScript sketch file.

    Parameters

    • file: string

    Returns Promise<boolean>

Static isSketchHtmlFile

  • isSketchHtmlFile(htmlFile: string): Promise<boolean>

  • Tests whether a file is an HTML sketch file. It is a sketch file if it includes the p5.min.js or p5.js script.

    Parameters

    • htmlFile: string

    Returns Promise<boolean>

Static isSketchScriptFile

  • isSketchScriptFile(file: string): Promise<boolean>

  • Tests whether a file is a JavaScript sketch file. It is recognized as a sketch file if it includes a definition of the setup() function and a call to the p5.js createCanvas().

    Parameters

    • file: string

    Returns Promise<boolean>

file generation Methods

generate

  • generate(force?: boolean, options?: Record<string, unknown>): Promise<string[]>

  • Create and save the files for this sketch. This includes the script file; for an HTML sketch, this also includes the HTML file.

    Parameters

    • force: boolean = false
    • options: Record<string, unknown> = {}

    Returns Promise<string[]>

Properties

Optional Readonly description

description?: string

Readonly dir

dir: string

The directory that contains the sketch files. Other xxxFile properties are relative to this.

Readonly Abstract htmlFile

htmlFile: null | string

For an HTML sketch, the pathname of the HTML file, relative to dir.

Readonly scriptFile

scriptFile: string

The main script file, relative to dir.

Libraries Accessors

libraries

  • get libraries(): readonly Library[]

  • The list of libraries. For a JavaScript sketch, this is the list of libraries inferred from the undefined global variables that it references. For an HTML sketch, this is the list of libraries named in the HTML file.

    category

    Libraries

    Returns readonly Library[]

Other Accessors

Abstract files

  • get files(): readonly string[]

  • The HTML file (for an HTML sketch); any JavaScript files; any files that the HTML file includes; and any files that the JavaScript files include, to the extent that this can be determined by static inspection.

    File names are relative to sketch.dirPath.

    Returns readonly string[]

htmlFilePath

  • get htmlFilePath(): null | string

Abstract mainFile

  • get mainFile(): string

  • For an HTML sketch, this is the HTML file. For a JavaScript sketch, this is the JavaScript file. In either case, it is relative to dir.

    Returns string

mainFilePath

  • get mainFilePath(): string

name

  • get name(): string
  • set name(value: string): void

scriptFilePath

  • get scriptFilePath(): string

Abstract structureType

title

  • get title(): string

  • For an HTML sketch, this is the element. Otherwise it is the base name of the main file.</p> </div></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4></li></ul></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Exports</a></li><li class=" tsd-kind-namespace"><a href="../modules/Library.html">Library</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-class"><a href="Sketch.html" class="tsd-kind-icon">Sketch</a><ul><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#analyzeDirectory" class="tsd-kind-icon">analyze<wbr/>Directory</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#create" class="tsd-kind-icon">create</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#fromDirectory" class="tsd-kind-icon">from<wbr/>Directory</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#fromFile" class="tsd-kind-icon">from<wbr/>File</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#fromHtmlFile" class="tsd-kind-icon">from<wbr/>Html<wbr/>File</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#fromScriptFile" class="tsd-kind-icon">from<wbr/>Script<wbr/>File</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#isSketchDir" class="tsd-kind-icon">is<wbr/>Sketch<wbr/>Dir</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#isSketchFile" class="tsd-kind-icon">is<wbr/>Sketch<wbr/>File</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#isSketchHtmlFile" class="tsd-kind-icon">is<wbr/>Sketch<wbr/>Html<wbr/>File</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Sketch.html#isSketchScriptFile" class="tsd-kind-icon">is<wbr/>Sketch<wbr/>Script<wbr/>File</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Sketch.html#convert" class="tsd-kind-icon">convert</a></li><li class="tsd-kind-property tsd-parent-kind-class"><a href="Sketch.html#description" class="tsd-kind-icon">description</a></li><li class="tsd-kind-property tsd-parent-kind-class"><a href="Sketch.html#dir" class="tsd-kind-icon">dir</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Sketch.html#files" class="tsd-kind-icon">files</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Sketch.html#generate" class="tsd-kind-icon">generate</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Sketch.html#getHtmlContent" class="tsd-kind-icon">get<wbr/>Html<wbr/>Content</a></li><li class="tsd-kind-property tsd-parent-kind-class"><a href="Sketch.html#htmlFile" class="tsd-kind-icon">html<wbr/>File</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Sketch.html#htmlFilePath" class="tsd-kind-icon">html<wbr/>File<wbr/>Path</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Sketch.html#libraries" class="tsd-kind-icon">libraries</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Sketch.html#mainFile" class="tsd-kind-icon">main<wbr/>File</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Sketch.html#mainFilePath" class="tsd-kind-icon">main<wbr/>File<wbr/>Path</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Sketch.html#name" class="tsd-kind-icon">name</a></li><li class="tsd-kind-property tsd-parent-kind-class"><a href="Sketch.html#scriptFile" class="tsd-kind-icon">script<wbr/>File</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Sketch.html#scriptFilePath" class="tsd-kind-icon">script<wbr/>File<wbr/>Path</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Sketch.html#structureType" class="tsd-kind-icon">structure<wbr/>Type</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Sketch.html#title" class="tsd-kind-icon">title</a></li></ul></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li><li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li><li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="../assets/main.js"></script></body></html>