Posts made by CKneeland

Hi all! I’m trying to create my first module using P5.JS to re-create the old-school DVD Logo animation (the one where everyone loves it to hit the corner). I have what I believe to be a working JS file, but when I run the module, nothing shows up! I don’t get any errors in my console related to the JS file, since I worked all of those out, but I do get errors relating to not being able to load specific CSS files. I just found this website 10 minutes ago, and am not familiar with how to share my code or the errors I’m facing. Any pointers on how to share my bugs and help fix them would be great!

For the time being, I will attach the code that I have below:

"use strict";

Module.register("MMM-DVD", {

    //Default Module Config
    defaults: {
        name: "MMM-DVD",

        x: 0, 
        y: 0, 
        xspeed: 10,
        yspeed: 10,
        canvasWidth: 300,
        canvasHeight: 300
    },

    getDom: function() {
        let wrapper = document.createElement("canvas")
        wrapper.id = "DVDWrapper";
        return wrapper;
    },

    getScripts: function() {
        return [
          "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"
        ];
    },

    notificationReceived: function(notification, payload, sender) {
        if (notification === "DOM_OBJECTS_CREATED") {
          Log.info("DOM objects are created. Starting P5 …");
    
          let sketch = this.makeSketch(this.config);
          new p5(sketch, "DVDWrapper");
        }
    },

    makeSketch: function(conf) {
        return function(pFive) {
            let x = conf.x;
            let y = conf.y;
            let xspeed = conf.xspeed;
            let yspeed = conf.yspeed;
            let canvasHeight = conf.canvasHeight;
            let canvasWidth = conf.canvasWidth;
            let r, g, b;
            let dvd;
            let width, height;

            pFive.preload = function() {
                dvd = pFive.loadImage("/modules/MMM-DVD/DVD_Trans.png");
            }

            pFive.setup = function() {
                pFive.createCanvas(canvasWidth, canvasHeight);

                var element = document.getElementById("DVDWrapper");
                var positionInfo = element.getBoundingClientRect();
                height = positionInfo.height;
                width = positionInfo.width;

                x = pFive.random(width - dvd.width);
                y = pFive.random(height - dvd.height);
                xspeed = 3;
                yspeed = 3;
                pickColor();
            }

            pFive.draw = function () {
                pFive.background(0);
                pFive.tint(r, g, b);
                pFive.image(dvd, x, y);

                x = x + xspeed;
                y = y + yspeed;
                
                
                if(x + dvd.width >= width) {
                    xspeed = -xspeed;
                    x = width - dvd.width;
                    pickColor();
                } else if(x <= 0) {
                    xspeed = -xspeed;
                    x = 0;
                    pickColor();
                }
                
                if(y + dvd.height >= height) {
                    yspeed = -yspeed;
                    y = height - dvd.height;
                    pickColor();
                } else if(y <= 0) {
                    yspeed = -yspeed;
                    y = 0;
                    pickColor();
                }
            }

            function pickColor() {
                r = pFive.random(100, 256);
                g = pFive.random(100, 256);
                b = pFive.random(100, 256)
            }
        }
    }

});

This is the PNG I use.