BIT-101 [2003-2017]

Posts

Recent Events and my non-reaction

Nov 14, 2011

I’ve been using Flash since 1999 or so. It’s responsible for my career and any small bit of fame and fortune I might have. Most of the people I count as friends have come from the Flash community. Flash will always be something more than just a technology to me. I think Flash has seen its golden age and is probably unlikely to see such times again. But it will continue to fill several gaps, I’d guess for several years to come. The areas that Flash is focusing on now – 3d gaming, advanced video, and mobile apps – are not areas that interest me very much. So I am currently more interested in other technologies and activities. And that’s all I really have to say on the subject.
Read more...
Sublime Text 2 HTML Template and Build System

Nov 11, 2011

I’ve been doing a lot of HTML/JS development lately. My editor of choice these days is Sublime Text 2. A really great editor with loads of features and nearly infinite customization ability. But, as I’m doing a lot of learning and experimenting, I’m finding the need to create a lot of small, throwaway projects to try something out. In sublime, doing such a thing means:
1. Creating a directory for your project.
2. Creating a project using that directory.
3. Adding that directory the project.
4. Creating a JavaScript file in that project.
5. Creating an HTML file in that project that references the JavaScript file.
6. Setting up some kind of build system to be able to quickly launch the HTML file in the browser of your choice. I’d settled on ANT for this, and have a build.xml file that I can just drop into the project.
Compare this to the good old days with Flash:
Read more...
Design Tactics – Select Single

Nov 4, 2011

The other day I was coding a particular UI implementation and realized that I had coded the same thing in multiple languages multiple times. I knew exactly how I was going to go about it and did what I usually do and, as usual, it worked just right. I started wondering how many examples like that exist, and that it would be good to occasionally document them, if not for my own sake, then for the sake of others.
Read more...
MinimalCompsJS 0.1 Release

Oct 12, 2011

Well, it’s high time I got these out there so people can use them.

See them in action: https://www.bit-101.com/MinimalCompsJS/release/0.1/

I’ve combined all the files into one and minified it so you only need to include a single file, plus jQuery.

The html for the above example is simply:

[php lang=“html”]

[/php]
And test.js is as follows:

