project-j

Project J is the idea of four developers and friends looking to design a site where you can utilize creativity along with technology to construct nature-based images. We strive to harness the power of web development tools to create beautiful things. We lovingly built this site using HTML, CSS, JavaScript….. Take a moment from your busy day and create something, anything.

Resources:

https://www.w3schools.com/howto/howto_css_modals.asp

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball

(canvas basics)

https://www.w3schools.com/howto/howto_css_download_button.asp

https://jsfiddle.net/codepo8/V6ufG/2/

(download options)

https://jsfiddle.net/codepo8/V6ufG/2/

https://weworkweplay.com/play/saving-html5-canvas-as-image/

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

(saving canvas as img)

https://lavrton.com/hit-region-detection-for-html5-canvas-and-how-to-listen-to-click-events-on-canvas-shapes-815034d7e9f8/

(work around for non-supported hit regions)

https://www.w3schools.com/howto/howto_js_sticky_header.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

https://www.w3schools.com/css/css3_flexbox.asp#flex-wrap

https://css-tricks.com/css-basics-styling-links-like-boss/

(CSS references)

https://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas

(adding base image to canvas)

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics

(freehand drawing)

http://perfectionkills.com/exploring-canvas-drawing-techniques/

(to get the lines on the page)

https://www.bestcssbuttongenerator.com/#/3 (buttons for CSS)

https://codepen.io/ChrisMla/pen/jWMLWY (animation for CSS)

Authors:

John Bavendam, Jerod Rubalcava, Jessie Van Volkinburg, Jessica Zuchowski