const CVS = new Canvas(document.getElementById("canvasId"))

    // Create a canvas object
    const dummyShape = new Shape([50, 50], [new Dot()])
    
    // Add it to the canvas
    CVS.add(dummyShape)

    // Set up the prebuilt event listeners, allowing the creation of more interactive effects!
    CVS.setMouseMove(/*custom callback*/)
    CVS.setMouseLeave()
    CVS.setMouseDown()
    CVS.setMouseUp()

    // Start
    CVS.startLoop()

    const CVS = new Canvas(document.getElementById("canvasId"))
    
    // Creating and adding shapes ...
    const dummyShape = new Shape([50, 50], [new Dot()])
    CVS.add(dummyShape)
    
    CVS.setMouseMove(/*custom callback*/)
    CVS.setMouseLeave()
    CVS.setMouseDown()
    CVS.setMouseUp()
    
    CVS.startLoop()

    // For a source object
    CVS.add(yourShape)

    
    // For a prefab or inactive shape
    CVS.add(yourShape, true)

    // Set the important mouse events 
    CVS.setMouseMove(/*possible custom callback*/)
    CVS.setMouseLeave()
    CVS.setMouseDown()
    CVS.setMouseUp()

    // Set the important keyboard events 
    CVS.setKeyDown(/*possible custom callback*/)
    CVS.setKeyUp()

    // Starts the main loop
    CVS.startLoop() 

    // Stops the main loop
    CVS.stopLoop()

    // Creating a FPSCounter instance
    const fpsCounter = new CDEUtils.FPSCounter()
    
    const CVS = new Canvas(
        document.getElementById("canvas"),  // The HTML canvas element to link to
        ()=>{                               // Custom callback that runs every frame
            // Get current fps
            const fps = fpsCounter.getFps()
        
            // Display fps in another element
            document.getElementById("fpsDisplay").textContent = fps
        }
    )

   /**
     * Used to make an object follow a custom path
     * @param {Number} duration: duration of the animation in ms
     * @param {Function} easing: easing function 
     * @param {Function?} action: a custom callback that can be called in addition to the movement                                                        //newProg is 'prog' - the progress delimiter of the range
     * @param {[[Number, Function], ...]} progressSeparations: list of callback paired with a progress range, the callback must return a position (prog, newProg, initX, initY)=>return [x,y]
     * progressSeparations example: [0:(prog)=>[x1, y1]], [0.5:(prog, newProg)=>[x2, y2]] -> from 0% to 49% the pos from 1st callback is applied, from 50%-100% the pos from 2nd callback is applied  
     */
     
    // Example use, for 3 seconds, easeOutQuad, no custom callback, will travel in a sideways 'L' shape 
    let dx=400, dy=200
    dot.follow(3000, Anim.easeOutQuad, null, [[0,(prog)=>[dx*prog, 0]], [0.5,(prog, newProg)=>[dx*0.5, dy*newProg]]])

    // Adding a connection with another dot
    dot.addConnection(otherDot)

    // Removing a connection
    dot.removeConnection(otherDot)

    // By default, path caching for dots is enabled.
    // But for very dynamic dots (changes every frame), sometimes it might be better to disable caching.

    // To disable path caching:
    const dynamicDot = new Dot(null, null, null, null, null, null, true) // disables the path caching via constructor
    existingDynamicDot.disablePathCaching() // disables the path caching via this function if the dot already exists

    // To enable path caching back use:
    existingDynamicDot.updateCachedPath() 

    // Removes the dot completely
    dot.remove()

    // Creating a lonely dot
    const aloneDot = new Dot(
        [0,0],          // positioned at [0,0]
        25,             // 25px radius
        [0,0,255,0.5],  // blue at 50% opacity
        ()=>{           // setupCB, custom callback ran on dot's initialization
            console.log("I am now added to the canvas and ready to go!")
        }
    )
    
    // Add the dot as a standalone object (definition)
    CVS.add(aloneDot)

    // Creating a Shape containing some dots!
    const squareLikeFormation = new Shape([0,0], [
            new Dot([100, 100]), // Dots contained in a shape will take on some properties (color, radius, limit, ...) of the shape.
            new Dot([150, 100]),
            new Dot([150, 150]),
            new Dot([100, 150])
    ], _Obj.DEFAULT_RADIUS, Color.DEFAULT_COLOR, Shape.DEFAULT_LIMIT)
    
    // Add the shape along with all of its dots as a single unit. (reference)
    CVS.add(squareLikeFormation)

    // Creating and adding a new empty Shape to the canvas
    const dummyShape = new Shape([100,100])
    CVS.add(dummyShape)
    
    // Later, adding a dot to the shape, at [150, 150] on the canvas
    dummyShape.add(new Dot(50, 50))
    
    // or many dots
    dummyShape.add([new Dot(50, 50), new Dot(50, 100)])

    // Sets the radius of all dummyShape's dots to 10
    dummyShape.setRadius(10)
    
    // Sets the color of all dummyShape's dots to red
    dummyShape.setColor("red")
    
    // Sets the limit of all dummyShape's dots to 100
    dummyShape.setLimit(100)
    
    
    // Disables the path caching of all dummyShape's dots
    dummyShape.disableDotsPathCaching()
    
    // Enables the path caching of all dummyShape's dots
    dummyShape.enableDotsPathCaching()

    // Generating a sine wave-based formation
    const generatedDots = Shape.generate(
        x=>Math.sin(x/50)*100, // make the y follow a sine wave pattern
        [-50, 0],           // the generation start is offset by -50 horizontally
        1000,               // the generation will span 1000 px in length
        10,                   // the generation is sectioned in 10px intervals
        [5, -5],            // a range allowing random Y between the [min, max]
        (dot, nextDot)=>{
            dot.addConnection(nextDot) // adding a connection between each dot
        }
    )

    // Creating a new shape containing the generated dots
    const dummyShape = new Shape([0, 0], generatedDots)

    // Adding the shape to the canvas
    CVS.add(dummyShape)

    // This will rotate all of dummyShape's dots around the shape's pos by 45 degrees
    dummyShape.rotateBy(45)
    
    // This will rotate all of dummyShape's dots around the pos [100, 100] at 180 degrees
    dummyShape.rotateAt(180, [100, 100])
    
    // This will smoothly rotate all of dummyShape's dots around the shape's pos at 125 degrees, over 5 seconds
    dummyShape.rotateTo(125, 5000)

    // This will scale the distance between all of dummyShape's dots by 2x horizontally, from the point [250, 100] 
    dummyShape.scaleBy([2, 1], [250, 100])
    
    // This will scale the distance between all of dummyShape's dots to 4x, from the shape's pos
    dummyShape.scaleAt([4, 4])
    
    // This will smoothly scale the distance between all of dummyShape's dots to 2.5x horizontally and 
    // 3.5x vertically, from the shape's pos, over 3 seconds
    dummyShape.scaleTo([2.5, 3.5], 3000)

    // This will remove the dot with the id 10
    dummyShape.removeDot(10)
    
    // This will remove the first dot of the shape
    dummyShape.removeDot(dummyShape.dots[0])
    
    // This will remove the entire shape, along with its dots!
    dummyShape.remove()

    // Creating a dummy shape
    const dummyShape = new Shape([10,10], new Dot())
    
    // Adding it to the canvas and thus initializing it
    CVS.add(dummyShape)
    
    
    // Creating a copy of the dummyShape (which needs to be initialized)
    const dummyShapeCopy = dummyShape.duplicate()
    
    // Adding it to the canvas
    CVS.add(dummyShapeCopy)
    
    // Moving the copy 100px to the right
    dummyShapeCopy.moveBy([100, 0])
    

    // Creating a simple square-like shape
    const simpleShape = new Shape([100,100],[
         new Dot([-50, -50]),
         new Dot([-50, 0]),
         new Dot([-50, 50]),
         new Dot([0, -50]),
         new Dot([0, 50]),
         new Dot([50, -50]),
         new Dot([50, 0]),
         new Dot([50, 50]),
     ], null, normalColorTester, 100, (render, dot, ratio, setupResults, mouse)=>{
     
         // Changes the opacity and color according to mouse distance
         dot.a = CDEUtils.mod(1, ratio, 0.8)
         dot.r = CDEUtils.mod(255, ratio, -255)
         dot.g = CDEUtils.mod(255, ratio, -255)
         
         
         // Changes the dot's radius, from 2 times the default radius with a range of 80% (10px..2px), according to mouse distance
         dot.radius = CDEUtils.mod(_Obj.DEFAULT_RADIUS*2, ratio, _Obj.DEFAULT_RADIUS*2*0.8)
         
         // Draws a ring around the dot, at 5 times the radius
         CanvasUtils.drawOuterRing(dot, [255,255,255,0.2], 5)
     })

    // Adding it to the canvas
    CVS.add(simpleShape)

    const draggableDotShape = new Shape([0,0], new Dot([10,10]), null, null, null, (render, dot, ratio, setupResults, mouse, dist, shape)=>{
        
        // Checking if the mouse is over the dot and clicked, and changing the color according to the state
        const mouseOn = dot.isWithin(mouse.pos, true)
        if (mouseOn && mouse.clicked) dot.color = [255, 0, 0, 1]
        else if (mouseOn) dot.color = [0, 255, 0, 1]
        else dot.color = [255, 255, 255, 1]
    
        // Draws a ring around the dot, at 3 times the radius, only visible if the mouse is near
        CanvasUtils.drawOuterRing(dot, [255,255,255,CDEUtils.mod(0.3, ratio)], 3)
    
        // Making the dot drawable
        const dragAnim = setupResults
        dragAnim(shape.firstDot, mouse, dist, ratio)
        
    }, null, (shape)=>{

        // Accessing the dot
        const dot = shape.firstDot
        
        // Adding an infinite anim that changes the radius size back and forth
        dot.playAnim(new Anim((progress, i)=>{
            dot.radius = i%2?25*(1-prog):25*prog
        }, -750, Anim.easeOutQuad))

        // Getting the dragging animation callback
        const dragAnim = CanvasUtils.getDraggableDotCB()

        // Making it available in the drawEffectCB as setupResults
        return dragAnim
    })
    
    // Adding it to the canvas
    CVS.add(draggableDotShape)

    // Assuming we have simpleShape from example use 1 available...

    // Creating a shape with a dot moving back and forth every second
    const backAndForthDotShape = new Shape([200,200], new Dot([0,0], null, null, (dot, shape)=>{
            let distance = 150, ix = dot.x
            dot.playAnim(new Anim((progress, playCount, deltaTime)=>{
                dot.x = ix + ((playCount % 2) == 0 ? 1 : -1) * distance * progress
                if (progress == 1) ix = dot.x
            }, -1000, Anim.easeOutBack))
        })
    )
    
    
    // Setting simpleShape's anchorPos to the dot of backAndForthDotShape. (Using a callback since the dot doesn't exist yet)
    simpleShape.anchorPos = () => backAndForthDotShape.firstDot
    
    
    // Adding the shape to the canvas
    CVS.add(backAndForthDotShape)

    // ... Assuming there is a dummyFilledShape existing somewhere

    // Moving it somewhere else
    dummyFilledShape.moveAt(250, 250)

    // If the dynamicUpdates parameter isn't set to 'true', the fill area will ONLY update IF the updatePath() function is called
    dummyFilledShape.updatePath()

  // Creating a simple filledShape
    const myFilledShape = new FilledShape(
        "red", // color of the fill area
        true,  // Automatically updates the fill area positions
        [100, 100], // shape pos
        [
            new Dot([-50, -50]), // Top left corner
            new Dot([50, -50]),  // Top right corner
            new Dot([50, 50]),   // Bottom right corner
            new Dot([-50, 50])   // Bottom left corner
        ]
    )

    // Adding it to the canvas
    CVS.add(myFilledShape)

    // Creating a Grid
    const coolAlphabet = new Grid(
        "abcdefg\nhijklm\nnopqrs\ntuvwxyz", // the keys corresponding to the alphabet letters, with some line breaks
        [5, 5],                             // equal gaps, this will make the alphabet look a bit square-ish
        50,                                 // 50px letter spacing
        GridAssets.DEFAULT_SOURCE,          // default source
        [10,10],                            // the shape position (The text will start from this point, as its top-left corner)
        2,                                  // 2px dot radius
        null,                               // color is left undefined, the shape will assign it the default value
        null,                               // limit is left defined, default value assigned (100)
        (render, dot, ratio)=>{                // This is the drawEffectCB, which gets call for every dot of the shape, every frame
        
            // This will make a nice proximity effect when the mouse is close.
            // The mod() function and the ratio allow us to modify the dot radius with
            // a linear interpolation based on the distance between the ratioPos (the mouse) and the current dot.
            dot.radius = CDEUtils.mod(_Obj.DEFAULT_RADIUS, ratio, _Obj.DEFAULT_RADIUS)     // DEFAULT_RADIUS = 5
            
            
            // By default, no connections are drawn between the dots of a grid.
            // We can use the drawDotConnections() function to draw them easily.
            CanvasUtils.drawDotConnections(dot, [255,0,0,1])
        }
    )
    

    // The grid is done and dusted, adding it to the canvas
    CVS.add(coolAlphabet)

// Creating a grid with symbols that distort themselves on mouse hover
const distortedGrid = new Grid(
    "abc\n123\n%?&", // symbols used
    [7, 7],     // gaps of 7px between each dot
    50,         // spacing of 50px between symbols
    null,       // using the default source
    [100, 100], // pos
    2,          // dot's radius
    "aliceblue",// dot's color 
    50,         // limit of 50px
    (render, dot, ratio, filterId)=>{ // grid's drawEffectCB

        const scaleValue = CDEUtils.mod(50, ratio), // the scale value adjusted by the distance of the mouse
              hasFilter = scaleValue>>0, // whether the current dot is affected by the filter (IMPORTANT FOR PERFORMANCES)
              filterValue = hasFilter ? "url(#"+filterId+")" : "none" // adjusting the filter value

        // accessing the <feDisplacementMap> element of the filter and updating its scale attribute
        Canvas.getSVGFilter(filterId)[1].setAttribute("scale", scaleValue)

        // drawing the symbols and applying some simple style changes, as well as the (↓) distortion filter. /!\ Also setting the (↓) "forceBatching" parameter to whether the filter is active or not
        CanvasUtils.drawDotConnections(dot, render.profile5.update([255,0,0,1], filterValue, null, 1, 3), null, null, null, !hasFilter)

        // finishing with a simple opacity effect for the dots
        dot.a = CDEUtils.mod(1, ratio)

}, null, ()=>{ // grid's setupCB

    // filter id to be used for the filter url
    const filterId = "myFilter"

    // loading a simple custom distortion SVG filter
    Canvas.loadSVGFilter(`<svg>
        <filter id="turbulence">
          <feTurbulence type="turbulence" baseFrequency="0.01 0.02" numOctaves="1" result="NOISE"></feTurbulence>
          <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="25">
          </feDisplacementMap>
        </filter>
       </svg>`, filterId)
    
    return filterId
})

