Still pixling (vectors, shapes & randomness)

Actually, more fancy things using JavaScript.

Today, we're going to make some more interesting shapes, move pixls around and share the code we wrote.

As with last time, start by making your changes apply only locally:

pixl.disconnectAndClear();

some more interesting shapes.

Last week we wrote various kinds of lines and then the beginnings of some other stuff. But we also want arbitrary lines (not just straight and diagonal ones), more complex objects like rectangles and houses which are made of lines and then other shapes like circles and ellipses.

Here are some tips:

random pixls!

Javascript can generate random numbers using Math.random(). calling that function gives you a different number between 0 and 1 each time you call it.

You can than scale that number to correspond to a position on the screen to draw a pixl at a random position.

var random = Math.random();
//=> 0.9401923281947845

But you could also generate pixls with random colors. to do that, we need to represent colors as numbers:

var red = "rgb(255, 0, 0)";

That is, colors can be represented as three values for the red, green and blue part of the color. But to make html, css and pixl interpret those values as a color we have to put it into a string.

So, to generate a color we need to generate three random numbers, scale them such that they are in the range of 0 to 255 and then put them inside a string.

// e.g. something like this:
var r = 0, g = 255, b = 0;
var color = "rgb(" + r + ", " + g + ", " + b + ")";

pixl.draw_pixl({x: 0, y: 0}, color);

Note that you must Math.round the numbers you get before putting them into the string.

animation

Now that we know a bit more how colors work we can make a pixl that changes it's color over time:

var pos = {x: 0, y: 0};
var r = 0, g = 0, b = 0;

function animate_color() {
  pixl.draw_pixl(pos, "rgb(" + r + ", 0, 0)");

  r += 10;
}

setInterval(animate_color, 200);

Here setInterval tells the browser to call the animate_color function every 200 milliseconds.

Try some other things:

moving things around

setInterval (and the related setTimeout function) can be used to do all kinds of things related to timeouts, so why not animate pixls moving around?

var currentPos = {x: 0, y: 0};
var direction = {x: -1, y: 0};

function bounce() {
  var w2 = pixl.area.w2();
  if (currentPos.x < pixl.pos.x - w2 || currentPos.x > pixl.pos.x + w2) {
    direction.x = direction.x * -1;
  }
  pixl.draw_pixl(currentPos, "white");
  currentPos = {x: currentPos.x + direction.x, y: currentPos.y};
  pixl.draw_pixl(currentPos);
}

setInterval(bounce, 500);

Play with that, i'd like to see what you come up with. Some ideas:

and some more ideas

sharing the code

You can share the code using the pixl.scripts utilities.

// let's make a small library for dealing with random numbers
var random = {
  num: function(lo, hi) {
    return lo + Math.random() * (hi - lo);
  },

  int: function(lo, hi) {
    return Math.round(random.num(lo, hi));
  },

  color: function() {
    var r = random.int(0, 255), g = random.int(0, 255), b = random.int(0, 255);
    return "rgb(" + r + ", " + g + ", " + b + ")";
  },

  pixls: function (n) {
    var w2 = pixl.area.w2();
    var h2 = pixl.area.h2();
    for (var i = 0; i < n; i += 1) {
      pixl.draw_pixl({x: pixl.pos.x + random.int(-w2, w2),
                      y: pixl.pos.y + random.int(-h2, h2)},
                      random.color());
    }
  }
}

// and then save it
pixl.scripts.save("random", random);

This saves the functions to defined and passed to pixl.scripts.save and makes them availlable to others.

It also makes it possible to get your functions back easily after a reload.

pixl.scripts.load("random");

random.num(0, 100);
//=> 73.80250617330074

random.pixls(100);

links