akira
/
tesseract.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

walp

pull/24/head
Guillermo 8 years ago
parent
8527a70b36
commit
0243eb6bd0
9 changed files with 565 additions and 319 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 202
      animation/animate.js
  2. 4
      animation/dimensions.js
  3. 79
      animation/hypercube.js
  4. 182
      css/main.css
  5. 3
      css/wau.css
  6. 74
      demo.js
  7. BIN
      img/eng.jpg
  8. 178
      index.html
  9. 162
      index_old.html

202
animation/animate.js
Unescape View File

@ -1,106 +1,13 @@
function app1(p,a,c1,c2){ var canvas = document.getElementById('logo-canvas'),
var l = Math.cos(a)*p[c1]+Math.sin(a)*p[c2] ctx = canvas.getContext('2d'),
var k = -Math.sin(a)*p[c1]+Math.cos(a)*p[c2] logo_wrap = document.getElementById('logo-wrap'),
p[c1] = l splash = document.getElementById('splash'),
p[c2] = k logo_img = document.getElementById('logo-img'),
} color = "white",
lasttime,
function app2(p,a,c1,c2){ freeze
var l = Math.cos(a)*p[c1]-Math.sin(a)*p[c2]
var k = Math.sin(a)*p[c1]+Math.cos(a)*p[c2]
p[c1] = l
p[c2] = k
}
var _edges
function tesseractedges(){
if(!_edges){
var m = tesseractwithrotation(0,0,0,0,0,0)
var edges = []
var indicies = ['x','y','z','w']
for (var i = 0; i < m.length; i++) {
for (var j = i+1; j < m.length; j++) {
var count = 0
for (var k = 0; k < 4; k++) {
if (m[i][indicies[k]] === m[j][indicies[k]]) count++
};
if (count === 3) edges.push([i,j])
}
}
_edges = edges
}
return _edges
}
function tesseractwithrotation(a,b,c,d,e,f) {
var verticies = []
for (var i = 0; i < 16; i++) {
var p = {
x: (i&1)*2 - 1,
y: ((i>>1)&1)*2 - 1,
z: ((i>>2)&1)*2 - 1,
w: ((i>>3)&1)*2 - 1
}
app1(p,a,'x','y')
app1(p,b,'y','z')
app1(p,c,'x','w')
app2(p,d,'x','z')
app2(p,e,'y','w')
app2(p,f,'z','w')
verticies.push(p)
}
return verticies
}
function project(point, size){
return {
x: (point.x+Math.SQRT2*point.z)*size,
y: (point.y+Math.SQRT2*point.w)*size
}
}
// (function(){
// var color = "rgb(255,133,0)"
// var color = "rgb(55,110,79)"
var color="white"
// var color = "rgb(255,221,21)"
// var color = '#'+(16777216+Math.floor(Math.random()*16777215)).toString(16).slice(1)
// document.styleSheets[0].insertRule("a {color: "+color+"}",0)
var lasttime,
canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
// canvas.style['background-color'] = color;
var logo = new Image(), logo_small = new Image()
logo.src = 'img/logo.png'
logo_small.src = 'img/logo.png'
// var pixelRatio = (function(context) {
// var backingStore = context.backingStorePixelRatio ||
// context.webkitBackingStorePixelRatio ||
// context.mozBackingStorePixelRatio ||
// context.msBackingStorePixelRatio ||
// context.oBackingStorePixelRatio ||
// context.backingStorePixelRatio || 1;
// return (window.devicePixelRatio || 1) / backingStore;
// })(ctx);
function init () {
fixdim()
lasttime = new Date().getTime()
requestAnimationFrame(main)
}
var freeze
function fixdim() { function fixdim() {
dimensions.update() dimensions.update()
@ -108,63 +15,29 @@ function fixdim() {
var doc = document.documentElement; var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var header = document.querySelector('.stickyheader')
document.getElementById('logo').style.top = top /2 logo_wrap.style.top = top / 2 + 'px'
var rect = document.querySelector('.marterial').getBoundingClientRect() var rect = splash.getBoundingClientRect()
var bottom = rect.top + rect.height var bottom = rect.top + rect.height
// console.log(bottom) var fadestart = rect.height/2
// if(bottom < 100){
// document.getElementById('logo').style.left = bottom - 100
// }
var fadestart = Math.min(rect.height/2, 100)
// header.style['background-color'] = 'rgba(0, 219, 157,'+Math.max(Math.min((-bottom+fadestart),1),0)+')'
// header.style['display'] = -bottom+fadestart < 0 ? 'none' : 'initial'
header.querySelector('.smalllogo').style.opacity = Math.max(Math.min((-bottom+fadestart)*2/fadestart,1),0)
document.getElementById('logo').style.opacity = Math.max(Math.min((bottom-fadestart)/fadestart,1),0)
logo_wrap.style.opacity = Math.max(Math.min((bottom-fadestart)/fadestart,1),0)
document.getElementById('logoimg').style.width = displaywidth logo_img.style.width = displaywidth + 'px'
if(!freeze){ if(!freeze){
var displayheight = displaywidth * 4/15 //dimensions.width > 900 ? 250 : 125 var displayheight = displaywidth * 4/15 //dimensions.width > 900 ? 250 : 125
canvas.width = displayheight*window.devicePixelRatio canvas.width = displayheight*window.devicePixelRatio
canvas.style.width = displayheight canvas.style.width = displayheight + 'px'
canvas.height = displayheight*window.devicePixelRatio canvas.height = displayheight*window.devicePixelRatio
canvas.style.height = displayheight canvas.style.height = displayheight + 'px'
} }
} }
addEventListener('scroll', fixdim) addEventListener('scroll', fixdim)
function drawtesseract(tesseract, opts){ var gh = .12;
var edges = tesseractedges()
for (var i = 0; i < tesseract.length; i++) {
var proj = project(tesseract[i], opts.size)
ctx.beginPath()
ctx.arc(proj.x + opts.x, proj.y + opts.y, opts.corner_radius, 0, 2 * Math.PI)
ctx.fill()
};
ctx.lineWidth = opts.line_width || 1
ctx.beginPath()
for (var i = 0; i < edges.length; i++) {
var v1 = project(tesseract[edges[i][0]], opts.size),
v2 = project(tesseract[edges[i][1]], opts.size)
ctx.moveTo(v1.x+opts.x,v1.y+opts.y)
ctx.lineTo(v2.x+opts.x,v2.y+opts.y)
};
ctx.stroke()
}
var as = -.371, df = -.01, gh = .12;
var asdf = 120
var sdfg = .01
var x = 10, y=10,w = 10,h = 10
function main (time) { function main (time) {
fixdim() fixdim()
@ -172,49 +45,26 @@ function main (time) {
var t = time/10000 var t = time/10000
// "rgb(0,140,255)"
// ctx.strokeStyle = '#444'
// ctx.fillStyle = "rgb(0,140,255)"
ctx.strokeStyle = ctx.fillStyle = color ctx.strokeStyle = ctx.fillStyle = color
var sm = 1 var sm = 1
// var m = tesseractwithrotation( 0,0,0,mouse.x/100 ,mouse.y/100, 0) var m = tesseractwithrotation(t, t*2, t*3, mouse.x/100, mouse.y/100, 0)
var m = tesseractwithrotation(t, t*2, t*3, mouse.x/100 , mouse.y/100, 0)
drawtesseract(m, { drawtesseract(ctx, m, {
x: canvas.width/2, x: canvas.width/2,
y: canvas.height/2, y: canvas.height/2,
size: gh*canvas.height, size: gh*canvas.height,
line_width: 2, line_width: 2,
}) })
ctx.beginPath()
// ctx.fillStyle = 'red'
// ctx.fillRect(
// (as+.5 - .0058)*canvas.width,
// (df+.002+.5-.164)*canvas.height,// + canvas.height/2 - asdf/2,
// .0058*2*canvas.width,
// .164*2*canvas.height
// )
// ctx.fillRect(
// 0.0951*canvas.width,
// 0.0871*canvas.width,
// 0.0673*canvas.width,
// 0.0109*canvas.width
// )
// ctx.fill()
// var m = tesseractwithrotation(0,0,0, mouse.x/100 , mouse.y/100, 0)
// var m = tesseractwithrotation(t, t*2, t*3, mouse.x/100 , mouse.y/100, 0)
// var k = tesseractwithrotation(t, t*2, t*3, mouse.x/100+.08, mouse.y/100, 0)
lasttime = time lasttime = time
requestAnimationFrame(main) requestAnimationFrame(main)
} }
init()
// })() requestAnimationFrame(function init(t) {
fixdim()
lasttime = t
requestAnimationFrame(main)
})

4
animation/dimensions.js
Unescape View File

@ -38,8 +38,6 @@ var dimensions = {
this.height=curH this.height=curH
return true return true
} }
else { return false
return false
}
} }
} }

79
animation/hypercube.js
Unescape View File

@ -0,0 +1,79 @@
function app1(p,a,c1,c2){
var l = Math.cos(a)*p[c1]+Math.sin(a)*p[c2]
var k = -Math.sin(a)*p[c1]+Math.cos(a)*p[c2]
p[c1] = l
p[c2] = k
}
function app2(p,a,c1,c2){
var l = Math.cos(a)*p[c1]-Math.sin(a)*p[c2]
var k = Math.sin(a)*p[c1]+Math.cos(a)*p[c2]
p[c1] = l
p[c2] = k
}
var _edges
function tesseractedges(){
if(!_edges){
var m = tesseractwithrotation(0,0,0,0,0,0)
var edges = []
var indicies = ['x','y','z','w']
for (var i = 0; i < m.length; i++) {
for (var j = i+1; j < m.length; j++) {
var count = 0
for (var k = 0; k < 4; k++) {
if (m[i][indicies[k]] === m[j][indicies[k]]) count++
};
if (count === 3) edges.push([i,j])
}
}
_edges = edges
}
return _edges
}
function tesseractwithrotation(a,b,c,d,e,f) {
var verticies = []
for (var i = 0; i < 16; i++) {
var p = {
x: (i&1)*2 - 1,
y: ((i>>1)&1)*2 - 1,
z: ((i>>2)&1)*2 - 1,
w: ((i>>3)&1)*2 - 1
}
app1(p,a,'x','y')
app1(p,b,'y','z')
app1(p,c,'x','w')
app2(p,d,'x','z')
app2(p,e,'y','w')
app2(p,f,'z','w')
verticies.push(p)
}
return verticies
}
function project(point, size){
return {
x: (point.x+Math.SQRT2*point.z)*size,
y: (point.y+Math.SQRT2*point.w)*size
}
}
function drawtesseract(ctx, tesseract, opts){
var edges = tesseractedges()
for (var i = 0; i < tesseract.length; i++) {
var proj = project(tesseract[i], opts.size)
ctx.beginPath()
ctx.arc(proj.x + opts.x, proj.y + opts.y, opts.corner_radius, 0, 2 * Math.PI)
ctx.fill()
};
ctx.lineWidth = opts.line_width || 1
ctx.beginPath()
for (var i = 0; i < edges.length; i++) {
var v1 = project(tesseract[edges[i][0]], opts.size),
v2 = project(tesseract[edges[i][1]], opts.size)
ctx.moveTo(v1.x+opts.x,v1.y+opts.y)
ctx.lineTo(v2.x+opts.x,v2.y+opts.y)
};
ctx.stroke()
}

