Move horizon out. Stretch to edge of canvas. Fade lines in distance. Add a fill to cover previous lines.
[php lang=“JavaScript”]$(function() {
var canvas, context, width, height, x, x1, x2, y, z = 5000, fl = 350, xres = 5, zres = 5, xcenter, ycenter, scale;
canvas = $("#canvas").get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
xcenter = width / 2;
ycenter = height / 2;
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 = ycenter + (200 + Math.random() * 5) * scale; context.lineTo(x, y); } context.lineTo(x, height); context.lineTo(0, height); context.closePath(); context.fill(); context.stroke(); z -= zres; } });[/php] Result.
Segmentize and randomize.
[php lang=“JavaScript”]$(function() {
var canvas, context, width, height, x, x1, x2, y, z = 600, fl = 350, xres = 5, zres = 5, xcenter, ycenter, scale;
canvas = $("#canvas").get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
xcenter = width / 2;
ycenter = height / 2;
while(z > 0) {
scale = fl / (fl + z);
x1 = xcenter – width / 2 * scale;
x2 = xcenter + width / 2 * scale;
y = ycenter + (200 + Math.random() * 5) * scale;
context.beginPath();
context.moveTo(x1, y);
for(x = x1; x <= x2; x += xres) { y = ycenter + (200 + Math.random() * 5) * scale; context.lineTo(x, y); } context.stroke(); z -= zres; } });[/php] Result.
Make it 3D.
[php lang=“JavaScript”]$(function() {
var canvas, context, width, height, x1, x2, y, z = 600, fl = 350, xcenter, ycenter, scale;
canvas = $("#canvas").get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
xcenter = width / 2;
ycenter = height / 2;
while(z > 0) {
scale = fl / (fl + z);
context.beginPath();
x1 = xcenter – width / 2 * scale;
x2 = xcenter + width / 2 * scale;
y = ycenter + 200 * scale;
context.moveTo(x1, y);
context.lineTo(x2, y);
context.stroke();
z -= 5;
}
});[/php]
Draw a bunch of lines.
[php lang=“JavaScript”]$(function() {
var canvas, context, width, height;
canvas = $("#canvas").get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
for(var y = 0; y < height; y += 10) { context.beginPath(); context.moveTo(0, y); context.lineTo(width, y); context.stroke(); } });[/php] Result.
Read more...Draw a line.
[php lang=“JavaScript”]$(function() {
var canvas, context, width, height;
canvas = $("#canvas").get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
context.beginPath();
context.moveTo(0, height / 2);
context.lineTo(width, height / 2);
context.stroke();
});[/php]
Technology has entered a phase where pretty much everything is a beta.
Take GMail. The first beta appeared in 2004. It remained in beta status until 2009. In fact, people so missed the “BETA” label on the GMail logo that there’s an official Google extension that allows you to add it back in!
Virtually all open source software projects start out in beta. Like GMail, most stay in varying stages of beta for years, if they ever make it to a stable release.
Read more...Doing some Android dev these days. Needed to check if a editable text field was empty or not. I had to dig around to find out how to do this. It turns out that an EditText’s getText() method returns an instance of Editable. You need to convert this to a string and then call equals("") on it. So you get this:
[php lang=“Java”]if(myText.getText().toString().equals("")) {…}[/php]
The similar thing in Objective-C would be:
Read more...During JavaScript month, there was little time for much else. There were bugs and issues in MinimalComps that had piled up and I was ignoring them. So yesterday I sat down and went through the whole lot. I realized that several were not bugs, but simply known issues with known workaround, such as the need to add the flex.swc to your project if compiling in Flash CS4/5. The current site had no easy place to put this stuff. I could have worked more on the site to make it more dynamic, but wound up installing WordPress and a nice minimal theme. I’ve been working on it on and off over the weekend, adding a gallery, showcase, FAQ, etc. The site is at the same old place:
Read more...More JavaScript!
I’ve actually started delving into Android, but I’m still tinkering with JS too. I’ve been fleshing out the Verlet System I created last month. Added some cool stuff to it. I’ll be doing a future post on that when I get a few more things added. But just recently I started redoing some stuff I did in Flash over at ArtFromCode.
First of all, I started with a Lissajous Curve, which is really easy to create. Do a sine wave on x and another sine wave on y and connect the dots.
Read more...Wow, look at that – Day 31! I made it!
There were some rough points in the middle there, but I managed to pull off some filler posts until I figured out the next topic. I hope you’ve enjoyed this month of posts and learned at least a fraction of what I learned. It was fantastic for me to force myself to dive into all this new stuff. I’ve always said the best way to learn something is to teach it. When you have to explain something to someone else, you find you need to understand it on an entirely new level. So really, this was all a selfish, self-motivated effort. And if you learned anything at all, that was an unintended byproduct. 😉
Read more...