Paules Paules - 5 months ago 13
jQuery Question

Start canvas drawing random location. Multiple text draws

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

Answer

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/