Streaming live at 10am (PST)

Paper.js Raster Division - Embed code - image loading problem

Hello there,
I’d like to create a Raster division interaction just like this one on Paper.js

http://paperjs.org/examples/division-raster/

I cant find the way to integrate the picture used for the raster.
A bit of help would be highly appreciated :pray:
Here is the project > Webflow - Test Paper.js > Raster division


Here is my site Read-Only: Webflow - Test Paper.js > Raster division
(how to share your site Read-Only link)

I figured out the solution. If this can help somebody else, here is the way ::

  1. in the tag of your page :
<script type="text/paperscript" canvas="canvas2">
    var raster = new Raster({
        source: 'https://uploads-ssl.webflow.com/607571d72a2abaa17283ab84/607595469fde7663046d71a6_harfang.jpg',
        crossOrigin: 'anonymous',
        onLoad: init
    });  
    
    function init() {
        // Make image fill the whole canvas.
        raster.fitBounds(view.bounds, true);

        var lastPos = view.center;

        function moveHandler(event) {
            if (lastPos.getDistance(event.point) < 1) {
                return;
            }
            lastPos = event.point;
            var size = this.bounds.size.clone();
            var isLandscape = size.width > size.height;
            // If the path is in landscape orientation, we're going to
            // split the path horizontally, otherwise vertically:
            size /= isLandscape ? [2, 1] : [1, 2];
            if (size.ceil().width > 10) {
                var path = new Path.Rectangle({
                    point: this.bounds.topLeft.floor(),
                    size: size.ceil(),
                    onMouseMove: moveHandler
                });
                path.fillColor = raster.getAverageColor(path);
                var path = new Path.Rectangle({
                    point: isLandscape
                        ? this.bounds.topCenter.ceil()
                        : this.bounds.leftCenter.ceil(),
                    size: size.floor(),
                    onMouseMove: moveHandler
                });
                path.fillColor = raster.getAverageColor(path);
            }
            this.remove();
        }

        // Create a path that fills the view, and fill it with
        // the average color of the raster:
        new Path.Rectangle({
            rectangle: view.bounds,
            fillColor: raster.getAverageColor(view.bounds),
            onMouseMove: moveHandler
        });
    }

</script>
  1. create a div with a class called canvas2. add a HTML Embed module inside it

  2. in your HTML Embed.

<canvas resize="true" id="canvas2"></canvas> <style>#canvas2{display:block;width:100vw;height:100vh;}</style>