[php lang=“JavaScript”]$(function() {
var div = $("#comps").get(0);
Read more...
MinimalCompsJS Preview #2

Oct 6, 2011

Just uploaded an update to the MinimalCompsJS project. The demo looks pretty much the same as the last one, but the components are completely refactored. Now, each component creates its own individual canvas element and adds it to a div (or any other element that can contain a canvas). So you don’t need to create any canvas at all to use them. This has massively simplified a lot of the code for redrawing and for mouse events.
Read more...
MinimalCompsJS Preview

Oct 4, 2011

A while back, when I first started playing with HTML5 and Canvas, I considered the idea of making a port of MinimalComps. I immediately rejected the idea as silly. I mean, if you’re in HTML, you already have UI controls, right? But I mentioned it to a few people and tweeted about it, and I was amazed how much interest there was in such a thing. At FOTB last month, I was asked about it a couple of times. So, I got to work.
Read more...
Linescapes Iteration 9

Sep 8, 2011

A different gety function:

[php lang=“JavaScript”]$(function() {
var canvas, linescape, hills;

canvas = $("#canvas").get(0);
linescape = new LineScape(canvas);
linescape.xres = 1;
linescape.zres = 0.5;

hills = [];
for(var i = 0; i < 100; i += 1) { hills[i] = {x:Math.random() * 1000 - 500, z: Math.random() * 2000, force:Math.random() * 2000 + 1000}; } linescape.gety = function(x, z) { var y = 600; for(var i = 0; i < 100; i += 1) { var hill = hills[i]; var dx = hill.x - x; var dz = hill.z - z; var dist = Math.sqrt(dx * dx + dz * dz); y -= Math.sin(1 / dist * 1000) * 10; } return this.ycenter + y; } linescape.draw(); });[/php] Result.
Read more...
Linescapes Iteration 8

Sep 6, 2011

Create a LineScape object in LineScape08.js:

[php lang=“JavaScript”]function LineScape(canvas) {

this.context = canvas.getContext(“2d”);
this.width = canvas.width;
this.height = canvas.height;
this.xcenter = this.width / 2;
this.ycenter = this.height / 2;
this.zcenter = 500;
this.z = 5000;
this.fl = 350;
this.xres = 2;
this.zres = 2;

this.context.fillStyle = “#ffffff”;

this.draw = function() {
var self = this;
this.interval = setInterval(function() {self.drawline();}, 30/1000);
}

this.drawline = function() {
var x, y, x1, x2, scale;
scale = this.fl / (this.fl + this.z);
x1 = this.xcenter – this.width / scale / 2 * scale;
x2 = this.xcenter + this.width / scale / 2 * scale;
y = this.ycenter + (200 + Math.random() * 5) * scale;
this.context.strokeStyle = “rgba(0,0,0,” + scale + “)”;
this.context.beginPath();
this.context.moveTo(x1, y);
for(x = x1; x <= x2; x += this.xres) { y = this.gety(x, this.z) * scale; this.context.lineTo(x, y); } this.context.stroke(); this.context.lineTo(x, this.height); this.context.lineTo(0, this.height); this.context.closePath(); this.context.fill(); this.z -= this.zres; if(this.z < -this.fl) { clearInterval(this.interval); } } this.gety = function(x, z) { return 200; } }[/php] Create an instance. Customize it. Draw it: [php lang=“JavaScript”]$(function() { var canvas, linescape, xc1 = 200, zc1 = 600, xc2 = 700, zc2 = 150; canvas = $("#canvas").get(0); linescape = new LineScape(canvas); linescape.xres = 1; linescape.zres = 1; linescape.gety = function(x, z) { var x1 = xc1 - x; var z1 = zc1 - z; var dist1 = Math.sqrt(x1 * x1 + z1 * z1); var x2 = xc2 - x; var z2 = zc2 - z; var dist2 = Math.sqrt(x2 * x2 + z2 * z2); return this.ycenter + 200 + Math.sin(dist1 * 0.1) * 30 + Math.cos(dist2 * 0.02) * 35 + Math.random() - 0.5; } linescape.draw(); });[/php] Result.
Read more...
Linescapes Iteration 7

Sep 5, 2011

Put back in a bit of randomness. A more interesting form. Draw progressively so screen doesn’t hang.

[php lang=“JavaScript”]$(function() {
var canvas, context, width, height, x, x1, x2, y, z = 5000, fl = 350, xres = 2, zres = 2, xcenter, ycenter, zcenter, scale, interval;

canvas = $("#canvas").get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
xcenter = width / 2;
ycenter = height / 2;
zcenter = 500;
context.fillStyle = “#ffffff”;
interval = setInterval(draw, 30/1000);
Read more...
Linescapes Iteration 6

Sep 4, 2011

Add a gety(x, z) function and a more interesting form.

[php lang=“JavaScript”]$(function() {
var canvas, context, width, height, x, x1, x2, y, z = 5000, fl = 350, xres = 5, zres = 5, xcenter, ycenter, zcenter, scale;

canvas = $("#canvas").get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
xcenter = width / 2;
ycenter = height / 2;
zcenter = 500;
context.fillStyle = “#ffffff”;
while(z > 0) {
scale = fl / (fl + z);
x1 = xcenter – width / scale / 2 * scale;
x2 = xcenter + width / scale / 2 * scale;
y = ycenter + (200 + Math.random() * 5) * scale;
context.strokeStyle = “rgba(0,0,0,” + scale + “)”;
context.beginPath();
context.moveTo(x1, y);
for(x = x1; x <= x2; x += xres) { y = gety(x, z) * scale; context.lineTo(x, y); } context.stroke(); context.lineTo(x, height); context.lineTo(0, height); context.closePath(); context.fill(); z -= zres; } function gety(x, z) { var x1 = xcenter - x; var z1 = zcenter - z; var dist = Math.sqrt(x1 * x1 + z1 * z1); return ycenter + 200 + Math.sin(dist * 0.1) * 30; } });[/php] Result.
Read more...