Created
October 15, 2012 22:29
-
-
Save contexart/3896056 to your computer and use it in GitHub Desktop.
Draw on the html5 canvas using text as your medium.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<canvas id='canvas'></canvas> | |
<span id='info'>Click and drag to draw!<span> | |
<!-- | |
Drawing with text: | |
- Click and drag to draw. | |
- Double click to clear. | |
Ported from java at http://www.generative-gestaltung.de | |
by Tim Holman - @twholman | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Drawing with text. Ported from Generative Design book - http://www.generative-gestaltung.de - Original licence: http://www.apache.org/licenses/LICENSE-2.0 | |
// Application variables | |
var position = {x: 0, y: window.innerHeight/2}; | |
var counter = 0; | |
var minFontSize = 3; | |
var angleDistortion = 0; | |
var letters = "There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I suppose it doesn't mind.'"; | |
// Drawing variables | |
var canvas; | |
var context; | |
var mouse = {x: 0, y: 0, down: false} | |
function init() { | |
canvas = document.getElementById( 'canvas' ); | |
context = canvas.getContext( '2d' ); | |
canvas.width = window.innerWidth; | |
canvas.height = window.innerHeight; | |
canvas.addEventListener('mousemove', mouseMove, false); | |
canvas.addEventListener('mousedown', mouseDown, false); | |
canvas.addEventListener('mouseup', mouseUp, false); | |
canvas.addEventListener('mouseout', mouseUp, false); | |
canvas.addEventListener('dblclick', doubleClick, false); | |
window.onresize = function(event) { | |
canvas.width = window.innerWidth; | |
canvas.height = window.innerHeight; | |
} | |
} | |
function mouseMove ( event ){ | |
mouse.x = event.pageX; | |
mouse.y = event.pageY; | |
draw(); | |
} | |
function draw() { | |
if ( mouse.down ) { | |
var d = distance( position, mouse ); | |
var fontSize = minFontSize + d/2; | |
var letter = letters[counter]; | |
var stepSize = textWidth( letter, fontSize ); | |
if (d > stepSize) { | |
var angle = Math.atan2(mouse.y-position.y, mouse.x-position.x); | |
context.font = fontSize + "px Georgia"; | |
context.save(); | |
context.translate( position.x, position.y); | |
context.rotate( angle ); | |
context.fillText(letter,0,0); | |
context.restore(); | |
counter++; | |
if (counter > letters.length-1) { | |
counter = 0; | |
} | |
//console.log (position.x + Math.cos( angle ) * stepSize) | |
position.x = position.x + Math.cos(angle) * stepSize; | |
position.y = position.y + Math.sin(angle) * stepSize; | |
} | |
} | |
} | |
function distance( pt, pt2 ){ | |
var xs = 0; | |
var ys = 0; | |
xs = pt2.x - pt.x; | |
xs = xs * xs; | |
ys = pt2.y - pt.y; | |
ys = ys * ys; | |
return Math.sqrt( xs + ys ); | |
} | |
function mouseDown( event ){ | |
mouse.down = true; | |
position.x = event.pageX; | |
position.y = event.pageY; | |
document.getElementById('info').style.display = 'none'; | |
} | |
function mouseUp( event ){ | |
mouse.down = false; | |
} | |
function doubleClick( event ) { | |
canvas.width = canvas.width; | |
} | |
function textWidth( string, size ) { | |
context.font = size + "px Georgia"; | |
if ( context.fillText ) { | |
return context.measureText( string ).width; | |
} else if ( context.mozDrawText) { | |
return context.mozMeasureText( string ); | |
} | |
}; | |
init(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass"; | |
html, body { | |
width: 100%; | |
height: 100%; | |
margin: 0px; | |
overlfow: hidden; | |
&:hover { | |
span { | |
display: none; | |
} | |
} | |
} | |
canvas { | |
cursor: crosshair; | |
} | |
span { | |
font-family: 'Georgia', cursive; | |
font-size: 40px; | |
position: fixed; | |
top: 50%; | |
left: 50%; | |
color: #000; | |
margin-top: -40px; | |
margin-left: -200px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment