Lettercolors from colorpicker


#1

Hello, i am trying to hook up the color variables to a color picker but i just cant figure it out. I hope someone here will be able to help me.

Colorpicker i am using: http://jscolor.com/try.php
Live example: http://amandovledder.eu/bubbel/ (colorpickers are disabled in the code. To activate uncomment line 29 and chane red1 to red on line 19
index.html :

    <!DOCTYPE html>
<html>
  <head>
    <!--======================-->
    <!--Baisc JS-->
    <!--======================-->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
    <script type="text/javascript" src="jscolor/jscolor.js"></script>
 
    <!--======================-->
    <!--Bootstrap CSS-->
    <!--======================-->
    <link href="bootstrap.min.css" rel="stylesheet">
 
    <!--======================-->
    <!--Theme and style CSS-->
    <!--======================-->
    <link href="style.css" rel="stylesheet">
    <link id="orginal" href="theme.css" rel="stylesheet">
 
    <!--======================-->
    <!--Font Awesome CSS-->
    <!--======================-->
    <link href="font-awesome.min.css" rel="stylesheet">
 
    <!--======================-->
    <!-- Google fonts -->
    <!--======================-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 
 
  </head>
    <body>
      <canvas class="canvas" id="myCanvas"></canvas>
 
      <!--======================-->
      <!--Animation-->
      <!--======================-->
        <script type="text/javascript" src="bubbels.js"></script>
        <script type="text/javascript" src="main.js"></script>
 
          <!--======================-->
          <!--Name input buttons-->
          <!--======================-->
            <div class="left-div">
              <form>
                <input class="form-control" id="nameInput" type="text" placeholder="Enter your text here" name="textbox" required>
             
                <script type="text/javascript" src="enter.js"></script>
                  </form><button class="submit_btn" id="generate" type="submit" onclick="bubbel(document.getElementsByName('textbox')[0].value)">Generate!</button>
 
                  <!--======================-->
                  <!--name input buttons-->
                  <!--======================-->
                <a href="http://amandovledder.eu#portfolio"><input class="submit_btn" type="submit" value="Back"></a>
            </div>
 
                <!--======================-->
                <!--Right div -->
                <!--======================-->
                  <div class="right-div">
                  <!--======================-->
                  <!--Vorm selector -->
                  <!--======================-->                    
                    <span class="ctext">Shape</span>
                    <select id="shape" name="shape" class="form-control2">
                    <option value="circle">Circle</option>
                    <option value="square">Square</option>
                    <option value="triangle">Triangle</option>
                    <option value="heart">Hearts</option>  
                    <option value="target">Target</option>
                    <option value="smiley">Smiley</option>
                    <option value="4star">4Star</option>
                    <option value="5star">5star</option>
                    <option value="pentagon">Pentagon</option>
                    </select>
                    <br>
                    <!--======================-->
                    <!--Color selector -->
                    <!--======================-->      
                    <span class="ctext">Color 1 </span><input class="color" id="kleur1" value="FF4242"><br>
                    <span class="ctext">Color 2 </span><input class="color" id="kleur2" value="FFBB33"><br>
                    <span class="ctext">Color 3 </span><input class="color" id="kleur3" value="99CC00"><br>
                    <span class="ctext">Color 4 </span><input class="color" id="kleur4" value="34B6E5"><br>
                    <span class="ctext">Color 5 </span><input class="color" id="kleur5" value="AA66CC"><br>
                    <p id="demo"></p>
                    <button onclick="myFunction()">Try it</button>
                  </div>
 
                  <!--======================-->
                  <!--footer-->
                  <!--======================-->
                  <footer id="footer">
                    <div class="container">
                      <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                           <div class="footer_left">
                            <p>Copyright <i class="fa fa-copyright fa-spin"></i> <a href="http://amandovledder.eu">Amando</a>. 2015</p>
                          </div>
                        </div>
                          <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="footer_right">
                              <ul class="social_nav">
                                <li><a href="http://facebook.com/AmandoVledder"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="http://twitter.com/A_m_a_n_d_o"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="htpp://instagram.com/a_m_a_n_d_o"><i class="fa fa-instagram"></i></a></li>
                                <li><a href="#"><i class="fa fa-trello"></i></a></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </footer>
    </body>
</html>

main.js

    function bubbel(TextboxValue) {
var myName = TextboxValue;


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 red1= [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];

//var redOrginal = [0, 100, 63];
//                 [0, 100, 66]


var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

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

drawName(myName, letterColors);

/*if(10 < 3)
{
    bubbleShape = 'square';
}
else
{
    bubbleShape = 'circle';
}*/

bubbleShape = document.getElementById("shape").value;

bounceBubbles();
};
function myFunction() {
    var x = document.getElementById("kleur1").value;
    
}

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

bubbels.js :

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

Colorpicker 1 has the id "kleur1"
Colorpicker 2 has the id "kleur2"
Colorpicker 3 has the id "kleur3"
Colorpicker 4 has the id "kleur4"
Colorpicker 5 has the id "kleur5"

Thanks in advance


#2

It looks like you did figure it out and it looks great!

The only thing that I would suggest looking into is the way the movement of the bubbles gets less smooth/faster each time you change shapes or colours.


#3

Thank you for your reply, i got it working yesterday by accident while trying something :D.