A p5.js starter template for the 128kb Challenge
Your 128kb journey starts here!
This is a template you can use to start developing your idea within the 128kb framework. It is based on inline HTML, so everything (the HTML, the CSS and the JS) is included in a single file. That’s a lean an smart way working with simple sketches.
How it works
Simply put this code in your favorite code editor (for example Visual Studio Code) and start sketching. To easiest way to display your running sketch in Visual Studio Code is by using the the “live-server” extension. It adds a button to the UI at the bottom right. When you click that button, it opens up the sketch in your browser.
To start the rendering process of the gif, simply set the variable exportGif to true. Then the gif file will be downloaded autmatically.
Have fun!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js"></script>
<script src="https://unpkg.com/p5.createloop@0.3.1/dist/p5.createloop.js"></script>
<meta charset="utf-8" />
<link rel="icon" href="data:," />
</head>
<body>
<style>
html,
body {
margin: 0;
padding: 0;
}
main {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
canvas {
display: block;
image-rendering: pixelated;
width: 512px !important;
height: 512px !important;
display: block;
}
</style>
<main></main>
</body>
<script>
const exportGif = false;
function setup() {
createCanvas(128, 128);
if (exportGif) {
saveGif("mySketch", 128, { units: "frames", delay: 20 });
}
}
function draw() {
background("#aaaaaa");
fill(0);
circle(width / 2, height / 2, frameCount);
}
</script>
</html>
Submit your work to the gallery!
If you want to show what you have done, please feel free to submit it via the form on this page:
Share it on Social Media
To share your work on Instagram or other channels, that do not accept the gif format, you can use this tool to convert your gif to a high resolution mp4 file.
Enjoying the content?
I put a lot of love and effort into developing content on Creative Coding. Since 2018, I have published 208 interviews, case studies, and tutorials, along with over 267 lessons in 16 online courses – and there's more to come! If you'd like to support my work and help keep this platform evolving, please consider supporting me on Patreon. Thank you very much!
Related
Daniel Shiffman on The Nature of Code
In this conversation Daniel and I discussed a broad range of topics, from the role of AI in Creative Coding to the beauty of Object Oriented Programming.
Thinking Different – Using Linux in Design
“Think Different” If you are as old as me, you probably remember the iconic advertisement of Apple with the bold […]
Hannah Gmeiner on Permacomputing in Graphic Design
In an age of increasing digital consumption, Hannah, a recent visual communication graduate, explored “Permacomputing”—a sustainable approach to technology inspired […]
Building Tools with p5.js (Playlist)
Click here to login or connect!To view this content, you must be a member of Tim's Patreon Unlock with PatreonAlready […]
DEMO 2025 – My Submissions
Limitations have always been playing a major role in my creative work; I was only able to develop my best […]
Tameem Sankari on Creative Coding for Large Media Corporations
In this interview, Copenhagen-based creative director Tameem Sankari shares his journey into Creative Coding, combining Processing, Blender, and Adobe CC. […]
Sam Griffith connects Creative Coding with Enviromentalism
In this post I’d like to introduce you to Sam Griffith, a talented graphic designer based in Detroit, to discuss […]
Throwback: My Talk at Demo Festival 2022
The next edition of the DEMO Festival is already approaching and I am currently developing a brand new talk for […]
Powers of Two – 128kb by Lena Weber
20 = 1 21 = 222 = 323 = 824 = 1625 = 3226 = 6427 = 128 … »In […]
A Call for Coding Designers
This is a call for coding designers. It aims to serve as a proposal and a provocation for creative work […]
p5.js Design Tools Directory
Hi! In this post I’ll collect case studies and direct links to tools that people have built with p5.js and […]
Omid Nemalhabib explores the intersection of Creative Coding and Perso-Arabic Typography
In 2022, I spontaneously posted a story on Instagram: If anyone out there is also in Rotterdam, I’d love to […]
The 128kb Framework and its Aesthetic Characteristics
One day in early 2024 I started to experiment with a new idea. I wrote down a set of rules […]
A conversation with Talia Cotton
During OFFF Festival here in Barcelona, many interesting people come around! This interview with Talia Cotton came about almost by […]
Lena Weber about her collaboration with A. G. Cook
Lena: This 10-minute visualiser for A. G. Cooks album teaser featuring my python archive generator, is one of my favourite […]
A conversation with Anna Shams Ili
Hi Anna! It was super nice to meet you at the PCD CPH, I really liked your talk in which […]
Coding Systems: New Workshop Dates!
When I held Martin Lorenz’s new book in my hands and turned it onto its back, I was a little […]
My new writing project “downgrade” is live
Hey folks, I hope you are doing great! You may have already read one or two of my essays that […]
Join the 128kb challenge!
Instagram, Twitter, TikTok… All the main platforms that technically have the required features to connect emerging communies for Creative Coding […]
Ruder Processing Unit by Kevin Koch
In my teaching at universities and in workshops, I have met many very enthusiastic and highly talented people who have […]
Computer Cursive by Tay Papon Punyahotra
One of the first exercises I assign to my students in my seminars is called “Random Compositions”. Basically, it’s quite […]
A reflection on Processing Community Day Copenhagen 2023
I’ve been travelling a lot in the last few months. Still, it was only during a short stay in Copenhagen […]
Ksawery Kirklewski on his Symphony in Acid
For me, it’s by far the most inspiring project of the last few years: “Symphony in Acid”, a collaboration between […]
Kiel Danger Mutschelknaus on building Design Tools with Code
Please note: This is a interim state of this interview, I am currently working on the edit. Stay tuned! How […]