JSFiddle

  • Quick alpha mixing demo

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

    var ctx = display.getContext("2d");
    
    function log(s){
        _console.value += s + "\n";
    }
    
    function combine(c1, c2){
        /* Algorithm courtesy of http ...
  • HTML5 On-screen Keyboard #12 is the latest revision

    Improved version of http://jsfiddle.net/B1KMusic/GVqEA/

    /* Functions */
    function char_inserter(chr){
        return function(){
            display_chars.push(chr);
        };
    }
    function char_remove(){
        display_chars.pop();
    }
    function display_clear(){
        display_chars = [];
    }
    function display_render(s){
        var ...
  • Console #7 is the latest revision

    Quick n' dirty DOM console. Faster and easier than console.log()

    /*
     * To use, just call log() with a string
     *   log("Hello World")
     */
    
    function log(s){
        _console.value += s + '\n';
        _console.scrollTop ...
  • Random Pattern Tile Generator #3 is the latest revision

    Inspired by a cool repeating 8x7 wall tile thing I saw in a kitchen. This one's 8x8 because 8x7 just raises too many questions

    /* Random Pattern Tile Generator
     * Written in vim by Braden Best
     * edit: I change the probability from 50w25b25r to 70w20b10r, now ...
  • Image Magnifier #25 is the latest revision

    This is a test to see if I could make an in-page image magnifier. I started this after being intrigued by the fancy magnifier gizmo over at https://yourlogicalfallacyis.com/poster Seemed simple enough. Just get an image, and a box with the same image inside, scale them differently, and have the box follow the mouse, while moving the full-sized image from the box in the opposite direction to compensate. If the mouse isn't colliding with the picture, then don't show the box. Ran into a few hurdles here and there with my math when it came to exactly where to position the full-size picture, and with events. I thought I was doing something wrong until I realized that my inspiration lagged exactly the same way. Well, here it is. It's funny how when you get deep enough into a language, the task seems relatively simple, but when you step back and look at the whole picture after finishing, you chuckle at how no novice could ever wrap their head around what you just crafted, despite how pain-free it was for you to craft from scratch. You remember back when you looked at tutorials on how to do relatively trivial things. You don't really think about it until you step back and take in the complexity of it all.

    /* This is mainly for infographics, though there could be other uses.
     * Here are some example image sources to try with ...
  • Best Story In The Universe #8 is the latest revision

    Read along as I write the best story in the universe right before your eyes! -Braden Best a.k.a. B1KMusic

    var seps = [" -- ", ". ", "; "];
    var words = [
        "the valiant ",
        "the slimy ",
        "dog ",
        "big dog ",
        "man ", 
        "apple ", 
        "green apple ",
        "\"Hello!\" ", 
        "ate the ", 
        "said, ", 
        "oh ...
  • Quick Link Converter #18 is the latest revision

    Quick Note: you can view this full-screen without all the code here: http://jsfiddle.net/B1KMusic/c5fryf2r/show I had an idea for implementing a delete-via-button feature for the Link Converter. This is the prototype. It keeps track of the contents of the text area via a global array, and splices from the array using an id stored in each delete button, then wipes the textarea, and re-renders it using the array, and re-renders the links. Unfortunately the code for the Link Converter is very messy and complicated, so this might take a while to implement into the real thing... Edit: On second thought, I'm really loving how fast this is, due to its simplicity. I'll still try to implement this in the old Link Converter, but I might consider putting this on my site as well. Update #1: So I spent some extra time making this pretty Update #2: I've added an undo function when you delete a link. Those who are familiar with Gmail will understand what I mean by "one-step undo". Update #3: I have added the ability to save the contents of the text box. Done manually as auto-save tends to bog apps down Update #4: I added Key combos Ctrl+S = Save Ctrl+Z/U = Undo (when available)

    links.value = "http://google.com[Google]\nhttp://youtube.com[YouTube]";
    var undo_buffer = links.value; // Global so all functions can access ...
  • [CSS] Navbar Arrow-style #2 is the latest revision

    This is a CSS experiment using simple CSS to achieve arrow-like shapes in navbar menu items. The way it works is that Two right-pointing triangles are put on either end of the rectangle containing the text. The left one is white, and is pushed into the rectangle, and the right one is the same color as the rectangle, and is fit snugly at the edge. By simple, I mean no vendor prefixes are used such as -webkit-xxxx-property, and that no complex fine-tuning has been done. All measurements are in units of 5 (or any multiple of) pixels. This ensures that it should render the same in most browsers.

    <div class="nav">
        <div class="arrow-left"></div>
        <div class="nav-text"><a href="#">Home</a></div>
        <div class="arrow-right"></div>
    </div>
    <div class="nav">
        <div class="arrow-left"></div>
        <div class="nav-text"><a href="#">Videos</a></div>
        <div class="arrow-right"></div>
    </div>
    <div class="nav">
        <div class="arrow-left"></div>
        <div class="nav-text"><a href="#">Store</a></div>
        <div class="arrow-right"></div>
    </div>
    <div class="nav">
        <div class="arrow-left"></div>
        <div class="nav-text"><a href="#">About</a></div>
        <div class="arrow-right"></div>
    </div>
  • Color Clock #6 is the latest revision

    This is my quick stab at making a "color clock". Seems to be buggy with the colors. Edit: Fixed color bug Edit: Added radial background

    function getTime(){
        var d = new Date();
        return [d.getHours(), d.getMinutes(), d.getSeconds()];
    }
    
    function getColor(){
        var time = getTime();
        var h ...
  • frames demo #5 is the latest revision

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

    <p>When you reload a normal page, as opposed to a frame, the frame will seem to load faster since the ...</p>