// Adding the grid to the canvas
CVS.add(distortedGrid)

{
    width:5,
    height:5,
    
    A: [
        [2,D.bl+D.br],
        [1,D.bl],[3,D.br],
        [0,D.r+D.b],[1,D.r],[2,D.r],[3,D.r],[4,D.b],
        [0,D.b],[4,D.b],
        [0],[4]
    ],
    
    // Other symbols ...
}

const helloWorldText = new TextDisplay(
    "Hello World!", // Displayed text
    [200, 100],     // positioned at [200, 100]
    "lightblue",    // colored light blue
    (render)=>render.textProfile1.update("italic 24px monospace"), // using the textProfile1 styles, only over writing the font
    null, // leaving drawMethod to the default value ("FILL")
    null, // leaving maxWidth to the default value (undefined)
    (textDisplay)=>{// setupCB
    
        // adding a spin animation, repeating every 3 seconds
        textDisplay.playAnim(new Anim(prog=>{
            // Updating the horizontal scale to go from 1, to -1, back to 1
            textDisplay.scale = [Math.sin(Math.PI*prog*2), 1]
        },-3000))
        
    })

// Adding the object to the canvas.
CVS.add(helloWorldText)

// Creating an ImageDisplay with a url pointing to an image
const myCoolImage = new ImageDisplay("https://static.wikia.nocookie.net/ftgd/images/9/97/ExtremeDemon.png/revision/latest?cb=20240801164829")