182
css/main.css
Unescape View File

@ -0,0 +1,182 @@
body, html{
position: absolute;
top: 0;
margin: 0;
width: 100%;
font-family: Lato;
}
#slogan {
text-align: center;
margin-top: -26px;
color: #fff;
}
#splash {
overflow: hidden;
background-color: #668EC3;
// background: linear-gradient(90deg, #eb6b8f, #ffee75);
}
#logo-wrap {
margin-top: 50px;
text-align: center;
position: relative;
}
#logo-canvas {
margin-left: auto;
margin-right: auto;
pointer-events: none;
z-index: 0;
position: absolute;
}
#logo-img {
max-width: 100%;
}
#get-started-wrap {
text-align: center;
position: relative;
}
#get-started {
display: inline-block;
color: #668EC3;
background: #fff;
padding: 17px 25px;
font-size: 30px;
margin: 50px 0;
border-radius: 7px;
}
#demo-title {
padding: 40px 0;
color: #668EC3;
font-size: 30px;
text-align: center;
}
#options {
display: flex;
justify-content: space-around;
font-size: 20px;
color: #199ff4;
padding: 0 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.option {
padding: 10px;
border-radius: 5px;
}
.option.selected {
color: #fff;
background: #668EC3;
}
#input {
max-width: 100%;
box-sizing: border-box;
padding: 20px;
margin-top: 30px;
}
#input-overlay {
position: absolute;
max-width: 100%;
box-sizing: border-box;
margin-top: 30px;
padding: 20px;
}
#github {
height: 1em;
width: 1em;
margin-bottom: -3px;
margin-right: 10px;
}
#github path {
fill: #668EC3;
}
#arrow {
text-align: center;
color: #668ec3;
}
#arrow::before {
content: '\2193'
}
#output {
max-width: 100%;
box-sizing: border-box;
padding: 20px;
}
#footer {
color: #fff;
background-color: #7A8A9F;
// background: linear-gradient(90deg, #eb6b8f, #ffee75);
text-align: right;
padding: 0 20px;
}
#lengle {
margin-top: 8%;
margin-bottom: 8%;
line-height: normal;
display: inline-block;
vertical-align: middle;
}
#lengle img {
height: .7em;
}
@media (min-width: 900px) {
#demo-content {
display: flex;
align-items: center;
}
#demo-content > div {
position: relative;
}
#input, #input-overlay {
margin-top: 0;
}
#arrow::before {
content: '\2192'
}
#options {
margin: 40px auto;
}
#demo-title {
width: 250px;
background: #fff;
margin-top: -70px;
position: relative;
padding: 20px 0;
}
#demo-title::after {
border-right: 40px solid transparent;
border-bottom: 70px solid white;
content: ' ';
position: absolute;
top: 0;
left: 100%;
}
}

