I tried to learn more JavaScript

Talk about anything in here.
Post Reply
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

I tried to learn more JavaScript

Post by jacek »

So last night I gave my self a JavaScript challenge, this was the result http://jacekk.co.uk/scripts/js_squares/squares.html. cool right 8-) 8-) 8-)

Works best in Chrome, for some reason firefox does not randomize the array very well.

And the code for interested people
xhjs.window.onload(function () {
	var screen_size = xhjs.window.get_size();
	
	var screen_centre = new Array(screen_size[0] / 2, screen_size[1] / 2);
	
	var xmax = Math.ceil(screen_size[0] / 20);
	var ymax = Math.ceil(screen_size[1] / 20);
	
	var logo_radius = Math.min(screen_size[0], screen_size[1]) / 2.5;
	var triangle_radius = logo_radius * 0.4;
	
	var i, x, y, bx, by, dx, dy, mdy, mdx, ts, R, row, box, boxes, r, g, b, interval;
	
	document.body.style.overflow	= 'hidden';
	document.body.style.margin		= '0px';
	document.body.style.padding		= '0px';
	
	boxes = new Array();
	
	for (y = 0; y < ymax; ++y) {
		row = xhjs.create('div');
		
		row.style.cssFloat	= 'left';
		row.style.width		= '100%';
		row.style.height	= '20px';
		
		for (x = 0; x < xmax; ++x) {
			box = xhjs.create('div');
			
			box.style.visibility	= 'hidden';
			box.style.cssFloat		= 'left';
			box.style.width			= '20px';
			box.style.height		= '20px';
			
			xhjs.append(row, box);
			
			boxes[boxes.length] = box;
		}
		
		xhjs.append(document.body, row);
	}
	
	for (i = 0; i < boxes.length; ++i){
		bx = boxes.offsetLeft + 10;
		by = boxes.offsetTop + 10;
		
		mdx = dx = screen_centre[0] - bx;
		mdy = dy = screen_centre[1] - by;
		
		if (mdx < 0) mdx *= -1;
		if (mdy < 0) mdy *= -1;
		
		ts = 0.6 * dx;
		
		R = Math.sqrt(Math.pow(mdx, 2) + Math.pow(mdy, 2));
		
		if (by > (screen_centre[1] - ts - triangle_radius) && by < (screen_centre[1] + ts + triangle_radius) && bx > screen_centre[0] - triangle_radius) {
			r = Math.round(Math.random() * 80) + 170;
			g = Math.round(Math.random() * 80) + 170;
			b = Math.round(Math.random() * 80) + 170;
		} else if (R < logo_radius) {
			r = Math.round(Math.random() * 100) + 100;
			g = Math.round(Math.random() * 80);
			b = Math.round(Math.random() * 80);
		} else {
			r = Math.round(Math.random() * 220);
			g = Math.round(Math.random() * 255);
			b = Math.round(Math.random() * 255);
		}
		
		boxes.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
	}
	
	boxes.sort(function () {
		return Math.round(5 - (Math.random() * 10));
	});
	
	interval = setInterval(function () {
		if (boxes.length === 0) {
			clearInterval(interval);
		} else {
			boxes.pop().style.visibility = 'visible';
		}
	}, 5);
});
Image
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: I tried to learn more JavaScript

Post by EcazS »

I was about to ask if it wasn't the same thing as your Colour Fade thingy, but then I saw the PhpAcademy logo, which is wrong! Get your own logo! :evil: :lol:
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: I tried to learn more JavaScript

Post by jacek »

EcazS wrote:I was about to ask if it wasn't the same thing as your Colour Fade thingy
It is similar, but the point is that the logo is in the middle.
EcazS wrote:but then I saw the PhpAcademy logo, which is wrong! Get your own logo! :evil: :lol:
:lol: Indeed. Logos are hard though :(
Image
JelvinJS7
Posts: 341
Joined: Thu May 12, 2011 8:40 pm

Re: I tried to learn more JavaScript

Post by JelvinJS7 »

Cool! I say, show it to Alex. He'd like it!
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: I tried to learn more JavaScript

Post by jacek »

JelvinJS7 wrote:Cool! I say, show it to Alex. He'd like it!
alex wrote:Ha ha that's great! I love it.

Might post this around phpacademy, I'm sure people would love to see it. I can upload to another server if you don't want yours broadcast.
;)
Image
JelvinJS7
Posts: 341
Joined: Thu May 12, 2011 8:40 pm

Re: I tried to learn more JavaScript

Post by JelvinJS7 »

jacek wrote:
JelvinJS7 wrote:Cool! I say, show it to Alex. He'd like it!
alex wrote:Ha ha that's great! I love it.

Might post this around phpacademy, I'm sure people would love to see it. I can upload to another server if you don't want yours broadcast.
;)
so i assume you PM'd him? i was actually thinking post in the "share your code" section…
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: I tried to learn more JavaScript

Post by jacek »

JelvinJS7 wrote:so i assume you PM'd him? i was actually thinking post in the "share your code" section…
It was in the secret moderator forum. I actually made this to demonstrate the XSS issue the forum used to have.

Also, fixed for firefox now by shuffling the array loads of times ;)
Image
JelvinJS7
Posts: 341
Joined: Thu May 12, 2011 8:40 pm

Re: I tried to learn more JavaScript

Post by JelvinJS7 »

Jacek wrote:It was in the secret moderator forum. I actually made this to demonstrate the XSS issue the forum used to have.
there's a secret mod forum?! i wasn't aware there was a REGULAR mod forum!
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: I tried to learn more JavaScript

Post by jacek »

JelvinJS7 wrote:there's a secret mod forum?! i wasn't aware there was a REGULAR mod forum!
There isn't, there is a moderator forum, whcih is secret :)
Image
JelvinJS7
Posts: 341
Joined: Thu May 12, 2011 8:40 pm

Re: I tried to learn more JavaScript

Post by JelvinJS7 »

jacek wrote:
JelvinJS7 wrote:there's a secret mod forum?! i wasn't aware there was a REGULAR mod forum!
There isn't, there is a moderator forum, whcih is secret :)
oh. yeah that's what i thought after 4 seconds of thought.
the first 3 were spent thinking what i asked
Post Reply