<aside> 💡 Submission details

To simplify the logistics of submission, feel free to just use the p5.js editor. Note on the left-hand side of the editor, you can expand to see other files. Meaning: you can create and write HTML, CSS, and JS files, just as you would in VS code.

Please submit this on your student page

</aside>

Create an image collage

Create an interactive image collage

Use this template, which has links and descriptions to a bunch of images. Note that I’ve included one sample image that is manually placed on the page directly in the HTML for reference.

• Place each image in a random position on the page
  • Using percentages will be better than absolute values
  • Note that the images are already styled with ‘absolute’ positioning — so simple adding one percentage values for top and left will give them a place on the page
• Change the styling for the images on hover (this requires one css class and set of styles)
• Make it so that clicking on an image will remove it

Review from before

CSS does include a small degree of interactivity (with say, the :hover pseudo-class that allows you to change styling on hover. But Javascript is much more powerful — it can detect click, scroll, or key movements on a page, and generate content in response.

Recall what we’ve done in past classes with Javascript interactivity

Javascript - adding new elements