New - Pastie

Language:

## mark a section (Learn more)

<!DOCTYPE HTML> <html lang="en"> <head> <title>Harmony - Procedural drawing tool</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <script type="text/javascript" src="colorpicker/js/jquery.js"></script> <script type="text/javascript" src="colorpicker/js/colorpicker.js"></script> <script type="text/javascript" src="colorpicker/js/eye.js"></script> <script type="text/javascript" src="colorpicker/js/utils.js"></script> <script type="text/javascript" src="colorpicker/js/layout.js?ver=1.0.2"></script> <link rel="stylesheet" href="colorpicker/css/colorpicker.css" type="text/css" /> <link rel="stylesheet" media="screen" type="text/css" href="colorpicker/css/layout.css" /> <style type="text/css"> * { color: #444; font-family:Monospace; font-size:12px; } body { background-color: #fff; margin: 0px; overflow: hidden; } #menu { position: absolute; width: 400px; background-color: #eee; margin: auto; padding: 5px 10px; text-align: center; text-transform: uppercase; visibility: hidden; } input, select { text-transform: uppercase; text-align:center; } #colorBoxes{ float: left; left:20px; top:0px; display:none;} #wrap{ background-color: #cf0; z-index:50; position: absolute; left: 35px; top: 100px; visibility: hidden;} #container{z-index:-10;} </style> </head> <body>  <div id="menu"><a href="http://mrdoob.com/blog/post/689" target="_blank">Harmony</a> <select id="selector"></select> <input id="save" type="button" value="Save"><input id="clear" type="button" value="Clear"><div id="dash">Default influence</div> <div id="colorSelector"><div style="background-color: #0000ff"></div> <div id="colorBoxes"> <p><input type="text" maxlength="3" size="3" id="R" value="000" /></p> <p><input type="text" maxlength="3" size="3" id="G" value="000" /></p> <p><input type="text" maxlength="3" size="3" id="B" value="000" /></p> </div> </div> <p><input type="button" id="toggle" value="Hide Content"/></p> <p><label id="edit" for="eraserSize">Eraser Size :</label><input type="text" size="3" id="eraserSize" value="10" /></p> </div> <div id="overlay"> <div id="wrap"> <h1 class="title"> Testing in overlaying, canvas element. </h1> </div> </div> <div id="container"> </div> <script type="text/javascript"> // Sketchy, Shaded, Chrome, Fur, LongFur and Web are variations of the idea of connecting neightbour points // first implemented (afaik) by Ze Frank's The Scribbler (http://www.zefrank.com/scribbler/) // This code uses the MIT license: // http://www.opensource.org/licenses/mit-license.php var STYLES = ["eraser","sketchy", "shaded", "chrome", "fur", "longfur", "web", "", "squares", "ribbon", "", "circles", "grid"]; var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var container, menu, selector; var saveButton, clearButton, toggleButton; var canvas, context; var style; var dash; var wrap; var mouseX = 0, mouseY = 0; var isMenuMouseOver = false, isMouseDown = false; //Marco: Keycapture stuff var _key = 0; var _influence = { sketch: { low: 250, medium: 1000, large: 4000, xl: 6000,def: 4000 } } function init() { dash = document.getElementById('dash'); container = document.getElementById('container'); wrap = document.getElementById('wrap'); wrap.style.visibility = 'hidden'; wrap.style.width = (SCREEN_WIDTH / 2) + 'px' ; wrap.style.left = ((SCREEN_WIDTH - wrap.offsetWidth) / 2) + 'px'; menu = document.getElementById('menu'); menu.style.left = ((SCREEN_WIDTH - menu.offsetWidth) / 2) + 'px'; menu.style.visibility = 'visible'; menu.addEventListener('mouseover', onMenuMouseOver, false); menu.addEventListener('mouseout', onMenuMouseOut, false); canvas = document.createElement("canvas"); canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; canvas.style.cursor = 'crosshair'; container.appendChild(canvas); context = canvas.getContext("2d"); context.fillStyle = "rgb(255, 255, 255)"; context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); saveButton = document.getElementById('save'); saveButton.addEventListener('click', save, false); clearButton = document.getElementById('clear'); clearButton.addEventListener('click', clear, false); selector = document.getElementById('selector'); selector.addEventListener('change', onSelectorChange, false); for (var i = 0; i < STYLES.length; i++) { var option = document.createElement("option"); option.id = i; option.innerHTML = STYLES[i].toUpperCase(); selector.appendChild(option); } if (window.location.hash) { var hash = window.location.hash.substr(1,window.location.hash.length); for (var i = 0; i < STYLES.length; i++) { if (hash == STYLES[i]) { style = eval("new " + STYLES[i] + "(context)"); selector.selectedIndex = i; break; } } } if (!style) { style = eval("new " + STYLES[0] + "(context)"); } document.onmousedown = onDocumentMouseDown; document.onmouseout = onCanvasMouseUp; //Marco: Key event document.onkeydown = KeyCheck; canvas.onmousedown = onCanvasMouseDown; canvas.onmouseup = onCanvasMouseUp; canvas.onmousemove = onCanvasMouseMove; canvas.ontouchstart = onCanvasTouchStart; canvas.ontouchend = onCanvasTouchEnd; canvas.ontouchmove = onCanvasTouchMove; } //Marco: Pass the pressed key to the global. function KeyCheck(e) { _key = e.keyCode; if(_key == "49") { dash.innerHTML = "low influence"; } if(_key == "50") { dash.innerHTML = "medium influence"; } if(_key == "51") { dash.innerHTML = "large influence"; } if(_key == "52") { dash.innerHTML = "XL influence"; } } function onDocumentMouseDown(e) { return isMenuMouseOver; } function onSelectorChange(e) { if (STYLES[selector.selectedIndex] == "") return; style.destroy(); style = eval("new " + STYLES[selector.selectedIndex] + "(context)"); window.location.hash = STYLES[selector.selectedIndex]; } function onMenuMouseOver(e) { isMenuMouseOver = true; } function onMenuMouseOut(e) { isMenuMouseOver = false; } function ondocumentMouseDown(e) { return !isMenuMouseOver; } function onCanvasMouseDown(e) { isMouseDown = true; style.strokeStart( mouseX, mouseY ); } function onCanvasMouseUp(e) { isMouseDown = false; style.strokeEnd( mouseX, mouseY ); } function onCanvasMouseMove(e) { if (!e) var e = window.event; mouseX = e.clientX; mouseY = e.clientY; if (!isMouseDown) return; style.stroke( mouseX, mouseY ); } function onCanvasTouchStart(e) { if(e.touches.length == 1) { var touch = e.touches[0]; style.strokeStart( touch.pageX, touch.pageY ); } return false; } function onCanvasTouchEnd(e) { if(e.touches.length == 1) { var touch = e.touches[0]; style.strokeEnd( touch.pageX, touch.pageY ); } } function onCanvasTouchMove(e) { if(e.touches.length == 1) { var touch = e.touches[0]; style.stroke( touch.pageX, touch.pageY ); } } function save() { window.open(canvas.toDataURL("image/png"),'mywindow'); } function clear() { var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); context.globalCompositeOperation = 'source-over'; context.fillStyle = "rgb("+cR+","+cG+","+cB+")"; context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); style = eval("new " + STYLES[selector.selectedIndex] + "(context)"); points = new Array(); count = 0; } // SAVING MY POOR SERVER :S (These classes are supposed to be on external files) function chrome( context ) { this.init( context ); } chrome.prototype = { context: null, prevMouseX: null, prevMouseY: null, points: null, count: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; if (RegExp(" AppleWebKit/").test(navigator.userAgent)) this.context.globalCompositeOperation = 'darker'; this.points = new Array(); this.count = 0; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, stroke: function( mouseX, mouseY ) { var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); this.points.push( [ mouseX, mouseY ] ); this.context.strokeStyle = "rgba("+cR+","+cG+","+cB+", 0.1)"; this.context.beginPath(); this.context.moveTo(this.prevMouseX, this.prevMouseY); this.context.lineTo(mouseX, mouseY); this.context.stroke(); for (var i = 0; i < this.points.length; i++) { var size = 0.2; var dx = this.points[i][0] - this.points[this.count][0]; var dy = this.points[i][1] - this.points[this.count][1]; var d = dx * dx + dy * dy; if (d < 1000) { this.context.strokeStyle = "rgba(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", 0.1 )"; this.context.beginPath(); this.context.moveTo( this.points[this.count][0] + (dx * size), this.points[this.count][1] + (dy * size)); this.context.lineTo( this.points[i][0] - (dx * size), this.points[i][1] - (dy * size)); this.context.stroke(); } } this.prevMouseX = mouseX; this.prevMouseY = mouseY; this.count ++; }, strokeEnd: function( mouseX, mouseY ) { } } function circles( context ) { this.init( context ); } circles.prototype = { context: null, prevMouseX: null, prevMouseY: null, points: null, count: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; this.context.globalCompositeOperation = 'source-over'; this.points = new Array(); }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, stroke: function( mouseX, mouseY ) { this.points.push( [ mouseX, mouseY ] ); var dx = mouseX - this.prevMouseX; var dy = mouseY - this.prevMouseY; var d = Math.sqrt(dx * dx + dy * dy) * 2; var d_half = d / 2; var cx = Math.floor(mouseX / 100) * 100 + 50; var cy = Math.floor(mouseY / 100) * 100 + 50; var steps = Math.floor( Math.random() * 10 ); var step_delta = d / steps; for (var i = 0; i < steps; i++) { this.context.strokeStyle = "rgba(0, 0, 0, 0.1)"; this.context.beginPath(); this.context.arc( cx, cy, (steps - i) * step_delta, 0, Math.PI*2, true); this.context.stroke(); } this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, strokeEnd: function( mouseX, mouseY ) { } } function fur( context ) { this.init( context ); } fur.prototype = { context: null, prevMouseX: null, prevMouseY: null, points: null, count: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; this.points = new Array(); this.count = 0; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, stroke: function( mouseX, mouseY ) { var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); this.points.push( [ mouseX, mouseY ] ); this.context.strokeStyle = "rgba("+ cR +","+ cG +","+ cB +", 0.1)"; this.context.beginPath(); this.context.moveTo(this.prevMouseX, this.prevMouseY); this.context.lineTo(mouseX, mouseY); this.context.stroke(); for (var i = 0; i < this.points.length; i++) { var size = 0.5; var dx = this.points[i][0] - this.points[this.count][0]; var dy = this.points[i][1] - this.points[this.count][1]; var d = dx * dx + dy * dy; if (d < 2000 && Math.random() > d / 2000) { this.context.strokeStyle = "rgba("+ cR +","+ cG +","+ cB +", 0.1)"; this.context.beginPath(); this.context.moveTo( mouseX + (dx * size), mouseY + (dy * size)); this.context.lineTo( mouseX - (dx * size), mouseY - (dy * size)); this.context.stroke(); } } this.prevMouseX = mouseX; this.prevMouseY = mouseY; this.count ++; }, strokeEnd: function( mouseX, mouseY ) { } } function grid( context ) { this.init( context ); } grid.prototype = { context: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; if (RegExp(" AppleWebKit/").test(navigator.userAgent)) this.context.globalCompositeOperation = 'darker'; this.context.strokeStyle = "rgba( 0, 0, 0, 0.01 )"; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { }, stroke: function( mouseX, mouseY ) { var cx = Math.round(mouseX / 100) * 100; var cy = Math.round(mouseY / 100) * 100; var dx = (cx - mouseX) * 10; var dy = (cy - mouseY) * 10; for (var i = 0; i < 50; i++) { this.context.beginPath(); this.context.moveTo( cx, cy ); this.context.quadraticCurveTo(mouseX + Math.random() * dx, mouseY + Math.random() * dy, cx, cy); this.context.stroke(); } }, strokeEnd: function( mouseX, mouseY ) { } } function longfur( context ) { this.init( context ); } longfur.prototype = { context: null, points: null, count: null, init: function( context ) { var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); this.context = context; this.context.lineWidth = 1; this.context.globalCompositeOperation = 'source-over'; this.context.strokeStyle = "rgba("+ cR +","+ cG +","+ cB +", 0.05 )"; this.points = new Array(); this.count = 0; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { }, stroke: function( mouseX, mouseY ) { var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); this.context.strokeStyle = "rgba("+ cR +","+ cG +","+ cB +", 0.05 )"; this.points.push( [ mouseX, mouseY ] ); for (var i = 0; i < this.points.length; i++) { var size = -Math.random(); var dx = this.points[i][0] - this.points[this.count][0]; var dy = this.points[i][1] - this.points[this.count][1]; var d = dx * dx + dy * dy; if (d < 4000 && Math.random() > d / 4000) { this.context.beginPath(); this.context.moveTo( this.points[this.count][0] + (dx * size), this.points[this.count][1] + (dy * size)); this.context.lineTo( this.points[i][0] - (dx * size) + Math.random() * 2, this.points[i][1] - (dy * size) + Math.random() * 2); this.context.stroke(); } } this.count ++; }, strokeEnd: function( mouseX, mouseY ) { } } function ribbon( context ) { this.init( context ); } ribbon.prototype = { context: null, mouseX: null, mouseY: null, painters: null, interval: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; this.context.strokeStyle = "rgba( 0, 0, 0, 0.05 )"; this.context.globalCompositeOperation = 'source-over'; this.mouseX = SCREEN_WIDTH / 2; this.mouseY = SCREEN_HEIGHT / 2; this.painters = new Array(); for (var i = 0; i < 50; i++) { this.painters.push({ dx: SCREEN_WIDTH / 2, dy: SCREEN_HEIGHT / 2, ax: 0, ay: 0, div: 0.1, ease: Math.random() * 0.2 + 0.6 }); } this.isDrawing = false; this.interval = setInterval( bargs( function( _this ) { _this.update(); return false; }, this ), 1000/60 ); }, destroy: function() { clearInterval(this.interval); }, strokeStart: function( mouseX, mouseY ) { this.mouseX = mouseX; this.mouseY = mouseY for (var i = 0; i < this.painters.length; i++) { this.painters[i].dx = mouseX; this.painters[i].dy = mouseY; } this.shouldDraw = true; }, stroke: function( mouseX, mouseY ) { this.mouseX = mouseX; this.mouseY = mouseY; }, strokeEnd: function( mouseX, mouseY ) { }, update: function() { for (var i = 0; i < this.painters.length; i++) { this.context.beginPath(); this.context.moveTo(this.painters[i].dx, this.painters[i].dy); this.painters[i].dx -= this.painters[i].ax = (this.painters[i].ax + (this.painters[i].dx - this.mouseX) * this.painters[i].div) * this.painters[i].ease; this.painters[i].dy -= this.painters[i].ay = (this.painters[i].ay + (this.painters[i].dy - this.mouseY) * this.painters[i].div) * this.painters[i].ease; this.context.lineTo(this.painters[i].dx, this.painters[i].dy); this.context.stroke(); } } } function bargs( _fn ) { var args = []; for( var n = 1; n < arguments.length; n++ ) args.push( arguments[ n ] ); return function () { return _fn.apply( this, args ); }; } function shaded( context ) { this.init( context ); } shaded.prototype = { context: null, prevMouseX: null, prevMouseY: null, points: null, count: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; this.context.globalCompositeOperation = 'source-over'; this.points = new Array(); this.count = 0; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, stroke: function( mouseX, mouseY ) { var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); this.points.push( [ mouseX, mouseY ] ); for (var i = 0; i < this.points.length; i++) { var size = 0.3; var dx = this.points[i][0] - this.points[this.count][0]; var dy = this.points[i][1] - this.points[this.count][1]; var d = dx * dx + dy * dy; if (d < 1000) { this.context.strokeStyle = "rgba("+ cR +","+cG+","+cB+", " + ((1 - (d / 1000)) * 0.1) + " )"; this.context.beginPath(); this.context.moveTo( this.points[this.count][0], this.points[this.count][1]); this.context.lineTo( this.points[i][0], this.points[i][1]); this.context.stroke(); } } this.prevMouseX = mouseX; this.prevMouseY = mouseY; this.count ++; }, strokeEnd: function( mouseX, mouseY ) { } } function sketchy( context ) { this.init( context ); } sketchy.prototype = { context: null, prevMouseX: null, prevMouseY: null, points: null, count: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; this.context.globalCompositeOperation = 'source-over'; this.points = new Array(); this.count = 0; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, stroke: function( mouseX, mouseY ) { var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); this.points.push( [ mouseX, mouseY ] ); this.context.strokeStyle = "rgba("+cR+","+cG+","+cB+", 0.05)"; this.context.beginPath(); this.context.moveTo(this.prevMouseX, this.prevMouseY); this.context.lineTo(mouseX, mouseY); this.context.stroke(); this.context.strokeStyle = "rgba("+cR+","+cG+","+cB+", 0.05 )"; var inf = _influence.sketch.def; for (var i = 0; i < this.points.length; i++) { var dx = this.points[i][0] - this.points[this.count][0]; var dy = this.points[i][1] - this.points[this.count][1]; var d = dx * dx + dy * dy; //Marco: Just testing- need to integrate more. if (_key == 49) { inf = _influence.sketch.low; } if (_key == 50) { inf = _influence.sketch.medium;} if (_key == 51) { inf = _influence.sketch.large;} if (_key == 52) { inf = _influence.sketch.xl;} if (d < inf && Math.random() > d / 2000) { this.context.beginPath(); this.context.moveTo( this.points[this.count][0] + (dx * 0.3), this.points[this.count][1] + (dy * 0.3)); this.context.lineTo( this.points[i][0] - (dx * 0.3), this.points[i][1] - (dy * 0.3)); this.context.stroke(); } } this.prevMouseX = mouseX; this.prevMouseY = mouseY; this.count ++; }, strokeEnd: function( mouseX, mouseY ) { } } function squares( context ) { this.init( context ); } squares.prototype = { context: null, prevMouseX: null, prevMouseY: null, init: function( context ) { this.context = context; this.context.globalCompositeOperation = 'source-over'; this.context.strokeStyle = "rgba(0, 0, 0, 1)"; this.context.fillStyle = "rgba(255, 255, 255, 1)"; this.context.lineWidth = 1; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, stroke: function( mouseX, mouseY ) { var dx = mouseX - this.prevMouseX; var dy = mouseY - this.prevMouseY; var angle = 1.57079633; var px = Math.cos(angle) * dx - Math.sin(angle) * dy; var py = Math.sin(angle) * dx + Math.cos(angle) * dy ; this.context.beginPath(); this.context.moveTo(this.prevMouseX - px, this.prevMouseY - py); this.context.lineTo(this.prevMouseX + px, this.prevMouseY + py); this.context.lineTo(mouseX + px, mouseY + py); this.context.lineTo(mouseX - px, mouseY - py); this.context.lineTo(this.prevMouseX - px, this.prevMouseY - py); this.context.fill(); this.context.stroke(); this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, strokeEnd: function( mouseX, mouseY ) { } } function web( context ) { this.init( context ); } web.prototype = { context: null, prevMouseX: null, prevMouseY: null, points: null, count: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; this.context.globalCompositeOperation = 'source-over'; this.points = new Array(); this.count = 0; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, stroke: function( mouseX, mouseY ) { var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); this.points.push( [ mouseX, mouseY ] ); this.context.strokeStyle = "rgba("+cR+","+cG+","+cB+", 0.5)"; this.context.beginPath(); this.context.moveTo(this.prevMouseX, this.prevMouseY); this.context.lineTo(mouseX, mouseY); this.context.stroke(); this.context.strokeStyle = "rgba("+cR+","+cG+","+cB+", 0.1)"; for (var i = 0; i < this.points.length; i++) { var dx = this.points[i][0] - this.points[this.count][0]; var dy = this.points[i][1] - this.points[this.count][1]; var d = dx * dx + dy * dy; if (d < 2500 && Math.random() > 0.9) { this.context.beginPath(); this.context.moveTo( this.points[this.count][0], this.points[this.count][1]); this.context.lineTo( this.points[i][0], this.points[i][1]); this.context.stroke(); } } this.prevMouseX = mouseX; this.prevMouseY = mouseY; this.count ++; }, strokeEnd: function( mouseX, mouseY ) { } } function eraser( context ) { this.init( context ); } eraser.prototype = { context: null, prevMouseX: null, prevMouseY: null, points: null, count: null, init: function( context ) { this.context = context; this.context.lineWidth = 1; this.points = new Array(); this.count = 0; }, destroy: function() { }, strokeStart: function( mouseX, mouseY ) { this.prevMouseX = mouseX; this.prevMouseY = mouseY; }, stroke: function( mouseX, mouseY ) { var eraserSize = $('#eraserSize').val(); var cR = $("#R").val(); var cG = $("#G").val(); var cB = $("#B").val(); this.points.push( [ mouseX, mouseY ] ); this.context.strokeStyle = "rgba("+ cR +","+ cG +","+ cB +", 0.5)"; this.context.lineWidth = eraserSize; this.context.lineCap = "round"; this.context.lineJoin = "round"; this.context.beginPath(); this.context.moveTo(this.prevMouseX, this.prevMouseY); this.context.lineTo(mouseX, mouseY); this.context.stroke(); this.prevMouseX = mouseX; this.prevMouseY = mouseY; this.count ++; }, strokeEnd: function( mouseX, mouseY ) { } } init(); // heh! </script> </body> </html>