When working with the canvas element you can save and restore matrix transformations using the save() and restore() methods. These methods are similar to glPushMatrix() and glPopMatrix() from OpenGL – and pushMatrix()/popMatrix() from Processing. Something interesting about save() and restore() is that they also store things like fillStyle, lineWidth, strokeStyle and shadowColor… When working with save() and restore() it’s important to note that your working with a stack data structure. If you don’t know what that is, check out the wikipedia entry. Here’s a demo:

Den ganzen Beitrag lesen…

For those of you who kept up with my old site actionsnippet, you may remember a period where I was plotting lots of implicit 2D and 3D equations. Things like:

Circle…
x^2 + y^2 = 1

The Kusner-Schmitt (Tetrahedral Implicit Surface)
(x^2 + 3) (y^2 + 3) (z^2 + 3) – 32 (x y z + 1) = 0

My personal 2D favorite… the Bicuspid:
(x^2 – a^2)(x – a)^2 + (y^2 – a^2)^2 = 0

With a little tweaking the bicuspid looks like this when plotted:


Click to view original actionsnippet post…

Anyway, I was on the subway the other day with my laptop and I wrote this snippet that plots a donut shape using the implicit equation for a circle. The plot is boring looking, but I was curious to see if I could choke any browsers by drawing the plot with 1000s of divs. No such luck, ie6 in virtual box is the slowest running at around 450-500ms – ei9 in virtualBox was faster than firefox on osx… pretty crazy.

Den ganzen Beitrag lesen…

The jQuery() function is a little strange. Most people write $() instead of jQuery() (myself included) – slightly strange when you first start working with jQuery – what’s a little more unusual is the amount of signatures $ has:

// very common usage:
$(function(){
  // dom ready
});
 
// make a div and add it to the body
$("<div/>").appendTo("body");
 
// run a selector on a string (gives us back) [<p>​there​</p>​]
$("p", "<div>hello<p>there</p></div>");
 
// very standard usage...
// css selectors - returns a set of elements made up of all the divs in the document
$("div")
 
// etc... I counted 10 different signatures in the jQuery docs.

Turns out there was one that I didn’t know about – I read about it in this article 5 Things You Might Not Know About jQuery. When you create an element on the fly there is a second argument that is a map of methods and attributes. So you can easily initialize all aspects of an element that you’d like to create:

$("<div/>",{
  css: {position : "absolute",
        cursor : "pointer",
        left : 80,
        top : 100,
        width : 60,
        height : 50,
        color : "white",
        padding : 5,
        font: "12px sans-serif",
        border : "1px solid white",
        backgroundColor : "#827658"},
  click: function(){
    var size = parseInt(Math.random() * 100 + 60);
    $(this).animate({width:size, height:size});         
  },
  id : "blueBox",
  className : "shady",
  text : "Click Here"
}).appendTo("body");

The above creates this:

There is a little css just to illustrate that you can associate an element with a class:

.shady{
        /* css3 - not browser friendly */
        -webkit-box-shadow : 0px 0px 50px rgba(0,0,0,0.5); 
        -moz-box-shadow : 0px 0px 50px rgba(0,0,0,0.5); 
        box-shadow : 0px 0px 50px rgba(0,0,0,0.5); 
}