Help?!


#1

So I am Really new to coding with JavaScript and have added all the documents needed into my HTML to add the “Animate Your Name” onto my “webpage” (Its not live at all, just documents on my computer for now) and I get the script to run but the first to letters of my name are cut off on the left side of the canvas so if my name were Michael it is seen as chael, what should I add or tamper with (in the other documents [bubble.js, alphabet.js, etc]) to fix this bug?


#2

i have successfully exported the animate name project to documents on my computer, and it works fine.

This depends why the cut off happens, does it fall outside the screen or is the canvas to small? You can use the inspector for this. Right click on the canvas and select: inspect element

I can only help you further if you provide the files (google drive? Or anything you are comfortable with) so i can replicate the problem


#3

Here is a google docs file with all the documents I am using…

https://drive.google.com/drive/folders/1nOH-0Mfq2HsZh7l-YkuDzZwfjvUc15my?usp=sharing

Thanks for helping!


#4

interesting, it seems the program wasn’t designed to handle names longer then a certain limit. To fix this, would require making changes to bubble.js, which would be very time consuming

maybe tomorrow, its 11PM here now.

Remove your last name, and slowly add 1 letter at a time, see that the name is slowly moving outside the canvas?

i would suspect changes need to make here:

function drawName(name, letterColors) {
    updateCanvasDimensions();
    var g = [];
    var offset = 0;
 
    function addLetter(cc_hex, ix, letterCols) {
        if (typeof letterCols !== 'undefined') {
            if (Object.prototype.toString.call(letterCols) === '[object Array]' && Object.prototype.toString.call(letterCols[0]) === '[object Array]') {
                letterColors = letterCols;
            }
            if (Object.prototype.toString.call(letterCols) === '[object Array]' && typeof letterCols[0] === "number") {
                letterColors = [letterCols];
            }
        } else {
            // if undefined set black
            letterColors = [[255, 223, 23]];
        }
 
        if (document.alphabet.hasOwnProperty(cc_hex)) {
            var chr_data = document.alphabet[cc_hex].P;
            var bc = letterColors[ix % letterColors.length];
 
            for (var i = 0; i < chr_data.length; ++i) {
                point = chr_data[i];
 
                g.push(new Point(point[0] + offset,
                    point[1],
                    0.0,
                    point[2],
                    makeColor(bc, point[3])));
            }
            offset += document.alphabet[cc_hex].W;
        }
    }
 
    var hexphrase = phraseToHex(name);
 
    var col_ix = -1;
    for (var i = 0; i < hexphrase.length; i += 2) {
        var cc_hex = "A" + hexphrase.charAt(i) + hexphrase.charAt(i + 1);
        if (cc_hex != "A20") {
            col_ix++;
        }
        addLetter(cc_hex, col_ix, letterColors);
    }
 
    for (var j = 0; j < g.length; j++) {
        g[j].curPos.x = (canvasWidth / 2 - offset / 2) + g[j].curPos.x;
        g[j].curPos.y = (canvasHeight / 2 - 105) + g[j].curPos.y;
        g[j].originalPos.x = (canvasWidth / 2 - offset / 2) + g[j].originalPos.x;
        g[j].originalPos.y = (canvasHeight / 2 - 105) + g[j].originalPos.y;
    }
 
    pointCollection = new PointCollection();
    pointCollection.points = g;
    initEventListeners();
}

this bit looks really interesting:

        g[j].curPos.x = (canvasWidth / 2 - offset / 2) + g[j].curPos.x;
        g[j].curPos.y = (canvasHeight / 2 - 105) + g[j].curPos.y;
        g[j].originalPos.x = (canvasWidth / 2 - offset / 2) + g[j].originalPos.x;
        g[j].originalPos.y = (canvasHeight / 2 - 105) + g[j].originalPos.y;

but i feel like attempting to make changes may ripple through the code, so time would be needed to figure out how this code is build


#6

do you think you can work through bubble.js on your own?


#7

Yes I do, thank you!


#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.