JSFiddle

  • Electrical Field Lines

    E=kq<r>/r^2

    var Scene = Class.create({
            init: function(w, h){
                var canvas = document.createElement("canvas");
                this.canvas = canvas;
                canvas.width = w;
                canvas ...
  • JS OCR #15 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var lMS, w = 1000, h = 1000,
        video = document.querySelector('video'),
        canvas = document.querySelector('canvas'),
        pre = document.querySelector("pre"),
        fxCanvas = fx ...
  • Encode/Decode

    jQuery Compat (edge), HTML, CSS, JavaScript

    $("#en").click(function(){
        var t = $("#ipt").val(),
            u = prompt("Encode:");
        if(!u) return false;
        $("#result").empty();
        var oriLen = t.length ...
  • Manual Anti Aliasing

    jQuery (edge), HTML, CSS, JavaScript

    var canvas = $("<canvas>").attr({
        width: innerWidth,
        height: innerHeight
    }).appendTo("body"),
        ctx = canvas[0].getContext("2d"),
        w = innerWidth,
        h = innerHeight;
    
    ctx.fillRect ...</canvas>
  • Dragon Curve

    jQuery (edge), HTML, CSS, JavaScript

    window.requestAnimationFrame = window.requestAnimationFrame ||
                                   window.webkitRequestAnimationFrame||
                                   window.mozRequestAnimationFrame;
    
    var N = 2 << 17, offset = 0.5, arr = [];
    for(var n = 1; n < N; n++){
        arr[n] = (((n & -n) << 1) & n) != 0 ? "L" : "R";
    }
    
    var c = $("<canvas>").attr({width: window.innerWidth, height: window.innerHeight}).appendTo("body ...</<>
  • Image layout algorithm

    jQuery Compat (edge), HTML, CSS, JavaScript

    google.load("search", "1");
    $(window).load(function(){
        var query = "cats";
        searchImg(query, buildLayout);
        
        $("#query").click(function(){
            var ipt = prompt("Enter ...
  • Extendable Class #2 is the latest revision

    Extendable Class

    function Class() {}
    
    Class.extends = function (prop) {
        var constructor;
        (function (parent) {
            var prototype = new parent();
            constructor = function () {
                var tmp = this._super ...
  • Displaying Lunar Calendar with JavaScript #1 is the latest revision

    JavaScript 農曆

    document.body.innerHTML = getLunarDate(new Date());
    
    function getLunarDate(date) {
        var y = +Intl.DateTimeFormat("zh-TW-u-ca-chinese", {
            year: "numeric"
        }).format(date).match(/\d ...
  • Check If Point Inside Triangle (10000 samples) #4 is the latest revision

    jQuery Compat (edge), HTML, CSS, JavaScript

    var canvas = new Canvas(500,500).addTo("body")
                .rect({width:499, height: 499,x: 0.5, y: 0.5, stroke ...
  • Check if point lies inside triangle

    No-Library (pure JS), HTML, CSS, JavaScript

    var l=[[-0.31961, -0.12646, 0.38478, 0.37419, -0.30613, -0.59754, -0.85548, 0.6633],[-0.87427 ...