Функция, которая принимает массив объектов, отказывается от собственного массива

Question

У меня есть файл с именем bubbels.js, в этом файле есть пара функций для создания эффекта пузырька для указанной строки.

Теперь у меня есть выбор цвета, чтобы пользователь мог выбрать цвет, а затем функция, которая генерирует имя, должна сгенерировать имя в указанном пользователем цвете.

После много испытаний я узнал, что функция генерации требует пару кодов rgb для цветов. Поэтому я сделал шестнадцатеричный конвертер rgb, поэтому у меня будет код rgb, который пользователь выбрал. Я поместил rgb в var и хотел использовать его в функции generate как цвет. Но rgb была строкой, поэтому я разбирал ее в целочисленном массиве так же, как и раньше.

Теперь о проблеме: Функция, которая генерирует имя, работает, но по какой-либо причине не принимает указанный пользователем цвет, и я не могу понять, почему он не принимает цвет пользователя.

Это так, как я строю мой RgB массив:

var colorPicker_Veld1 = "#" + document.getElementById("kleur1").value; 
var colorPicker_Veld2 = "#" + document.getElementById("kleur2").value; 
var colorPicker_Veld3 = "#" + document.getElementById("kleur3").value; 
var colorPicker_Veld4 = "#" + document.getElementById("kleur4").value; 
var colorPicker_Veld5 = "#" + document.getElementById("kleur5").value; 

var red_r = hexToRgb(colorPicker_Veld1).r; 
var red_g = hexToRgb(colorPicker_Veld1).g; 
var red_b = hexToRgb(colorPicker_Veld1).b; 

var parsedRed_r = parseInt(red_r); 
var parsedRed_g = parseInt(red_g); 
var parsedRed_b = parseInt(red_b); 

var red = [parsedRed_r, parsedRed_g, parsedRed_b]; 

var orange_r = hexToRgb(colorPicker_Veld2).r; 
var orange_g = hexToRgb(colorPicker_Veld2).g; 
var orange_b = hexToRgb(colorPicker_Veld2).b; 

var parsedOrange_r = parseInt(orange_r); 
var parsedOrange_g = parseInt(orange_g); 
var parsedOrange_b = parseInt(orange_b); 

var orange = [parsedOrange_r, orange_g, orange_b]; 

Я делаю это с каждым цветом, то я сделать вар lettercolor которым выглядит следующим образом:

var letterColors = [red, orange, green, blue, purple]; 

Буквы цветов и имя (из текстового поля) я дать функции drawName, как это:

drawName(myName, letterColors); 

drawName() функция может быть найдена в bubble.js файл Wich выглядит следующим образом:

function Vector(x, y, z) { 
    this.x = x; 
    this.y = y; 
    this.z = z; 

    this.set = function (x, y) { 
     this.x = x; 
     this.y = y; 
    }; 
} 

function PointCollection() { 
    this.mousePos = new Vector(0, 0); 
    this.pointCollectionX = 0; 
    this.pointCollectionY = 0; 
    this.points = []; 

    this.update = function() { 
     for (var i = 0; i < this.points.length; i++) { 
      var point = this.points[i]; 

      var dx = this.mousePos.x - point.curPos.x; 
      var dy = this.mousePos.y - point.curPos.y; 
      var dd = (dx * dx) + (dy * dy); 
      var d = Math.sqrt(dd); 

      point.targetPos.x = d < 150 ? point.curPos.x - dx : point.originalPos.x; 
      point.targetPos.y = d < 150 ? point.curPos.y - dy : point.originalPos.y; 

      point.update(); 
     } 
    }; 

    this.shake = function() { 
     var randomNum = Math.floor(Math.random() * 5) - 2; 

     for (var i = 0; i < this.points.length; i++) { 
      var point = this.points[i]; 
      var dx = this.mousePos.x - point.curPos.x; 
      var dy = this.mousePos.y - point.curPos.y; 
      var dd = (dx * dx) + (dy * dy); 
      var d = Math.sqrt(dd); 
      if (d < 50) { 
       this.pointCollectionX = Math.floor(Math.random() * 5) - 2; 
       this.pointCollectionY = Math.floor(Math.random() * 5) - 2; 
      } 
      point.draw(bubbleShape, this.pointCollectionX, this.pointCollectionY); 
     } 
    }; 

    this.draw = function (bubbleShape, reset) { 
     for (var i = 0; i < this.points.length; i++) { 
      var point = this.points[i]; 

      if (point === null) 
       continue; 

      if (window.reset) { 
       this.pointCollectionX = 0; 
       this.pointCollectionY = 0; 
       this.mousePos = new Vector(0, 0); 
      } 

      point.draw(bubbleShape, this.pointCollectionX, this.pointCollectionY, reset); 
     } 
    }; 

    this.reset = function (bubbleShape) {}; 
} 

