Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added vertical word placement

  • Loading branch information...
commit 0e52da5f24777732edab9690b1ee465f1446a1e7 1 parent 7ac4d47
@airportyh authored
Showing with 61 additions and 15 deletions.
  1. +10 −0 rotatetext.html
  2. +22 −0 rotatetext.js
  3. +29 −15 wordyclouds.js
View
10 rotatetext.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Rotate Text</title>
+ <script src="rotatetext.js"></script>
+ </head>
+ <body>
+ <h1>Rotate Text</h1>
+ </body>
+</html>
View
22 rotatetext.js
@@ -0,0 +1,22 @@
+var canvas, context
+
+function go(){
+ canvas = document.createElement('canvas')
+ document.body.appendChild(canvas)
+ context = canvas.getContext('2d')
+ var fontName = 'Georgia'
+ var fontHeight = 20
+ var text = 'I am side ways!'
+ canvas.width = 300
+ canvas.height = 500
+ context.font = fontHeight + 'px ' + fontName
+ var textWidth = context.measureText(text).width
+ context.save()
+ context.translate(fontHeight, textWidth)
+ context.rotate(-Math.PI / 2)
+ context.fillText(text, 0, 0)
+ context.restore()
+ context.fillText('I am straight!', fontHeight, fontHeight)
+}
+
+window.onload = go
View
44 wordyclouds.js
@@ -148,7 +148,6 @@ Layouts.randomAvoid = function RandomAvoidLayout(freq, canvas, colors, fontName)
var context = canvas.getContext('2d')
var sizeScale = estimateSizeScale(freq, canvas.width, canvas.height)
console.log('sizeScale: ' + sizeScale)
- var boxes = []
var words = keys(freq).sort(function(one, other){
return freq[other] - freq[one]
})
@@ -159,21 +158,29 @@ Layouts.randomAvoid = function RandomAvoidLayout(freq, canvas, colors, fontName)
//console.log('word[' + word + '].height = ' + textHeight)
context.font = textHeight + 'px ' + fontName
var textWidth = context.measureText(word).width
+ var vertical = Math.random() > 0.5
+
var x, y
var triesLeft = 10000, collided = true
while(triesLeft > 0 && collided){
- x = padding + Math.random() * (canvas.width - textWidth - 2 * padding)
- y = padding + textHeight + Math.random() * (canvas.height - textHeight * 1.5 - 2 * padding)
- /*if (textHeight > 16){
- // box-based collision detection
- collided = boxes.reduce(function(curr, box){
- return curr || boxesOverlap(box[0], box[1], box[2], box[3], x, y, textWidth, textHeight)
- }, false)
- }else{*/
- //console.log('bitmap-based for ' + word)
// bitmap-based collision detection
var pad = 5
- var imgData = context.getImageData(x - pad, y - textHeight - pad, textWidth + 2 * pad, textHeight * 1.5 + 2 * pad)
+ var imgData
+ if (vertical){
+
+ x = padding + textHeight * 1.5 + Math.random() * (canvas.width - textHeight * 1.5 - 2 * padding)
+ y = padding + textWidth + Math.random() * (canvas.height - textWidth - 2 * padding)
+ imgData = context.getImageData(
+ x - textHeight * 1.5 - pad, y - textWidth - pad,
+ textHeight * 1.5 + 2 * pad, textWidth + 2 * pad)
+ }else{
+
+ x = padding + Math.random() * (canvas.width - textWidth - 2 * padding)
+ y = padding + textHeight + Math.random() * (canvas.height - textHeight * 1.5 - 2 * padding)
+ imgData = context.getImageData(
+ x - pad, y - textHeight - pad,
+ textWidth + 2 * pad, textHeight * 1.5 + 2 * pad)
+ }
var pxlArr = imgData.data
var painted = false
for (var i = 3; i < pxlArr.length; i+=4)
@@ -182,7 +189,6 @@ Layouts.randomAvoid = function RandomAvoidLayout(freq, canvas, colors, fontName)
break
}
collided = painted
- //}
triesLeft--
}
if (triesLeft == 0)
@@ -192,10 +198,18 @@ Layouts.randomAvoid = function RandomAvoidLayout(freq, canvas, colors, fontName)
context.fillStyle = 'rgba(' + c.join(',') + ', 1)'
context.font = textHeight + 'px ' + fontName
//console.log('fillText: ' + [word, x, y].join(', '))
- context.fillText(word, x, y)
- var box = [x, y, textWidth, textHeight]
+
+ if (vertical){
+ context.save()
+ context.translate(x, y)
+ context.rotate(-Math.PI / 2)
+ context.fillText(word, 0, 0)
+ context.restore()
+ }else
+ context.fillText(word, x, y)
+
+ if (vertical) context.rotate(0)
//console.log('box[' + word + ']: ' + box)
- boxes.push(box)
})
}
Please sign in to comment.
Something went wrong with that request. Please try again.