diff --git a/animation/animate.js b/animation/animate.js index 2a76b89..90aed53 100644 --- a/animation/animate.js +++ b/animation/animate.js @@ -1,106 +1,13 @@ -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(){ - -// 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; +var canvas = document.getElementById('logo-canvas'), + ctx = canvas.getContext('2d'), + logo_wrap = document.getElementById('logo-wrap'), + splash = document.getElementById('splash'), + logo_img = document.getElementById('logo-img'), + color = "white", + lasttime, + freeze -// return (window.devicePixelRatio || 1) / backingStore; -// })(ctx); - - - -function init () { - fixdim() - lasttime = new Date().getTime() - requestAnimationFrame(main) -} - -var freeze function fixdim() { dimensions.update() @@ -108,63 +15,29 @@ function fixdim() { var doc = document.documentElement; var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); - var header = document.querySelector('.stickyheader') - document.getElementById('logo').style.top = top /2 - var rect = document.querySelector('.marterial').getBoundingClientRect() + logo_wrap.style.top = top / 2 + 'px' + var rect = splash.getBoundingClientRect() var bottom = rect.top + rect.height - // console.log(bottom) - // 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) + var fadestart = rect.height/2 + 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){ - var displayheight = displaywidth * 4/15 //dimensions.width > 900 ? 250 : 125 - canvas.width = displayheight*window.devicePixelRatio - canvas.style.width = displayheight - canvas.height = displayheight*window.devicePixelRatio - canvas.style.height = displayheight - + var displayheight = displaywidth * 4/15 //dimensions.width > 900 ? 250 : 125 + canvas.width = displayheight*window.devicePixelRatio + canvas.style.width = displayheight + 'px' + canvas.height = displayheight*window.devicePixelRatio + canvas.style.height = displayheight + 'px' } } addEventListener('scroll', fixdim) -function drawtesseract(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() -} - -var as = -.371, df = -.01, gh = .12; - -var asdf = 120 -var sdfg = .01 - -var x = 10, y=10,w = 10,h = 10 +var gh = .12; function main (time) { fixdim() @@ -172,49 +45,26 @@ function main (time) { var t = time/10000 - // "rgb(0,140,255)" - // ctx.strokeStyle = '#444' - // ctx.fillStyle = "rgb(0,140,255)" ctx.strokeStyle = ctx.fillStyle = color 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, y: canvas.height/2, size: gh*canvas.height, 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 requestAnimationFrame(main) } -init() -// })() \ No newline at end of file +requestAnimationFrame(function init(t) { + fixdim() + lasttime = t + requestAnimationFrame(main) +}) \ No newline at end of file diff --git a/animation/dimensions.js b/animation/dimensions.js index 8789be9..eabf9c4 100644 --- a/animation/dimensions.js +++ b/animation/dimensions.js @@ -38,8 +38,6 @@ var dimensions = { this.height=curH return true } - else { - return false - } + return false } } diff --git a/animation/hypercube.js b/animation/hypercube.js new file mode 100644 index 0000000..9585b90 --- /dev/null +++ b/animation/hypercube.js @@ -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() +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..669cb3b --- /dev/null +++ b/css/main.css @@ -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%; + } +} \ No newline at end of file diff --git a/css/wau.css b/css/wau.css index 7f7723d..db91ac7 100644 --- a/css/wau.css +++ b/css/wau.css @@ -21,12 +21,14 @@ flex-grow:1; -webkit-flex-grow:1; } + .footer { width: 100%; color: #fff; background-color: #6A6A6A; text-align: right; } + .lengle { margin-top: 8%; margin-bottom: 8%; @@ -170,7 +172,6 @@ svg { .selected { background-color: #668EC3; - /*font-weight: bold;*/ } .bookend { diff --git a/demo.js b/demo.js new file mode 100644 index 0000000..23d5995 --- /dev/null +++ b/demo.js @@ -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() \ No newline at end of file diff --git a/img/eng.jpg b/img/eng.jpg new file mode 100644 index 0000000..c1dedb8 Binary files /dev/null and b/img/eng.jpg differ diff --git a/index.html b/index.html index d5bcdb8..6a0674d 100644 --- a/index.html +++ b/index.html @@ -1,162 +1,62 @@ + - Wau Demo - - - - - - - - - - + Tesseract.js | Pure Javascript OCR for 62 Languages! + - - - - - - -
-
- - Docs - GitHub -
- - -
- - -
-
-
-
-
-
- Tesseract.js is a pure javascript version of the Tesseract OCR Engine - that can recognize - English, - Chinese, - Russian, and 60 other languages. - - -
- -
- Get Started -
- -
-
-
-
-
- -
-
Initializing Magic...
-
-
-
-
Run Code
-
- - - -
- - -
-
-
English
-
Chinese
-
Russian
-
-
-
-
+
+
+ + +
Pure Javascript OCR
-
- - - -
-
-
- - - -
The output of the demo will magically appear here :)
- + -
-
- - - -
-
-
- “Speaking of ways, pet, by the way, there is such a thing as a tesseract.” -
- Made with by antimatter15 and omrelli.ug +
+
+ + +
+
+
+ +
-
+ + - - - + - + \ No newline at end of file diff --git a/index_old.html b/index_old.html new file mode 100644 index 0000000..d5bcdb8 --- /dev/null +++ b/index_old.html @@ -0,0 +1,162 @@ + + + Wau Demo + + + + + + + + + + + + + + + + + + + + +
+
+ + Docs + GitHub +
+ + +
+ + + +
+
+
+
+
+
+ Tesseract.js is a pure javascript version of the Tesseract OCR Engine + that can recognize + English, + Chinese, + Russian, and 60 other languages. + + +
+ +
+ Get Started +
+ +
+
+
+
+
+ +
+
Initializing Magic...
+
+
+
+
Run Code
+
+ + + +
+ + +
+
+
English
+
Chinese
+
Russian
+
+
+
+
+
+
+ + + +
+
+
+ + + +
The output of the demo will magically appear here :)
+ +
+ +
+
+ + + +
+
+
+ “Speaking of ways, pet, by the way, there is such a thing as a tesseract.” +
+ Made with by antimatter15 and omrelli.ug +
+
+
+ + + + + + + + + + + + +