tag:blogger.com,1999:blog-2441310466914017833Fri, 16 Jan 2026 00:46:48 +0000infographicbored and insanejohn larwoodanimationartcartooncomicfunnykiller whalemusicOlympicsRobert Burtonambigramapartmentathleticsbiggest badassblackblogbook designboredcardboard sculpturechartcracked.comdatadouchegamegaragebandgood musicgraphic designnew websiteorcaorcinus orcaredresultsroommaterunningshirtsoundcloudstatisticstrack & fieldweb design#NOhalf#SLOhalf1600x12001st gen starters2016400 meters400m8 Mile800 meters800m9gagAndroidEasterEminemFiftten PuzzleIan MalcolmJeff GoldblumJurassic ParkNetflixNew YearPalahniukPop-TartsVelociraptora secret redemptionacousticafter effectsambidexterityambidextrousambigramsambiguousambrose bierceamericanan occurrence at owl creek bridgeand other distressing factsanimated gifappapparelappleart techniquesartistawesomebackgroundbathroombatmanbeachbearbell peppersbernardbiblebird shitblueboredombrightbucky kattbulbasaurbunnyburnsbusinessbuycal polycalifornia polytechnic state universitycaped crusadercardboardcasino royalecatcharmandercheesechickschild safetycleaningclubscolor pickercombinationcomic stripcomparisonconvergencecrackedcrayon artcrazy artcreationcrocodilescrossing guardcrucifixcustomizecutedark knightdark knight risesdeck of cardsdesigndesignerdesktopdevelopmentdiamondsdiarrheadinosaurdiscoverydolphindoodledouching it updrawingdribbble bored and insane eye of the hawk mendocino brewing company select ale redesignducksdudesdumbdumb running soniceaster dayedgar allan poeexistential crisisexpressive typeeyefightflaming hotflourescent guyfollow the boredomfootballfrank the spiderfunny comicgameboyget fuzzygradientshabaneroheartheartsheatheat scalehilarioushoney badgerhothumanhurdlesiOSillustratorin the animal kingdominverted portraitiphonejalapenojesusjust a bunch of wordskeystone lightkillerlame ideaslandletter llightlight artlinklion chasing giraffelook outm16magic squaremarathonmobilemobile sitemodern artnon-dominantnotesofficeon a tankorganizationorganoleptic testpassive aggressivepear filmspearls before swinepeppersperceptionperception is everythingpicassopigpiquancypixel artpointilismpokemonpop tartspredatorprofanitypublic speakingpunpuzzle gamequick sketchquittingrabbitrandomratredesignresolutionsresurrectionretro bowlreversed imageridiculoussanta claussatchel pootchscorched assholescoville heatscoville unitsshark weeksharkssharpiesheepshinyshowersize comparison chartsketchskullslowsmoothsnowsongspadesspicinessspicyspiderspread the insanityspritessquirtlestephan pastisstress is killing yousymbolstankteam editortell-tale heartterrible web sitethe oatmealthe prestigethe toasttotal randomnesstraditionaltradtional arttypographic expressiontypographyunconventionaluniformuniform designsvectorveloci-roostervideovideo gameswallpaperwatching youweb principleswebclip iconwebsitewhalewhaleswinnie the poohwolfwordswormsyoutubezeldazombiezombie jesuszombie movieI am an artist. This is my art.http://boredandinsane.blogspot.com/noreply@blogger.com (Bored and Insane)Blogger53125tag:blogger.com,1999:blog-2441310466914017833.post-4918028389839043889Thu, 15 Jan 2026 04:19:00 +00002026-01-14T20:52:38.041-08:00color pickercustomizefootballgamemobileretro bowlteam editoruniformuniform designs <style> button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */ body, html { height: 100%; display: block; margin: 0; padding: 0; box-sizing: border-box; justify-content: center; align-items: center; font-family: arial; font-size: 12px; } body { /* background: #2f68ff;*/ } .colors { clear: both; display: block; float: left; height:auto; width: 100%; } .colors__inputs { display: block; float:left; text-align: center; } .label { font-size:.8em; font-weight:bold; display: block; padding: .4em auto; width:100%; height:2.1em; } .single { line-height:2.1em; } .colors .jscolor{ border: 1px solid; height: 30px; border-radius: 5px; width:90%; padding:10%; font-size: .9em; } .attribute { display: block; float: left; width: 70px; margin: 10px; text-align: center; } .helmet, .facemask, .logo, .jersey, .sleeve, .pants, .stripe, .sockshigh, .sockslow { transition: 0.25s ease-in-out; } .helmet__overlay, .facemask__overlay, .logo__overlay, .jersey__overlay, .pants__overlay, .stripe__overlay, .sockshigh__overlay, .sockslow__overlay { position: absolute; top: 0; left: 0; } .skin1 {fill:#E7C49F;} .skin2 {fill:#573527;} .skin3 {fill:#ba8857;} .helmet__overlay { z-index: 2; fill: #FFFFFF; } .facemask__overlay { z-index: 3; fill: #9E9E9E; } .logo__overlay { z-index: 2; fill: #FF9F3E; } .jersey__overlay{ z-index: 2; fill: #000000; } .sleeve__overlay{ z-index: 2; fill: #53E227; } .pants__overlay { z-index: 2; fill: #FFA70E; } .stripe__overlay { z-index: 2; fill: #FFFFFF; } .sockshigh__overlay { z-index: 2; fill: #21AAC6; } .sockslow__overlay { z-index: 2; fill: #FFFFFF; } .backgroundcolor__overlay { z-index: 2; fill: #557f31; } .helmet__overlay.fade, .facemask__overlay.fade, .logo__overlay.fade, .jersey__overlay.fade, .pants__overlay.fade, .stripe__overlay.fade, .sockslow__overlay.fade, .sockshigh__overlay.fade { transition: 0.6s ease-in-out; } .gen-random { display: block; float:left; clear:both; background: #2f68ff; padding:15px 30px; margin:10px; border: 1px solid white; color: white; border-radius: 5px; box-shadow: 1px 1px 1px rgba(255, 255, 255, 1.0); font-size: .9em; font-weight: bold; cursor: pointer; } .gen-random:hover { background: #2B60EA; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } .gen-random:active { background: #224BB8; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } @media only screen and (max-width: 800px) { .attribute { width: 50px; margin: 5px; } } </style> <p>Do you enjoy designing custom uniforms for your Retro Bowl teams, but get frustrated entering in a million hex codes?</p> <p>If so, this is a tool for you!</p> <svg style="enable-background: new 0 0 490 210;" version="1.1" viewbox="0 0 490 210" width="90%" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px"> <g id="backgroundcolor"> <rect class="backgroundcolor__overlay" height="210" id="js-background-color" width="490"> </rect></g> <g id="shadow" style="opacity: 0.2;"> <polygon points="150,160 40,160 40,170 30,170 30,180 40,180 40,190 150,190 150,180 160,180 160,170 150,170 "></polygon> <polygon points="300,160 190,160 190,170 180,170 180,180 190,180 190,190 300,190 300,180 310,180 310,170 300,170 "></polygon> <polygon points="450,170 450,160 340,160 340,170 330,170 330,180 340,180 340,190 450,190 450,180 460,180 460,170 "> </polygon></g> <g id="jersey"> <g class="jersey__overlay" id="js-jersey"> <polygon points="70,60 60,60 60,80 50,80 50,100 70,100 70,110 120,110 120,50 70,50 "></polygon> <polygon points="220,60 210,60 210,80 200,80 200,100 220,100 220,110 270,110 270,50 220,50 "></polygon> <polygon points="370,50 370,60 360,60 360,80 350,80 350,100 370,100 370,110 420,110 420,50 "></polygon> </g> </g> <g id="pants"> <g class="pants__overlay" id="js-pants"> <polygon points="110,100 50,100 50,130 60,130 60,150 80,150 80,130 90,130 90,140 120,140 120,120 110,120 "></polygon> <polygon points="260,100 200,100 200,130 210,130 210,150 230,150 230,130 240,130 240,140 270,140 270,120 260,120 "></polygon> <polygon points="410,120 410,100 350,100 350,130 360,130 360,150 380,150 380,130 390,130 390,140 420,140 420,120 "></polygon> </g> </g> <g class="pants_shadow" style="color:#000;opacity:.12;"> <polygon points="260,100 240,100 240,130 240,140 270,140 270,120 260,120 "/> <polygon points="410,100 390,100 390,130 390,140 420,140 420,120 410,120 "/> <polygon points="110,100 90,100 90,130 90,140 120,140 120,120 110,120 "/> </g> <g class="skin1"> <rect height="30" width="20" x="100" y="40"></rect> <polygon points="130,100 130,90 110,90 110,110 120,110 120,120 140,120 140,100 "></polygon> <polygon points="90,80 70,80 70,110 80,110 80,120 100,120 100,100 90,100 "></polygon> </g> <g class="skin2"> <rect height="30" width="20" x="250" y="40"></rect> <polygon points="280,100 280,90 260,90 260,110 270,110 270,120 290,120 290,100 "></polygon> <polygon points="240,80 220,80 220,110 230,110 230,120 250,120 250,100 240,100 "></polygon> </g> <g class="skin3"> <rect height="30" width="20" x="400" y="40"></rect> <polygon points="430,100 430,90 410,90 410,110 420,110 420,120 440,120 440,100 "></polygon> <polygon points="390,80 370,80 370,110 380,110 380,120 400,120 400,100 390,100 "></polygon> </g> <g id="helmet"> <g class="helmet__overlay" id="js-helmet"> <polygon points="120,20 90,20 90,30 80,30 80,60 90,60 90,70 100,70 100,40 130,40 130,30 120,30 "></polygon> <polygon points="270,20 240,20 240,30 230,30 230,60 240,60 240,70 250,70 250,40 280,40 280,30 270,30 "></polygon> <polygon points="420,30 420,20 390,20 390,30 380,30 380,60 390,60 390,70 400,70 400,40 430,40 430,30 "> </polygon> </g> </g> <g id="facemask"> <g class="facemask__overlay" id="js-facemask"> <rect height="10" width="10" x="100" y="50"></rect> <rect height="10" width="20" x="110" y="60"></rect> <rect height="10" width="20" x="260" y="60"></rect> <rect height="10" width="10" x="250" y="50"></rect> <rect height="10" width="10" x="400" y="50"></rect> <rect height="10" width="20" x="410" y="60"></rect> </g> </g> <g id="logo"> <g class="logo__overlay" id="js-logo"> <rect height="10" width="10" x="90" y="30"></rect> <rect height="10" width="10" x="240" y="30"></rect> <rect height="10" width="10" x="390" y="30"></rect> </g> </g> <g id="stripe"> <g class="stripe__overlay" id="js-stripe"> <rect height="30" width="10" x="60" y="100"></rect> <rect height="20" width="10" x="70" y="130"></rect> <rect height="30" width="10" x="210" y="100"></rect> <rect height="20" width="10" x="220" y="130"></rect> <rect height="30" width="10" x="360" y="100"></rect> <rect height="20" width="10" x="370" y="130"></rect> </g> </g> <g id="sockshigh"> <g class="sockshigh__overlay" id="js-sockshigh"> <rect height="10" width="20" x="60" y="150"></rect> <rect height="10" width="20" x="100" y="140"></rect> <rect height="10" width="20" x="210" y="150"></rect> <rect height="10" width="20" x="250" y="140"></rect> <rect height="10" width="20" x="360" y="150"></rect> <rect height="10" width="20" x="400" y="140"></rect> </g> </g> <g id="shoes"> <rect height="10" width="30" x="100" y="160"></rect> <rect height="10" width="30" x="60" y="170"></rect> <rect height="10" width="30" x="250" y="160"></rect> <rect height="10" width="30" x="210" y="170"></rect> <rect height="10" width="30" x="400" y="160"></rect> <rect height="10" width="30" x="360" y="170"></rect> </g> <g id="sockslow"> <g class="sockslow__overlay" id="js-sockslow"> <rect class="st8" height="10" width="20" x="60" y="160"></rect> <rect height="10" width="20" x="100" y="150"></rect> <rect height="10" width="20" x="210" y="160"></rect> <rect height="10" width="20" x="250" y="150"></rect> <rect height="10" width="20" x="360" y="160"></rect> <rect height="10" width="20" x="400" y="150"></rect> </g> </g> <g id="sleeve"> <g class="sleeve__overlay" id="js-sleeve"> <rect height="10" width="20" x="70" y="70"></rect> <rect height="10" width="20" x="220" y="70"></rect> <rect height="10" width="20" x="370" y="70"></rect> </g> </g> </svg> <div class="colors"> <div class="colors__inputs"> <div class="attribute"><span class="label single">HELMET</span><input class="jscolor {onFineChange:'updateHelmet(this)'}" id="js-color-1" value="FFFFFF" /></div> <div class="attribute"><span class="label single">FACEMASK</span><input class="jscolor {onFineChange:'updateFacemask(this)'}" id="js-color-2" value="9E9E9E" /></div> <div class="attribute"><span class="label single">LOGO</span><input class="jscolor {onFineChange:'updateLogo(this)'}" id="js-color-3" value="FF9F3E" /></div> <div class="attribute"><span class="label single">JERSEY</span><input class="jscolor {onFineChange:'updateJersey(this)'}" id="js-color-4" value="000000" /></div> <div class="attribute"><span class="label single">SLEEVE</span><input class="jscolor {onFineChange:'updateSleeve(this)'}" id="js-color-5" value="53E227" /></div> <div class="attribute"><span class="label single">PANTS</span><input class="jscolor {onFineChange:'updatePants(this)'}" id="js-color-6" value="FFA70E" /></div> <div class="attribute"><span class="label single">STRIPE</span><input class="jscolor {onFineChange:'updateStripe(this)'}" id="js-color-7" value="FFFFFF" /></div> <div class="attribute"><span class="label single">SOCKS HIGH</span><input class="jscolor {onFineChange:'updateSockshigh(this)'}" id="js-color-8" value="21AAC6" /></div> <div class="attribute"><span class="label single">SOCKS LOW</span><input class="jscolor {onFineChange:'updateSockslow(this)'}" id="js-color-9" value="FFFFFF" /></div> <button class="gen-random" onclick="generateRandom()">RANDOMIZE</button> </div> </div> <br> <br>&nbsp; <br>&nbsp; <p>Retro Bowl is a fantastic football game that is developed by New Star Games and available on the following platforms:</p> <ul> <li>iOS: <a href="https://apps.apple.com/us/app/retro-bowl/id1478902583">https://apps.apple.com/us/app/retro-bowl/id1478902583</a></li> <li>Android: <a href="https://play.google.com/store/apps/details?id=com.newstargames.retrobowl">https://play.google.com/store/apps/details?id=com.newstargames.retrobowl</a></li> <li>Nintendo Switch: <a href="https://www.nintendo.com/games/detail/retro-bowl-switch/">https://www.nintendo.com/games/detail/retro-bowl-switch/</a></li> </ul> <p> The color picker functionality is built around code from Kyle Wetton: <a href="https://codepen.io/kylewetton/pen/OJLmJoV">https://codepen.io/kylewetton/pen/OJLmJoV</a> </p> <p> <em>Updated Jan 2026: Now includes editable facemask colors!</em> </p> <script>/** * jscolor - JavaScript Color Picker * * @link http://jscolor.com * @license For open source use: GPLv3 * For commercial use: JSColor Commercial License * @author Jan Odvarko * * See usage examples at http://jscolor.com/examples/ */ "use strict"; if (!window.jscolor) { window.jscolor = (function () { var jsc = { register : function () { jsc.attachDOMReadyEvent(jsc.init); jsc.attachEvent(document, 'mousedown', jsc.onDocumentMouseDown); jsc.attachEvent(document, 'touchstart', jsc.onDocumentTouchStart); jsc.attachEvent(window, 'resize', jsc.onWindowResize); }, init : function () { if (jsc.jscolor.lookupClass) { jsc.jscolor.installByClassName(jsc.jscolor.lookupClass); } }, tryInstallOnElements : function (elms, className) { var matchClass = new RegExp('(^|\\s)(' + className + ')(\\s*(\\{[^}]*\\})|\\s|$)', 'i'); for (var i = 0; i < elms.length; i += 1) { if (elms[i].type !== undefined && elms[i].type.toLowerCase() == 'color') { if (jsc.isColorAttrSupported) { // skip inputs of type 'color' if supported by the browser continue; } } var m; if (!elms[i].jscolor && elms[i].className && (m = elms[i].className.match(matchClass))) { var targetElm = elms[i]; var optsStr = null; var dataOptions = jsc.getDataAttr(targetElm, 'jscolor'); if (dataOptions !== null) { optsStr = dataOptions; } else if (m[4]) { optsStr = m[4]; } var opts = {}; if (optsStr) { try { opts = (new Function ('return (' + optsStr + ')'))(); } catch(eParseError) { jsc.warn('Error parsing jscolor options: ' + eParseError + ':\n' + optsStr); } } targetElm.jscolor = new jsc.jscolor(targetElm, opts); } } }, isColorAttrSupported : (function () { var elm = document.createElement('input'); if (elm.setAttribute) { elm.setAttribute('type', 'color'); if (elm.type.toLowerCase() == 'color') { return true; } } return false; })(), isCanvasSupported : (function () { var elm = document.createElement('canvas'); return !!(elm.getContext && elm.getContext('2d')); })(), fetchElement : function (mixed) { return typeof mixed === 'string' ? document.getElementById(mixed) : mixed; }, isElementType : function (elm, type) { return elm.nodeName.toLowerCase() === type.toLowerCase(); }, getDataAttr : function (el, name) { var attrName = 'data-' + name; var attrValue = el.getAttribute(attrName); if (attrValue !== null) { return attrValue; } return null; }, attachEvent : function (el, evnt, func) { if (el.addEventListener) { el.addEventListener(evnt, func, false); } else if (el.attachEvent) { el.attachEvent('on' + evnt, func); } }, detachEvent : function (el, evnt, func) { if (el.removeEventListener) { el.removeEventListener(evnt, func, false); } else if (el.detachEvent) { el.detachEvent('on' + evnt, func); } }, _attachedGroupEvents : {}, attachGroupEvent : function (groupName, el, evnt, func) { if (!jsc._attachedGroupEvents.hasOwnProperty(groupName)) { jsc._attachedGroupEvents[groupName] = []; } jsc._attachedGroupEvents[groupName].push([el, evnt, func]); jsc.attachEvent(el, evnt, func); }, detachGroupEvents : function (groupName) { if (jsc._attachedGroupEvents.hasOwnProperty(groupName)) { for (var i = 0; i < jsc._attachedGroupEvents[groupName].length; i += 1) { var evt = jsc._attachedGroupEvents[groupName][i]; jsc.detachEvent(evt[0], evt[1], evt[2]); } delete jsc._attachedGroupEvents[groupName]; } }, attachDOMReadyEvent : function (func) { var fired = false; var fireOnce = function () { if (!fired) { fired = true; func(); } }; if (document.readyState === 'complete') { setTimeout(fireOnce, 1); // async return; } if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fireOnce, false); // Fallback window.addEventListener('load', fireOnce, false); } else if (document.attachEvent) { // IE document.attachEvent('onreadystatechange', function () { if (document.readyState === 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fireOnce(); } }) // Fallback window.attachEvent('onload', fireOnce); // IE7/8 if (document.documentElement.doScroll && window == window.top) { var tryScroll = function () { if (!document.body) { return; } try { document.documentElement.doScroll('left'); fireOnce(); } catch (e) { setTimeout(tryScroll, 1); } }; tryScroll(); } } }, warn : function (msg) { if (window.console && window.console.warn) { window.console.warn(msg); } }, preventDefault : function (e) { if (e.preventDefault) { e.preventDefault(); } e.returnValue = false; }, captureTarget : function (target) { // IE if (target.setCapture) { jsc._capturedTarget = target; jsc._capturedTarget.setCapture(); } }, releaseTarget : function () { // IE if (jsc._capturedTarget) { jsc._capturedTarget.releaseCapture(); jsc._capturedTarget = null; } }, fireEvent : function (el, evnt) { if (!el) { return; } if (document.createEvent) { var ev = document.createEvent('HTMLEvents'); ev.initEvent(evnt, true, true); el.dispatchEvent(ev); } else if (document.createEventObject) { var ev = document.createEventObject(); el.fireEvent('on' + evnt, ev); } else if (el['on' + evnt]) { // alternatively use the traditional event model el['on' + evnt](); } }, classNameToList : function (className) { return className.replace(/^\s+|\s+$/g, '').split(/\s+/); }, // The className parameter (str) can only contain a single class name hasClass : function (elm, className) { if (!className) { return false; } return -1 != (' ' + elm.className.replace(/\s+/g, ' ') + ' ').indexOf(' ' + className + ' '); }, // The className parameter (str) can contain multiple class names separated by whitespace setClass : function (elm, className) { var classList = jsc.classNameToList(className); for (var i = 0; i < classList.length; i += 1) { if (!jsc.hasClass(elm, classList[i])) { elm.className += (elm.className ? ' ' : '') + classList[i]; } } }, // The className parameter (str) can contain multiple class names separated by whitespace unsetClass : function (elm, className) { var classList = jsc.classNameToList(className); for (var i = 0; i < classList.length; i += 1) { var repl = new RegExp( '^\\s*' + classList[i] + '\\s*|' + '\\s*' + classList[i] + '\\s*$|' + '\\s+' + classList[i] + '(\\s+)', 'g' ); elm.className = elm.className.replace(repl, '$1'); } }, getStyle : function (elm) { return window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle; }, setStyle : (function () { var helper = document.createElement('div'); var getSupportedProp = function (names) { for (var i = 0; i < names.length; i += 1) { if (names[i] in helper.style) { return names[i]; } } }; var props = { borderRadius: getSupportedProp(['borderRadius', 'MozBorderRadius', 'webkitBorderRadius']), boxShadow: getSupportedProp(['boxShadow', 'MozBoxShadow', 'webkitBoxShadow']) }; return function (elm, prop, value) { switch (prop.toLowerCase()) { case 'opacity': var alphaOpacity = Math.round(parseFloat(value) * 100); elm.style.opacity = value; elm.style.filter = 'alpha(opacity=' + alphaOpacity + ')'; break; default: elm.style[props[prop]] = value; break; } }; })(), setBorderRadius : function (elm, value) { jsc.setStyle(elm, 'borderRadius', value || '0'); }, setBoxShadow : function (elm, value) { jsc.setStyle(elm, 'boxShadow', value || 'none'); }, getElementPos : function (e, relativeToViewport) { var x=0, y=0; var rect = e.getBoundingClientRect(); x = rect.left; y = rect.top; if (!relativeToViewport) { var viewPos = jsc.getViewPos(); x += viewPos[0]; y += viewPos[1]; } return [x, y]; }, getElementSize : function (e) { return [e.offsetWidth, e.offsetHeight]; }, // get pointer's X/Y coordinates relative to viewport getAbsPointerPos : function (e) { if (!e) { e = window.event; } var x = 0, y = 0; if (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) { // touch devices x = e.changedTouches[0].clientX; y = e.changedTouches[0].clientY; } else if (typeof e.clientX === 'number') { x = e.clientX; y = e.clientY; } return { x: x, y: y }; }, // get pointer's X/Y coordinates relative to target element getRelPointerPos : function (e) { if (!e) { e = window.event; } var target = e.target || e.srcElement; var targetRect = target.getBoundingClientRect(); var x = 0, y = 0; var clientX = 0, clientY = 0; if (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) { // touch devices clientX = e.changedTouches[0].clientX; clientY = e.changedTouches[0].clientY; } else if (typeof e.clientX === 'number') { clientX = e.clientX; clientY = e.clientY; } x = clientX - targetRect.left; y = clientY - targetRect.top; return { x: x, y: y }; }, getViewPos : function () { var doc = document.documentElement; return [ (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0), (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0) ]; }, getViewSize : function () { var doc = document.documentElement; return [ (window.innerWidth || doc.clientWidth), (window.innerHeight || doc.clientHeight), ]; }, redrawPosition : function () { if (jsc.picker && jsc.picker.owner) { var thisObj = jsc.picker.owner; var tp, vp; if (thisObj.fixed) { // Fixed elements are positioned relative to viewport, // therefore we can ignore the scroll offset tp = jsc.getElementPos(thisObj.targetElement, true); // target pos vp = [0, 0]; // view pos } else { tp = jsc.getElementPos(thisObj.targetElement); // target pos vp = jsc.getViewPos(); // view pos } var ts = jsc.getElementSize(thisObj.targetElement); // target size var vs = jsc.getViewSize(); // view size var ps = jsc.getPickerOuterDims(thisObj); // picker size var a, b, c; switch (thisObj.position.toLowerCase()) { case 'left': a=1; b=0; c=-1; break; case 'right':a=1; b=0; c=1; break; case 'top': a=0; b=1; c=-1; break; default: a=0; b=1; c=1; break; } var l = (ts[b]+ps[b])/2; // compute picker position if (!thisObj.smartPosition) { var pp = [ tp[a], tp[b]+ts[b]-l+l*c ]; } else { var pp = [ -vp[a]+tp[a]+ps[a] > vs[a] ? (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) : tp[a], -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ? (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) : (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c) ]; } var x = pp[a]; var y = pp[b]; var positionValue = thisObj.fixed ? 'fixed' : 'absolute'; var contractShadow = (pp[0] + ps[0] > tp[0] || pp[0] < tp[0] + ts[0]) && (pp[1] + ps[1] < tp[1] + ts[1]); jsc._drawPosition(thisObj, x, y, positionValue, contractShadow); } }, _drawPosition : function (thisObj, x, y, positionValue, contractShadow) { var vShadow = contractShadow ? 0 : thisObj.shadowBlur; // px jsc.picker.wrap.style.position = positionValue; jsc.picker.wrap.style.left = x + 'px'; jsc.picker.wrap.style.top = y + 'px'; jsc.setBoxShadow( jsc.picker.boxS, thisObj.shadow ? new jsc.BoxShadow(0, vShadow, thisObj.shadowBlur, 0, thisObj.shadowColor) : null); }, getPickerDims : function (thisObj) { var displaySlider = !!jsc.getSliderComponent(thisObj); var dims = [ 2 * thisObj.insetWidth + 2 * thisObj.padding + thisObj.width + (displaySlider ? 2 * thisObj.insetWidth + jsc.getPadToSliderPadding(thisObj) + thisObj.sliderSize : 0), 2 * thisObj.insetWidth + 2 * thisObj.padding + thisObj.height + (thisObj.closable ? 2 * thisObj.insetWidth + thisObj.padding + thisObj.buttonHeight : 0) ]; return dims; }, getPickerOuterDims : function (thisObj) { var dims = jsc.getPickerDims(thisObj); return [ dims[0] + 2 * thisObj.borderWidth, dims[1] + 2 * thisObj.borderWidth ]; }, getPadToSliderPadding : function (thisObj) { return Math.max(thisObj.padding, 1.5 * (2 * thisObj.pointerBorderWidth + thisObj.pointerThickness)); }, getPadYComponent : function (thisObj) { switch (thisObj.mode.charAt(1).toLowerCase()) { case 'v': return 'v'; break; } return 's'; }, getSliderComponent : function (thisObj) { if (thisObj.mode.length > 2) { switch (thisObj.mode.charAt(2).toLowerCase()) { case 's': return 's'; break; case 'v': return 'v'; break; } } return null; }, onDocumentMouseDown : function (e) { if (!e) { e = window.event; } var target = e.target || e.srcElement; if (target._jscLinkedInstance) { if (target._jscLinkedInstance.showOnClick) { target._jscLinkedInstance.show(); } } else if (target._jscControlName) { jsc.onControlPointerStart(e, target, target._jscControlName, 'mouse'); } else { // Mouse is outside the picker controls -> hide the color picker! if (jsc.picker && jsc.picker.owner) { jsc.picker.owner.hide(); } } }, onDocumentTouchStart : function (e) { if (!e) { e = window.event; } var target = e.target || e.srcElement; if (target._jscLinkedInstance) { if (target._jscLinkedInstance.showOnClick) { target._jscLinkedInstance.show(); } } else if (target._jscControlName) { jsc.onControlPointerStart(e, target, target._jscControlName, 'touch'); } else { if (jsc.picker && jsc.picker.owner) { jsc.picker.owner.hide(); } } }, onWindowResize : function (e) { jsc.redrawPosition(); }, onParentScroll : function (e) { // hide the picker when one of the parent elements is scrolled if (jsc.picker && jsc.picker.owner) { jsc.picker.owner.hide(); } }, _pointerMoveEvent : { mouse: 'mousemove', touch: 'touchmove' }, _pointerEndEvent : { mouse: 'mouseup', touch: 'touchend' }, _pointerOrigin : null, _capturedTarget : null, onControlPointerStart : function (e, target, controlName, pointerType) { var thisObj = target._jscInstance; jsc.preventDefault(e); jsc.captureTarget(target); var registerDragEvents = function (doc, offset) { jsc.attachGroupEvent('drag', doc, jsc._pointerMoveEvent[pointerType], jsc.onDocumentPointerMove(e, target, controlName, pointerType, offset)); jsc.attachGroupEvent('drag', doc, jsc._pointerEndEvent[pointerType], jsc.onDocumentPointerEnd(e, target, controlName, pointerType)); }; registerDragEvents(document, [0, 0]); if (window.parent && window.frameElement) { var rect = window.frameElement.getBoundingClientRect(); var ofs = [-rect.left, -rect.top]; registerDragEvents(window.parent.window.document, ofs); } var abs = jsc.getAbsPointerPos(e); var rel = jsc.getRelPointerPos(e); jsc._pointerOrigin = { x: abs.x - rel.x, y: abs.y - rel.y }; switch (controlName) { case 'pad': // if the slider is at the bottom, move it up switch (jsc.getSliderComponent(thisObj)) { case 's': if (thisObj.hsv[1] === 0) { thisObj.fromHSV(null, 100, null); }; break; case 'v': if (thisObj.hsv[2] === 0) { thisObj.fromHSV(null, null, 100); }; break; } jsc.setPad(thisObj, e, 0, 0); break; case 'sld': jsc.setSld(thisObj, e, 0); break; } jsc.dispatchFineChange(thisObj); }, onDocumentPointerMove : function (e, target, controlName, pointerType, offset) { return function (e) { var thisObj = target._jscInstance; switch (controlName) { case 'pad': if (!e) { e = window.event; } jsc.setPad(thisObj, e, offset[0], offset[1]); jsc.dispatchFineChange(thisObj); break; case 'sld': if (!e) { e = window.event; } jsc.setSld(thisObj, e, offset[1]); jsc.dispatchFineChange(thisObj); break; } } }, onDocumentPointerEnd : function (e, target, controlName, pointerType) { return function (e) { var thisObj = target._jscInstance; jsc.detachGroupEvents('drag'); jsc.releaseTarget(); // Always dispatch changes after detaching outstanding mouse handlers, // in case some user interaction will occur in user's onchange callback // that would intrude with current mouse events jsc.dispatchChange(thisObj); }; }, dispatchChange : function (thisObj) { if (thisObj.valueElement) { if (jsc.isElementType(thisObj.valueElement, 'input')) { jsc.fireEvent(thisObj.valueElement, 'change'); } } }, dispatchFineChange : function (thisObj) { if (thisObj.onFineChange) { var callback; if (typeof thisObj.onFineChange === 'string') { callback = new Function (thisObj.onFineChange); } else { callback = thisObj.onFineChange; } callback.call(thisObj); } }, setPad : function (thisObj, e, ofsX, ofsY) { var pointerAbs = jsc.getAbsPointerPos(e); var x = ofsX + pointerAbs.x - jsc._pointerOrigin.x - thisObj.padding - thisObj.insetWidth; var y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.insetWidth; var xVal = x * (360 / (thisObj.width - 1)); var yVal = 100 - (y * (100 / (thisObj.height - 1))); switch (jsc.getPadYComponent(thisObj)) { case 's': thisObj.fromHSV(xVal, yVal, null, jsc.leaveSld); break; case 'v': thisObj.fromHSV(xVal, null, yVal, jsc.leaveSld); break; } }, setSld : function (thisObj, e, ofsY) { var pointerAbs = jsc.getAbsPointerPos(e); var y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.insetWidth; var yVal = 100 - (y * (100 / (thisObj.height - 1))); switch (jsc.getSliderComponent(thisObj)) { case 's': thisObj.fromHSV(null, yVal, null, jsc.leavePad); break; case 'v': thisObj.fromHSV(null, null, yVal, jsc.leavePad); break; } }, _vmlNS : 'jsc_vml_', _vmlCSS : 'jsc_vml_css_', _vmlReady : false, initVML : function () { if (!jsc._vmlReady) { // init VML namespace var doc = document; if (!doc.namespaces[jsc._vmlNS]) { doc.namespaces.add(jsc._vmlNS, 'urn:schemas-microsoft-com:vml'); } if (!doc.styleSheets[jsc._vmlCSS]) { var tags = ['shape', 'shapetype', 'group', 'background', 'path', 'formulas', 'handles', 'fill', 'stroke', 'shadow', 'textbox', 'textpath', 'imagedata', 'line', 'polyline', 'curve', 'rect', 'roundrect', 'oval', 'arc', 'image']; var ss = doc.createStyleSheet(); ss.owningElement.id = jsc._vmlCSS; for (var i = 0; i < tags.length; i += 1) { ss.addRule(jsc._vmlNS + '\\:' + tags[i], 'behavior:url(#default#VML);'); } } jsc._vmlReady = true; } }, createPalette : function () { var paletteObj = { elm: null, draw: null }; if (jsc.isCanvasSupported) { // Canvas implementation for modern browsers var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var drawFunc = function (width, height, type) { canvas.width = width; canvas.height = height; ctx.clearRect(0, 0, canvas.width, canvas.height); var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0); hGrad.addColorStop(0 / 6, '#F00'); hGrad.addColorStop(1 / 6, '#FF0'); hGrad.addColorStop(2 / 6, '#0F0'); hGrad.addColorStop(3 / 6, '#0FF'); hGrad.addColorStop(4 / 6, '#00F'); hGrad.addColorStop(5 / 6, '#F0F'); hGrad.addColorStop(6 / 6, '#F00'); ctx.fillStyle = hGrad; ctx.fillRect(0, 0, canvas.width, canvas.height); var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height); switch (type.toLowerCase()) { case 's': vGrad.addColorStop(0, 'rgba(255,255,255,0)'); vGrad.addColorStop(1, 'rgba(255,255,255,1)'); break; case 'v': vGrad.addColorStop(0, 'rgba(0,0,0,0)'); vGrad.addColorStop(1, 'rgba(0,0,0,1)'); break; } ctx.fillStyle = vGrad; ctx.fillRect(0, 0, canvas.width, canvas.height); }; paletteObj.elm = canvas; paletteObj.draw = drawFunc; } else { // VML fallback for IE 7 and 8 jsc.initVML(); var vmlContainer = document.createElement('div'); vmlContainer.style.position = 'relative'; vmlContainer.style.overflow = 'hidden'; var hGrad = document.createElement(jsc._vmlNS + ':fill'); hGrad.type = 'gradient'; hGrad.method = 'linear'; hGrad.angle = '90'; hGrad.colors = '16.67% #F0F, 33.33% #00F, 50% #0FF, 66.67% #0F0, 83.33% #FF0' var hRect = document.createElement(jsc._vmlNS + ':rect'); hRect.style.position = 'absolute'; hRect.style.left = -1 + 'px'; hRect.style.top = -1 + 'px'; hRect.stroked = false; hRect.appendChild(hGrad); vmlContainer.appendChild(hRect); var vGrad = document.createElement(jsc._vmlNS + ':fill'); vGrad.type = 'gradient'; vGrad.method = 'linear'; vGrad.angle = '180'; vGrad.opacity = '0'; var vRect = document.createElement(jsc._vmlNS + ':rect'); vRect.style.position = 'absolute'; vRect.style.left = -1 + 'px'; vRect.style.top = -1 + 'px'; vRect.stroked = false; vRect.appendChild(vGrad); vmlContainer.appendChild(vRect); var drawFunc = function (width, height, type) { vmlContainer.style.width = width + 'px'; vmlContainer.style.height = height + 'px'; hRect.style.width = vRect.style.width = (width + 1) + 'px'; hRect.style.height = vRect.style.height = (height + 1) + 'px'; // Colors must be specified during every redraw, otherwise IE won't display // a full gradient during a subsequential redraw hGrad.color = '#F00'; hGrad.color2 = '#F00'; switch (type.toLowerCase()) { case 's': vGrad.color = vGrad.color2 = '#FFF'; break; case 'v': vGrad.color = vGrad.color2 = '#000'; break; } }; paletteObj.elm = vmlContainer; paletteObj.draw = drawFunc; } return paletteObj; }, createSliderGradient : function () { var sliderObj = { elm: null, draw: null }; if (jsc.isCanvasSupported) { // Canvas implementation for modern browsers var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var drawFunc = function (width, height, color1, color2) { canvas.width = width; canvas.height = height; ctx.clearRect(0, 0, canvas.width, canvas.height); var grad = ctx.createLinearGradient(0, 0, 0, canvas.height); grad.addColorStop(0, color1); grad.addColorStop(1, color2); ctx.fillStyle = grad; ctx.fillRect(0, 0, canvas.width, canvas.height); }; sliderObj.elm = canvas; sliderObj.draw = drawFunc; } else { // VML fallback for IE 7 and 8 jsc.initVML(); var vmlContainer = document.createElement('div'); vmlContainer.style.position = 'relative'; vmlContainer.style.overflow = 'hidden'; var grad = document.createElement(jsc._vmlNS + ':fill'); grad.type = 'gradient'; grad.method = 'linear'; grad.angle = '180'; var rect = document.createElement(jsc._vmlNS + ':rect'); rect.style.position = 'absolute'; rect.style.left = -1 + 'px'; rect.style.top = -1 + 'px'; rect.stroked = false; rect.appendChild(grad); vmlContainer.appendChild(rect); var drawFunc = function (width, height, color1, color2) { vmlContainer.style.width = width + 'px'; vmlContainer.style.height = height + 'px'; rect.style.width = (width + 1) + 'px'; rect.style.height = (height + 1) + 'px'; grad.color = color1; grad.color2 = color2; }; sliderObj.elm = vmlContainer; sliderObj.draw = drawFunc; } return sliderObj; }, leaveValue : 1<<0, leaveStyle : 1<<1, leavePad : 1<<2, leaveSld : 1<<3, BoxShadow : (function () { var BoxShadow = function (hShadow, vShadow, blur, spread, color, inset) { this.hShadow = hShadow; this.vShadow = vShadow; this.blur = blur; this.spread = spread; this.color = color; this.inset = !!inset; }; BoxShadow.prototype.toString = function () { var vals = [ Math.round(this.hShadow) + 'px', Math.round(this.vShadow) + 'px', Math.round(this.blur) + 'px', Math.round(this.spread) + 'px', this.color ]; if (this.inset) { vals.push('inset'); } return vals.join(' '); }; return BoxShadow; })(), // // Usage: // var myColor = new jscolor(<targetElement> [, <options>]) // jscolor : function (targetElement, options) { // General options // this.value = null; // initial HEX color. To change it later, use methods fromString(), fromHSV() and fromRGB() this.valueElement = targetElement; // element that will be used to display and input the color code this.styleElement = targetElement; // element that will preview the picked color using CSS backgroundColor this.required = true; // whether the associated text <input> can be left empty this.refine = true; // whether to refine the entered color code (e.g. uppercase it and remove whitespace) this.hash = false; // whether to prefix the HEX color code with # symbol this.uppercase = true; // whether to uppercase the color code this.onFineChange = null; // called instantly every time the color changes (value can be either a function or a string with javascript code) this.activeClass = 'jscolor-active'; // class to be set to the target element when a picker window is open on it this.minS = 0; // min allowed saturation (0 - 100) this.maxS = 100; // max allowed saturation (0 - 100) this.minV = 0; // min allowed value (brightness) (0 - 100) this.maxV = 100; // max allowed value (brightness) (0 - 100) // Accessing the picked color // this.hsv = [0, 0, 100]; // read-only [0-360, 0-100, 0-100] this.rgb = [255, 255, 255]; // read-only [0-255, 0-255, 0-255] // Color Picker options // this.width = 181; // width of color palette (in px) this.height = 101; // height of color palette (in px) this.showOnClick = true; // whether to display the color picker when user clicks on its target element this.mode = 'HSV'; // HSV | HVS | HS | HV - layout of the color picker controls this.position = 'bottom'; // left | right | top | bottom - position relative to the target element this.smartPosition = true; // automatically change picker position when there is not enough space for it this.sliderSize = 16; // px this.crossSize = 8; // px this.closable = false; // whether to display the Close button this.closeText = 'Close'; this.buttonColor = '#000000'; // CSS color this.buttonHeight = 18; // px this.padding = 12; // px this.backgroundColor = '#FFFFFF'; // CSS color this.borderWidth = 1; // px this.borderColor = '#BBBBBB'; // CSS color this.borderRadius = 8; // px this.insetWidth = 1; // px this.insetColor = '#BBBBBB'; // CSS color this.shadow = true; // whether to display shadow this.shadowBlur = 15; // px this.shadowColor = 'rgba(0,0,0,0.2)'; // CSS color this.pointerColor = '#4C4C4C'; // px this.pointerBorderColor = '#FFFFFF'; // px this.pointerBorderWidth = 1; // px this.pointerThickness = 2; // px this.zIndex = 1000; this.container = null; // where to append the color picker (BODY element by default) for (var opt in options) { if (options.hasOwnProperty(opt)) { this[opt] = options[opt]; } } this.hide = function () { if (isPickerOwner()) { detachPicker(); } }; this.show = function () { drawPicker(); }; this.redraw = function () { if (isPickerOwner()) { drawPicker(); } }; this.importColor = function () { if (!this.valueElement) { this.exportColor(); } else { if (jsc.isElementType(this.valueElement, 'input')) { if (!this.refine) { if (!this.fromString(this.valueElement.value, jsc.leaveValue)) { if (this.styleElement) { this.styleElement.style.backgroundImage = this.styleElement._jscOrigStyle.backgroundImage; this.styleElement.style.backgroundColor = this.styleElement._jscOrigStyle.backgroundColor; this.styleElement.style.color = this.styleElement._jscOrigStyle.color; } this.exportColor(jsc.leaveValue | jsc.leaveStyle); } } else if (!this.required && /^\s*$/.test(this.valueElement.value)) { this.valueElement.value = ''; if (this.styleElement) { this.styleElement.style.backgroundImage = this.styleElement._jscOrigStyle.backgroundImage; this.styleElement.style.backgroundColor = this.styleElement._jscOrigStyle.backgroundColor; this.styleElement.style.color = this.styleElement._jscOrigStyle.color; } this.exportColor(jsc.leaveValue | jsc.leaveStyle); } else if (this.fromString(this.valueElement.value)) { // managed to import color successfully from the value -> OK, don't do anything } else { this.exportColor(); } } else { // not an input element -> doesn't have any value this.exportColor(); } } }; this.exportColor = function (flags) { if (!(flags & jsc.leaveValue) && this.valueElement) { var value = this.toString(); if (this.uppercase) { value = value.toUpperCase(); } if (this.hash) { value = '#' + value; } if (jsc.isElementType(this.valueElement, 'input')) { this.valueElement.value = value; } else { this.valueElement.innerHTML = value; } } if (!(flags & jsc.leaveStyle)) { if (this.styleElement) { this.styleElement.style.backgroundImage = 'none'; this.styleElement.style.backgroundColor = '#' + this.toString(); this.styleElement.style.color = this.isLight() ? '#000' : '#FFF'; } } if (!(flags & jsc.leavePad) && isPickerOwner()) { redrawPad(); } if (!(flags & jsc.leaveSld) && isPickerOwner()) { redrawSld(); } }; // h: 0-360 // s: 0-100 // v: 0-100 // this.fromHSV = function (h, s, v, flags) { // null = don't change if (h !== null) { if (isNaN(h)) { return false; } h = Math.max(0, Math.min(360, h)); } if (s !== null) { if (isNaN(s)) { return false; } s = Math.max(0, Math.min(100, this.maxS, s), this.minS); } if (v !== null) { if (isNaN(v)) { return false; } v = Math.max(0, Math.min(100, this.maxV, v), this.minV); } this.rgb = HSV_RGB( h===null ? this.hsv[0] : (this.hsv[0]=h), s===null ? this.hsv[1] : (this.hsv[1]=s), v===null ? this.hsv[2] : (this.hsv[2]=v) ); this.exportColor(flags); }; // r: 0-255 // g: 0-255 // b: 0-255 // this.fromRGB = function (r, g, b, flags) { // null = don't change if (r !== null) { if (isNaN(r)) { return false; } r = Math.max(0, Math.min(255, r)); } if (g !== null) { if (isNaN(g)) { return false; } g = Math.max(0, Math.min(255, g)); } if (b !== null) { if (isNaN(b)) { return false; } b = Math.max(0, Math.min(255, b)); } var hsv = RGB_HSV( r===null ? this.rgb[0] : r, g===null ? this.rgb[1] : g, b===null ? this.rgb[2] : b ); if (hsv[0] !== null) { this.hsv[0] = Math.max(0, Math.min(360, hsv[0])); } if (hsv[2] !== 0) { this.hsv[1] = hsv[1]===null ? null : Math.max(0, this.minS, Math.min(100, this.maxS, hsv[1])); } this.hsv[2] = hsv[2]===null ? null : Math.max(0, this.minV, Math.min(100, this.maxV, hsv[2])); // update RGB according to final HSV, as some values might be trimmed var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]); this.rgb[0] = rgb[0]; this.rgb[1] = rgb[1]; this.rgb[2] = rgb[2]; this.exportColor(flags); }; this.fromString = function (str, flags) { var m; if (m = str.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i)) { // HEX notation // if (m[1].length === 6) { // 6-char notation this.fromRGB( parseInt(m[1].substr(0,2),16), parseInt(m[1].substr(2,2),16), parseInt(m[1].substr(4,2),16), flags ); } else { // 3-char notation this.fromRGB( parseInt(m[1].charAt(0) + m[1].charAt(0),16), parseInt(m[1].charAt(1) + m[1].charAt(1),16), parseInt(m[1].charAt(2) + m[1].charAt(2),16), flags ); } return true; } else if (m = str.match(/^\W*rgba?\(([^)]*)\)\W*$/i)) { var params = m[1].split(','); var re = /^\s*(\d*)(\.\d+)?\s*$/; var mR, mG, mB; if ( params.length >= 3 && (mR = params[0].match(re)) && (mG = params[1].match(re)) && (mB = params[2].match(re)) ) { var r = parseFloat((mR[1] || '0') + (mR[2] || '')); var g = parseFloat((mG[1] || '0') + (mG[2] || '')); var b = parseFloat((mB[1] || '0') + (mB[2] || '')); this.fromRGB(r, g, b, flags); return true; } } return false; }; this.toString = function () { return ( (0x100 | Math.round(this.rgb[0])).toString(16).substr(1) + (0x100 | Math.round(this.rgb[1])).toString(16).substr(1) + (0x100 | Math.round(this.rgb[2])).toString(16).substr(1) ); }; this.toHEXString = function () { return '#' + this.toString().toUpperCase(); }; this.toRGBString = function () { return ('rgb(' + Math.round(this.rgb[0]) + ',' + Math.round(this.rgb[1]) + ',' + Math.round(this.rgb[2]) + ')' ); }; this.isLight = function () { return ( 0.213 * this.rgb[0] + 0.715 * this.rgb[1] + 0.072 * this.rgb[2] > 255 / 2 ); }; this._processParentElementsInDOM = function () { if (this._linkedElementsProcessed) { return; } this._linkedElementsProcessed = true; var elm = this.targetElement; do { // If the target element or one of its parent nodes has fixed position, // then use fixed positioning instead // // Note: In Firefox, getComputedStyle returns null in a hidden iframe, // that's why we need to check if the returned style object is non-empty var currStyle = jsc.getStyle(elm); if (currStyle && currStyle.position.toLowerCase() === 'fixed') { this.fixed = true; } if (elm !== this.targetElement) { // Ensure to attach onParentScroll only once to each parent element // (multiple targetElements can share the same parent nodes) // // Note: It's not just offsetParents that can be scrollable, // that's why we loop through all parent nodes if (!elm._jscEventsAttached) { jsc.attachEvent(elm, 'scroll', jsc.onParentScroll); elm._jscEventsAttached = true; } } } while ((elm = elm.parentNode) && !jsc.isElementType(elm, 'body')); }; // r: 0-255 // g: 0-255 // b: 0-255 // // returns: [ 0-360, 0-100, 0-100 ] // function RGB_HSV (r, g, b) { r /= 255; g /= 255; b /= 255; var n = Math.min(Math.min(r,g),b); var v = Math.max(Math.max(r,g),b); var m = v - n; if (m === 0) { return [ null, 0, 100 * v ]; } var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m); return [ 60 * (h===6?0:h), 100 * (m/v), 100 * v ]; } // h: 0-360 // s: 0-100 // v: 0-100 // // returns: [ 0-255, 0-255, 0-255 ] // function HSV_RGB (h, s, v) { var u = 255 * (v / 100); if (h === null) { return [ u, u, u ]; } h /= 60; s /= 100; var i = Math.floor(h); var f = i%2 ? h-i : 1-(h-i); var m = u * (1 - s); var n = u * (1 - s * f); switch (i) { case 6: case 0: return [u,n,m]; case 1: return [n,u,m]; case 2: return [m,u,n]; case 3: return [m,n,u]; case 4: return [n,m,u]; case 5: return [u,m,n]; } } function detachPicker () { jsc.unsetClass(THIS.targetElement, THIS.activeClass); jsc.picker.wrap.parentNode.removeChild(jsc.picker.wrap); delete jsc.picker.owner; } function drawPicker () { // At this point, when drawing the picker, we know what the parent elements are // and we can do all related DOM operations, such as registering events on them // or checking their positioning THIS._processParentElementsInDOM(); if (!jsc.picker) { jsc.picker = { owner: null, wrap : document.createElement('div'), box : document.createElement('div'), boxS : document.createElement('div'), // shadow area boxB : document.createElement('div'), // border pad : document.createElement('div'), padB : document.createElement('div'), // border padM : document.createElement('div'), // mouse/touch area padPal : jsc.createPalette(), cross : document.createElement('div'), crossBY : document.createElement('div'), // border Y crossBX : document.createElement('div'), // border X crossLY : document.createElement('div'), // line Y crossLX : document.createElement('div'), // line X sld : document.createElement('div'), sldB : document.createElement('div'), // border sldM : document.createElement('div'), // mouse/touch area sldGrad : jsc.createSliderGradient(), sldPtrS : document.createElement('div'), // slider pointer spacer sldPtrIB : document.createElement('div'), // slider pointer inner border sldPtrMB : document.createElement('div'), // slider pointer middle border sldPtrOB : document.createElement('div'), // slider pointer outer border btn : document.createElement('div'), btnT : document.createElement('span') // text }; jsc.picker.pad.appendChild(jsc.picker.padPal.elm); jsc.picker.padB.appendChild(jsc.picker.pad); jsc.picker.cross.appendChild(jsc.picker.crossBY); jsc.picker.cross.appendChild(jsc.picker.crossBX); jsc.picker.cross.appendChild(jsc.picker.crossLY); jsc.picker.cross.appendChild(jsc.picker.crossLX); jsc.picker.padB.appendChild(jsc.picker.cross); jsc.picker.box.appendChild(jsc.picker.padB); jsc.picker.box.appendChild(jsc.picker.padM); jsc.picker.sld.appendChild(jsc.picker.sldGrad.elm); jsc.picker.sldB.appendChild(jsc.picker.sld); jsc.picker.sldB.appendChild(jsc.picker.sldPtrOB); jsc.picker.sldPtrOB.appendChild(jsc.picker.sldPtrMB); jsc.picker.sldPtrMB.appendChild(jsc.picker.sldPtrIB); jsc.picker.sldPtrIB.appendChild(jsc.picker.sldPtrS); jsc.picker.box.appendChild(jsc.picker.sldB); jsc.picker.box.appendChild(jsc.picker.sldM); jsc.picker.btn.appendChild(jsc.picker.btnT); jsc.picker.box.appendChild(jsc.picker.btn); jsc.picker.boxB.appendChild(jsc.picker.box); jsc.picker.wrap.appendChild(jsc.picker.boxS); jsc.picker.wrap.appendChild(jsc.picker.boxB); } var p = jsc.picker; var displaySlider = !!jsc.getSliderComponent(THIS); var dims = jsc.getPickerDims(THIS); var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize); var padToSliderPadding = jsc.getPadToSliderPadding(THIS); var borderRadius = Math.min( THIS.borderRadius, Math.round(THIS.padding * Math.PI)); // px var padCursor = 'crosshair'; // wrap p.wrap.style.clear = 'both'; p.wrap.style.width = (dims[0] + 2 * THIS.borderWidth) + 'px'; p.wrap.style.height = (dims[1] + 2 * THIS.borderWidth) + 'px'; p.wrap.style.zIndex = THIS.zIndex; p.wrap.style.touchAction = 'none'; // picker p.box.style.width = dims[0] + 'px'; p.box.style.height = dims[1] + 'px'; p.boxS.style.position = 'absolute'; p.boxS.style.left = '0'; p.boxS.style.top = '0'; p.boxS.style.width = '100%'; p.boxS.style.height = '100%'; jsc.setBorderRadius(p.boxS, borderRadius + 'px'); // picker border p.boxB.style.position = 'relative'; p.boxB.style.border = THIS.borderWidth + 'px solid'; p.boxB.style.borderColor = THIS.borderColor; p.boxB.style.background = THIS.backgroundColor; jsc.setBorderRadius(p.boxB, borderRadius + 'px'); // IE hack: // If the element is transparent, IE will trigger the event on the elements under it, // e.g. on Canvas or on elements with border p.padM.style.background = p.sldM.style.background = '#FFF'; jsc.setStyle(p.padM, 'opacity', '0'); jsc.setStyle(p.sldM, 'opacity', '0'); // pad p.pad.style.position = 'relative'; p.pad.style.width = THIS.width + 'px'; p.pad.style.height = THIS.height + 'px'; // pad palettes (HSV and HVS) p.padPal.draw(THIS.width, THIS.height, jsc.getPadYComponent(THIS)); // pad border p.padB.style.position = 'absolute'; p.padB.style.left = THIS.padding + 'px'; p.padB.style.top = THIS.padding + 'px'; p.padB.style.border = THIS.insetWidth + 'px solid'; p.padB.style.borderColor = THIS.insetColor; // pad mouse area p.padM._jscInstance = THIS; p.padM._jscControlName = 'pad'; p.padM.style.position = 'absolute'; p.padM.style.left = '0'; p.padM.style.top = '0'; p.padM.style.width = (THIS.padding + 2 * THIS.insetWidth + THIS.width + padToSliderPadding / 2) + 'px'; p.padM.style.height = dims[1] + 'px'; p.padM.style.cursor = padCursor; p.padM.style.touchAction = 'none'; // pad cross p.cross.style.position = 'absolute'; p.cross.style.left = p.cross.style.top = '0'; p.cross.style.width = p.cross.style.height = crossOuterSize + 'px'; // pad cross border Y and X p.crossBY.style.position = p.crossBX.style.position = 'absolute'; p.crossBY.style.background = p.crossBX.style.background = THIS.pointerBorderColor; p.crossBY.style.width = p.crossBX.style.height = (2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px'; p.crossBY.style.height = p.crossBX.style.width = crossOuterSize + 'px'; p.crossBY.style.left = p.crossBX.style.top = (Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2) - THIS.pointerBorderWidth) + 'px'; p.crossBY.style.top = p.crossBX.style.left = '0'; // pad cross line Y and X p.crossLY.style.position = p.crossLX.style.position = 'absolute'; p.crossLY.style.background = p.crossLX.style.background = THIS.pointerColor; p.crossLY.style.height = p.crossLX.style.width = (crossOuterSize - 2 * THIS.pointerBorderWidth) + 'px'; p.crossLY.style.width = p.crossLX.style.height = THIS.pointerThickness + 'px'; p.crossLY.style.left = p.crossLX.style.top = (Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2)) + 'px'; p.crossLY.style.top = p.crossLX.style.left = THIS.pointerBorderWidth + 'px'; // slider p.sld.style.overflow = 'hidden'; p.sld.style.width = THIS.sliderSize + 'px'; p.sld.style.height = THIS.height + 'px'; // slider gradient p.sldGrad.draw(THIS.sliderSize, THIS.height, '#000', '#000'); // slider border p.sldB.style.display = displaySlider ? 'block' : 'none'; p.sldB.style.position = 'absolute'; p.sldB.style.right = THIS.padding + 'px'; p.sldB.style.top = THIS.padding + 'px'; p.sldB.style.border = THIS.insetWidth + 'px solid'; p.sldB.style.borderColor = THIS.insetColor; // slider mouse area p.sldM._jscInstance = THIS; p.sldM._jscControlName = 'sld'; p.sldM.style.display = displaySlider ? 'block' : 'none'; p.sldM.style.position = 'absolute'; p.sldM.style.right = '0'; p.sldM.style.top = '0'; p.sldM.style.width = (THIS.sliderSize + padToSliderPadding / 2 + THIS.padding + 2 * THIS.insetWidth) + 'px'; p.sldM.style.height = dims[1] + 'px'; p.sldM.style.cursor = 'default'; // slider pointer inner and outer border p.sldPtrIB.style.border = p.sldPtrOB.style.border = THIS.pointerBorderWidth + 'px solid ' + THIS.pointerBorderColor; // slider pointer outer border p.sldPtrOB.style.position = 'absolute'; p.sldPtrOB.style.left = -(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px'; p.sldPtrOB.style.top = '0'; // slider pointer middle border p.sldPtrMB.style.border = THIS.pointerThickness + 'px solid ' + THIS.pointerColor; // slider pointer spacer p.sldPtrS.style.width = THIS.sliderSize + 'px'; p.sldPtrS.style.height = sliderPtrSpace + 'px'; // the Close button function setBtnBorder () { var insetColors = THIS.insetColor.split(/\s+/); var outsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1]; p.btn.style.borderColor = outsetColor; } p.btn.style.display = THIS.closable ? 'block' : 'none'; p.btn.style.position = 'absolute'; p.btn.style.left = THIS.padding + 'px'; p.btn.style.bottom = THIS.padding + 'px'; p.btn.style.padding = '0 15px'; p.btn.style.height = THIS.buttonHeight + 'px'; p.btn.style.border = THIS.insetWidth + 'px solid'; setBtnBorder(); p.btn.style.color = THIS.buttonColor; p.btn.style.font = '12px sans-serif'; p.btn.style.textAlign = 'center'; try { p.btn.style.cursor = 'pointer'; } catch(eOldIE) { p.btn.style.cursor = 'hand'; } p.btn.onmousedown = function () { THIS.hide(); }; p.btnT.style.lineHeight = THIS.buttonHeight + 'px'; p.btnT.innerHTML = ''; p.btnT.appendChild(document.createTextNode(THIS.closeText)); // place pointers redrawPad(); redrawSld(); // If we are changing the owner without first closing the picker, // make sure to first deal with the old owner if (jsc.picker.owner && jsc.picker.owner !== THIS) { jsc.unsetClass(jsc.picker.owner.targetElement, THIS.activeClass); } // Set the new picker owner jsc.picker.owner = THIS; // The redrawPosition() method needs picker.owner to be set, that's why we call it here, // after setting the owner if (jsc.isElementType(container, 'body')) { jsc.redrawPosition(); } else { jsc._drawPosition(THIS, 0, 0, 'relative', false); } if (p.wrap.parentNode != container) { container.appendChild(p.wrap); } jsc.setClass(THIS.targetElement, THIS.activeClass); } function redrawPad () { // redraw the pad pointer switch (jsc.getPadYComponent(THIS)) { case 's': var yComponent = 1; break; case 'v': var yComponent = 2; break; } var x = Math.round((THIS.hsv[0] / 360) * (THIS.width - 1)); var y = Math.round((1 - THIS.hsv[yComponent] / 100) * (THIS.height - 1)); var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize); var ofs = -Math.floor(crossOuterSize / 2); jsc.picker.cross.style.left = (x + ofs) + 'px'; jsc.picker.cross.style.top = (y + ofs) + 'px'; // redraw the slider switch (jsc.getSliderComponent(THIS)) { case 's': var rgb1 = HSV_RGB(THIS.hsv[0], 100, THIS.hsv[2]); var rgb2 = HSV_RGB(THIS.hsv[0], 0, THIS.hsv[2]); var color1 = 'rgb(' + Math.round(rgb1[0]) + ',' + Math.round(rgb1[1]) + ',' + Math.round(rgb1[2]) + ')'; var color2 = 'rgb(' + Math.round(rgb2[0]) + ',' + Math.round(rgb2[1]) + ',' + Math.round(rgb2[2]) + ')'; jsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2); break; case 'v': var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 100); var color1 = 'rgb(' + Math.round(rgb[0]) + ',' + Math.round(rgb[1]) + ',' + Math.round(rgb[2]) + ')'; var color2 = '#000'; jsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2); break; } } function redrawSld () { var sldComponent = jsc.getSliderComponent(THIS); if (sldComponent) { // redraw the slider pointer switch (sldComponent) { case 's': var yComponent = 1; break; case 'v': var yComponent = 2; break; } var y = Math.round((1 - THIS.hsv[yComponent] / 100) * (THIS.height - 1)); jsc.picker.sldPtrOB.style.top = (y - (2 * THIS.pointerBorderWidth + THIS.pointerThickness) - Math.floor(sliderPtrSpace / 2)) + 'px'; } } function isPickerOwner () { return jsc.picker && jsc.picker.owner === THIS; } function blurValue () { THIS.importColor(); } // Find the target element if (typeof targetElement === 'string') { var id = targetElement; var elm = document.getElementById(id); if (elm) { this.targetElement = elm; } else { jsc.warn('Could not find target element with ID \'' + id + '\''); } } else if (targetElement) { this.targetElement = targetElement; } else { jsc.warn('Invalid target element: \'' + targetElement + '\''); } if (this.targetElement._jscLinkedInstance) { jsc.warn('Cannot link jscolor twice to the same element. Skipping.'); return; } this.targetElement._jscLinkedInstance = this; // Find the value element this.valueElement = jsc.fetchElement(this.valueElement); // Find the style element this.styleElement = jsc.fetchElement(this.styleElement); var THIS = this; var container = this.container ? jsc.fetchElement(this.container) : document.getElementsByTagName('body')[0]; var sliderPtrSpace = 3; // px // For BUTTON elements it's important to stop them from sending the form when clicked // (e.g. in Safari) if (jsc.isElementType(this.targetElement, 'button')) { if (this.targetElement.onclick) { var origCallback = this.targetElement.onclick; this.targetElement.onclick = function (evt) { origCallback.call(this, evt); return false; }; } else { this.targetElement.onclick = function () { return false; }; } } /* var elm = this.targetElement; do { // If the target element or one of its offsetParents has fixed position, // then use fixed positioning instead // // Note: In Firefox, getComputedStyle returns null in a hidden iframe, // that's why we need to check if the returned style object is non-empty var currStyle = jsc.getStyle(elm); if (currStyle && currStyle.position.toLowerCase() === 'fixed') { this.fixed = true; } if (elm !== this.targetElement) { // attach onParentScroll so that we can recompute the picker position // when one of the offsetParents is scrolled if (!elm._jscEventsAttached) { jsc.attachEvent(elm, 'scroll', jsc.onParentScroll); elm._jscEventsAttached = true; } } } while ((elm = elm.offsetParent) && !jsc.isElementType(elm, 'body')); */ // valueElement if (this.valueElement) { if (jsc.isElementType(this.valueElement, 'input')) { var updateField = function () { THIS.fromString(THIS.valueElement.value, jsc.leaveValue); jsc.dispatchFineChange(THIS); }; jsc.attachEvent(this.valueElement, 'keyup', updateField); jsc.attachEvent(this.valueElement, 'input', updateField); jsc.attachEvent(this.valueElement, 'blur', blurValue); this.valueElement.setAttribute('autocomplete', 'off'); } } // styleElement if (this.styleElement) { this.styleElement._jscOrigStyle = { backgroundImage : this.styleElement.style.backgroundImage, backgroundColor : this.styleElement.style.backgroundColor, color : this.styleElement.style.color }; } if (this.value) { // Try to set the color from the .value option and if unsuccessful, // export the current color this.fromString(this.value) || this.exportColor(); } else { this.importColor(); } } }; //================================ // Public properties and methods //================================ // By default, search for all elements with class="jscolor" and install a color picker on them. // // You can change what class name will be looked for by setting the property jscolor.lookupClass // anywhere in your HTML document. To completely disable the automatic lookup, set it to null. // jsc.jscolor.lookupClass = 'jscolor'; jsc.jscolor.installByClassName = function (className) { var inputElms = document.getElementsByTagName('input'); var buttonElms = document.getElementsByTagName('button'); jsc.tryInstallOnElements(inputElms, className); jsc.tryInstallOnElements(buttonElms, className); }; jsc.register(); return jsc.jscolor; })(); }</script> <script>var background = ["#24243e", "#302b63"]; const helmet = document.getElementById("js-helmet"); const facemask = document.getElementById("js-facemask"); const logo = document.getElementById("js-logo"); const jersey = document.getElementById("js-jersey"); const sleeve = document.getElementById("js-sleeve"); const pants = document.getElementById("js-pants"); const stripe = document.getElementById("js-stripe"); const sockshigh = document.getElementById("js-sockshigh"); const sockslow = document.getElementById("js-sockslow"); function updateHelmet(picker, string) { if (!string) { helmet.style.fill = picker.toHEXString(); } else { // Used when generating random helmet.style.fill = string; setTimeout(function(){helmet.classList.remove("fade");}, 700); } } function updateFacemask(picker, string) { if (!string) { facemask.style.fill = picker.toHEXString(); } else { // Used when generating random facemask.style.fill = string; setTimeout(function(){facemask.classList.remove("fade");}, 700); } } function updateLogo(picker, string) { if (!string) { logo.style.fill = picker.toHEXString(); } else { // Used when generating random logo.style.fill = string; setTimeout(function(){logo.classList.remove("fade");}, 700); } } function updateJersey(picker, string) { if (!string) { jersey.style.fill = picker.toHEXString(); } else { // Used when generating random jersey.style.fill = string; setTimeout(function(){jersey.classList.remove("fade");}, 700); } } function updateSleeve(picker, string) { if (!string) { sleeve.style.fill = picker.toHEXString(); } else { // Used when generating random sleeve.style.fill = string; setTimeout(function(){sleeve.classList.remove("fade");}, 700); } } function updatePants(picker, string) { if (!string) { pants.style.fill = picker.toHEXString(); } else { // Used when generating random pants.style.fill = string; setTimeout(function(){pants.classList.remove("fade");}, 700); } } function updateStripe(picker, string) { if (!string) { stripe.style.fill = picker.toHEXString(); } else { // Used when generating random stripe.style.fill = string; setTimeout(function(){stripe.classList.remove("fade");}, 700); } } function updateSockshigh(picker, string) { if (!string) { sockshigh.style.fill = picker.toHEXString(); } else { // Used when generating random sockshigh.style.fill = string; setTimeout(function(){sockshigh.classList.remove("fade");}, 700); } } function updateSockslow(picker, string) { if (!string) { sockslow.style.fill = picker.toHEXString(); } else { // Used when generating random sockslow.style.fill = string; setTimeout(function(){sockslow.classList.remove("fade");}, 700); } } // Generate random function generateRandom() { // Couch var red = Math.floor(Math.random() * 256) ; var green = Math.floor(Math.random() * 256) ; var blue = Math.floor(Math.random() * 256) ; var red2 = Math.floor(Math.random() * 256) ; var green2 = Math.floor(Math.random() * 256) ; var blue2 = Math.floor(Math.random() * 256) ; var red3 = Math.floor(Math.random() * 256) ; var green3 = Math.floor(Math.random() * 256) ; var blue3 = Math.floor(Math.random() * 256) ; var red4 = Math.floor(Math.random() * 256) ; var green4 = Math.floor(Math.random() * 256) ; var blue4 = Math.floor(Math.random() * 256) ; var red5 = Math.floor(Math.random() * 256) ; var green5 = Math.floor(Math.random() * 256) ; var blue5 = Math.floor(Math.random() * 256) ; var red6 = Math.floor(Math.random() * 256) ; var green6 = Math.floor(Math.random() * 256) ; var blue6 = Math.floor(Math.random() * 256) ; var red7 = Math.floor(Math.random() * 256) ; var green7 = Math.floor(Math.random() * 256) ; var blue7 = Math.floor(Math.random() * 256) ; var red8 = Math.floor(Math.random() * 256) ; var green8 = Math.floor(Math.random() * 256) ; var blue8 = Math.floor(Math.random() * 256) ; var red9 = Math.floor(Math.random() * 256) ; var green9 = Math.floor(Math.random() * 256) ; var blue9 = Math.floor(Math.random() * 256) ; let hex1 = rgbToHex(red, green, blue); let hex2 = rgbToHex(red2, green2, blue2); let hex3 = rgbToHex(red3, green3, blue3); let hex4 = rgbToHex(red4, green4, blue4); let hex5 = rgbToHex(red5, green5, blue5); let hex6 = rgbToHex(red6, green6, blue6); let hex7 = rgbToHex(red7, green7, blue7); let hex8 = rgbToHex(red8, green8, blue8); let hex9 = rgbToHex(red9, green9, blue9); updateHelmet(null, hex1); updateFacemask(null, hex2); updateLogo(null, hex3); updateJersey(null, hex4); updateSleeve(null, hex5); updatePants(null, hex6); updateStripe(null, hex7); updateSockshigh(null, hex8); updateSockslow(null, hex9); helmet.classList.add("fade"); document.getElementById('js-color-1') .jscolor.fromString(hex1); facemask.classList.add("fade"); document.getElementById('js-color-2') .jscolor.fromString(hex2); logo.classList.add("fade"); document.getElementById('js-color-3') .jscolor.fromString(hex3); jersey.classList.add("fade"); document.getElementById('js-color-4') .jscolor.fromString(hex4); sleeve.classList.add("fade"); document.getElementById('js-color-5') .jscolor.fromString(hex5); pants.classList.add("fade"); document.getElementById('js-color-6') .jscolor.fromString(hex6); stripe.classList.add("fade"); document.getElementById('js-color-7') .jscolor.fromString(hex7); sockshigh.classList.add("fade"); document.getElementById('js-color-8') .jscolor.fromString(hex8); sockslow.classList.add("fade"); document.getElementById('js-color-9') .jscolor.fromString(hex9); } function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); }</script> http://boredandinsane.blogspot.com/2022/02/retro-bowl-color-picker.htmlnoreply@blogger.com (Bored and Insane)7tag:blogger.com,1999:blog-2441310466914017833.post-4401377734696319673Sat, 28 Aug 2021 09:35:00 +00002021-08-28T02:35:47.445-07:00400 meters400mafter effectsathleticschartdatahurdlesinfographicOlympicsresultsrunningstatisticstrack & field<p>Another Olympic event that was fascinating this year was the 400m Hurdles — both the Men and Women races had some very impressive world record times!</p> <div class="separator" style="clear: both; text-align: left;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='600' height='498' src='https://www.blogger.com/video.g?token=AD6v5dxkSfxFETsCdGisNR4-0_mmZt6E-rG1NLyzFDUChezS-Z-Tb-6LyUUoQzyRsritUSlLn0sWfS_ELXGxzigt1g' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div> <h2>TOOLS</h2> <p>Numbers app, Illustrator, After Effects, Google/Wikipedia</p> <h2>SOURCES</h2> <p>Olympic finals results: <ul> <li><a href="https://www.olympedia.org">https://www.olympedia.org</a></li> </ul> </p> <p>World Leading Times and World Records — I was unable to find the world leading times for the 1955 & 1958 seasons: <ul> <li><a href="https://www.worldathletics.org/records/all-time-toplists/hurdles/400-metres-hurdles/outdoor/women/senior">https://www.worldathletics.org/records/all-time-toplists/hurdles/400-metres-hurdles/outdoor/women/senior</a></li> <li><a href="https://www.worldathletics.org/records/all-time-toplists/hurdles/400-metres-hurdles/outdoor/men/senior">https://www.worldathletics.org/records/all-time-toplists/hurdles/400-metres-hurdles/outdoor/men/senior</a></li> <li><a href="http://trackfield.brinkster.net">http://trackfield.brinkster.net</a></li> </ul> </p> <p>Edwin Moses: <ul> <li><a href="https://olympics.com/en/video/edwin-moses-the-unbeatable-hurdler">https://olympics.com/en/video/edwin-moses-the-unbeatable-hurdler</a></li> </ul> </p> <br>http://boredandinsane.blogspot.com/2021/08/a-chart-of-olympic-400m-hurdles-finals.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-5706294639677536393Wed, 11 Aug 2021 11:22:00 +00002021-08-28T01:06:38.092-07:00800 meters800mathleticschartdatainfographicOlympicsresultsrunningstatisticstrack & field <p> <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCrnmXCBVU7Y6EDZyEU2YO8HdUuXa6Fhugd9DdR1lSFB1cLhealczsrPbBmy_JomtPEqJpgGfe0EZu5LdFgTq-__MlZzxUq_MoHwKcnrIYihnY6XLCETPCJDYaGYwDXMtdxA5vJa7fLYMm/s2048/Bored-and-Insane_Mens-Athletics-800m-Olympic-Finals-Chart%25402x.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="600" data-original-height="1422" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCrnmXCBVU7Y6EDZyEU2YO8HdUuXa6Fhugd9DdR1lSFB1cLhealczsrPbBmy_JomtPEqJpgGfe0EZu5LdFgTq-__MlZzxUq_MoHwKcnrIYihnY6XLCETPCJDYaGYwDXMtdxA5vJa7fLYMm/s600/Bored-and-Insane_Mens-Athletics-800m-Olympic-Finals-Chart%25402x.png"/></a></div> </p> <p>I was fascinated by the relatively slow times in the men’s 800m final this Olympics, and went down a rabbit hole looking through the history of the men’s 800m. Then I figured I might as well put my graphic designer knowledge to good use and share my findings!</p> <p>Of the Olympics finals since 1948, the 800m final in 2000 had the most comparable result to the 2020 final — both had relatively slow winning times and very narrow range of times (less than 1.5 seconds difference between the first and last place runners): <ul> <li>Tokyo 2020 fastest/slowest times: 1:45.06 – 1:46.53</li> <li style="list-style-type: circle; margin-left:1em;" >Difference of 1.47 seconds between 1st & last (9 runners)</li> <li style="list-style-type: circle; margin-left:1em;" >The average of the Olympic final times is 2.92 seconds slower than the world leading time for the year</li> <li>Sydney 2000 fastest/slowest times: 1:45.08 – 1:46.24</li> <li style="list-style-type: circle; margin-left:1em;" >Difference of 1.16 seconds between 1st & last (8 runners, including one disqualified runner who finished around 1:45.60)</li> <li style="list-style-type: circle; margin-left:1em;" >The average of the Olympic final times is 2.35 seconds slower than the world leading time for the year</li> </ul> </p> <h2>TOOLS</h2> <p>Numbers app, Illustrator, Google/Wikipedia</p> <h2>SOURCES</h2> <p>Olympic finals results:</p> <ul> <li><a href="https://www.olympedia.org/results/358610">https://www.olympedia.org/results/358610</a></li> </ul> <p>World Leading Times and World Records — I was unable to find a few of the world leading times in years prior to 1966:</p> <ul> <li><a href="https://www.worldathletics.org/records/all-time-toplists/middlelong/800-metres/outdoor/men/senior">https://www.worldathletics.org/records/all-time-toplists/middlelong/800-metres/outdoor/men/senior</a></li> <li><a href="http://trackfield.brinkster.net">http://trackfield.brinkster.net</a></li> </ul>http://boredandinsane.blogspot.com/2021/08/a-chart-of-mens-olympic-800m-finals.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-910132723410671458Sun, 08 Aug 2021 03:33:00 +00002022-01-10T00:02:26.407-08:001st gen startersbluebulbasaurcharmandergameboyheartlinkpixel artpokemonredshirtspritessquirtlevideo gameszelda<p> Hey, what d'you know, in a world full of super-accessible social media, Patreons, and too many streaming services to keep track of, Google Blogger somehow still exists, for god-knows what demographic. And I'm back here as bored and insane as ever!</p> <p> I've been playing with some pixels because sometimes simple is what we need. Sometimes simple is comfort. And in a world of constant chaos, uncertainty, and unrest, one thing still holds very true — people are suckers for nostalgia: </p> <p> <div style="text-align:center;line-height:150%"> <a href="https://www.zazzle.com/minimalist_monsters_t_shirt-235880169400261951" rel="nofollow"><img src="https://rlv.zcache.com/minimalist_monsters_t_shirt-r866ec5f2156e4813871f72bcc8d42734_k2gm8_1024.jpg?max_dim=500" alt="Minimalist Monsters T-Shirt" style="border:0;" /></a> <br/> <a href="https://www.zazzle.com/minimalist_monsters_t_shirt-235880169400261951" rel="nofollow">Minimalist Monsters T-Shirt</a> <br/>by <a href="https://www.zazzle.com/store/pearboy" rel="nofollow">PearBoy</a> </div> </p> <p> <div style="text-align:center;line-height:150%"> <a href="https://www.zazzle.com/video_game_pixel_heart_button-145517968126748327"><img src="https://rlv.zcache.com/video_game_pixel_heart_button-rd9968ac4e8644a28a17b321985019c23_k94r8_1024.jpg?rlvnet=1&max_dim=325" alt="Video Game Pixel Heart Button" style="border:0;" /></a> <br/> <a href="https://www.zazzle.com/video_game_pixel_heart_button-145517968126748327">Video Game Pixel Heart Button</a> <br/>by <a href="https://www.zazzle.com/store/pearboy">PearBoy</a> </div> </p> http://boredandinsane.blogspot.com/2021/08/pixel-fun.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-3302366859342583639Sat, 13 Aug 2016 22:25:00 +00002017-07-12T20:41:03.744-07:00comicexistential crisissharpie<p> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vvM38tvXLj0LGQVLY_k3BvVi2Hc05wmjQ7YYekb9goeBu0Gafi91XF5nDb_kTLAcmKHy98vDAsZvTo1Kdl9r0ehDZYRKN5NlMKxn4WDhxtoMtEWZrIU_r-7fATprdsWpfp4ugY5v9Tax/s1600/Larwood_Existential_Crisis.JPG" imageanchor="1" rel="lightbox[Enjoy your existential crisis!]"><img alt="Enjoy your existential crisis!" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vvM38tvXLj0LGQVLY_k3BvVi2Hc05wmjQ7YYekb9goeBu0Gafi91XF5nDb_kTLAcmKHy98vDAsZvTo1Kdl9r0ehDZYRKN5NlMKxn4WDhxtoMtEWZrIU_r-7fATprdsWpfp4ugY5v9Tax/s1600/Larwood_Existential_Crisis.JPG" title="Enjoy your existential crisis!" width="600" /></a><br /> </p> <p> If you can't have a little fun, what's the point? </p>http://boredandinsane.blogspot.com/2016/08/enjoy-you-existential-crisis.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-2981025667736453113Sun, 01 May 2016 16:36:00 +00002016-05-01T09:50:10.819-07:00#NOhalf#SLOhalfmarathonNetflix<p>You win some, you lose some.</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/lXjjrJ4jHZA" frameborder="0" allowfullscreen></iframe>http://boredandinsane.blogspot.com/2016/05/slo-half-marathon-2016.htmlnoreply@blogger.com (Bored and Insane)1tag:blogger.com,1999:blog-2441310466914017833.post-1397863052298270551Mon, 18 Jan 2016 07:47:00 +00002016-01-17T23:48:22.376-08:00cartoondinosaurIan MalcolmJeff GoldblumJurassic Parkpunveloci-roosterVelociraptor<p> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2K9QXROUc7Mc7sgsi3lf1_nT7EWjzJN8GGY6YS6q3Zu87lU61HgjCNMRoiHDC-8aMMIa8tAHzSnpK0UZXi9gtXWM1iFj9sveRfGdqjqqzoBLencjpU5JIX9bDrRTl1rQvenTwoUjS3wnX/s1600/Veloci-rooster_800x600.jpg" imageanchor="1" rel="lightbox[Veloci-rooster]"><img alt="Veloci-rooster" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2K9QXROUc7Mc7sgsi3lf1_nT7EWjzJN8GGY6YS6q3Zu87lU61HgjCNMRoiHDC-8aMMIa8tAHzSnpK0UZXi9gtXWM1iFj9sveRfGdqjqqzoBLencjpU5JIX9bDrRTl1rQvenTwoUjS3wnX/s640/Veloci-rooster_800x600.jpg" width="600" /></a> </p> <p> I may have been so preoccupied with whether or not I could that I didn't stop to think if I should. </p>http://boredandinsane.blogspot.com/2016/01/veloci-rooster.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-5882751408917554948Sat, 02 Jan 2016 00:39:00 +00002016-09-24T14:09:18.316-07:002016New Yearresolutions<p> The New Year has arrived like a big, blank, sparkling clean whiteboard, ready to be defaced and discolored by malodorous streaks of rainbow color. You know some idiot is going to use a goddamn permanent marker again, after you spent all that time cleaning it off last time. "Sharpie" looks nothing like "Expo" — learn to read, assholes!<br /> </p> <p> What I mean to say is, today is a natural time for both reflection and resolution. </p> <p> Unfortunately, even with considerable reflection, I have no recollection of making any resolutions a year ago. I either completely neglected to make any resolutions at all, or I failed so spectacularly at resolving myself that I have willfully forgotten any ever existed. In either case, I am not making any resolutions this year. </p> <p> What I <i>will</i> be doing, is writing this post. </p> <p> Look at that. I already finished it! 2016 is off to a great start. </p>http://boredandinsane.blogspot.com/2016/01/new-thoughts-for-new-year.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-8247312772512946484Sat, 22 Aug 2015 19:09:00 +00002021-08-08T08:50:45.920-07:00AndroidappFiftten PuzzleiOSmagic squarepuzzle gamesmooth<p>My friend and I made our first app — a puzzle game for iOS and Android:</p> <p><img border="0" width="256px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJQadhOAvc1eH0mBZ5fXXpAoeDIXSigN5zVPZ1RgyNxlcGaGbV-rDj5Oq7Y0765aa6tM5wfx3ot9A2Fi9bM_4uwgL-yJYS4FzB94CPPoxzSQdZBFsM2vVD-7tjOH7frk_hw8t1A2s8tJU/s1600/app_icon_android_512x512.png" /></p> <p> <b>Download Fifteen for iOS:</b></br> <a href="https://itunes.apple.com/us/app/fifteen-puzzle-game/id974511729?mt=8">https://itunes.apple.com/us/app/fifteen-puzzle-game/id974511729?mt=8</a> </p> <p> <b>Download Fifteen for Android:</b></br> <a href="https://play.google.com/store/apps/details?id=com.RobertBurton.Fifteen&hl=en">https://play.google.com/store/apps/details?id=com.RobertBurton.Fifteen&hl=en</a> </p> <p> Stay tuned for more games at <a href="http://apartment-five.com/">apartment-five.com</a>, and maybe some more posts on this ghost town of a blog! </p>http://boredandinsane.blogspot.com/2015/08/fifteen-puzzle-game.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-7545519165031884523Sat, 31 Jan 2015 07:55:00 +00002015-01-31T00:01:40.578-08:00garagebandmusicsoundcloud<p>Well, it looks like I went an entire year without blogging any posts (or would it be 'posting any blogs'?). I guess I didn't have anything remotely interesting to write or share for over 365 days.</p> <p> Here's some more musical malarkey I made during my year away from boredom and insanity:</p> <p> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/128961122&amp;color=0070b0&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> </p> <p> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/133775491&amp;color=0070b0&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> </p> <p> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137569607&amp;color=0070b0&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> </p> <p> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/166513762&amp;color=0070b0&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> </p> <p> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/173970067&amp;color=0070b0&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> </p>http://boredandinsane.blogspot.com/2015/01/music-time-part-ii.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-4343915244623738971Sun, 22 Dec 2013 03:57:00 +00002013-12-21T20:01:49.804-08:00garagebandmusicsoundcloud<p>Now that I'm a full-time designer, I spend much less of my free time doing anything design-related. In fact, I tend to squander the majority of my free time watching South Park and mindlessly browsing Reddit.</p> <p>Lately, I've managed to stay somewhat productive with audio experimentation— despite having a very tentative understanding of music theory:</p> <p> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/124744560&amp;color=0070b0&amp;auto_play=false&amp;show_artwork=true"></iframe> </p> <p> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/125929338&amp;color=0070b0&amp;auto_play=false&amp;show_artwork=true"></iframe></p> <br> <p> Here's a track from a couple years ago. My musically-talented friend once said he liked it, which was really all the encouragement I needed:</p> <p> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123782128&amp;color=0070b0&amp;auto_play=false&amp;show_artwork=true"></iframe></p>http://boredandinsane.blogspot.com/2013/12/music-time.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-5485995614749252405Sat, 05 Oct 2013 05:59:00 +00002017-07-12T23:02:24.992-07:00convergencePalahniuk<img src="http://johnlarwood.com/images/boredandinsane/Palahniuk_convergence.png" width="500px" style="border:1px #ccc solid;" alt="I am the combined effort of everybody I've ever known."/>http://boredandinsane.blogspot.com/2013/10/combined-effort.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-2451665657256003012Tue, 24 Sep 2013 05:15:00 +00002013-10-27T09:32:47.933-07:00honey badgerinfographickeystone lightlame ideasquittingwinnie the pooh<p> After publishing my <a href="http://www.cracked.com/article_19437_how-stress-killing-you-5Bchart5D.html">stress infographic</a> in 2011, I began researching and sketching for TWO brand new infographic ideas. </p> <p> Since it has become increasingly clear that I will never complete either of those infographics, I would like to share some small pieces of what I have created in sporadic fits of inspiration over the past two years. </p> <p> Enjoy these meager offerings— they are a sad, but necessary farewell to abandoned ideas: </p> <p> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFYK9Vf2zLDwUkmlxEdPj5sBcNDH4tXNqcSsnIgjuuz4jtxApNc2fQwLEyYXOToYJUy3FEsdbRuKT6Ek4LBM_-BuYOjRu8KWMVe2QXpvz4RAI4mny97nke2elJ0XLP9Vig0BhyphenhyphenNFDH46lW/s1600/honey-badger_badass-name-chart.jpg" alt="honey badger infographic name chart"/> </p> <p> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0AtpVp9p8dCCMsDKfI4pyUqyICpcaWSqChzb6G_h6QjwdSIe9rB_7rwQu6jqzpHCjll2eNjJCCRxiOXErGH8GR2kG-9mFfD0_H2zzxx0Eupugg-jZttFmDYltOjeaQUdHsHiu2si-35zp/s1600/honey-the-badger.png" alt="honey badger winnie the pooh" title="Oh bother..."/> </p> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrARW2JCg1thpwDmneClzvsWIzbVtOUdbRLFLUDVLVgYboMddOQVEzQMPwDg15WWljr6NVRbfBX2vScm2FxMhOQBH8CU3JX35J-mLhmoAfS7dw_t7lgJz3J51d5d-rZqhgTH0UkWzgkciY/s1600/douche_title_excerpt.png" /> <p> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruhOYeo30mcWphKIYMjo5CplsqXX0pW1MqghR5Dy_x3u3fkP3DwYeDC_paPqUe4_KTdx6ukwmh6qpqUxaUvE5BRLMgYjJ_elzI2xNNFxmsjVr3BuiRVUE05Gwn9JAvH7JBWcNwdpCQ8VI/s1600/douche_excerpt.png" alt="douche" /> </p>http://boredandinsane.blogspot.com/2013/09/honey-badger.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-4882423989486886455Sun, 30 Sep 2012 00:41:00 +00002016-01-02T15:34:37.239-08:00modern artmusicpicasso<p>I made a video.</p> <iframe width="560" height="315" src="http://www.youtube.com/embed/kxGuZ4kTf7A" frameborder="0" allowfullscreen></iframe> <p>I don't even know why.</p>http://boredandinsane.blogspot.com/2012/09/an-ode-to-modern-art.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-7229297748791086537Thu, 26 Jul 2012 21:22:00 +00002017-07-12T21:25:49.646-07:00artbatmancaped crusaderdark knightdark knight risesdoodlequick sketchsketch<p>I saw <em>The Dark Knight Rises</em> last weekend— a fantastic end to a superb trilogy!</p> <p> <a href="http://johnlarwood.com/images/boredandinsane/ScannedImage.jpg" imageanchor="1" rel="lightbox[batman!]"> <img alt="If you make yourself more than just a man..." src="http://johnlarwood.com/images/boredandinsane/ScannedImage-1.jpg"/> </a> </p> <p> Major props to <a href="https://www.facebook.com/hanszimmer">Hans Zimmer</a>, who has very decisively become my favorite movie composer in the last few years (He also worked on <em>Inception</em> and <em>Pirates of the Caribbean</em>). </p> <p> Best track from the score: <a href="http://youtu.be/EgQYveThqwI"><em>Rise</em></a>. </p>http://boredandinsane.blogspot.com/2012/07/rise.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-8018268611395672909Sat, 30 Jun 2012 03:09:00 +00002017-07-12T20:36:21.918-07:00ambidexterityambidextrousartistbucky kattcomic stripdrawingget fuzzynon-dominantpearls before swinepigratsatchel pootchstephan pastis<p>For those of you who don't know, I have been training my non-dominant (left) hand for quite some time, in the hope that I will one day be ambidextrous. It has been an interesting journey.</p> <p><center><img alt="Get Fuzzy lefty doodle." src="http://johnlarwood.com/images/boredandinsane/get-fuzzy_doodle.jpg"/> <div class="caption">Bucky and Satchel have been less than supportive.</div> </center> </p> <p>Also, if you don't know what Get Fuzzy is, <a href="http://www.gocomics.com/getfuzzy/">GO READ IT, NOW</a>.</p> <p> <strong>Update 6/30/2012</strong> <br> I got a request for some Pearls Before Swine: </p> <p> <a href="http://johnlarwood.com/images/boredandinsane/pearls-before-swine_doodle3.jpg" imageanchor="1" rel="lightbox[swine]"><img src="http://johnlarwood.com/images/boredandinsane/pearls-before-swine_doodle3.jpg" width="600"/></a> </p> <p>You should be reading <a href="http://www.gocomics.com/pearlsbeforeswine/">this strip</a>, as well.</p> <p>(And speaking of left-handed drawing, this is a <a href="http://www.amazon.com/Because-Sometimes-Just-Gotta-Cover/dp/1449410235">peculiar coincidence</a>)</p>http://boredandinsane.blogspot.com/2012/06/ambidexterity-in-progress.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-751912824745664341Sat, 05 May 2012 06:50:00 +00002017-07-12T22:00:48.257-07:00dribbble bored and insane eye of the hawk mendocino brewing company select ale redesign<p>While I have been patiently waiting for some awesome person (yes, YOU!) to invite me to <a href="http://dribbble.com/johnlarwood">Dribbble</a>, I have been pondering alternative methods to display my design work on the internet. Only today did I realize that I can just pretend my blog <em>is</em> Dribbble. <p> So, here is a shot of my latest school project— <a href="http://www.behance.net/gallery/Eye-of-the-Hawk-redesign/3902985">a redesign of Eye of the Hawk Select Ale:</a></p> <center><p><a href="http://www.behance.net/gallery/Eye-of-the-Hawk-redesign/3902985"><img height="420" width="420" src="http://johnlarwood.com/images/boredandinsane/eye_of_the_hawk_shot.jpg" /></a></p></center>http://boredandinsane.blogspot.com/2012/05/i-still-havent-been-invited-to-dribbble.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-2758601081471963955Tue, 10 Apr 2012 05:36:00 +00002017-07-12T21:32:55.629-07:00ambrose biercean occurrence at owl creek bridgebook design<p> I designed, printed, and hand-bound another book! </p> <p> <em>An Occurrence At Owl Creek Bridge</em> is a short story set during the Civil War: </p> <center> <p><a href="http://johnlarwood.com/images/boredandinsane/artwork/owlcreek-1_WEB.jpg" imageanchor="1" rel="lightbox[owlcreek]"> <img src="http://johnlarwood.com/images/boredandinsane/artwork/owlcreek-1_WEB.jpg" alt="An Occurrence At Owl Creek Bridge" border="0" /></a> </p> <p><a href="http://johnlarwood.com/images/boredandinsane/artwork/owlcreek-2_WEB.jpg" imageanchor="1" rel="lightbox[owlcreek]"> <img class="border half" style="margin: 0.5em;" src="http://johnlarwood.com/images/boredandinsane/artwork/owlcreek-2_WEB-thumb.jpg" alt="" border="0" /></a> <a href="http://johnlarwood.com/images/boredandinsane/artwork/owlcreek-3_WEB.jpg" imageanchor="1" rel="lightbox[owlcreek]"> <img class="border half" style="margin: 0.5em;" src="http://johnlarwood.com/images/boredandinsane/artwork/owlcreek-3_WEB-thumb.jpg" alt="" border="0" /></a> </p> <p><a href="http://johnlarwood.com/images/boredandinsane/artwork/OwlCreekBridge_cover_WEB.jpg" imageanchor="1" rel="lightbox[owlcreek]"> <img src="http://johnlarwood.com/images/boredandinsane/artwork/OwlCreekBridge_cover_WEB.jpg" alt="" border="0" /></a> </p> </center> <p> Special thanks to <a href="http://schoneberger365.blogspot.com/">Brian Schoneberger</a> for the photography. </p>http://boredandinsane.blogspot.com/2012/04/occurrence-at-owl-creek-bridge.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-1831053209839176182Sat, 25 Feb 2012 19:45:00 +00002017-07-12T20:30:53.970-07:00appleboredomfollow the boredomiphonemobile sitespread the insanitywebclip icon<img style="display:none;" height="1" src="http://johnlarwood.com/images/boredandinsane/boredandinsane_mobile_THUMB.jpg" /> <p>The Bored and Insane mobile site has officially launched! Bookmark the blog on your iphone homescreen and feast your eyes on the new webclip icon!</p> <p>Grab your nearest mobile device and check it out:</p> <p> <img alt="Bored and Insane mobile site— Boredom has never been so amazingly convenient" src="http://johnlarwood.com/images/boredandinsane/boredandinsanemobile.jpg" /><br> <img alt="Bored and Insane mobile site— Spread the insanity!" src="http://johnlarwood.com/images/boredandinsane/boredandinsanemobile2.jpg" /> </p> <p> Oh, and let me know if anything is broken. I created and edited quite a bit of CSS code to get this to work— both for the mobile site and the full site— so there is a good chance that something went horribly wrong somewhere. </p>http://boredandinsane.blogspot.com/2012/02/bored-and-insane-mobile-is-here.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-6833935495609369818Fri, 03 Feb 2012 19:10:00 +00002012-07-26T14:42:44.023-07:00<p> I've been having difficulties with Disqus syncing for awhile, and I'll be doing some major troubleshooting in the next couple days. So if you're leaving an extended critique of my work and the comment system starts acting inexplicably retarded, it's probably because I've fucked up the code really, really badly. </p> <p> Come back in a few days, and you should have no trouble posting disparaging insults all over my blog posts. </p> <p> <strong>Update May 2012:</strong><br> I completed scrapped Disqus and just customized Blogger's native comment system. Now I don't have to worry about syncing at all! </p>http://boredandinsane.blogspot.com/2012/02/disqus-commenting-might-be-down-for-bit.htmlnoreply@blogger.com (Bored and Insane)2tag:blogger.com,1999:blog-2441310466914017833.post-7978621286137531656Tue, 31 Jan 2012 00:05:00 +00002017-07-12T20:32:22.929-07:00apartmentcleaningdouchedouching it upnotespassive aggressiveroommate<p>So, remember how I was leaving passive-aggressive notes around my apartment in an ongoing effort to <a href="http://boredandinsane.blogspot.com/2011/10/douching-it-up-how-i-keep-my-apartment.html">promote cleanliness?</a></p> <p>It turns out I might have a protegé:</p> <center> <p> <img src="http://johnlarwood.com/images/boredandinsane/apartment_douchery.jpg" title="A little sparse with the passive; A bit much with the aggressive." alt="A little sparse with the passive; A bit much with the aggressive."> </p> </center> He's got the aggressive side down— we'll just have to work a little more on the passive.http://boredandinsane.blogspot.com/2012/01/douching-it-up-part-2-cleaning-with.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-5048166206534921912Sat, 21 Jan 2012 01:58:00 +00002017-07-12T20:34:17.577-07:001600x1200backgroundbored and insanecrackedcracked.comdesktopillustratorinfographicjohn larwoodvectorwallpaper<img style="display:none;" height="1" src="http://johnlarwood.com/images/boredandinsane/Peppers_wallpaper-01_THUMB.jpg" /> <div class="hidden"><h1>Bored and Insane Desktop Backgrounds.</h1>Adorn your computers with boredom and insanity.</div> <p> Hey guys, I made some desktop backgrounds based off my <a href="http://www.cracked.com">Cracked</a> infographics. </p> <p> Put them on your computers. Put them on your friends computers. Print them out and glue them to the walls of your lavishly decorated mansions: </p> <center> <p> <a href="http://johnlarwood.com/images/boredandinsane/Peppers_wallpaper-02.jpg" > <img src="http://johnlarwood.com/images/boredandinsane/Peppers_wallpaper-02_THUMB.jpg" alt='old school pepper science desktop background'><br> (click to view full size)</a> </p> <p> <a href="http://johnlarwood.com/images/boredandinsane/killerwhale_wallpaper-01.jpg" > <img src="http://johnlarwood.com/images/boredandinsane/killerwhale_wallpaper-01_THUMB.jpg" alt='badass killer whale desktop background'><br> (click to view full size)</a> </p> <p> <a href="http://johnlarwood.com/images/boredandinsane/Peppers_wallpaper-01.jpg"> <img src="http://johnlarwood.com/images/boredandinsane/Peppers_wallpaper-01_THUMB.jpg" alt='fiery seed dispersal desktop background'><br> (click to view full size)</a> </p> <p> <a href="http://johnlarwood.com/images/boredandinsane/killerwhale_wallpaper-02.jpg"> <img src="http://johnlarwood.com/images/boredandinsane/killerwhale_wallpaper-02_THUMB.jpg" alt='badass killer whale desktop background'><br> (click to view full size)</a> </p> </center> <p>At the very least, print them out and use them as toilet paper.</p>http://boredandinsane.blogspot.com/2012/01/spread-insanity-with-desktop-wallpapers.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-8491306660825068572Thu, 22 Dec 2011 20:00:00 +00002017-07-23T07:32:26.656-07:00animated gifanimationdumb running sonic<img style="display:none;" height="1" src="http://johnlarwood.com/images/boredandinsane/dumb_running_sonic.jpg" /> <div class="hidden"><h1>Dumb Running Sonic.</h1> I made an animated gif of Sonic running like an idiot.</div> <p>Just in case you haven't heard, there is this blog called <a href="http://dumbrunningsonic.tumblr.com/" target="blank">Dumb Running Sonic</a>, which is solely devoted to animated gifs of Sonic running like an idiot.</p> <p>Here is my contribution:</p> <center> <img class="reduced-width" src="http://johnlarwood.com/images/boredandinsane/dumb_running_sonicgif.gif" /> <br /> <img src="http://johnlarwood.com/images/boredandinsane/dumb_running_sonic-1.jpg" style="height: 10px; visibility: hidden;" /> </center>http://boredandinsane.blogspot.com/2011/10/dumb-running-sonic.htmlnoreply@blogger.com (Bored and Insane)0tag:blogger.com,1999:blog-2441310466914017833.post-6101779338074774745Mon, 10 Oct 2011 00:22:00 +00002017-07-12T21:54:02.007-07:00apartmentdoucheroommate<p> Have you ever heard the saying "cleanliness is next to godliness?"</p> <p> I like this saying because I happen to ascribe a lot of value to keeping things nice and tidy. Unfortunately, my two roommates are not as inclined toward cleanliness as I am, and I find myself occasionally miffed by their failure to perform basic tasks like <a href="http://boredandinsane.blogspot.com/2011/05/organization.html" target="blank">cleaning dishes</a> or <a href="http://johnlarwood.com/images/boredandinsane/are_you_going_to_empty_that.jpg" rel="lightbox[blah]">throwing out their trash.</a></p> <p> Naturally, I have found that the most effective remedy for this issue is to leave a large quantity of douchey, passive-aggressive notes all over the apartment:</p> <center> <img border="0" width="443" src="http://johnlarwood.com/images/boredandinsane/living4.jpg" alt="An optimist would say this glass is half full. I say someone needs to clean up their shit."/></center> <center> <img border="0" width="550" src="http://johnlarwood.com/images/boredandinsane/living2.jpg" alt="I am a bagel. Eat me or throw me away!"/></center> <center> <img border="0" width="413" src="http://johnlarwood.com/images/boredandinsane/living3.jpg" alt="Dried pasta is only good for arts and crafts."/></center> <center> <img border="0" width="550" src="http://johnlarwood.com/images/boredandinsane/living1.jpg" alt="Place trash here:"/></center> <center> <p> <img border="0" src="http://johnlarwood.com/images/boredandinsane/living_continued2.jpg" alt="Given enough time, evaporation will finish your drinks for you...but it sure as hell won't wash your dishes." /> </p> </center> <p> </p> I would like to thank Shakespeare for this last one: <p> <center> <img width="550" src="http://johnlarwood.com/images/boredandinsane/living5-1.jpg" /><br> <span class="caption">(I am deeply sorry for breaking iambic pentameter.)</span></center> </p> <p> <strong>2012 UPDATE:</strong> </p> <p> <center> <img src="http://johnlarwood.com/images/boredandinsane/living6.jpg" alt="Looks clean to me!" /> </center> </p> <br> <p> My roommate left this chicken breast in our fridge for about a month: </p> <center> <p> <img src="http://johnlarwood.com/images/boredandinsane/Free_chicken.jpg" alt="Rotting chicken in the fridge!" /> </p> <p> <img src="http://johnlarwood.com/images/boredandinsane/living_bowls.jpg" alt="Do your dishes, I want to eat my cereal." /> </p> </center>http://boredandinsane.blogspot.com/2011/10/douching-it-up-how-i-keep-my-apartment.htmlnoreply@blogger.com (Bored and Insane)6tag:blogger.com,1999:blog-2441310466914017833.post-8527803084498668516Wed, 14 Sep 2011 20:50:00 +00002017-07-12T23:06:23.922-07:00animationartcomicgamesheepworms<center><img alt="Worms comic" src="http://johnlarwood.com/images/boredandinsane/Worms-edit.jpg" style="border: 2px #ccc solid;" /></center> <p>I made this comic in 2007, back when I still used Flash MX for <i>everything</i>. This was probably my last digital comic of any sort before I started making infographics.</p> <p>(Oh and if you're wondering why it says by <i>PearBoy</i>, that most likely means you didn't know me during my <a href="http://www.newgrounds.com/portal/view/307407">animation</a> days.)</p>http://boredandinsane.blogspot.com/2011/09/blast-from-past-worms-comic.htmlnoreply@blogger.com (Bored and Insane)0