Start canvas drawing random location. Multiple text draws

Question

I have created a canvas banner for my site that has some programming tags moving around. Working almost perfect. Where is only one issue that i can't solve.

All the tags start at the center (ofc. On line 23/24 of my JS file i set the start position of everything). Only what i want is to setup a random start position of each tag. The problem is that i don't know how to begin on this.

Here are my files:

HTML:

<header id="pageheader">
    <canvas id="bannerCanvas"></canvas>
</header>

CSS:

#pageheader{
    height: 100px;
    width:100%;
    background: #f4f5ef; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#222, #f4f5ef); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#222, #f4f5ef); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#222, #f4f5ef); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#222, #f4f5ef);
}

Javascript (Jquery)

$(function(){
    var word0 = '<RUBY>';
    var word1 = '<HTML>';
    var word2 = '<PHP>';
    var word3 = '<SQL>';
    var word4 = '<CSS>';
    var word5 = '<C#>';
    var word6 = '<JAVASCRIPT>';
    var word7 = '<JAVA>';
    var word8 = '<XML>';
    var word9 = '<PYTHON>';

    var fps = 30;

    var delta = 1; // range (from 0) of possible dx or dy change
    var max = 2; // maximum dx or dy values

    var jCanvas = $('#bannerCanvas');
    var canvas = document.getElementById('bannerCanvas');
    canvas.width = jCanvas.parent().width();
    canvas.height = jCanvas.parent().height();

    var start_x = canvas.width / 2; // line 23
    var start_y = canvas.height / 2; // line 34

    jCanvas.bind("click", function(){
        if(interval === undefined){
            interval = window.setInterval(animate, 1000 / fps);
        }
        else{
            interval = clearInterval(interval);
            console.log(interval);
        }
    });

    var cxt = canvas.getContext('2d');
    cxt.fillStyle = '#FF0000';

    var interval = window.setInterval(animate, 1000 / fps);

    var w0x = start_x;
    var w0y = start_y;
    var w1x = start_x;
    var w1y = start_y;
    var w2x = start_x;
    var w2y = start_y;
    var w3x = start_x;
    var w3y = start_y;
    var w4x = start_x;
    var w4y = start_y;
    var w5x = start_x;
    var w5y = start_y;
    var w6x = start_x;
    var w6y = start_y;
    var w7x = start_x;
    var w7y = start_y;
    var w8x = start_x;
    var w8y = start_y;
    var w9x = start_x;
    var w9y = start_y;

    var w0dx = 0;
    var w0dy = 0;
    var w1dx = 0;
    var w1dy = 0;
    var w2dx = 0;
    var w2dy = 0;
    var w3dx = 0;
    var w3dy = 0;
    var w4dx = 0;
    var w4dy = 0;
    var w5dx = 0;
    var w5dy = 0;
    var w6dx = 0;
    var w6dy = 0;
    var w7dx = 0;
    var w7dy = 0;
    var w8dx = 0;
    var w8dy = 0;
    var w9dx = 0;
    var w9dy = 0;

    function getWx(dx){
        var wx = (Math.random() * delta - delta / 2);
        if(Math.abs(wx + dx) > max){ wx *= -1; }
        return wx;
    }
    function getWy(dy){
        var wy = (Math.random() * delta - delta / 2);
        if(Math.abs(wy + dy) > max){ wy *= -1; }
        return wy;
    }
    function bounceX(nw, cur){
        if((cur + nw) < 0 || (cur + nw) > canvas.width){
            return nw *= -1;
        }
        else{
            return nw;
        }
    }
    function bounceY(nw, cur){
        if((cur + nw) < 0 || (cur + nw) > canvas.height){
            return nw *= -1;
        }
        else{
            return nw;
        }
    }
    function animate(){
        w0dx = bounceX(w0dx += getWx(w0dx), w0x);
        w0dy = bounceY(w0dy += getWy(w0dy), w0y);
        w1dx = bounceX(w1dx += getWx(w1dx), w1x);
        w1dy = bounceY(w1dy += getWy(w1dy), w1y);
        w2dx = bounceX(w2dx += getWx(w2dx), w2x);
        w2dy = bounceY(w2dy += getWy(w2dy), w2y);
        w3dx = bounceX(w3dx += getWx(w3dx), w3x);
        w3dy = bounceY(w3dy += getWy(w3dy), w3y);
        w4dx = bounceX(w4dx += getWx(w4dx), w4x);
        w4dy = bounceY(w4dy += getWy(w4dy), w4y);
        w5dx = bounceX(w5dx += getWx(w5dx), w5x);
        w5dy = bounceY(w5dy += getWy(w5dy), w5y);
        w6dx = bounceX(w6dx += getWx(w6dx), w6x);
        w6dy = bounceY(w6dy += getWy(w6dy), w6y);
        w7dx = bounceX(w7dx += getWx(w7dx), w7x);
        w7dy = bounceY(w7dy += getWy(w7dy), w7y);
        w8dx = bounceX(w8dx += getWx(w8dx), w8x);
        w8dy = bounceY(w8dy += getWy(w8dy), w8y);
        w9dx = bounceX(w9dx += getWx(w9dx), w9x);
        w9dy = bounceY(w9dy += getWy(w9dy), w9y);

        w0x += w0dx;
        w0y += w0dy;
        w1x += w1dx;
        w1y += w1dy;
        w2x += w2dx;
        w2y += w2dy;
        w3x += w3dx;
        w3y += w3dy;
        w4x += w4dx;
        w4y += w4dy;
        w5x += w5dx;
        w5y += w5dy;
        w6x += w6dx;
        w6y += w6dy;
        w7x += w7dx;
        w7y += w7dy;
        w8x += w8dx;
        w8y += w8dy;
        w9x += w9dx;
        w9y += w9dy;

        cxt.clearRect(0, 0, canvas.width, canvas.height);
        cxt.font="20px Georgia";
        cxt.beginPath();
        var gradient=cxt.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5", "blue");
        gradient.addColorStop("1.0", "red");
        cxt.fillStyle = gradient;
        cxt.fillText(word0, w0x, w0y);
        cxt.fillText(word1, w1x, w1y);
        cxt.fillText(word2, w2x, w2y);
        cxt.fillText(word3, w3x, w3y);
        cxt.fillText(word4, w4x, w4y);
        cxt.fillText(word5, w5x, w5y);
        cxt.fillText(word6, w6x, w6y);
        cxt.fillText(word7, w7x, w7y);
        cxt.fillText(word8, w8x, w8y);
        cxt.fillText(word9, w9x, w9y);
    }

});

