January 30, 2024tutorial how-to meta
Happy Coding shows a random background image on every page. Those images are generated with code, and I’d love if other people contributed their own!
This guide walks through the process of creating and contributing your own background image.
Using your coding language of choice, write some code that generates a cool pattern.
If you want some inspiration, check out the tutorials and examples on Happy Coding, or scroll to the bottom of any page to find a link to the source code for its background.
draw() function in a
In p5.js, you can right-click the canvas and save your canvas as an image. In Processing, you can call the
saveFrame() functions to create an image file.
I’ve been creating image files with a resolution of 1920x1080.
By default, backgrounds will be stretched to fill the screen. Their aspect ratios will be preserved (so they won’t look distorted), but they might be cut off (so users with small screens might only see the top-left corner). Try resizing your browser window and watching how the background resizes to see what I mean.
I’m open to other ideas. If you want to use a different size, or if you want your background to repeat instead of stretch, let me know!
After you’re happy with your background image, submit it to Happy Coding!
There are two main ways to do that:
Your submission should include a few things:
If you’re curious about how the random background images work, check out the backgrounds.js file.
That file contain an array of objects. Each object specifies an image file (stored in the backgrounds directory) and a link to the code that generated the file.
Then on page load, the code picks a random object, and changes the background of the page to that object’s image file. It also adds a link to the footer of the page.
If you made it this far, I’d love to see what kinds of background images you come up with!