// Adding the object to the canvas.
CVS.add(myCoolImage)

// Creating an ImageDisplay by loading a local file, and adjusting the sizes
const myCoolImage = new ImageDisplay(
    "./img/logo.png", // local file located at [currentFolder]/img/logo.png
    [0,0],            // position of the top-left corner
    [100, 100]        // rezises the image to 100x100
)

// Cropping the source image to use only from [20, 20] to [150, 150]
myCoolImage.sourceCroppingPositions = [[20,20], [150, 150]]

// Adding the object to the canvas.
CVS.add(myCoolImage)

// Creating an ImageDisplay playing a video
const dummyVideo = new ImageDisplay(
    "./img/vidTest.mp4", // local file located at [currentFolder]/img/vidTest.mp4
    null, // using default pos ([0, 0])
    null, // using natural size (default)
    (video)=>{
        // SetupCB, runs when the source is loaded

        // Automatically starts the video once loaded
        video.playVideo()
    }
)

// Adding the object to the canvas.
CVS.add(dummyVideo)

// Creating an ImageDisplay displaying the camera (requires user permission)
const cameraFeed = new ImageDisplay(
    ImageDisplay.loadCamera(), // get the camera, with default settings
    [0,0], // draw at origin
    ImageDisplay.RESOLUTIONS.SD // shrink it down to 640x480
)

// Creating an ImageDisplay displaying a screen (requires user actions and permission)
const screenFeed = new ImageDisplay(
    ImageDisplay.loadCapture(), // get the screen capture, with default settings
    [640,0], // draw next to the camera display
    [1920/4, 1080/4] // resize it to Full HD divided by 4
)

// Adding both objects to the canvas.
CVS.add(cameraFeed)
CVS.add(screenFeed)

// Creating an AudioDisplay playing and displaying a local file
const audioDisplay = new AudioDisplay(
    "./audio/song.mp3", // the filepath of the .mp3 file
    [100,100],          // the pos of the display
    "lime",             // color of the display
    AudioDisplay.BARS(),// the display type (here we use the generic bars/waveform display)
    64,    // the sample count, here 64 bars will be displayed (and the fftSize will be 128)
    false, // not disabling the audio so we can hear the song.mp3 playing
    0,     // no offset
    (type, e)=>console.log("Dang it, error! Type:", type, " | ", e) // onerror callback
)

// Adding the object to the canvas.
CVS.add(audioDisplay)

// Creating an AudioDisplay displaying the microphone
const micDisplay = new AudioDisplay(
    AudioDisplay.loadMicrophone(), // loading the microphone
    [100,100],          // the pos of the display
    "lime",             // color of the display
    (render, bin, pos, audioDisplay, accumulator, i)=>{// binCB
        const maxRadius = 500/AudioDisplay.MAX_NORMALISED_DATA_VALUE, // defining a max radius of 500px
              precision = 100 // used to skip over some bins (the lowest this is, the more precise the display will be, but the more performance-heavy it will be too!)
        
        // optimizing with the precision variable (only drawing every <precision> time)
        if (i%precision==0) {

            // drawing the circles, the radius is based on the current bin value, and it's style is based on this audioDisplay object's styles
            render.batchStroke(Render.getArc(pos, maxRadius*bin), audioDisplay._color, audioDisplay.visualEffects)
        }
    },
    2000,   // the sample count, here a maximum of 2000 bins would be displayed (and the fftSize will be 4096)
    true,  // disabling the audio to prevent echo
)

// Adding the object to the canvas.
CVS.add(micDisplay)

// Loading and displaying the screen audio. For this, the user needs to select a valid tab/window/screen.
const audioDisplay = new AudioDisplay(AudioDisplay.loadScreenAudio(), [100,100], "lime", AudioDisplay.BARS(), 64)

// Applying some audio modifiers:

// Setting the volume to 200%
audioDisplay.setVolume(2)

// Sets the audio filter to keep low frequencies and cut high ones
audioDisplay.setBiquadFilterType(AudioDisplay.BIQUAD_FILTER_TYPES.LOWPASS)

// delays the audio by 1 second
audioDisplay.setDelay(1)

// sets the distortion level to 10
audioDisplay.setDistortionCurve(10)

// sets the origin of the audio to seem like it's coming from 1 meter to the left
audioDisplay.setOriginPos(-1)

// since this sounds pretty bad, you could also reset all the modifiers with this:
//audioDisplay.resetAudioModifiers()

// Adding the object to the canvas.
CVS.add(audioDisplay)

// Taking back the audioDisplay from example 1.
const audioDisplay = new AudioDisplay("./audio/song.mp3", [100,100], "lime", AudioDisplay.BARS(), 64)

// For this to work, you need an impulse response file

