click on the links (underlined titles) to view more about each project
in-class exercise/activity: p5.js
Based on the Film Locations Sheet, export it as a local JSON file, upload this file to the web sketch editor, and draw these coordinates in p5.js using map function.
tip: Think about how an area on a map can be shrunk into a p5 canvas, using latitude ranging from 22.99 to 37.53, longitude ranging from -121.74 to -92.96.
* extra credit: link the coordinates in the order they appear
in-class demo: intro to p5.js
plotting coordinates using data from JSON
in-class demo: intro to p5.js
using class and constructor
in-class demo: intro to p5.js
using for loops and array
in-class demo: intro to p5.js
array
in-class demo: intro to p5.js
using for loops to create a āgridā
in-class demo: intro to p5.js
making a pokeball bounce around the screen
in-class demo: intro to p5.js
making the circle bounce around the screen
in-class demo: intro to p5.js
making mouse interavtive ball/circle (using mouseX and mouseY)
in-class demo: intro to p5.js
uploading fonts to p5.js
in-class DOM exercise
in-class JSON exercise
Choose one webpage that you would like to recreate, and Develop the HTML and CSS code for using responsive design techniques. Make sure your website is optimized for different screen sizes such as desktop and mobile.
Recreate poster as a webpage using HTML and CSS.
* extra credit: using CSS Flexbox, using CSS gradients to better approximate the green box, and show the text below when hovering on the green box
A detailed wireframe of the siteās structure and interaction (including color and typographic system, a gestural homepage sketch that showcases the primary interaction of the site)
***
more work will be added as the spring 2023 semester goes on.