function Point(x, y, z, size, color) { 
    this.curPos = new Vector(x, y, z); 
    this.color = color; 

    this.friction = document.Friction; 
    this.rotationForce = document.rotationForce; 
    this.springStrength = 0.1; 

    this.originalPos = new Vector(x, y, z); 
    this.radius = size; 
    this.size = size; 
    this.targetPos = new Vector(x, y, z); 
    this.velocity = new Vector(0.0, 0.0, 0.0); 

    this.update = function() { 
     var dx = this.targetPos.x - this.curPos.x; 
     var dy = this.targetPos.y - this.curPos.y; 
     // Orthogonal vector is [-dy,dx] 
     var ax = dx * this.springStrength - this.rotationForce * dy; 
     var ay = dy * this.springStrength + this.rotationForce * dx; 

     this.velocity.x += ax; 
     this.velocity.x *= this.friction; 
     this.curPos.x += this.velocity.x; 

     this.velocity.y += ay; 
     this.velocity.y *= this.friction; 
     this.curPos.y += this.velocity.y; 

     var dox = this.originalPos.x - this.curPos.x; 
     var doy = this.originalPos.y - this.curPos.y; 
     var dd = (dox * dox) + (doy * doy); 
     var d = Math.sqrt(dd); 

     this.targetPos.z = d/100 + 1; 
     var dz = this.targetPos.z - this.curPos.z; 
     var az = dz * this.springStrength; 
     this.velocity.z += az; 
     this.velocity.z *= this.friction; 
     this.curPos.z += this.velocity.z; 

     this.radius = this.size * this.curPos.z; 
     if (this.radius < 1) this.radius = 1; 
    }; 

    /*this.draw = function (bubbleShape, dx, dy) { 
     ctx.fillStyle = this.color; 
     if (bubbleShape == "square") { 
      ctx.beginPath(); 
      ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5); 

     } else { 
      ctx.beginPath(); 
      ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true); 
      ctx.fill(); 
     } 
    };*/ 
    this.draw = function (bubbleShape, dx, dy) { 
    ctx.fillStyle = this.color; 
    if (bubbleShape == "square") { 
     ctx.beginPath(); 
     ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5); 
    } else if (bubbleShape == "triangle") { 

     // driehoek 
     // start our path 
ctx.beginPath(); 
// move to vertex A 
ctx.moveTo(this.curPos.x + dx, this.curPos.y + dy); 
// move to vertex B 
ctx.lineTo(this.curPos.x + dx, this.curPos.y + dy + this.radius * 1.5); 
// move to vertex C 
ctx.lineTo(this.curPos.x + dx + this.radius * 1.5, this.curPos.y + dy + this.radius * 1.5); 
// fill our shape 
ctx.fill(); 
    } 
    else if (bubbleShape == "heart") { 
    ctx.beginPath(); 
    ctx.moveTo(this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 0.462 * this.radius); 
    ctx.bezierCurveTo(this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 0.4275 * this.radius, this.curPos.x + dx + 0.807 * this.radius, this.curPos.y + dy + 0.288 * this.radius, this.curPos.x + dx + 0.5775 * this.radius, this.curPos.y + dy + 0.288 * this.radius); 
    ctx.bezierCurveTo(this.curPos.x + dx + 0.231 * this.radius, this.curPos.y + dy + 0.288 * this.radius, this.curPos.x + dx + 0.231 * this.radius, this.curPos.y + dy + 0.721 * this.radius, this.curPos.x + dx + 0.231 * this.radius, this.curPos.y + dy + 0.721 * this.radius); 
    ctx.bezierCurveTo(this.curPos.x + dx + 0.231 * this.radius, this.curPos.y + dy + 0.923 * this.radius, this.curPos.x + dx + 0.462 * this.radius, this.curPos.y + dy + 1.177 * this.radius, this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 1.385 * this.radius); 
    ctx.bezierCurveTo(this.curPos.x + dx + 1.269 * this.radius, this.curPos.y + dy + 1.177 * this.radius, this.curPos.x + dx + 1.5 * this.radius, this.curPos.y + dy + 0.923 * this.radius, this.curPos.x + dx + 1.5 * this.radius, this.curPos.y + dy + 0.721 * this.radius); 
    ctx.bezierCurveTo(this.curPos.x + dx + 1.5 * this.radius, this.curPos.y + dy + 0.721 * this.radius, this.curPos.x + dx + 1.5 * this.radius, this.curPos.y + dy + 0.288 * this.radius, this.curPos.x + dx + 1.154 * this.radius, this.curPos.y + dy + 0.288 * this.radius); 
    ctx.bezierCurveTo(this.curPos.x + dx + 0.9808 * this.radius, this.curPos.y + dy + 0.288 * this.radius, this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 0.4275 * this.radius, this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 0.462 * this.radius); 
    ctx.fill(); 
} 
else if (bubbleShape=="target") { 
      ctx.beginPath(); 
      for (var i=5;i>0;i--) { 
       ctx.arc(this.curPos.x + dx, this.curPos.y + dy, i*this.radius/5, 0, Math.PI * 2, i%2===0); 
      } 
      ctx.fill(); 
     } else if (bubbleShape=="smiley") { 
      ctx.beginPath(); 
      ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, false); 
      ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*4, Math.PI, 0, true); 
      ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*3, Math.PI, 0, true); 
      ctx.arc(this.curPos.x+dx-(this.radius/3),this.curPos.y+dy-(this.radius/2),this.radius/6,0,Math.PI*2,true); 
      ctx.moveTo(this.curPos.x+dx+(this.radius/3),this.curPos.y+dy-(this.radius/2)); 
      ctx.arc(this.curPos.x+dx+(this.radius/3),this.curPos.y+dy-(this.radius/2),this.radius/6,0,Math.PI*2,true); 

      ctx.fill(); 
     }else if (bubbleShape=="4star") { 
     ctx.beginPath(); 
     for (var ixVertex=0;ixVertex<=8;++ixVertex) { 
     var angle = ixVertex * Math.PI/4 - Math.PI/4; 
      var radius = ixVertex % 2 === 0 ? this.radius: this.radius/3; 
      ctx.lineTo(this.curPos.x + dx+ radius * Math.cos(angle), this.curPos.y + dy + radius * Math.sin(angle)); 
     } 
      ctx.fill(); 
     } 
     else if (bubbleShape=="5star") { 
     ctx.beginPath(); 
     for (var ixVertex=0;ixVertex<=10;ixVertex++) { 
     var angle = ixVertex * Math.PI /5 - Math.PI/2; 
      var radius = ixVertex % 2 === 0 ? this.radius: this.radius/3; 
      ctx.lineTo(this.curPos.x + dx+ radius * Math.cos(angle), this.curPos.y + dy + radius * Math.sin(angle)); 
     } 
      ctx.fill(); 
     } 
     else if (bubbleShape=="pentagon") { 
     ctx.beginPath(); 
     for (var ixVertex=0;ixVertex<=8;++ixVertex) { 
     var angle = ixVertex * 2*Math.PI/8- Math.PI/2; 
      //var radius = ixVertex % 2 === 0 ? this.radius: this.radius/3; 
      ctx.lineTo(this.curPos.x + dx+ this.radius * Math.cos(angle), this.curPos.y + dy + this.radius * Math.sin(angle)); 
     } 
      ctx.fill(); 
     } 
    else { 
     ctx.beginPath(); 
     ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true); 
     ctx.fill(); 
    } 
}; 

} 

function makeColor(hslList, fade) { 
    var hue = hslList[0] /*- 17.0 * fade/1000.0*/ ; 
    var sat = hslList[1] /*+ 81.0 * fade/1000.0*/ ; 
    var lgt = hslList[2] /*+ 58.0 * fade/1000.0*/ ; 
    return "hsl(" + hue + "," + sat + "%," + lgt + "%)"; 
} 

function phraseToHex(phrase) { 
    var hexphrase = ""; 
    for (var i = 0; i < phrase.length; i++) { 
     hexphrase += phrase.charCodeAt(i).toString(16); 
    } 
    return hexphrase; 
} 

function initEventListeners() { 
    $(window).bind('resize', updateCanvasDimensions).bind('mousemove', onMove); 

    canvas.ontouchmove = function (e) { 
     e.preventDefault(); 
     onTouchMove(e); 
    }; 

    canvas.ontouchstart = function (e) { 
     e.preventDefault(); 
    }; 
} 

function updateCanvasDimensions() { 
    canvas.attr({ 
     height: 500, 
     width: 1000 
    }); 
    canvasWidth = canvas.width(); 
    canvasHeight = canvas.height(); 
    draw(); 
} 

function onMove(e) { 
    if (pointCollection) { 
     pointCollection.mousePos.set(e.pageX - canvas.offset().left, e.pageY - canvas.offset().top); 
    } 
} 