// This will load the IR and, by default, assign its buffer to the convolverNode then connect the latter. (You also can handle this yourself by specifying the second parameter: "readyCallback")
audioDisplay.loadImpulseResponse("./audio/IR.wav")

// To disable this effect, disconnect the convolverNode:
// audioDisplay.disconnectConvolver()

// Adding the object to the canvas.
CVS.add(audioDisplay)

    const red = "red"
    
    console.log("Here is red in some other formats:",
        Color.convertTo(Color.FORMATS.RGBA, red)
        Color.convertTo(Color.FORMATS.HSV, red)
        Color.convertTo(Color.FORMATS.HEX, red)
    )

    const redColor = new Color([255, 0, 0, 1])
    
    
    const whereRedIsAt = Color.findFirstPos(
        CVS, // Canvas instance
        redColor // Color instance
    )
    
    
    if (whereRedIsAt) console.log("The color red was found at: X:"+whereRedIsAt[0]+", Y:"+whereRedIsAt[1])
    else console.log("The canvas doesn't contain the color red")

    // Creating a gradient
    const customGradient = new Gradient(
            CVS.ctx,                   // canvas context
            [ [0, 0], [100, 100] ],    // setting manual position
            [[0, "red"], [1, "blue"]], // goes from red to blue
            Gradient.TYPES.LINEAR      // linear gradient
        )

    // Assigning the gradient to a dummy filled shape
    dummyFilledShape.fillColor = customGradient

    // Ex: Updating color stops
    customGradient.colorStops = [[0, "green"], [1, "pink"]]

    // Access the gradient assigned to the shape's filling and update it
    dummyFilledShape.fillColorRaw.update()