Here is my script in jsFiddle

Thanks for all the answers. All are great. Thanks. I picked the one of icecub. That one is the most usable for me for later on. Thans — Paules, Jun 13 '16 at 20:22

score 2 · Accepted Answer · answered Jun 13 '16 at 20:18

First add these 3 functions:

/* Generates a random number */
function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

/* Sets random position x */
function randStartX(){
    var start_x = getRandomArbitrary(0, canvas.width);
    return start_x;
}

/* Sets random position y */
function randStartY(){
    var start_y = getRandomArbitrary(0, canvas.height);
    return start_y;
}

Then change

var w0x = start_x;
var w0y = start_y;
var w1x = start_x;
var w1y = start_y;
var w2x = start_x;
var w2y = start_y;
var w3x = start_x;
var w3y = start_y;
var w4x = start_x;
var w4y = start_y;
var w5x = start_x;
var w5y = start_y;
var w6x = start_x;
var w6y = start_y;
var w7x = start_x;
var w7y = start_y;
var w8x = start_x;
var w8y = start_y;
var w9x = start_x;
var w9y = start_y;

To

var w0x = randStartX();
var w0y = randStartY();
var w1x = randStartX();
var w1y = randStartY();
var w2x = randStartX();
var w2y = randStartY();
var w3x = randStartX();
var w3y = randStartY();
var w4x = randStartX();
var w4y = randStartY();
var w5x = randStartX();
var w5y = randStartY();
var w6x = randStartX();
var w6y = randStartY();
var w7x = randStartX();
var w7y = randStartY();
var w8x = randStartX();
var w8y = randStartY();
var w9x = randStartX();
var w9y = randStartY();

Fiddle: https://jsfiddle.net/tg9gs9pe/3/

score 0 · Answer 2 · answered Jun 13 '16 at 20:14

0

var start_x = Math.random() * canvas.width;
var start_y = Math.random() * canvas.height;

this gives a random position between 0 and the canvas width/height

answered Jun 13 '16 at 20:14

Kokodoko

26,167
33
120
197

score 0 · Answer 3 · edited May 23 '17 at 12:16

You can use Math.random() to pick the initial coordinates for each of your elements.

From the MDN:

The Math.random() function returns a floating-point, pseudo-random number in the range [0, 1) that is, from 0 (inclusive) up to but not including 1 (exclusive), which you can then scale to your desired range. The implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user.

To get a value within a specific range (such as within the canvas height or width), you can implement it like this:

return Math.random() * (max - min) + min;

Where the "max" and "min" are the bounds of the number you want to pick. For a canvas, I would pick "0" as the minimum, and either "canvas.height" or "canvas.width" as the maximum.

Here's a sample of that:

function randomHeight() {
  return Math.random() * (canvas.height);
}

function randomWidth() {
  return Math.random() * (canvas.width);
}

var w0x = randomWidth();
var w0y = randomHeight();
var w1x = randomWidth();
var w1y = randomHeight();
var w2x = randomWidth();
var w2y = randomHeight();
var w3x = randomWidth();
var w3y = randomHeight();
var w4x = randomWidth();
var w4y = randomHeight();
var w5x = randomWidth();
var w5y = randomHeight();
var w6x = randomWidth();
var w6y = randomHeight();
var w7x = randomWidth();
var w7y = randomHeight();
var w8x = randomWidth();
var w8y = randomHeight();
var w9x = randomWidth();
var w9y = randomHeight();

For reference: Generate random number between two numbers in JavaScript

score 0 · Answer 4 · answered Jun 13 '16 at 20:16

You can change start_x and start_y to a function that get the random start position. And when you init the position, you call this function.

var start_x = function(){ return Math.random() * canvas.width; };
var start_y = function(){ return Math.random() * canvas.height; };

Updated jsFiddle link

Start canvas drawing random location. Multiple text draws

4 Answers4