bookmarks

for Olya

by Doeke Wartena

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<img id="bookmark"/>

CSS

body {
  background: red;
}

#bookmark {
  /* border: 10px solid black; */
}

JavaScript

// http://www.michaelbromley.co.uk/blog/90/simple-1d-noise-in-javascript
var Simple1DNoise = function() {
    var MAX_VERTICES = 256;
    var MAX_VERTICES_MASK = MAX_VERTICES -1;
    var amplitude = 1;
    var scale = 1;

    var r = [];

    for ( var i = 0; i < MAX_VERTICES; ++i ) {
        r.push(Math.random());
    }

    var getVal = function( x ){
        var scaledX = x * scale;
        var xFloor = Math.floor(scaledX);
        var t = scaledX - xFloor;
        var tRemapSmoothstep = t * t * ( 3 - 2 * t );

        /// Modulo using &
        var xMin = xFloor & MAX_VERTICES_MASK;
        var xMax = ( xMin + 1 ) & MAX_VERTICES_MASK;

        var y = lerp( r[ xMin ], r[ xMax ], tRemapSmoothstep );

        return y * amplitude;
    };

    /**
    * Linear interpolation function.
    * @param a The lower integer value
    * @param b The upper integer value
    * @param t The value between the two
    * @returns {number}
    */
    var lerp = function(a, b, t ) {
        return a * ( 1 - t ) + b * t;
    };

    // return the API
    return {
        getVal: getVal,
        setAmplitude: function(newAmplitude) {
            amplitude = newAmplitude;
        },
        setScale: function(newScale) {
            scale = newScale;
        }
    };
};


// --------------------------------------------------



// we create an array where we define all the bookmarks to choose from
var bookmark_img_sources = ["http://doekewartena.nl/olya/b01.png", 
									 "http://doekewartena.nl/olya/b02.png",
                   "http://doekewartena.nl/olya/b03.png",
                   "http://doekewartena.nl/olya/b04.png",
                   "http://doekewartena.nl/olya/b05.png"
                   ];
                   
                   
$(function() {

	console.log("jquery ok");
  
  // see how many bookmarks we have:
	console.log("bookmark_img_sources.length: "+bookmark_img_sources.length);  
  
  // now we have to choose one
  // random gives a number between 0 and 1
  //...