const gradientShape = new FilledShape(
        // Creating and returning a linear gradient with a callback.
        // This linear gradient will auto-position itself according to the shape's dots, start at 90deg rotation, and will go from purple->red->yellow-ish
        (render, shape)=>new Gradient(render, shape, [[0, "purple"], [0.5, [255,0,0,1]], [1, "#ABC123"]], null, 90), 
        
        // Other parameters are used by the FilledShape, to make a square at [100, 100]
        false,
        [200, 200], 
        [
            new Dot([-50, -50]), // Top left corner
            new Dot([50, -50]),  // Top right corner
            new Dot([50, 50]),   // Bottom right corner
            new Dot([-50, 50])   // Bottom left corner
        ]
    )
    
    // Creating and playing the rotating gradient animation
    gradientShape.playAnim(
        new Anim((progress)=>{
        
            // Getting the gradient instance
            const gradient = gradientShape.fillColorRaw
            
            // Rotating it
            gradient.rotation = 360 * progress
            
        }, -750) // repeating every 750 ms
    )

    // Adding it to the canvas
    CVS.add(gradientShape)

    // Creating a dummy shape
    const dummyShape = new Shape([0, 0], [new Dot([50,50]), new Dot([100, 0])])


    // Adding the shape to the canvas first, because it needs to be initialized before looking at its pos
    CVS.add(dummyShape)

    // Getting the area (see example use 4 for real use of this function)
    const area = _DynamicColor.getAutomaticPositions(dummyShape)
    console.log("My Dummy Shape fits perfectly into this area! -> ", area)

    // Creating a dummy shape with two big dots, here parts of the image are going to be visible through the dots
    const dummyShape = new Shape([100, 100], [new Dot([250,250]), new Dot([0,0])], 50, (render, shape)=>
        new Pattern(
            render, // the render instance
            "./img/img2.jpg", // the source of the image, here it's the path to a local file
            shape, // making the pattern fit the shape size
            null,  // no source cropping
            true   // preserving the default aspect ratio
        )
    )
    
    // Adding the shape to the canvas
    CVS.add(dummyShape)

    // Creating a dummy text display
    const dummyText = new TextDisplay("Hey, this is just\n some random text in\n order to fill up space,\n have a nice day! :D", [250, 250], (render, text)=>
            new Pattern(
                render, // the render instance
                Pattern.loadCamera(), // the source of the pattern, here it's we are requesting access to the live camera feed
                text, // making the pattern fit the size of the text
                null, // no source cropping
                false, // resizing will most likely change the aspect ratio
                Pattern.FORCE_UPDATE_LEVELS.RESPECT_FRAME_RATE // automatically resizes the pattern if the textDisplay size/pos changes
            ))
    
    // Adding the text to the canvas
    CVS.add(dummyText)

    // DUPLICATING PATTERN (Can be performance-heavy when using dynamic patterns such as video, camera, etc)
    // Creating and adding a basic shape that contains 9 dots in a 3x3 grid disposition
    const shape1 = new Shape([100,100],[new Dot([-50, -50]), new Dot([-50, 0]), new Dot([-50, 50]), new Dot([0, -50]), new Dot([0, 0]), new Dot([0, 50]), new Dot([50, -50]), new Dot([50, 0]), new Dot([50, 50])], 25)
    CVS.add(shape1)

    // Creating a pattern that will get duplicated for each dot of shape1 (set the "positions" (↓) parameter to the placeholder value)
    const duplicatedPattern = new Pattern(CVS.render, Pattern.loadCamera(), Pattern.PLACEHOLDER, null, null, null, null, null, 
        (pattern)=>{// readyCB
            // once the camera is loaded, set the shape1's color to the value of the pattern
            shape1.setColor(pattern)
        }
    )

    // SHARED PATTERN
    // Creating and adding a basic shape that contains 9 dots in a 3x3 grid disposition
    const shape2 = new Shape([300,100],[new Dot([-50, -50]), new Dot([-50, 0]), new Dot([-50, 50]), new Dot([0, -50]), new Dot([0, 0]), new Dot([0, 50]), new Dot([50, -50]), new Dot([50, 0]), new Dot([50, 50])], 25)
    CVS.add(shape2)

    // Creating a pattern that will get duplicated for each dot of shape1 (set the "positions" (↓) parameter to the area containing all the dots)
    const sharedPattern = new Pattern(CVS.render, Pattern.loadCamera(), _DynamicColor.getAutomaticPositions(shape2), null, null, null, null, null,
        (pattern)=>{// readyCB
            // once the camera is loaded, set the shape2's color to the value of the pattern
            shape2.setColor(pattern)
        }
    )

    // Creating a variable containing the color of the grid's symbol lines
    let gridLineColor = [255,0,0,1]

    // Creating a simple grid displaying a couple of letters
    const grid = new Grid("abc\nDEF\nghi", [5, 5], 50, null, [50,50], 2, null, null, 
        (render, dot, ratio, res, m, dist, shape, isActive)=>{// drawEffectCB
            // simple effect to change the dot's radius
            dot.radius = CDEUtils.mod(_Obj.DEFAULT_RADIUS, ratio, _Obj.DEFAULT_RADIUS)

            // drawing the grid's lines (connections) using the previous variable (↓). Note: the variable could also have been defined in the setupCB
            CanvasUtils.drawDotConnections(dot, render.profile1.update(gridLineColor, null, null, null, 2, [0]))
        }
    )

    // Adding the grid to the canvas. (This initializes it, which is needed to properly run getAutomaticPositions() on it)
    CVS.add(grid)

    // Assigning a pattern to the gridLineColor variable so it displays the camera as the color
    gridLineColor = new Pattern(CVS.render, Pattern.loadCamera(), _DynamicColor.getAutomaticPositions(grid), null, null, null, null, null, 
        (pattern)=>{// readyCB
            // (Optional): You can also set the dot's color to be this pattern. 
            // once the camera is loaded, we're also setting the grid's color to the value of the pattern
            grid.setColor(pattern)
        }
    )

    // Running in the drawEffectCB of a dummy shape...
    {
        ...
        
        // Drawing a bezier curve from [100, 100] to [100, 200], using the default control points, in red
        render.stroke(Render.getBezierCurve([100,100], [100, 200]), [255, 0, 0, 1])
        
    }

    // Running in the drawEffectCB of a dummy shape...
    {
        ...
        
        // Drawing a bezier curve from [100, 400] to [400, 300], using the default control points with 0.5 spread
        render.fill(Render.getQuadCurve(startPos, endPos, Render.getDefaultQuadraticControlPos([100, 400], [400, 300], 0.5)))
        
    }

    // Creating a new style profile from the RenderStyles' template profile
    const myNewStyleProfile = RenderStyles.DEFAULT_PROFILE.duplicate(CVS.render)

    // Adding a new style profile to the render's custom profile list
    CVS.render.profiles.push(myNewStyleProfile) //The style profile is now accessible via render.profiles

    // OR

    // use the render instance function: createCustomStylesProfile()