Skip to content

Latest commit

 

History

History
199 lines (145 loc) · 5.72 KB

part3.md

File metadata and controls

199 lines (145 loc) · 5.72 KB

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:

  • a line can be represented as two points. but to draw a line between two such points we need to figure out where our "steps" should go. to do this we need a (normalized) vector.

    the normalized vector represents the "step" we have to take to draw one pixl of the line. to get a line, we execute that step n times.

    here are two videos about vectors:

  • rectangles are quite simple, just think about them for a bit. (and maybe draw them empty, filled and with a checkerboard inside.)

  • houses are just a rectangle and two lines. but what if we want houses with different heights and different types of roofs?

  • circles. you can draw circles if you understand what the unit circle is.

  • ellipses are fun because circles are actually ellipses with the same radius for x and y. so if you know how to draw a circle, ellipses should be easy

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:

  • changing the color from red to green to blue over time
  • blinking (e.g. going from 0 to 255, back to 0 and up again. and again. and again)

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:

  • bounce in the y-direction, too
  • move around faster

and some more ideas

  • make a snake!
  • make a rainbow
    • maybe even a blinking rainbow
  • plot a function on the screen
    • function(x) { return 0.001 * x * x; }
    • Math.sin(x)
    • function(x) { return x % 10; }

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

  • Coding Math: simple math makes cool things, basically. using html canvas, keith peters demonstrates math that is useful for coding, using interesting examples. (for example a simple planet system.)
  • and of course, if you want to do pixl in 3d, use trixl.