function onTouchMove(e) { 
    if (pointCollection) { 
     pointCollection.mousePos.set(e.targetTouches[0].pageX - canvas.offset().left, e.targetTouches[0].pageY - canvas.offset().top); 
    } 
} 

function bounceName() { 
    shake(); 
    setTimeout(bounceName, 30); 
} 

function bounceBubbles() { 
    draw(); 
    update(); 
    setTimeout(bounceBubbles, 30); 
} 

function draw(reset) { 
    var tmpCanvas = canvas.get(0); 

    if (tmpCanvas.getContext === null) { 
     return; 
    } 

    ctx = tmpCanvas.getContext('2d'); 
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 

    bubbleShape = typeof bubbleShape !== 'undefined' ? bubbleShape : "circle"; 

    if (pointCollection) { 
     pointCollection.draw(bubbleShape, reset); 
    } 
} 

function shake() { 
    var tmpCanvas = canvas.get(0); 

    if (tmpCanvas.getContext === null) { 
     return; 
    } 

    ctx = tmpCanvas.getContext('2d'); 
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 

    bubbleShape = typeof bubbleShape !== 'undefined' ? bubbleShape : "circle"; 

    if (pointCollection) { 
     pointCollection.shake(bubbleShape); 
    } 
} 

function update() { 
    if (pointCollection) 
     pointCollection.update(); 
} 

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 = [[0, 0, 27]]; 
     } 

     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(); 
} 

window.reset = false; 

$(window).mouseleave(function() { 
    window.reset = true; 
}); 

$(window).mouseenter(function() { 
    window.reset = false; 
}); 

var canvas = $("#myCanvas"); 
var canvasHeight; 
var canvasWidth; 
var ctx; 
var pointCollection; 

document.rotationForce = 0.0; 
document.Friction = 0.85; 

var white = [0, 0, 100]; 
var black = [0, 0, 27]; 
var red = [0, 100, 63];//var orange = [parsedOrange_r, orange_g, orange_b]; 
var orange = [40, 100, 60];//var orange = [parsedOrange_r, orange_g, orange_b]; 
var green = [75, 100, 40]; 
var blue = [196, 77, 55]; 
var purple = [280, 50, 60]; 

setTimeout(updateCanvasDimensions, 30); 

Может кто-нибудь объяснить мне, почему функция drawName не хочет использовать пользователь specied цвета.

Пример «работает» можно найти по адресу: http://amandovledder.eu/bubbel

Answer 1

Ошибка является одним из цветовых форматов строк. Функция makeColor в bubbels.js возвращает строку яркости насыщенности оттенка формы hsl(hue, sat%, lum%) для использования в качестве значения цвета. Однако вызывающий код предоставляет ему массив значений RGB. Код может быть (как в дубинкой) работать путем изменения makeColor возвращать строку, представляющую RgB массив он вызывается с:

function makeColor(rgb) 
{ 
    return "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")"; 
}