Guillermo
8 years ago
9 changed files with 565 additions and 319 deletions
@ -0,0 +1,79 @@
@@ -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() |
||||
} |
||||
@ -0,0 +1,182 @@
@@ -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%; |
||||
} |
||||
} |
||||
@ -0,0 +1,74 @@
@@ -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() |
||||
|
After Width: | Height: | Size: 79 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue