Author - Web Developer - Educator
Found 2 results for tag "html5"
RSS Feed

HTML5 Canvas - Bouncing Ball Example

At this point, I'm trying to stay up with HTML5 programming, and I feel like I'm a little behind the times.

So, because I'm in a Python class (via Coursera by Rice University) learning about interactive programming (more specifically, "Pong" was this week's project) and seeing Google's anniversary edition of Breakout, I felt inspired to learn how innovative HTML5 could be, so I looked up some HTML5 references and thought I'd try my hand at it.

Well, I combined by Python experiences and some HTML5 canvas examples and created some ball-bouncing joy. Want a demo? Here's a demo!

Here's a screenshot of it:
Bouncing Ball
I've taken out the clear() function to show it in motion


Even though this is very simple (as compared to some more advanced HTML5 stuff), I thought I'd go ahead and put this here for others to view/use/learn from.

Here's the HTML:
 
<!DOCTYPE html>
 
<html>
 
	<head>
 
		<meta charset='utf-8'/>
 
		<title>Ball Canvas Test</title>
 
		<link href='main.css' rel='stylesheet'/>
 
		<!--[if lt IE 9]>
 
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
		<![endif]-->
 
		<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
 
		<script src='main.js'></script>
 
	</head>
 

 
	<body>
 
		<div id='debug'></div>
 
		<div id='container'>
 
			<canvas id='scene'></canvas>
 
		</div>
 

 
		<footer>
 
			© 2013 - Kyle Perkins
 
		</footer>
 
	</body>
 
</html>
 


Here's the CSS: (this uses a standard Reset CSS, started by Eric Meyers)
 
@import url("//dev.shadowdev.com/reset.css");
 
html, body{
 
	display: block;
 
	text-align: center;
 
}
 
#debug{
 
	position: absolute;
 
	top: 50px;
 
	right: 50px;
 
}
 
canvas{
 
	margin: auto;
 
	display: block;
 
	border: 5px #000 solid;
 
	background-color: #efefef;
 
}
 


And here's the fancy-smancy Javascript:
var canvas, ctx;
 
var circles = [];
 
var circleCount = 4; 
 
var velocity_set = 2;
 

 
function oneorzero(num){
 
	// simple function to randomly get 0 or 1
 
	if (Math.round(Math.random())==1) num *= -1;
 
	return num;}
 

 
function Circle(x,y,radius, color){
 
	// get the information stored for eac ball
 
	this.x = x;
 
	this.y = y;
 
	this.radius = radius;
 
	this.color = color;
 
	var V1 = oneorzero(velocity_set);
 
	var V2 = oneorzero(velocity_set);
 
	// velocity is set as an array so we can have the [x,y] values
 
	// [5,5] means ^,>
 
	// [-5, -5] means V,<
 
	this.velocity = new Array(V1, V2);
 
}
 

 
function clear(){
 
	// clear the screen (prevent "dirty canvas")
 
	ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
 
}
 

 
function getrand(){
 
	// function to randomly get a value between 0-255 (one value for R, G, and B each)
 
	return Math.floor((Math.random()*255)+1);
 
}
 

 
function drawCircle(ctx, x, y, radius, color) { // draw circle function
 
//	$('#debug').html("X:"+x+" Y:"+y);
 
//    ctx.fillStyle = 'rgba('+r+', '+g+', '+b+', 1.0)';
 
	ctx.beginPath();
 
	ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
 
	ctx.fillStyle = "rgb("+color+")";
 
	ctx.fill();
 
	ctx.stroke();
 
//    ctx.closePath();
 
}
 

 
function drawScene(){ //main draw function
 
	clear(); //clear the canvas
 
	// this is only for additional draw functionality (testing only)
 
/*	ctx.beginPath();
 
      ctx.arc(canvas.width/2, canvas.height/2, 70, 0, 2 * Math.PI, false);
 
      ctx.fillStyle = 'blue';
 
      ctx.fill();
 
      ctx.lineWidth = 5;
 
      ctx.strokeStyle = '#fc0';
 
      ctx.stroke();
 
*/
 
	
 
	var ball_info ="";
 
	for (var i=0; i 0)
 
		$('#debug').html(ball_info);
 
}
 

 
////////////////////////////////////////
 

 
$(function(){
 
	// call these setup properties upon load
 
	canvas = document.getElementById("scene");
 
	ctx = canvas.getContext('2d');
 

 
	// this is to make sure the canvas spreads across the screen
 
	ctx.canvas.width = window.innerWidth-10; // the canvas has a 5px border
 
	ctx.canvas.height = window.innerHeight-50; // 50 is only for the footer info
 

 
	var circleRadius = 25;
 
	var width = canvas.width;
 
	var height = canvas.height;
 

 
	for (var i = 0; i < circleCount; i++){
 
		// start at random position
 
		var x = Math.random()*(width*.9);
 
		var y = Math.random()*(height*.9);
 
		var r = getrand();
 
		var g = getrand();
 
		var b = getrand();
 
		ballColor = r+","+g+","+b;
 
		// add circle to array
 
		circles.push(new Circle(x,y,circleRadius, ballColor));
 
	}
 
	setInterval(drawScene, 1); // loop drawScene - aka: "draw handler"
 
});
 

 
function animate(ball, canvas, context) {
 
	// this is for adding (aka: "move") the ball based on the velocity increase/decrease
 
	// velocity is an array
 
        ball.x += ball.velocity[0];
 
	ball.y += ball.velocity[1];
 
	
 
        if( (ball.x > (canvas.width - ball.radius)) || (ball.x < (0 + ball.radius))) {
 
		// bounce off left or right wall
 
		ball.velocity[0] *= -1;
 
        }
 
	if ( (ball.y > (canvas.height - ball.radius)) || (ball.y < (0 + ball.radius))){
 
		// bounce off top or bottom wall
 
		ball.velocity[1] *= -1;
 
	}
 

 
	// draw the circles with on the (canvas, x position, y position, radius, color)
 
        drawCircle(ctx, ball.x, ball.y, ball.radius, ball.color);
 
      }


I hope this works for some people learning how to use HTML5 and the "velocity effect"


Tags:#html5 #css #javascript #python #tutorials

RSS Feed

(A Small) Time to Breathe

First, here's a good comic to celebrate 4/20:
4/20 with Cats

I don't think the term "crazy" defines the past few weeks around here. It would be more like....chaotic, crammed, catch-up, compiling, compunding....any other "C" words go here?

Anyway, here's a quick rundown of what I've done, and what is yet to come:
Shadow Dev:

  • Fairview's site is coming along, and should be ready by May 1. I spent a little too much time on their scraper, but when it ran, it was a beauty!

    Here's what it was supposed to do: scan the site for links, find product pages, and archive their current product listing.

    Here's what it did: scan the site for links, create a database of the links that every page goes to, scan each of the pages for a common phrase that is on the product pages (since the product pages didn't have a commonality among url's), scrape the code and find the product name, default ID, and default photo, scan for further images (both small and large photos), find the area that lists prices, grab and store the different types of prices and "packages", optimize the database for remote links and make them local, download all images that are listed in the database, scan through the database and delete duplicate product entries, scan the stored images and delete duplicates, and set up a test page to choose a random product and show the different images, prices, and listings based on the information presented. Yeah - that's a mouthful!

    With our other basic developer out of the area for a while, I have to finish the rest of Fairview's site in order to be ready by May 1. Here's the todo list for the next 10 days: finalize the design tweaks, create additional pages, integrate the information into the new pages, create a formalized version of the product pages, order/integrate an SSL certificate, and integrate a Merchant account into the system ready for a May 1 launch. Yay....

  • We've hired another Developer, Cheryl Mason, and she is a real gift! She knows more SEO stuff that I could have ever guessed. She's also well prepped for Developmental work. Put it this way: I had to spend about 3 months training our other developers from basic HTML 4.01 to HTML5, CSS3, basic PHP, MySQL, and basic Javascript/AJAX/jQuery. My overall experience with Cheryl took about 2 weeks. It looks like I may have found my replacement in the Development area! YAY!

  • We've finally finalized the transfer for one of our "potential" clients. I won't go into details, but I'll say this: Potential client "Pete" owns a business. He's had this business for X years. His primary source of new business comes from people calling in (our reasoning: his site didn't work well, so people had to call). Pete knows that his site wasn't doing too hot, and wanted to discuss details about getting a new site. Bad news, his wife owns the domain. More bad news: it's his ex-wife, and they are not on good terms. So.....after about 4 months or so, Pete's domain expired and was available to the world. Pete told us to get it for him. Well, by the time it was available for us to get it, his ex-wife renewed the domain (we believe it was auto-renewed, and she didn't know/care). So....Pete finally talked to his ex-wife and his hosting company, got the domain released, and gave us the EPP. From there, we exchanged a number of emails confirming the transfer (which is another reason we recommend updating the nameservers instead of a transfer, as a transfer can be really confusing and frustrating depending on the technical experience of the transferee). After about a week, the transfer finalized and we got it updated to our servers. He should be signing within the next few days.

  • We are developing some new services to produce some additional income. These services include a: Site Usability Report, Competitor Comparison Report, and In-Depth Analysis (which we used to offer for free, but the time spent on generating these reports didn't produce the ROI we expected). More details to come soon.

  • We are also developing a Rewards Program for our clients. Can't say much, but it should be coming out soon

  • The role of "Presenter" may also be taken off of my plate. I've talked to Cheryl about it, and she's really excited to have control of an SEO Seminar that we put on a while back. If things go well, we should be able to schedule that during the summer or fall. Can't wait to see what she produces!

  • Been talking with AboutUs, seeing what they can do as far as a site comparision and competitor comparision, and we are in talks about a Partnership! Cool!

  • We've released the PR for our site contest. The "fishbowls" have been out since the beginning of February, and we now have all 10 placed, and the PR is out. I honestly didn't even know that we were published until Cheryl (the SMDC Secretary) came over and said that she saw our article. My original response was "We're in the paper?"



Personal:

  • I watched all of Heroes, again. Still a good series.

  • Finally get to watch all of Season 4 of Eureka! now I can see how they got to 1947 and the stories before and after that. I was really excited on Monday (wow, is it really Saturday already?) to see Eureka Season 5! That first episode was....a repeat of Season 4 (with the changing time frame), but still looks good. It really sucks that this is the last season. It seems like all of the good shows are cancelled before their time.

  • Mythbusters new Season! Yay! In addition, Jamie and Adam have a new series: Unchained Reaction, which is really awesome.

  • Psych had their season finale. Boo! I wish their seasons ran longer

  • We went to "Drums of War" earlier this month in Elkin. Didn't win anything, but had a great time shooting some targets and getting to see everyone again since October.



I think I'll call it a night with that. Between now and May 1, I may not be able to post again. I see a lot of sleepless nights in my soon-to-be future.


Tags:#lolcats #heroes #erueka #mythbusters #sca #paper #pr #aboutus #seo #services #epp #html5 #css3 #