Search jQuery

jQuery Forum

Generating Random Letters

in Getting Started • 8 years ago

Hi, Im new to jQuery and was wondering how I would go about generating(animate) random letters (both lower case and upper case). As well as having them randomly show up in random areas of a contained space(square box). Any help would be great as to where to start would be great.

Replies(5)

jakecigar

Re: Generating Random Letters

8 years ago

Rather than ask how to do your assignment, you should share what you have done, and ask a question about it.

JΛ̊KE

AMar

Re: Generating Random Letters

8 years ago

<html>

<head>

<style>

html, body { padding:0; margin:0; }

</style>

//function makeid()

//{

// var text = "";

//var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

//for( var i=0; i < 5; i++ )

// text += possible.charAt(Math.floor(Math.random() * possible.length));

//return text;

//}

// all our animation will go in here

$("a").click(function(){

$("div").fadeIn( 3000, function() {

$("span").fadeIn(100);

});

return false;

});

$(document).ready(function(){

var canvas = $("#myCanvas");

var context = canvas.get(0).getContext("2d");

var counter = 0;

function animate(){

counter = counter + .1;

context.fillStyle = "rgb(0,0,0)";

context.fillRect(0,0, canvas.width(), canvas.height());

context.save();

context.translate(100 + (200 * Math.cos(counter)), 100);

context.rotate(Math.sin(counter));

var scaler = (Math.cos(counter/2)) + 1;

context.scale(scaler, scaler);

context.beginPath();

context.moveTo(20, 20 + (100 * Math.sin(counter)));

context.lineTo(0, 100);

context.lineTo(150, 300);

context.closePath();

context.fillStyle = "rgb(255, 255, 0)";

context.fill();

context.strokeStyle = "rgb(255, 0, 0)";

context.lineWidth = 6;

context.stroke();

context.restore();

requestAnimationFrame(animate);

}

//animate();

//trying to make the floating boxes letters rather than shapes

function genCharArray(charA, charZ) {

var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);

for (var i=0; i <= j; ++i) {

a.push(String.fromCharCode(i));

}

return a;

}

genCharArray('a', 'z'); // ["a", ..., "z"]

var Object = function(newX, newY, size, c, cR, a){

this.x = newX;

this.y = newY;

this.w = size;

this.counter = c;

this.counterRate = cR;

this.area = a;

}

var objs = new Array();

var letters = new Array();

letters[] = ['a', 'z'];

for(var i=0; i<26; i++){

var tmpX = Math.random() * canvas.width();

var tmpY = Math.random() * canvas.height();

var tmpSize = 20;

var tmpCounter = Math.random()*2;

var tmpCounterRate = Math.random()*.01;

var tmpArea = 200 * Math.random();

for (var i=0; i<26; i++){

var tmpL = letters.

}

objs.push( new Object(tmpX, tmpY, tmpSize, tmpCounter, tmpCounterRate, tmpArea) );

}

var user = new Object(canvas.width()/2, canvas.height()/2, 20, 0, 0, 0);

function animate2(){

context.fillStyle = "rgb(220,20,60)"; //backgrougn color crimson

context.fillRect(0,0, canvas.width(), canvas.height());

context.fillStyle = "rgb(60,179,113)"; //medium sea green

for(var i=0; i<objs.length; i++){

var xCheck = true;

var yCheck = true;

var alteredX = objs[i].x + ( objs[i].area * Math.sin(objs[i].counter) );

if(user.x > (alteredX + objs[i].w) || alteredX > (user.x + user.w) ){

xCheck = false;

}

if(user.y > (objs[i].y + objs[i].w) || objs[i].y > (user.y + user.w) ){

yCheck = false;

}

if(xCheck && yCheck ){

// console.log("overlap!!!!!!!");

}else{

// if user and objs i DO NOT overlap

objs[i].counter = objs[i].counter + objs[i].counterRate;

}

//console.log(objs[i].area);

context.save();

context.translate( 0 , objs[i].area * Math.sin(objs[i].counter));

context.fillRect(objs[i].x, objs[i].y, objs[i].w, objs[i].w);

context.restore();

}

context.fillStyle = "rgb(255,160,122)";//light salmon middle box(user)

context.fillRect(user.x, user.y, user.w, user.w);

requestAnimationFrame(animate2);

}

animate2();

$(window).keydown(function(e){

// console.log(e.keyCode);

var keycode = e.keyCode;

if(keycode == 48) // left arrow key 37

{

user.x -= 6;

if(user.x <0){ user.x = 0;}

}else if(keycode == 38){ //up arrow key

user.y -= 6;

if(user.y <0){ user.y = 0;}

}

else if(keycode == 39){ //right arrow key

user.x += 6;

if(user.x+user.w >canvas.width()){ user.x = canvas.width() - user.w;}

}else if(keycode ==40){ //down arrow key

user.y += 6;

if(user.y+user.w >canvas.height()){ user.y = canvas.height() - user.w;}

}

});

$("#myCanvas").bind( "click", function(){

var x = event.pageX;

var y = event.pageY;

//console.log(x + " " + y);

user.x = x - (user.w/2);

user.y = y - (user.w/2);

});

</script>

</head>

<body>

</body>

</html>

AMar

Re: Re: Generating Random Letters

8 years ago

There are a couple of things I've tried but I'm not familiar with jQuery

jakecigar

Re: Generating Random Letters

8 years ago

http://jsfiddle.net/jakecigar/80kw59s9/ runs. You had some syntax errors that prevented anything from happening.

You can see the errors with the developer tools built into all modern browsers.

These lines are not proper javaScript.

letters[] = ['a', 'z'];

var tmpL = letters.

JΛ̊KE

AMar

Re: Generating Random Letters

8 years ago

I appreciate the help. Thank you

Top Reply

Response title

Attachments

jQuery Forum

Generating Random Letters

Replies(5)

Re: Generating Random Letters

Re: Generating Random Letters

Re: Re: Generating Random Letters

Re: Generating Random Letters

Re: Generating Random Letters

Statistics

Tags

Actions