3
css/wau.css
Unescape View File

@ -21,12 +21,14 @@
flex-grow:1; flex-grow:1;
-webkit-flex-grow:1; -webkit-flex-grow:1;
} }
.footer { .footer {
width: 100%; width: 100%;
color: #fff; color: #fff;
background-color: #6A6A6A; background-color: #6A6A6A;
text-align: right; text-align: right;
} }
.lengle { .lengle {
margin-top: 8%; margin-top: 8%;
margin-bottom: 8%; margin-bottom: 8%;
@ -170,7 +172,6 @@ svg {
.selected { .selected {
background-color: #668EC3; background-color: #668EC3;
/*font-weight: bold;*/
} }
.bookend { .bookend {

74
demo.js
Unescape View File

@ -0,0 +1,74 @@
var input = document.getElementById('input')
var input_overlay = document.getElementById('input-overlay')
var ioctx = input_overlay.getContext('2d')
var output = document.getElementById('output')
var octx = output.getContext('2d')
var language = 'eng'
var demoStarted = false
output.width = input.naturalWidth
output.height = input.naturalHeight
output.style.width = input.offsetWidth
output.style.height = input.offsetHeight
input_overlay.width = input.naturalWidth
input_overlay.height = input.naturalHeight
input_overlay.style.width = input.offsetWidth
input_overlay.style.height = input.offsetHeight
function isOutputVisible(){
return output.getBoundingClientRect().top < dimensions.height
}
function startDemoIfVisible(argument) {
if(isOutputVisible() && !demoStarted) startDemo();
}
function startDemo(){
demoStarted = true
octx.font = '20px Times';
octx.font = .8 * output.width * 20 / octx.measureText('texttexttexttexttexttexttexttexttexttexttext').width + "px Times";
Tesseract.recognize(input)
.progress(progress)
.then(result)
}
function progress(p){
var text = JSON.stringify(p)
octx.clearRect(0, 0, output.width, output.height)
octx.textAlign = 'center'
octx.fillText(text, output.width/2, output.height/2)
}
function result(res){
octx.clearRect(0, 0, output.width, output.height)
octx.textAlign = 'left'
res.words.forEach(function(w){
var b = w.bbox;
ioctx.strokeStyle = 'red'
ioctx.strokeRect(b.x0, b.y0, b.x1-b.x0, b.y1-b.y0)
ioctx.beginPath()
ioctx.moveTo(w.baseline.x0, w.baseline.y0)
ioctx.lineTo(w.baseline.x1, w.baseline.y1)
ioctx.strokeStyle = 'yellow'
ioctx.stroke()
octx.font = '20px Times';
octx.font = 20 * (b.x1 - b.x0) / octx.measureText(w.text).width + "px Times";
octx.fillText(w.text, b.x0, w.baseline.y0);
})
}
document.addEventListener('scroll', startDemoIfVisible)
startDemoIfVisible()

BIN
img/eng.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

178
index.html
View File

File diff suppressed because one or more lines are too long

162
index_old.html
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save