I was a little short on time this week, so I wanted to do something nice and simple.
I created this personal splash site for myself:
It’s definitely still got a bit of tweaking to do. I’ve been meaning to re-do my personal website for a while. It’s been very vanilla and minimal as of now:
I thought it would be fun to integrate a p5 background into a single-serve page.
I was inspired by Rafael Rozendaal’s slinky “slick quick” website:
Okay, so I made something which is secretly a bouncing ball (although it does have a layer of bouncing colors too.)
I added a button at the top of the page which would let people refresh the background of all its color nonsense.
A few of the challenges I ran into:
- I wanted the “button” element to be responsive when I changed the window width. I know how this works with CSS on an existing HTML element.I wonder if there is a way to control a specific HTML element which I already created, without declaring it in p5?(Here, “clear bg” stays fixed when I resize the window:)
In the end, I put all my nested HTML elements into one js dom div. Because that one string got so long, it was difficult to change aaaaannny of the content in the Div element.
- Object oriented: The color change was a bit more difficult than a normal 1d ball bounce; I wanted the individual red, green, blue values to “bounce” back when they hit max or min values (255, 0).I got it in the end; for a while, it looked like this:
- Also, I worked on everything zoomed out. As a result, put in all the CSS values wrong… derp. Note-to-self, work at 100%!
I had multiple buttons at one point. I thought it would be nice to create a nav div to house the buttons in. Is it possible to nest DOM elements with sketch.js? The sheep image that appears on click disappears, unless I set up my own local server? How do I do that?
- Can p5 be responsive without refreshing the page? I noticed that the sketch canvas bounds were fixed after loading… I assume no 😦
I will be troubleshooting sometime in the future. I transferred everything to github for now, so it is live.
You can see it hosted here:
See the original p5 sketch: