Difference between revisions of "Team:SVCE Chennai/Notebook"
Abrahamrkj (Talk | contribs) |
Abrahamrkj (Talk | contribs) |
||
| Line 244: | Line 244: | ||
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2; | var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2; | ||
| − | // The canvas size equals to the book dimensions | + | // The canvas size equals to the book dimensions this padding |
var CANVAS_PADDING = 60; | var CANVAS_PADDING = 60; | ||
| Line 261: | Line 261: | ||
var pages = book.getElementsByTagName( "section" ); | var pages = book.getElementsByTagName( "section" ); | ||
| − | for( var i = 0, len = pages.length; i < len; i | + | for( var i = 0, len = pages.length; i < len; i ) { |
pages[i].style.zIndex = len - i; | pages[i].style.zIndex = len - i; | ||
flips.push( { | flips.push( { | ||
| − | // Current progress of the flip (left -1 to right | + | // Current progress of the flip (left -1 to right 1) |
progress: 1, | progress: 1, | ||
// The target value towards which progress is always moving | // The target value towards which progress is always moving | ||
| Line 277: | Line 277: | ||
// Resize the canvas to match the book size | // Resize the canvas to match the book size | ||
| − | canvas.width = BOOK_WIDTH | + | canvas.width = BOOK_WIDTH ( CANVAS_PADDING * 2 ); |
| − | canvas.height = BOOK_HEIGHT | + | canvas.height = BOOK_HEIGHT ( CANVAS_PADDING * 2 ); |
// Offset the canvas so that it's padding is evenly spread around the book | // Offset the canvas so that it's padding is evenly spread around the book | ||
| − | canvas.style.top = -CANVAS_PADDING | + | canvas.style.top = -CANVAS_PADDING "px"; |
| − | canvas.style.left = -CANVAS_PADDING | + | canvas.style.left = -CANVAS_PADDING "px"; |
// Render the page flip 60 times a second | // Render the page flip 60 times a second | ||
| Line 304: | Line 304: | ||
flips[page - 1].dragging = true; | flips[page - 1].dragging = true; | ||
} | } | ||
| − | else if (mouse.x > 0 && page | + | else if (mouse.x > 0 && page 1 < flips.length) { |
// We are on the right side, drag the current page | // We are on the right side, drag the current page | ||
flips[page].dragging = true; | flips[page].dragging = true; | ||
| Line 315: | Line 315: | ||
function mouseUpHandler( event ) { | function mouseUpHandler( event ) { | ||
| − | for( var i = 0; i < flips.length; i | + | for( var i = 0; i < flips.length; i ) { |
// If this flip was being dragged, animate to its destination | // If this flip was being dragged, animate to its destination | ||
if( flips[i].dragging ) { | if( flips[i].dragging ) { | ||
| Line 321: | Line 321: | ||
if( mouse.x < 0 ) { | if( mouse.x < 0 ) { | ||
flips[i].target = -1; | flips[i].target = -1; | ||
| − | page = Math.min( page | + | page = Math.min( page 1, flips.length ); |
} | } | ||
else { | else { | ||
| Line 338: | Line 338: | ||
context.clearRect( 0, 0, canvas.width, canvas.height ); | context.clearRect( 0, 0, canvas.width, canvas.height ); | ||
| − | for( var i = 0, len = flips.length; i < len; i | + | for( var i = 0, len = flips.length; i < len; i ) { |
var flip = flips[i]; | var flip = flips[i]; | ||
| Line 346: | Line 346: | ||
// Ease progress towards the target value | // Ease progress towards the target value | ||
| − | flip.progress | + | flip.progress = ( flip.target - flip.progress ) * 0.2; |
// If the flip is being dragged or is somewhere in the middle of the book, render it | // If the flip is being dragged or is somewhere in the middle of the book, render it | ||
| Line 365: | Line 365: | ||
// X position of the folded paper | // X position of the folded paper | ||
| − | var foldX = PAGE_WIDTH * flip.progress | + | var foldX = PAGE_WIDTH * flip.progress foldWidth; |
// How far the page should outdent vertically due to perspective | // How far the page should outdent vertically due to perspective | ||
| Line 377: | Line 377: | ||
// Change page element width to match the x position of the fold | // Change page element width to match the x position of the fold | ||
| − | flip.page.style.width = Math.max(foldX, 0) | + | flip.page.style.width = Math.max(foldX, 0) "px"; |
context.save(); | context.save(); | ||
| − | context.translate( CANVAS_PADDING | + | context.translate( CANVAS_PADDING ( BOOK_WIDTH / 2 ), PAGE_Y CANVAS_PADDING ); |
// Draw a sharp shadow on the left side of the page | // Draw a sharp shadow on the left side of the page | ||
| − | context.strokeStyle = 'rgba(0,0,0,' | + | context.strokeStyle = 'rgba(0,0,0,' (0.05 * strength) ')'; |
context.lineWidth = 30 * strength; | context.lineWidth = 30 * strength; | ||
context.beginPath(); | context.beginPath(); | ||
context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5); | context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5); | ||
| − | context.lineTo(foldX - foldWidth, PAGE_HEIGHT | + | context.lineTo(foldX - foldWidth, PAGE_HEIGHT (verticalOutdent * 0.5)); |
context.stroke(); | context.stroke(); | ||
// Right side drop shadow | // Right side drop shadow | ||
| − | var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX | + | var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX rightShadowWidth, 0); |
| − | rightShadowGradient.addColorStop(0, 'rgba(0,0,0,' | + | rightShadowGradient.addColorStop(0, 'rgba(0,0,0,' (strength*0.2) ')'); |
rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)'); | rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)'); | ||
| Line 400: | Line 400: | ||
context.beginPath(); | context.beginPath(); | ||
context.moveTo(foldX, 0); | context.moveTo(foldX, 0); | ||
| − | context.lineTo(foldX | + | context.lineTo(foldX rightShadowWidth, 0); |
| − | context.lineTo(foldX | + | context.lineTo(foldX rightShadowWidth, PAGE_HEIGHT); |
context.lineTo(foldX, PAGE_HEIGHT); | context.lineTo(foldX, PAGE_HEIGHT); | ||
context.fill(); | context.fill(); | ||
| Line 409: | Line 409: | ||
var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0); | var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0); | ||
leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)'); | leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)'); | ||
| − | leftShadowGradient.addColorStop(1, 'rgba(0,0,0,' | + | leftShadowGradient.addColorStop(1, 'rgba(0,0,0,' (strength*0.15) ')'); |
context.fillStyle = leftShadowGradient; | context.fillStyle = leftShadowGradient; | ||
| Line 435: | Line 435: | ||
context.moveTo(foldX, 0); | context.moveTo(foldX, 0); | ||
context.lineTo(foldX, PAGE_HEIGHT); | context.lineTo(foldX, PAGE_HEIGHT); | ||
| − | context.quadraticCurveTo(foldX, PAGE_HEIGHT | + | context.quadraticCurveTo(foldX, PAGE_HEIGHT (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT verticalOutdent); |
context.lineTo(foldX - foldWidth, -verticalOutdent); | context.lineTo(foldX - foldWidth, -verticalOutdent); | ||
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0); | context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0); | ||
| Line 447: | Line 447: | ||
})(); | })(); | ||
| − | |||
</script> | </script> | ||
</html> | </html> | ||
Revision as of 20:48, 17 September 2015
Notebook
Primitive Cats Poem
Like primitives we buried the cat with his bowl. Bare-handed.We scraped sand and gravel back into the hole.They fell with a hiss and thud on his side, on his long red fur, the white feathers between his toes, and his long, not to say aquiline, nose.
We stood and brushed each other off. There are sorrows keener than these. Silent the rest of the day, we worked, ate, stared, and slept. It stormed all night; now it clears, and a robin burbles from a dripping bush like the neighbor who means well but always says the wrong thing.
A Poem to End
Life is like a box of chocolates, Sweet and full of surprise. If only you knew what was in for you, when your given the gift of life.
Life is like a box of chocolates, a wonder for a child, but as you grow, your more likely to know, which chocolates will be vile.
Life is like a box of chocolates, you never know what your gonna get, but when in strife, and confused with life, there'll always be a treat, so don't fret.