Adventures with Creative Devlopment
Accessibility is complicated. There's a lot of nuance, a lot of kinds of user, and a lot of ways to write code. It's intimidating for a new developer. I'm even intimidated by it, and I've been writing code for years. Some of this intimidation isn't as a result of the difficulty of the task though. It's as a result of some devs commenting negatively on others attempts to make things accessible.…
TLDR: Wrap it in parenthesis to get rid of the issue In this weeks Interview question of the week in Cassidy's newsletter (good luck with the new baby Cassidy), the main challenge is to try and get all the code onto one line. I found a small syntax issue that I'd never seen before. We want to multiply all values in an array by a certain number. Here's a really reduced example: If we have a simple…
Check out "Takenobu Igarashi - Jazz Festival" on CodePen Discovered this great graphic designer Takenobu Igarashi on a TikTok and decided to do a little animating!
Check out "Animated SVG VHS error effect" on CodePen Had a really interesting conversation about creating aberrations for video. Subtle effects to give a little atmosphere. The aim was for SVG and CSS only. I came up with this not subtle way of containing an effect in CSS only.
Check out "Space Motion" on CodePen
Check out "Receipt Shader - Earth and Moon" on CodePen Saw this cool effect , and wondered about recreating it. What intrigued me about this was how the image was dithered in a totally binary way, jsut black and white. The shading was provided by essentially different sized black rectangles. Totally black? That pixel would be totally black, a full rectangle. Totally white? That pixel would be…
Note : these are just my honest opinions as a vanilla / Svelte dev trying React out on a real project. Not looking to have a war with anyone on this How did it go? How did it turn out? Worries before starting Worry 1: CSS is supposed to be weird. Poor recommendations from the docs Missing selectors Difficult maintenance Worry 2: What packages do I need to do things? Community Worry 3: JSX. Just…
AI Frustration Perhaps, like me, you were frustrated to hear that OpenAI is likely to have hoovered up your blog posts and Github contributions to train the ChatGPT model. Your work, that you did, and shared openly. What exactly is the issue you feel? Is it that the intention was to share with like minded individuals, rather than billion dollar companies? Wordpress frustration You might also have…
Check out "Hover Interaction (98/100)" on CodePen Saw this amazing series by Suz Sirunyan and had to have a go!
I've got a project coming in where I need to use React. I tried to learn it back around 2017. I had a visceral reaction to it. It did not work for my mental model. It felt like I had to jump through increadible hoops to achieve what would normally be simple for me (think PHP and jQuery times). In all affairs it's a healthy thing now and then to hang a question mark on the things you have long…
Check out "Red Moon" on CodePen Based on this cool poster on Savee . Thought about doing this with a custom shader, but happier with this vertex shifting!
Check out "Screenprint Racecar" on CodePen
Check out "Petit Stars" on CodePen Quick doodle of the cover of this notebook based on the Little Prince .
Check out "Stack Overflow Pipes" on CodePen I liked the pipes at the top of the Stack Overflow 2024 results page , and thought I'd try a quick sketch.
Check out "Wiggly Walls" on CodePen
Check out "Fun Red Shader" on CodePen
Check out "Creative Week - Beatriz Lozano" on CodePen Based on these designs by Beatriz Lozano
Check out "The Shed - Stairs" on CodePen I've always really loved the motion graphics work that Rare Volume did for The Shed . There are plenty of examples in there, but one that always caught my eye for some reason was this one. Initially I started making this with CSS and didnt have much luck. I havent played with the various 3D options in CSS very much. To get things clear in my head, I…
Check out "Painty blurry text" on CodePen Messing with some SVG filters. Really like how the text is blurry on the top / left, but the colors are making it sharp on the right / bottom.
Check out "Scaled steps" on CodePen
Check out "Miami Sunset" on CodePen
Check out "Happy Eye" on CodePen
I'm always hopefully searching on Ecosia for these few sites. I'm never sure if I've forgotten some. This is going to be where I keep my list of handy sites for free 3D assets. Poly Haven - free everything, and really high quality Pexels - free HDRs AmbientCG - free textures, high quality CG Trader - high quality models, surprising amount of them free Poly.Pizza - free low poly models Poliigon -…
First thing's first, this is very much a back of a napkin set of calculations. The data is not clear, but I'm working with what I can. My main data point is that GPT-3 uses a 500ml bottle of water for roughly 10-50 responses . Lets try and measure the impact of GPT-5 based on this. I'm going to take two approaches. I'm also going to be pessimistic and say that, based on the study above, 50…
Check out "Car at Night" on CodePen
Check out "Fire" on CodePen
Check out "Colorful Knots" on CodePen
Check out "Monster Eye" on CodePen
Check out "Distort ThreeJS Mesh and Retain Normals" on CodePen Ok this has actually been on the list for over a year. I've been trying to find a method of changing the positions of points on a ThreeJS mesh, but maintaining all the normal information for easy lightling. Shaders! That should be the solution, right? But the second we use a ShaderMaterial , we lose all lighting info, and our normals…
Check out "Beach letters" on CodePen
I've been sitting on some links for a while around easing and havent really been doing anything with them. I had in mind that I would do something amazing with them, but I still dont know what that would be. I've had to come back to them often enough that it's worth just collecting them here to share with all you lovely people! Easings.net This is the big deal for me. It's really quick (it's just…
Check out "Hand Lettering" on CodePen I came across a really nice After Effects tutorial by valeri_visuals and thought it might be possible to replicate in SVG. I really like the effect, but would love to get the filter working on HTML text elements like h1 s and h2 s. Seems like the outlines are lost when I try that.
Check out "Weak Force" on CodePen Based on this pen .
Check out "Rotating Clock" on CodePen
Check out "Merry Christmas 2023" on CodePen
Check out "Circle of Black Dots" on CodePen
Check out "Stain Glass" on CodePen
Check out "Sunflowers" on CodePen Click the sky to see the effect!
Check out "70s Ovals" on CodePen
Note: These are my own thoughts and dont represent the position of my employer. There's a lot of talk in the advertising world that "The End of the Cookie" is coming. This refers to the blocking of third-party cookies in browsers. Some, like Safari, Firefox and Brave are already doing this. The reason for this is to ensure users privacy so that we cant be monitored across sites. The biggest use…
Check out "Nailing Arcs" on CodePen I've spent a few years avoiding the arcs in P5. It always felt strange the point being the center of the circle, rather than some kind of bezier setup that I'm more comfortable with. Decided to attack it with this doodle!
It can be a real brain twister trying to remember the difference between frequency and amplitude. Here's a quick breakdown. Frequency Changes how frequently there are changes. Higher frequency, more wiggles. Lower frequency, less wiggles. This is an interactive demo, try it out on the site to see it in action! Amplitude Changes the size of the wiggles. Higher amplitude, higher wiggles. Lower…
Check out "Cone Shapes" on CodePen This was just a fun little idea I came across, multiplied. I saw that a circle with a stroke, when moved, left a little bit of its fill behind, and that kinda looked like shading. Because of the curve, there was more fill visible in the center. I decided to make these kind of cone shapes form over a few generations to fill the screen.
We already know that there are lots of ways of rounding in JS . But did you know that there's a shorthand for Math.floor() ? If we use the Bitwise Operator ~ twice, we can floor a number. let num = 1.13542345 ; console . log ( ~ ~ num ) ; // returns 1 No, I dont really understand how it works either. It's probably not a great thing to write in your code, because other people might not understand…
Normalizing can be confusing because there are some slightly different, but similar meanings, in different dituations. Normalizing vectors Different to normalizing numbers, normalizing vectors is quite straight forward. Lets take the example of the 2D vector [3,4] ; Normalizing this means returning a new vector, the length of which is equal to 1 . A vector of length 1 is also sometimes called a…
Normalizing can be confusing because there are some slightly different, but similar meanings, in different situations. Normalizing numbers Typically the target of normalizing is to get numbers either in the range [0 -> 1], or [-1 -> 1]. To do this you'll need to know the minimum and maximum numbers in the range, and map your value to them. Let's make a function we can use to normalize. We'll work…
Check out "Flood" on CodePen Based on this article by Manohar Vanga I havent looked at their code, but just made an attempt at it myself based on their article
We've already spoken about Math.random() , which gives us a random number between 0-1 . Noise does the same thing (though sometimes might be a number between -1 - 1 ), but in a very different way. Lets compare random to noise in 1d. We'll get x100 values and plot them. You can see in the pattern above that, yes, random and noise return unpredictable numbers, but they do it in a very different…
This really confused me when I started creative coding, and I just accepted it was magic. After a lot of experience I now get it, and I want to help you get there quicker too. This is a really unintuitive thing to understand, and might take a few tries before you're comfortable with it. Feel free to read this once, try things out, then come back to it later as you get more experience. So what are…
This isn't about my conception, we're not going to get into that... this is about the happy accidents that happen with creative coding. Sometimes the maths can be really complicated. Sometimes you get confused. Sometimes you make a mistake, and things can go wrong. And sometimes that ends up being amazing ! When I was trying to make this Chihuly design . I got the logic wrong and ended up with…