Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit c219e80039d3d7eb3a2623b34ab223caa85aebd9 @airportyh committed Jun 5, 2010
Showing with 240 additions and 0 deletions.
  1. +4 −0 DIRECTIONS
  2. 0 README
  3. +32 −0 build
  4. +10 −0 glyphshapes.html
  5. +40 −0 glyphshapes.js
  6. +21 −0 index.html
  7. +1 −0 marklet.js
  8. +132 −0 wordyclouds.js
@@ -0,0 +1,4 @@
+How to get really dense layouts?
+1. Use typeface.js to render fonts and hack to get advanced font metric info.
+2. Use Canvas direct image pixel data API for collision detection/layout(but this might be slow)
+3. Prerender all characters for a font to get their shapes.
0 README
No changes.
32 build
@@ -0,0 +1,32 @@
+#!/usr/bin/env python
+from urllib import quote
+
+def call(cmd, input=None):
+ import os
+ fin,fout = os.popen4(cmd)
+ result = fout.read()
+ return result
+ #import subprocess
+ #p = subprocess.Popen(args)
+ #output = p.stdout.read()
+ #p.close()
+ #return output
+
+def compress(file):
+ return quote(call('yui-compressor %s' % file))
+
+files = [
+ 'wordycloud.js',
+ 'marklet.js'
+]
+
+last_line = 'init(String(window.location));'
+
+marklet = ['javascript:(function(){']
+for file in files:
+ marklet.append(compress(file))
+marklet.append(quote(last_line))
+marklet.append('})()')
+marklet = ''.join(marklet)
+
+print marklet
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GlyphShapes</title>
+ <script src="glyphshapes.js"></script>
+ </head>
+ <body>
+ <h1>GlyphShapes</h1>
+ </body>
+</html>
@@ -0,0 +1,40 @@
+var canvas, context
+
+function toAscii(arr, width, height){
+ var ret = ''
+ for (var y = 0; y < height; y++){
+ for (var x = 0; x < width; x++){
+ var i = (x + width * y) * 4
+ var a = arr[i + 3]
+ if (a > 180)
+ ret += '0'
+ else if (a > 90)
+ ret += 'O'
+ else if (a > 10)
+ ret += '.'
+ else
+ ret += ' '
+ }
+ ret += '\n'
+ }
+ return ret
+}
+
+function go(){
+ canvas = document.createElement('canvas')
+ document.body.appendChild(canvas)
+ context = canvas.getContext('2d')
+ var fontName = 'Georgia'
+ var fontHeight = 20
+ var text = 'abcdeABCDE'
+ context.font = fontHeight + 'px ' + fontName
+ canvas.width = context.measureText(text).width
+ canvas.height = fontHeight
+ context.font = fontHeight + 'px ' + fontName
+ context.fillText(text, 0, fontHeight)
+ var imgData = context.getImageData(0, 0, canvas.width, canvas.height)
+ var pxlArr = imgData.data
+ console.log(toAscii(pxlArr, canvas.width, canvas.height))
+}
+
+window.onload = go
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>WordyCloud</title>
+ <script src="wordyclouds.js"></script>
+</head>
+<body onload="main()">
+ I've followed engadget's live blog, seen the keynote video, listened to Tom and Molly talk about it, even read others' opinions on engadget, gdgt and twitter, etc etc. I guess you could say I am pretty excited.
+
+ The tech savy(engadget, gdgt, BOL, etc) are in general underwhelmed or disappointed. Below are some of the complaints I have heard:
+ No Webcam or microphone - which pretty much rules out using Skype on it, which would have been a great killer app at this form factor. I think they will add these to the iPad in the future. Update: actually, there IS a built-in microphone, so at least you can make audio calls with Skype.
+ Still No Flash Support - you cannot seriously claim it has the best web browsing experience when it doesn't support Flash! Apple has not allowed Flash to run on the iPhone all this time. Now that they are doing the same with the iPad - which with it's larger screen you would think would be much better suited to run Flash apps, and add to it the fact that Flash has never ran great on Macs, it's becoming obvious that this is political. Apple wants to fight a format war with Adobe. Why would you need flash when you can buy great apps from the app store and buy TV shows and movies from iTunes? On the other hand, I can also see the concern that almost all of the flash apps out there(possibly with the exception of Flash ads) just aren't designed for the touch screen, and having users run them on the iPhone or the iPad degrades the user experience and therefore could hurt the products' reputation. Apple's PR, however, is going with: "it could rapidly drain battery life", which I think is probably in reality 3rd or 4th down on their list of concerns.
+ No multiple tasks/apps/windows - this is a pretty big one: given the iPad's screen real estate, it seems artificially limiting to not allow multiple apps to be running in separate windows. I believe the iPad will eventually have this feature. How the UI will turn out will be interesting to see.
+ The App Store Sucks - Apple prevents certain types of applications from entering its App Store. One example is programming language interpreters; another is any app that Apple views as overstepping their core apps' boundaries. Given that the iPad is even more of a computer than the iPhone, these limitations may become even more glaring.
+ I just don't see the need - "I already have a laptop and a smartphone, there just isn't any more room for yet another device!" I think that at the moment the iPad is more exciting for developers than consumers, but that will change.
+
+ All the negatives are well and good, but I overlook all of them, because, from my point of view, the iPad - and what it will lead to - is much bigger. All of the tablet computers I've seen in stores in the past - HP's, Fujitsu's, etc: they all suck. These computer manufacturers created tablet computers but installed on them an Operating System which is design from the ground up for use with a mouse and a keyboard. They figured: "A tablet computer has a stylus. We can use it as a pointing device in the same way that a mouse is a pointing device. We just hook up the stylus driver to control the pointer, and boom! We got ourselves a tablet Operating System! Brilliant!" This is understandable, because it is the nature of software engineers to want to build solutions that solve as many problems as possible - and Windows is a very very big solution indeed. However, this tendency also causes brilliant people to routinely produce crap. The tablet form factor is more versatile than the mouse, and can be much more natural to use from a UI standpoint, but dumbing it down and retrofitting it to an inferior UI paradigm caused it to be marginal. Yes, you could use a tablet to draw, sign documents, take notes, etc, but when it came to interacting with the UI elements, it was usually very kludgy.
+
+ iPad is the first tablet I've seen that comes close to realizing the potential of the tablet form factor. Why? It's all about the software, stupid! The software that come with the iPad were designed and written specifically for the large multi-touch screen device. This is to take nothing away from the amazing hardware. Multi-touch was ground breaking when it first surfaced. When the iPad comes to market, it will be the single best showcase of multi-touch technology. But, the software is what brings it all together, and you can tell Apple put a lot of time and effort into the software. Okay, enough of my rambling. What am I really trying to say?
+</body>
+</html>
@@ -0,0 +1 @@
+main()
@@ -0,0 +1,132 @@
+var CommonWords = {}
+CommonWords.english = "a about after again against all an another any and are as at\
+be being been before but by\
+can could\
+did do don't down\
+each\
+few from for\
+get got great\
+had has have he her here his him himself hers how\
+i if i'm in into is it it's\
+just\
+like\
+made me more most my\
+no not\
+of off on once one only or other our out over own\
+said she should so some such\
+than that the their them then there these they this those through to too\
+under until up\
+very\
+was wasn't we were we're what when where which while who why will with would wouldn't\
+you your".split(' ')
+
+var ColorPalates = {}
+ColorPalates.autumn =
+[
+ [255, 136, 64],
+ [149, 141, 79],
+ [115, 123, 85],
+ [89, 85, 64],
+ [81, 62, 56]
+]
+
+/* ============== Util Functions ========================== */
+
+function getText(elm, excludeTags){
+ if (elm.nodeType == 3) return elm.nodeValue
+ if (excludeTags && elm.tagName &&
+ excludeTags.indexOf(elm.tagName.toLowerCase()) != -1) return ''
+ var ret = ''
+ for (var i = 0; i < elm.childNodes.length; i++){
+ ret += getText(elm.childNodes[i], excludeTags)
+ }
+ return ret
+}
+
+function keys(obj){
+ var ret = []
+ for (var key in obj) ret.push(key)
+ return ret
+}
+
+function tokenize(text, commonWords){
+ return text
+ .replace(/[^\'a-zA-Z]/g, ' ')
+ .split(' ')
+ .filter(function(p){return p != ''})
+ .map(function(word){
+ return word.toLowerCase()
+ })
+ .filter(function(word){
+ return !commonWords || commonWords.indexOf(word) == -1
+ })
+}
+
+function wordSummary(text, commonWords){
+ var words = tokenize(text, commonWords)
+ var freq = {}
+ words.forEach(function(word){
+ freq[word] = (freq[word] || 0) + 1
+ })
+ return freq
+}
+
+function calculateSizeScale(freq){
+ var max = 0
+ keys(freq).forEach(function(word){
+ if (freq[word] > max)
+ max = freq[word]
+ })
+ return 150 / max
+}
+
+
+/* ========== Layouts ============================ */
+
+var Layouts = {}
+
+Layouts.random = function RandomLayout(freq, canvas, colors){
+ var context = canvas.getContext('2d')
+ var sizeScale = calculateSizeScale(freq)
+ keys(freq).forEach(function(word){
+ var x = Math.random() * canvas.width
+ var y = Math.random() * canvas.height
+ var c = Math.floor(Math.random() * colors.length)
+ console.log('color index: ' + c)
+ var c = colors[c]
+ context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', 0.6)'
+ context.font = (freq[word] * sizeScale) + 'px Arial'
+ context.fillText(word, x, y)
+ })
+}
+
+Layouts.packed = function PackedLayout(freq, canvas, colors){
+ var context = canvas.getContext('2d')
+ var sizeScale = calculateSizeScale(freq)
+ keys(freq).forEach(function(word){
+ var fontSize = boxHeight = freq[word] * sizeScale
+ context.font = fontSize + 'px Arial'
+ var boxWidth = context.measureText(word)
+
+ })
+}
+
+/* =========== Main ============================== */
+
+function main(){
+ var layout = Layouts.random
+ var text = getText(document.body, ['script'])
+ var commonWords = CommonWords.english
+ var freq = wordSummary(text, commonWords)
+ var palate = ColorPalates.autumn
+ var canvas = document.createElement('canvas')
+ canvas.width = window.innerWidth
+ canvas.height = window.innerHeight
+ document.body.innerHTML = ''
+ document.body.appendChild(canvas)
+ document.body.style.padding = '0'
+ document.body.style.margin = '0'
+ document.body.style.overflow = 'hidden'
+ layout(freq, canvas, palate)
+}
+

0 comments on commit c219e80

Please sign in to comment.