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. They take the efforts of someone else, who has the same beliefs and has put in hard work, and blast any error in public.

This is accessiBILE.

I understand the strain that accessibility experts feel when someone says something is accessible, but they can see the flaws. Especially when they themselves might require these accessibility features themselves. That frustration is completely valid. But in the cold light of day, they might be working against themselves by creating accessiBILE.

I've had conversations where devs have chosen to avoid doing accessibility on a project because it's easier to look like you didnt bother, rather than get torn apart for it not being perfect.

A good solution for devs who feel this way is to share a pared down demo with your community. Some of the Discords I'm a member of have an accessibility channel, and people often share demos there. Generous devs come in and share their thoughts on how to improve the code. This not only leads to more accessible code, but a more positive view in the community of accessibility.

I have huge respect for those who work hard on accessibility. I am by not means great at it myself, and they're the ones I try to learn from. They also have to constantly fight against all the shiney and new things that might ruin the accessibility they've worked so hard for. It is unfair to ask them to also take the burden of checking in on their emotions in this struggle. I would ask them though to think about if doing so might better serve their long term goals.

And to any devs who are intimidated by accessibility, keep trying. Share your concepts with others to double check your efforts. And try to ignore the accessiBILE.

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 array

const arr = [1,2]

The long way, we could do

simpleArr.map(item=>{
	return item*2
}) // returns [2, 4]

We can use arrow functions implied return to get this on one line:

arr..map(item=>item*2) // returns [2, 4]

Great, this all works.

Now, in the Interview question of the week, there's one small difference, the array is of objects, not values.

const arr = [
	{ val: 1 },
	{ val: 2 }
]

The long way works

arr.map(item=>{
	return {...item, val: item.val * 2} // returns [{val: 2}, {val: 4}]
})

Now I assumed I could just use the implied return, but instead I got an error

arr.map(item=>{...item, val: item.val * 2}) // returns Uncaught SyntaxError: Rest parameter must be last formal parameter

I found the MDN page that explains the error. Honestly I find these pages arent great, the explain the error, but they dont explain how the error is affecting me.

It seems that passing a spread value (...item) to an implied return works like passing it to a function, and then it has to be the last parameter. I needed it to be the first, so the new val value could overwrite it. And I even wasnt passing this to a function (I think)!

Luckily, I found the solution, just wrap it in parenthesis. If I'm remembering Will Sentance's training crorrectly, this creates a new execution context, creates our object, and passees it back to be returned without the spread involved.

arr.map(item=>({...item, val: item.val * 2})) // returns [{val: 2}, {val: 4}]

Discovered this great graphic designer Takenobu Igarashi on a TikTok and decided to do a little animating!

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.

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 totally white, a rectangle with no width.

Grey? That pixel would be black on the left half, white on the right half. A rectangle 50% width rectangle within the pixel.

I pixelated the image, averaging the color within each new "pixel".

Each color in each pixel then got the dithering treatment,and then added some steps to make things feel a little more old school.

• 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 uggggghhhhhhh.
• Moving away from standards
  • Transfer of skills
  • Mental burden
• Conclusion

Ok, I said I'd give some little updates as I went, but honestly, I didnt have time because I was fixing soooooo many Typescript issues.

That's a bit of a joke, and a little bit true. There's a lot to say, so if you dont want to read it all, just read the first two sections.

How did it go?

Did I try to learn too much at once? React, Next, Tailwind and Typescript. I essentially hadnt used any of them before. I had a pretty steep learning curve.

For example, the errors in the terminal meant nothing to me. When there were errors. It felt like the feedback would either be "catastrophic error", or silent errors skuttling my code in the background. And it wasnt always clear (to a beginner) if the error I made was a Typecript violation, misusing Next, or a fundamental React issue.

After a while, I did start getting the hang of it. I was able to put a component together pretty comfortably, and understand how to fix errors.

How did it turn out?

Now that I'm used to it, do I like the React ecosystem? No. I truly feel like it's a relic of a particular time, and isnt at all optimal for the tools we have now. I think users and developers alike are the victims here, and only that it appears to make hiring easier, therefore more juniors learn it, it survives.

Within that, then, I think the weight of the React ecosystem mental model is so heavy that devs feel they cant take on the mental weight of another framework.

On to the details.

Worries before starting

In my first post I had a few things, lets see if they did.

Worry 1: CSS is supposed to be weird.

I love CSS. Styles, neatly cascading, intertwining, overriding and eventually displaying a neatly choreographed UI? * chefs kiss *

The change to Tailwind was jarring. My first note was that "Tailwind feels like it doesnt want to use the cascade". Of course, with purely utility classes, that's true.

Like with everything else in this project, I got used to it. That said, I did have to escape a lot of Tailwind's own set classes (eg p-[1.5rem]). I also used global.css to write a class or two, for a grid system and some reset styles I didnt agree with in Tailwind.

There are limitations with Tailwind.

Poor recommendations from the docs

They dont recommend using :before or :after. "It’s worth noting that you don’t really need ::before and ::after pseudo-elements for most things in Tailwind projects — it’s usually simpler to just use a real HTML element.". They recommend using spans instead.

This is mind blowing, and I feel bad practice. These pseudo elements, even in their example, are purely for display. :before and :after are exactly what should be used here. I feel the developers realised they couldnt make this neat in Tailwind, so recommended something worse.

Missing selectors

Not only bad advice, but a whole class of selecting is lost: :first-child. Sure you can add first:____ to the first element. But that's not the purposed of :first-child. The intent is to select the first child of the parent.

To get around this I initially had to arbitrarily set first: in several different components. This got messy, so I eventually changed my architecture to avoid needing to select the first child.

Difficult maintenance

Another issue is consistency. If you want the same styles on two different elements you have to copy and paste the whole class list. If you want variations, and then to change them later, you're doing a lot of find and replacing. I've only created one Tailwind project, but the thought of maintaining one is terrifying.

I can already hear the feedback "make it a component". Really? I need to rig up a whole React component for what could be a single CSS class? That, to me, is insanity.

My conclusion for Tailwind is that, sure a smattering of utility classes is ok, but only utility classes as a paradigm is broken. Also, culturally, sticking to that paradigm leads to bad practices.

Worry 2: What packages do I need to do things?

So this one was a nightmare. I happened to start at a bad time. React 19 and Next 15 are both pretty new, so the ecosystem hadnt had time to catch up.

I wanted to use P5, but it didnt have an updated package. I knew Pixi had a React specific package @pixi/react. Luckily that has a beta available for React 19.

Related to this is how I found out that Pixi has a beta. At various points in the project I was searching "how to X in React 19 Next 15", and very little came back. In fairness, again, this was a new version so there might not be a lot of content out there.

What was striking though was that old examples wouldnt work. Samples of code for Next 14 are just broken in Next 15.

I find this crazy. 15 versions in, and the paradigms are still changing that much that a lot of the old basics are redundant now?

This makes me very happy, thinking of the Svelte eco system. I think Svelte 5 still supports Svelte 3. You can mix and match. "BUT SVELTE HAS A COMPILER". Yeah, and so does every realistic way of working with React.

Community

The React based communities I visited were very helpful though. Especially the Pixi Discord.

Part of me wonders though if the React community is so large and vocal because of these issues with packages. They've had to deal with so many paradigm shifts, then need to band together.

Maybe Svelte and Vue need ruin the syntax more to bring people together.

Worry 3: JSX. Just uggggghhhhhhh.

Actually, this is one I was quite ok with.

I dont love the syntax. I find it messy and very jarring with standard JavaScript, but it works.

EG

return (
    boolean && <Component>
}

That's a trick. And it works. But it requires a decent amount of knowledge, knowledge that doesnt relate to templating. Dont even get me started on returning ().

"What would be better?", fair questions. I'm not standards creator, but what about something like:

return `
    ?{boolean}
        <Component />
    ?{/}
`

The idea being ${} is for execution, but ?{} would be for evaluation, and ?{/} denotes the end of what is at stake within that evaluation?

There's talk of brining JSX into the browser as a standard. I'm less horrified by that now. That said, I think there has to be a neater way of achieving it.

Moving away from standards

There's a common refrain by React devs that "it's just Javascript ™".

That's right and wrong, in two ways.

Yes, it is just JavaScript, that's right. It's ONLY JavaScript, no HTML, CSS, SVG etc.

It also isnt "just" JavaScript. It's JavaScript in the context of React. For example events arent simple browser events, they're synthetic events, and you need to get the nativeEvent back from it. I'm sure there are "reasons", but I never saw a benefit to them.

The lifecycle loop of React is also so awkward and brittle. useRef, useState, useEffect. God forbid you have an issue with these. Most places React devs only respond with the url https://react.dev/reference/rules/rules-of-hooks, not helping the reader learn more. In fairness, this was rare, but there seems to be a culture of not helping explain these kinds of issues.

Transfer of skills

This and other small changes mean that a lot of my existing knowledge doesnt work in React-land. That's true of Svelte too. As percentages though, I would say React feels like 40-50% standards based, and Svelte feels 90-95% standards based.

I believe a Svelte developers skillset is significantly more transferable to other situations than a React developer.

Mental burden

The other way to look at this is that React at best, to me, only 50% feels like I'm working with the web platform.

BUT it's still being built for the web. So the mental lifting needed to make something work in React, while also thinking about how it works for the web is simply bigger than with other frameworks.

Conclusion

This was all a bit scattershot, because I could write so much more about any of these issues, and I wanted to keep things more succinct.

Overall I believe React devs would be amazed to see how much easier and lighter it is so write applications in other frameworks. Maybe that's one of the reasons they're so slow to move. They already carry so much mental weight. And each update is so heavy too. I'd be slow to try and add the weight of another framework too.

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 heard that (very rich man) Matt Mullenweg is frustrated that some using his open source tech is making money from it.

Generally this has been met with jokes at Matt's expense. Truth be told, I've kind of agreed.

AI Frustration: Part II

Yesterday OpenAI has claimed that DeepSeek has stolen their intellectual property to train their AI model.

I openly laughed at this news. They didnt care when it was our stuff. Now that it's theirs, it's an issue.

Similarities

These ideas were swirling around my head today. I think there's a huge parallel between all three stories.

[entity 1] creates intellectual property, only to have [entity 2] use it in a way that differs from [entity 1]'s intention for its use.

I'm not sure what my point is here, but I do find myself wondering, are we Matt Mullenweg?

Saw this amazing series by Suz Sirunyan and had to have a go!

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 taken for granted. – Bertrand Russel

Time to be healthy and put a question mark around my assumptions about React.

My aim here is to explore what modern React looks like, paired with Next.js. I'm going to compare that to my experiences with vanilla JS and Svelte/Kit.

Before even starting, here are...

The things that I think are going to trip me up.

• CSS is supposed to be weird. The idea of writing it in JS, or having to use Tailwind in HTML just feels wrong to me.
• What packages do I need to do things? I'm hoping that by using Next.js they'll have sensible defaults and I wont need to worry about too much.
• I'm going to probably be incorporating P5, interactinve SVG and maybe ThreeJS. I'm very used to using these vanilla style and bending them to my will. Will the React lifecycle get in the way there? I know GSAP has special functions to work with React. That makes me nervous.
• JSX. Just uggggghhhhhhh. What's going on there.
• Performance is typically brought up as an issue. Will I be able to understand the lifecycle well enough to get around this.
• Apparently React is bad for accessibility. The project should be mostly pretty straightforward HTML... lets hope.

And to be fair...

The things I'm hopeful about

• React is huge. People have hit and solved all the issues above. Hoping the community will be able to help me.
• There's apparently a convergence between the frameworks recently. Svelte has become more like React, and React more like Svelte. With some luck, this will help me bridge the gap.

This will be part 1 in a series. As I find something interesting in the adventure I'll add a post!

Based on this cool poster on Savee.

Thought about doing this with a custom shader, but happier with this vertex shifting!

Quick doodle of the cover of this notebook based on the Little Prince.

I liked the pipes at the top of the Stack Overflow 2024 results page, and thought I'd try a quick sketch.

Based on these designs by Beatriz Lozano

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 recreated it in ThreeJS.

Once I had that nailed down I was more confident coming back to CSS and applying what I had figured out.

There are two things that really stand out for me, the use of variables, and the use of mathematics.

Look at the :root element at the top of that CSS file.

:root {
/* 	angle of steps */
	--ang: calc(cos(pi * .25) * 1rad);
/* colors	 */
	--black: #000;
	--white: #fff;
	--grey: #ddd;
/* 	fonts */
	--fz: 50px;
	--lh: 1.2rem;
/* camera	 */
	--perspective: 9;
/* 	animation */
	--duration: 2s;
}

Magestic! Look how much control we have. And that cascades through all our calculations later.

Then, more specifically, that first line.

--ang: calc(cos(pi * .25) * 1rad);

This would have been mind blowing only a year or two ago. We're using cos() functions and constants like pi in raw CSS!

I really love where we've come to!

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.

• 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 - small but nice selection of free assets

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 responses = 500ml, or 1 response = 10ml.

• Compare based on parameter count
• Compare based on created media

Parameter Count

This is the least accurate method. I'm going to claim a 1:1 ratio between parameter count and water use. In the absence of other data.

GPT-3 has 175 billion parameters. So we will also say that, one 175 billion parameter response = 10ml of water.

Looking at each generation of GPT, we get the following water use, per response.

We're seeing that essentially every 2 years or so, the parameters x10, as does the water use.

This is at a time where where over 50% of the world experiences water stress at least once a year, and huge cities like Mexico City are months away from running out of water.

Obviously, this is all very much "back of a napkin" style calculations. If this trend continues till 2030, just three more generational leaps for AI, we'll be consuming 1000 litres of water per response.

These aren't facts, but I don't hear many AI enthusiasts worrying about this, so I'm trying to sound the siren.

Some questions that would be useful to have answered.

For you, the reader

• what benefit are you truly getting from AI?
• do you believe it's worth this potential impact?
• do you believe it's worth the theft that went into it?
• are you comfortable creating a culture where theft and environmental impact are acceptable consequences of doing business?

For the AI company

• are there plans to significantly improve or eliminate the environmental impact of AI?
• we're seeing AI responses move from text, to image, to video. These will mean an acceleration again of these numbers. How will you mitigate this?

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 are broken. We now need to go and rset all of those. And the hoops you need to jump through are insane!

Next I kinda thought Nodes would get me there. And honestly, I think they will in the future, there just arent enough docs, and I dont have enought time.

But finally, after playing with the ThreeJS demo for every-noise, they had done this! And it seems pretty straight forward.

You can get the points of a geometry with mesh.getAttribute("position").array. Mess around with them, then pop in your new values with geo.setAttribute("position", new THREE.BufferAttribute(editedData, 3)). Finally, do a quick mesh.computeVertexNormals() and you're back in the game, with light control and correct normals! Woo!

Still havent moved much beyond the basics, but so happy to have a method for this now!

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 a gallery of eases), and when you click in you get almost every kind of example of how it might work across animations and gradients. Also CSS and JS ready to copy and paste. (link)

The Path to Awesome CSS Easing With The linear() Function

Jhey is a great writer and this article and its examples really show you why people are so excited about the linear() function, and how you can use it too. (link)

GSAP Easing Visualiser

Less of a set of instructions, and more of a tools for exploring timing ideas. Really lets you see the difference between easings. (link)

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 h1s and h2s. Seems like the outlines are lost when I try that.

Based on this pen.

Click the sky to see the effect!

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 case for tracking users across sites is for targeted advertising. By categorising the content you consume, advertising companies build a profile around your cookie. With this profile they can target you based on your interests.

Google is the biggest advertising company in the world. They also own the biggest browser in the world, Chrome with at present has a 65% hold of the worldwide market according to statcounter.

"The End of the Cookie" is in effect people waiting for Chrome to start blocking third-party cookies. Waiting for the worlds largest advertising company to take an action that would affect their entire business model. Google keep suggesting alternatives that actually undermine users privacy more, and then they push out the date for the end of the cookie, almost annually.

"That sounds like a conflict of interest". You betcha.

This conflict feels immovable.

Is there anything we can do about it?

Actually, yes, and it's full of benefits.

Creating profiles about users based on their cookies is called Behavioural Advertising. There's an alternative called Contextual Advertising.

In a nutshell Contextual Advertising looks at the content on the page and allows advertisers to target that, instead of users.

What benefits might this give us?

Technical simplicity

When your cookie is being tracked, lots of companies scripts need to run on the page to update your info on their server. Think about that. Every pageload, from every user, needs many scripts to download, and then run code on many servers and in many databases to update your info.

With contextual targeting, the publisher would run a single script whenever they create or update content. This means that only once per content change, one script runs and updates one database. Notice this is done on the publisher end, so a user never has to take this cost.

No advertising cookies needed

Because no cookies are needed to track the user, this removes a use case for needing a cookie notice. This doesnt immediately mean you can remove your cookie notice, but it takes a big chunk of the need away.

Better advertising performance

What's the effect for the advertiser then? Well, actually their story improves too.

According to the IAB: "69% of consumers would be more likely to look at an ad if it was relevant to the content they were reading".

This is more effective for the advertiser which saves them money.

Environmental benefits

I dont have data for this, but based on how much simpler the technology is, and how many fewer calls are being made, there must be a benefit here. Even if it's small, anything we can do is worth it.

That's not even the end of it. There are more benefits I havent listed here.

Ok, so why isnt this happening?

Given the benefits above, why wouldnt every advertiser be jumping on this? Here are some theories.

Retargeting

Advertisers love retargeting. You know when you buy something, and then you see ads for it again for the rest of the week? That's retargeting you across sites because you visited the page for that product.

This technique is effective at enough scale, but as in the example above it's really wasteful. Advertising is all about getting the message out there though, so companies are willing to take the waste, if the cost is less than their potential profit from a sale.

Purely contextual advertising wouldnt allow that.

Habit

Advertising companies are arranged to work with Behavioural Advertising. They're arranged to work with other companies that work the same way. It's really hard for one of these companies to change on their own, because no one else is doing it. It would take retraining almost all advertising related staff. There's too much inertia.

Bias

Because of anchoring Advertisers are used to the higher cost of Behavioural Advertising. When they see the relatively lower cost of Contextual Advertising, they feel like it's "cheap" and possibly less effective.

"The End of the Cookie"

There's so much talk in the advertising about "The End of the Cookie", that it's reinforcing that the cookie is still here. The good times are still here. We dont have to change yet. Keep doing what you're doing.

This is all minimising the fact that Contextual Advertising is actually superior in so many ways, and there's no reason not to do it now.

Conclusion

There's a huge opportunity here to help the environment, get rid of all those cookie popups, and make the decision easier for Google to block third-party cookies. If you're an advertiser, please help lead the way and start running more Contextual campaigns.

Reading:

• The IAB Europe Guide to Contextual Advertising
• Contextual Advertising 101: How it Works, Benefits & Why It’s Necessary for Relevant Ads
• What is contextual advertising? Everything you need to know
• Contextual Advertising: What It Is, How It Works, And Benefits

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!

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 amplitude, lower wiggles.

This is an interactive demo, try it out on the site to see it in action!

All of these examples are using a sin wave. But this it true also of cos, noise, and other kinds of wiggling that we do with numbers!

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.

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 it either. But in case you do come across it, now you know what it means.

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 unit vector.

function normalize2D(v) {
  const x = v[0];
  const y = v[1];
  const len = Math.sqrt(x * x + y * y);
  return [x / len, y / len];
}

normalize2D([3, 4]);
// returns [0.6, 0.8]

To achieve this we get the length of the vector. Then divide the x and y component of the vector. This makes sense because, if the length is 5, as in the case above, the vector is five times too large. So we divide x by 5, and y by 5, giving us the correct vector.

Most frameworks will have vector helpers with a normalize function, but it's important to see what it is, and understand how it works.

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 with the number 12, and the range is 0 -> 20.

function normalize(val = 0, max = 1, min = 0) {
  return val / max;
}

normalize(12, 20);
// returns 0.6

If we pop in our value 12, and set a max of 20, we'll get a value back of 0.6, which is correct.

We're not using the min yet, so lets use 12 as our value again, but make our range 10 -> 20. We'll need to update our function.

function normalize(val = 0, max = 1, min = 0) {
  return (val - min) / (max - min);
}

normalize(12, 20, 10);
// returns 0.2

There are lots of ways to do this, and lots of choices you can make for style. For example, what if your value is outside of your range?

normalize(22, 20, 10);
// What should this return?

22, our value, is larger than 20 our max. Our function will return 1.2 as it is. Should it return 1? These are all options and fun you can have with normalizing that will give you different results in your experiments!

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

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 ways.

Random is complete chaos. It returns a number, with no regard for any other number.

Noise is more refined. It returns numbers that are random, but related. Two numbers near each other should return similar, but not idential numbers.

Lets look at some 2D noise.

Play with this example on CodePen

Where we see black, the noise value is 0, and where we see white, the noise value is 1. This was generated with this code in p5.

function setup() {
  const canvas = createCanvas(600, 300);
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      noStroke();

      // multiplying by .05 to make the scale smaller
      let n = noise(x * 0.05, y * 0.05);

      // noise values are between 0-1
      // color values in p5 are between 0-255
      // multiplying n by 255 to suit p5
      fill(n * 255);

      rect(x, y, 1, 1);
    }
  }
}

We're passing in the x, y values of each individual pixel to get a noise value. Then we're multiplying by .05. This changes the frequency of the noise. A little like zooming in and out of the noise.

This is the same noise with a frequency of .5

This is the same noise with a frequency of .005

What can we do with it?

Noise is one of those tools that can be used in all sorts of cases. Lets look at three examples that might help you see its range.

See the Pen LoFi example - Noise 2d - heatmap by David Fitz (@loficodes) on CodePen.

You can use noise to play with colors. Here we're adjusting the value of the hue in a hsl color to generate what looks like a heat map.

See the Pen LoFi example - Noise 2d - heatmap by David Fitz (@loficodes) on CodePen.

You can create wiggly lines, in patterns that rarely repeat! Notice that we've used time as a parameter that we've put into the noise.

There's a whole constellation of ideas that noise can achieve, and in future posts, we'll be looking at more of them.

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 floats? They're numbers with a decimal. EG 0.20983475. Importantly, for this to work, we never go above 1.

That sounds really limiting. Only numbers between 0-1?!

But there's incredible power in it.

Use in placing things

Imagine we have a purple square and we want to place it in the center of our canvas.

Initially our purple square is in the top left of the canvas. Because it's aligned to its center, it's getting copped off at the top and the left.

If this was in p5, the code for this might look like:

rect(0, 0, 200, 200);

Lets say we dont know the size of the canvas, it automatically resizes to match the width and height of whatever screen it's on. How can we center our square?

We divide by a float of .5. This will half any value we give it. So we do that with the width and height.

rect(width * 0.5, height * 0.5, 200, 200);

And we get:

Why does this work? Well, floats are essentially percentages. .5, is 50%! .125 is 12.5%.

Control in Discovery

You might think that that's not much better than just dividing by 2. And you'd be right!

But the real value comes in when you want to try out different values. Lets play with an example.

This is an interactive demo, try it out on the site to see it in action!

What if you want to a third of the way across?

Ok, so that's easy for the fraction, pop 3 in, and the line gets divided by three.

And same with the float, just pop in .3333333, or however many 3's you feel like typing.

Halves, quarters, that's all ok.

What about going 82% across the line? That's easy in the floats, enter .82. But what about the fraction? 1.2195121951219512?! That's hard to understand.

These charts might make it clearer too, because the jumps between fractions are inconsistent, but with floats are easy.

Fractions

These are really inconsistent. The difference between /2, /3 is way bigger than between /3, /4. This inconsistency is really difficult for the human brain.

Floats

These are lovely! It's exactly the same gap between each, and I can immediately understand how I can play with these numbers.

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 this Fire Circle instead!

The lesson here is that creative coding isnt like regular UI design. There isnt a right or wrong answer. You cant get it right, you cant get it wrong. The only important part is that you enjoy it! Maybe it's not what was in your imagination, and that can sometimes be even better.

So keep creating, keep enjoying, and enjoy the happy accidents!

Just one person standing out in a crowd. People who stand out often notice things that others wouldnt, like your mouse, or where you tap on the screen.

Math.round()

This is probably the one you're most familiar with. It takes any number where the fractional part is below .5 and rounds down, and takes any value equal to or greater than .5 and rounds up.

Math.round(0.3);
// returns 0

Math.round(0.5);
// returns 1

Math.round(0.7);
// returns 1

This might not always be the effect you want though. So there are two other falvors.

Math.floor()

This will always round down to the nearest whole number, no matter the fractional amount. It brings the values to the 'floor', is an easy way to remember it.

Math.floor(0.1);
// returns 0

Math.floor(0.9);
// returns 0

Math.ceil()

Opposite to Math.floor(), Math.ceil() will always round a number up to the nearest whole number. It brings the value to the "ceiling".

Math.ceil(0.1);
// returns 1

Math.ceil(0.9);
// returns 1

There are no obvious times to recommend when to use one or the other, but it's important to have these in your arsenal for when you might need them!

It's a mathematical constant, it never changes, and we have it in JavaScript.

Math.PI;
// returns 3.141592653589793

That's great, but what is it for? It's all to do with circles.

PI is a ratio. The ratio between the diameter of a circle and its diameter. Meaning that to get the circumference you need to multiply the diameter by 3.141592653589793.

Can we prove that with code?

Yes we can!

If PI the ratio between the diameter and the circumference, that's the same ratio between the radius and the circumference of a semicircle, because they're both half as big.

We can use that to prove PI. To do this, we count the length of equal sized lines used to mimic the shape of a semi circle. Then get the ratio of the total length of those lines to the radius of the circle.

This is an interactive demo, try it out on the site to see it in action!

If you play with this demo you'll notice two things as we add more lines. First, it starts to look more like a semicircle. Second, the change to the ratio number is getting smaller and smaller. That means that, as we add more lines, we get closer to PI.

By the time we hit x100 lines we see very little change in the ratio number, and we have PI accurate to four decimal places!

This is a mathematical constant you might see sometimes in frameworks, especially in P5.

This one's easy, it's just PI * 2! It's handy when you're trying to make circles, because most drawing tools work with a radius.

Math.PI * 2 == TAU;
// returns true, if your framework has the constant TAU

// Or create it yourself!
const TAU = Math.PI * 2;

It's got a few names from what I can see, and people get very nitpicky about it. You'll hear it called "modulo", "modulus", "the remainder operator", but I like to just call it "mod".

What does it do?

You pass it two numbers, and it gives you whats left after you divide one number by another.

Let's look at some example.

4 % 2;
// returns 0

When you divide 4 by 2, you get exatly 2, with no remainder. The mod operator returns the remainder, so it's 0.

5 % 2;
// returns 1

When you divide 5 by 2, you get 2, with a remainder of 1. The mod operator returns the remainder, so it's 1;

17 % 5;
// returns 2

When you divide 17 by 5, you get 3, with a remainder of 2. The mod operator returns the remainder, so it's 2;

Demo

What's it good for?

You might look at this and wonder what the purpose of all this is? But where it comes in handy is when you want to loop through things, like an array of things, or for an animations.

Here's an example of an animation using mod.

See the Pen Using mod for an animation by David Fitz (@loficodes) on CodePen.

We keep increasing the value of frame, and then create a value t using %;

const t = (frame % frameCount) / frameCount;

This now gives us a normalised number telling us where we are in the animation.

Using mod for user input to loop through an array works the same way.

See the Pen Choose a Beatle by David Fitz (@loficodes) on CodePen.

One thing to be careful of here though is that, when a user decrements a value, if it goes below 0, mod will start returning negative numbers, and in the opposite direction. That's why the function chooseBeatle() has that its if statement.

const chooseBeatle = () => {
  if (currentBeatle < 0) {
    currentBeatle += beatles.length;
  }
  beatle.innerText = beatles[currentBeatle % beatles.length];
};

The process (geddit?!) was a little different to what I expected, and thanks to David Aerne for showing me the solution!

The issue

At first, I tried what would seem natural, coming from the angle of typical DOM and JavaScript APIs.

In the HTML, I had something like the following.

<input type="file" id="inputEl" />

And then in the JavaScript.

let img;
let el = document.getElementById("inputEl");
el.addEventListener("change", (e) => {
  img = URL.createObjectURL(e.target.files[0]);
});

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(255);
  if (img) {
    image(img, 0, 0, width, height);
  }
}

This looks like it makes sense to me. We set up an img variable that's going to either be undefined, and not be rendered. Or, it will contain image data and be displayed.

However, this doesnt work! We get the error Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. This was really confusing to me. I tried creating <img> elements and all sorts of things to try and turn that data image string into one of these valid formats.

After some chat with David he explained that with p5 we need to come at the issue a different way.

The Solution

Here is the actual JS that works (no HTML needed). In fact, p5 has a file input API in it, for this exact scenario.

let input;
let img;

function setup() {
  createCanvas(500, 500);
  input = createFileInput(handleFile);
}

function draw() {
  background(255);
  if (img) {
    image(img, 0, 0, width, height);
  }
}

function handleFile(file) {
  print(file);
  if (file.type === "image") {
    img = createImg(file.data, "");
    img.hide();
  } else {
    img = null;
  }
}

This feels really counterintuitive to me, but it all makes sense when you think about the p5 lifecycle.

P5 starts to exist in the setup() function. This seems to be the main key. We let p5 create the input, rather than doing it with regular HTML. This means p5 is completely aware of the input, and can put it's own listeners on there to work with it's lifecycle.

The handleFile() callback is creating an image and then hides it. But it's now available to us to use in the context of p5.

Then finally, in the drawFunction, we're ready to go and show the image!

Feeling summery!

I noticed in some of the Formula1 coverage that there was a really cool effect on some text that they show on some of their coverage. An animated text where the letters seem to be chopped into diagonal segments that have outlines making kinda of "islands" in them.

You see this effect in the "1" above Max Versappens shoulder in this clip on YouTube.

This is my attempt at copying that!

A Magic Number is a number that you're using, but you're not entirely sure what it's doing. Its effect is "magic". This is a dangerous thing, because there can be unintended effects from Magic Numbers.

Imagine we're trying to center an item on a Canvas. Assuming it starts in the top left of the screen, we could nudge it down and right until it looks like it's in the center.

In some made up code, this might look like;

const x = 400;
const y = 600;
drawItem(x,y)

There are two dangers here.

1. We dont know it's in the center.
2. If the user has a different size browser (eg the Canvas gets smaller) our item will be too far down or right, and could even leave the Canvas altogether!

To avoid using a randomly chosen x and y value, let's be accurate. We'll assume the item is a 100 unit square.

const itemWidth = 100;

// find out the exact dimensions of the canvas
const canvasBoundingRect = document.querySelector('canvas').getBoundingClientRect();
const canvasWidth = canvasBoundingRect.width;
const canvasHeight = canvasBoundingRect.height;

// use the information we now have about the item and canvas to make accurate calculations
const x = (canvasWidth / 2) - (itemWidth / 2);
const y = (canvasHeight / 2) - (itemWidth / 2);

// draw the item in the center
drawItem(x,y)

Here, taking x as the example, we get CanvasWidth and divide by two. This gives us the exact center of the Canvas. Then, because our item is drawn from the top left corner, we remove half of it's width (itemWidth), meaning that when it's drawn, it'll be exactly in the center of the screen.

This is a small example, but it's important to look at the numbers in your app and try to understand why they're there. You will develop a kind of "code smell" for these numbers in time.

For example

const itemCount = 5;
const leftNudge = 127;

Here you might understand what itemCount is. It's the amount of things we want to show on the screen. But leftNudge? I'm not entirely sure what that's for, and 127 doesnt look like a number someone might know intuitively. That leftNudge variable feels like it might be a Magic Number.

A tip I got from the work of Shunsuke Takawo is that each palette on Coolors has a url, eg https://coolors.co/palette/ee6055-60d394-aaf683-ffd97d-ff9b85.

Notice how the end of the url is actually the list of colors? This function will pluck those colors from the url, and pass you back an array with them in it.

const getColors = (url) => {
  return url
          .match(/[a-f0-9]{6}?/gm)
          .map(c => "#"+c);
}

Meaning you could now do something like this to get a color palette.

const url = "https://coolors.co/palette/ee6055-60d394-aaf683-ffd97d-ff9b85";
const colors = getColors(url);

If you now use that array to edit or create your designs, you can paste in different urls to try different palettes, instead of having to copy and paste every value over! Try it out in this CodePen, I've added a few urls that you can comment and uncomment to see how it makes a difference.

One thing to not is that different palettes have a different amount of colors, you might need to account for that in your designs!

Creative coding tends to mean that you'll use some different skills to UI development, but also potentially pieces of JavaScript that you havent used before. The champ of these JavaScript APIs is Math. And within Math, random() is king!

Math.random() only does one the, return a random number between 0-1. It's as simple as this.

// assigns a random number to num
// eg: 0.6547161150703487
const num = Math.random();

That might not sound like a lot, but you can do one or two more things to get any random number you want! Need a random number between 0-10, just multiply by 10.

// assigns a random number to num
// eg: 8.558616898572417
const num = Math.random() * 10;

You might notice that this is a float, or a number with a decimal in normal language. Want those decimals to go away? Add a Math.floor().

// assigns a random number to num
// eg: 3
const num = Math.floor(Math.random() * 10);

It's important to note here that this will only ever return the numbers 0 - 9. This is because we're flooring, rather than rounding. This comes in really handy when trying to pick a random item from an array.

const arr = ["Paul","John","George","Ringo"];

// assigns a random number to num
const num = Math.floor(Math.random() * arr.length);

// assigns a random item to musician
// eg: 'George'
const musician = arr[num];

We can already get a number between 0-10, but what if we wanted a number between 5-10? First, we would need to get a number between 0-5, then simply add 5.

// assigns a random number to num
// eg: 'George'
const num = (Math.random() * 5) + 5;

This isnt very intuitive at first. We do two things, get a random number of the max - min, then after we add the min again. Putting that all into a function, we get.

const rand = (max = 1, min = 0) => {
  return (Math.random() * (max-min)) + min;
}

// assigns a random number to num
// eg: 6.255813315992315
const num = rand(10,5);

Why max first? Most often you'll just need a number between 0-max, so this way we can only set max if we like.

Based on this cool doodle I saw.

As with anything that's The Next Big Thing, there's excitement and benefits, but also worry and liabilities. I want to take a little time and explain where I sit on the spectrum.

Benefits

Admittedly there are huge benefits to be excited about. What AI does is incredible both as an astonishing piece of computer science, but also in what it enables.

Generation

Obviously the biggest benefit is what AI can generate. It's a modern miracle that we can type in short prompts and get incredible imagery back, or ask it to write text for us that might help us to prepare for a job interview, play games or cook.

Innovations

Using Neural Networks we're likely to see innovations in processes. In medicine alone it could improve image analysis, speeding up and improving the accuracy diagnoses.

Conceptual Compression

It used to be that, to make a really interesting and attractive artwork, you had two options. First, you could spend years learning the medium and crafting the art yourself. Alternatively, you could hire someone with those skills to create the piece for you, at a cost.

With AI, you can now access the results of that task, without needing to engage with anyone who has the skills. This is amazing. Word did this with spellchecking, Google Maps for navigation.

It's truly useful for the user when a complex concept can be compressed and abstracted to a point that they can avail of the results without needing any knowledge of the complexity of the process.

Liabilities

I've started with the benefits to make sure that you, dear reader, see that I can see what is good about AI. I truly understand that there are benefits to individuals and society in AI existing. My question for you is, do they outweigh the liabilities.

Copyright and consent

Let's get this out of the way immediately. We don't know where these AI companies are sourcing the content that they use to train their models. Washington Post journalists have put in work to see where some AI's sourced their material.

The argument from AI supporters here is that the information is publicly available. This is undeniably true. You can visit most of these sites and read all their content for free. But remember these are businesses.

A business needs to make money to survive. Typically for online publications that's achieved through subscriptions or advertising. This only works if you visit the site and see the ad. Typically chat based AI will give an answer on a topic, but without any attribution to the source. This means that the people who created the content cannot monetise it.

Note: for the next section, it's important to know I work for MediaHuis, owners of the largest set of news publications in Ireland and my job depends on advertising.

This might seem like a small thing, but many users already get some of their news from AI. They will ask about a topic, and for more elaboration on it. This directly hits the profitability of an industry that is already struggling.

Not only does AI affect advertising supported publications from surviving, but it also affects artists whose work needs to be promoted so they can be hired to make a living. The Washington Post report above shows that many of the biggest sites for designers to show their wares (Behance, DeviantArt, Dribbble) have been scraped for AI. You can now access the combined skills of all artists on these sites, without needing to pay those artists who only have the content up there to try and promote themselves.

All of this is done without consent. The models have been created. There's no opt out, there's no clarity that your labour has been included, and your ability to make money impacted.

At the very least this needs international government oversight, or to be made illegal without an ability to opt out.

You can hear more info on this from the latest episode of ShopTalkShow.

Bias

This is a big one for society.

Who are choosing the sites, what are their biases? Humans are so bad at recognising their own biases that there's a term for it, bias blond spot. AI tools are being used internationally, but created by a small amount of people. There's no way to ensure that these people are completely without bias, and again that Washington Post article shows that many of the sites have huge bias.

What are the biases of the datasets? This is unknowable. But, given that people have managed to create racist hand dryers it seems impossible that large language models wont have some issues.

Accuracy

By the very definition of the "generative" in Generative Pre-trained Transformer (GPT), AIs start from a conceptual blur, and generate likely outcomes towards something with enough fidelity to appear to humans as if the content was created by another human. This is all blurry and fuzzy initially. AI does not understand the concepts or ideas it is working on, it's just creating a likely artifact, given the model it is trained on.

What does that mean? Well, when you ask it to create a legal document, it has no idea about the law. It's purely guessing, doing an impression of a legal document. It doesn't know the laws of your country. People are already getting into trouble with AI lawyers.

Purely anecdotally, I've noticed that my friends and colleagues who use it often seem to trust the results too much. As if ChatGPT has done research for them.

This misunderstanding is very dangerous. It could muddy knowledge as the AI generated content, published by humans, becomes reference material. This erodes the scientific method and society's ability to build upon itself.

Experiential knowledge

When it comes to creating knowledge too, I can already see friends and colleagues being deferential to AI. How did they come to a conclusion that this or that idea is correct? "AI said so". They are receiving knowledge (again, by definition, inaccurate knowledge) from an AI and taking it as fact. They have put no effort into understanding the knowledge, they have not applied it and gained any experience as to whether the knowledge is correct or not.

This trend will lead, if it continues, would lead to people not understanding why they do things the way they do, and huge skillsets being lost.

Unknown social impact

I'm old enough to have known a time before Social Media and after. There's so much research out there about the negative impacts of Social Media that we only realised years later. We have no idea what the impacts of AI are, and my fear is that they'll be bigger.

Social Media, being social, had direct effects on how we communicate together personally. It then had further effects on society at large.

AI is affecting how we communicate together in every setting, how work is done, and how the world is understood. It's potentially bigger than Social Media, and its effects could be too.

Environment

This is a massive one not spoken about enough. AI requires some HUGE computing power.

Have you noticed that most AI only runs through web interfaces? That's because the power required to run a model cant run on most peoples devices.

Have you noticed that those services are often overwhelmed? Even using Microsoft's Azure cloud infrastructure ChatGPT and DallE are still often over capacity.

We don't know the impact here, but it's significant enough to bottleneck one of the largest cloud infrastructure providers on the planet regularly.

Free

At the moment, most AI tools are free, at least to try. This sets the expectation on the user that using AI is cheap. It's not though, we're being used to further train the models, and to create a reliance on the tools.

Additionally, I worry that when the big companies start charging for their AI tools (which is inevitable), people will create less well monitored bootleg AIs that will be more likely to suffer from the liabilities above.

Conclusion

AI is amazing and we should absolutely take advantage of it. But only where we can understand its effects. For example in medical research or analysis. If we can show it's quick and accurate in making assessments, saving a doctor time and allowing them to first confirm the AI's diagnosis, then great.

Otherwise, we should come at this with an abundance of caution. I support the various leaders out there who have said progress should stop on AI for now, till we understand it better. I also believe it needs to be incredibly closely regulated, internationally.

I've tried to bring in a little more color, but still keep things simple. I hope you like it.

There are also new adventures are afoot. I've been running out of steam with specifically just ThreeJS content. I'll be going more into the basics of creative coding. Stay tuned in, hopefully, January for the next piece of the puzzle!

Here's the video on YouTube:

Having a little play with sounds. I've never really had a go of anything producting sound creatively before. A fun little beginning!

This one is dedicated to Ian Hubert and his Nightmare Men tutorial

This one I actually did a few months ago, but never uploaded.

The model I made myself, playing with Vectrary.

Just a fun one!

A doodle playing with images and pixels.

It can be hard to know how to get ThreeJS examples with imports working sometimes.

The ThreeJS docs work based on the entire ThreeJS repo, not what you want in production. Parcel expects you to work in a Node environment. Rollup expects you to work in a Node environment, but deploy in a HTML environment. Vanilla JS expects a completely html environment.

This guide, while not perfect, should get you at least working in any of those setups.

I've been changing my settings in my VSCode settings.json like this:

"editor.defaultFormatter": "esbenp.prettier-vscode"
"[svelte]": {
  "editor.defaultFormatter": "svelte.svelte-vscode"
}

In the root of any folder, this .prettierrc

{ "svelteSortOrder": "scripts-markup-styles" }

Thanks to the @sveltejs discord. I've figured out the "turn it off and on again" solution for this issues that is.

• Delete both the Prettier and Svelte VSCode extensions
• Restart VSCode and reinstalled extensions
• Restart VSCode and it's working!

Hopefully this is useful for someone, and thanks to @SvelteSociety for the kick to blog it!

I've been slowly getting the hang of creative coding. recreating a nature look seems to be what I'm qualifying as quality as I'm learning.

I started with a forest that was just some 2D rotations, eventually getting to something a little more 3D.

What amazes me in by learning here is how much more I've learned since the last attempt, but how little progress it truly looks like.

I feel there's a point coming where things will really click into place though, and I'mve very happy with how much I've learned to get this far.

Found myself without dice, these are a backup just in case!

Could be good to add options for the amount of dice, and the numbers on them?

I've been fascinated by Dale Chihuly and his fascinating art for a while. This was a very rudimentary attempt at something like that.

While trying to do something else entirely, I made a mistake in my shader. Put in '2.' instead of '.2'.

This was the sirprising and delightful result! An amazing happy accident!

My former colleague Pete has been doing an amazing series of Swissted GSAP animations over the last few months.

I've been spending more of my time checking out ThreeJS and P5, but finally bit the bullet tonight to try some GSAP, and it's amazing! It's pretty straighforward, I've just been working off of the docs, havent needed to Google anything yet, and I've made something I'm pretty happy with.

I do know that I've gone quite simple here. There's very little that hasnt been planned to avoid trouble, but still, I wouldnt have thought I could get this done in a night when I started it!

Definitely give GSAP a try and have some fun!

Saw a tweet from @abdz where they made a sunset messing with Blender. I wanted to try someting similar in ThreeJS. What really interested me was if I could do reflections, or if there needed to be a trick.

Turns out there's no trickery needed, there's a reflector class in Three! The docs arent great, but you can get into it from the mirror example.

A doodle mainly for fun!

Based on: pin

Texture from: here

Ever since I saw this picture originally, I've wanted to find out how to copy it, but with race cars! And now I've figured it out!

Unfortunately I cant find the original source, I stupidly just saved the image, not the tweet. Any help here would be welcome!

The steps in the end are reasonably easy. Import a model of what ever you want. I found this cool F1 car model. Set it up in a grid, and then comes the magic, shaders!

It took me a while to first learn that shaders werent just for your models, the can be put on your scene too. To do this you need EffectComposer (seems to hold the result of your effects) and RenderPass which gets your original view.

Now that you have a view (RenderPass) stored in a composer (EffectComposer), you can do ShaderPasses. This is where the magic happens.

For this effect I'm running the default Threejs LuminosityShader and SobelOperatorShader shaders, then a little custom one just to flip the black and white. Job done!

Ralph Ammer is an incredible writer, artist and more. Looking through his site recently I found this picture in his naturals series.

I loved the style and thought it might suit an experiemnt in learning more about shaders.

What I've learned in this sketch is the following:

• It's much easier to work with Three.js by using Parcel ( hat tip to Yuri Artyukh for his incredible weekly live coding sessions for teaching me this ).
• Dust3D is easier for me than Blender. I'm still terrible at it, but I feel like I can get somewhere with it, whereas I dont have the time or interest in learning Blender fully. I'm only really every looking for low poly stuff.

I love @dave🐝💣's gifs on Twitter. They're always so interesting, and have these fun little tricks for the eye.

Today's gif he popped up looked like something I could actually fathom doing in code, so here it is!

I find more and more that the best next step to make is the least technical.

You're doing something with JS that could be done with CSS? Do that next.

You're thinking about learning a new JS framework to add something you're not sure users will need? Instead, what if you just improved the HTML in something existing for accessibility?

You have an awkward process with another team, so you're going to add in a technical solution to try and keep things neat? It's almost always easier to just have a conversation with the other team and explain how you can work better together.

Forget new, forget more complicated. What's the least technical next step you can make?

Havent really done any creative coding in a while, so this was just a happy little Sunday design!

A quick doodle based on the golden angle

His latest chat on ShopTalkShow Gerry points out that we have lots and lots of files, often on the cloud, that we dont use. These files actually need to sit on a physical server somewhere, even if it is "on the cloud", that cloud is make up of many real boxes.

The issue here is that these boxes have a cost on the environment. They take up space, and they require energy. All our unused files on there are essentially just Digital Litter. Think about it, do you still need all those Bebo emails from 2008 telling you that someone wrote on your wall?

This idea blew my mind. Taking a look at my Gmail account alone though, I could see this was true, I had 5.94GB of emails built up since 2005. Just emails!

To see what effect I could have on this number, I took the following steps:

1. Delete all emails with a sender address starting with noreply@, do-not-reply@, info@
2. Delete all emails with attachments that are not currently starred
3. Delete all emails over 500kb
4. Delete all emails recieved before this year
5. Go to the Trash and empty all the above delted emails

This took my Gmail size from 5.94GB to 0.01GB, a 99% reduction! And that's with almost no effort, in one day! Sure it's small, but imagine we all did this, on every "cloud" service?!

The bigger point Gerry was making too, for web developers, was how can we design platforms that dont even lead to users doing this?

If you want to try it yourself I would do my steps above, but in the order 4, 3, 2, 1, 5.

Browsing Pinterest I came across this image by Elementary Art Resources:

Link

What I liked about this is that it would make me need to think as creatively as the artist who doodled it first. How do I do each image? How do i do all these images in one piece of code? Will it still be (reasonably) performant?

The pen has ended up very heavy, so it's probably best to view it in debug mode.

This is the 63rd project since Jan 1st 2019, marking one a week up to my 35th birthday! Challenge complete!

The aim of the talk is pretty simple, just a whilwind tour of Svelte to give you a taste of the basics and see if you want to learn more.

I've been toying with idaes for the homepage of the site for a long time, and cant quite settle on anything. Thought it would be more fun to share than keep it to myself.

Last week on Valentine's Day, Banksy created a new artwork in Bristol. It looked like something that could be played with and turned into a little experiment.

The design isnt complete, things are a little rough around the edges still, and the homepage isnt finished, but better to ship early and learn than wait for perfection. Especially on a personal site.

The site was running on Jekyll. It's a brilliant little SSG. I've loved it, but it was getting a little clunky. Not in any particular way. I knew how to get things done, it just felt like there were better ways to get things done. Especially when the plan is to expand the kind of content on show here.

So what did I go for? Sapper a Nuxt equivalent for Svelte.

I never understood the appeal of Angular or React. They seemed like too much work for the return you get. Vue certainly did its best to charm me, but it still never felt like it clicked. It never "felt right".

When I heard about Svelte, I fobbed it off as just another over hyped framework. Then I heard Rich on ShopTalk Show.

Everything he was saying made sense to me:

• use the platform.
• keeping things simple with HTML - no virtual DOM, but some treats on board
• just write CSS, nothing fancy, but the framework will try and optimise what it can
• compiling instead of combining. Ending up with a massive React Create App app to do something small is crazy. With Svelte, you only end up with what you need to make your app work. No more.

I have trudged through Angular/React/Vue tutorials, and I've been able to work the example, but it's always felt like they just showed a specific happy path, when I actually wanted to do something myself, it there would be lots of cruft and boilerplate needed.

Trying the Svelte Tutorial was quite the opposite. First of all, it's official, runs in the browser, and covers most of the framework. This you can tell in the first 10 seconds and it's very reassuring. None of the others have this.

Then, when you actually get going on it, trying out the code, it feels simple. Nearly too simple. Then you hit more complicated examples, the ones that would be avoided in Angular/React/Vue tutorials, and they make sense. This was it for me. An hour after starting the tutorial I knew Svelte was my new framework.

Realising that Sapper co-exists with Svelte and could let me build a PWA, basically without having to do any setup, sealed the deal fully, LoFi was getting a paint-job!

My first exploration of Svelte. Have to say, I've loved it so far!

The documentation and tutorial are great. Plenty to learn, and you can play to your hearts content.

It's also got a REPL for you to play around with code. Wanna see the original code for this project? Check it out here on the REPL: https://svelte.dev/repl/d3ad81e615c3406b8817e8c8faad83b7?version=3.17.1

Seems to have trouble on mobile, looking into it!

This one was just starting to play with BabylonJS. It's just a minor change on this documentation example on the BabylonJS site.

I've been loving my adventures with p5js, but I was running into the limitations of the framework. Its intention is to get you up and running, to get you familiar with the concepts.

Where p5js starts to have limitations is when you want to create more complicated 3D shapes. Sure, they can be made, but not simply, and not performantly ( at least with my current level of knowledge ).

I'll be jumping between p5js and BabylonJS, but this has shown me just how powerful BabylonJS can be so I imagine I'll be using it more and more.

Trying to learn about lighting and thought it might be fin to try and make something that looks like fish scales.

An interesting investigation, but there are definitely things to improve:

• collisions: the scales dont truly overlap and regularly clip through each other
• camera control: what I have works, but there will be "blank" spaces on larger screens

It's amazing to see what happens when you start to get the hang of something.

I've been trying to do this creative coding stuff for nearly a year now, and improving day by day, but this project has shown me how that 1% improvement a day truly adds up.

It would have been impossible to me 12 months ago to think I could have coded what's above, and in only ~300 lines of code!

None of this would be possible without what I learned from Matt DesLauriers, Keith Peters and Dan Shiffman. The incredible thing here is that their content is largely free.

It's important to think about that. Free. Look at the progress from my first sloppy canvas experient back in March to what you see above. There's clearly HUGE value in what these people are giving away for free, and they've made it so ENJOYABLE. I've made sure to support each of them by buying, supporting or subscribing something that they're involved in.

Another part of a new mini project. Liking the N64 level graphics!

Quite a jump from the Xmas trees of a few weeks ago. To be part of a project.

I was having trouble understanding exactly how lighting was affecting my scene in P5.

Here I have some different materials to play with, normal, specular, and a mouse controlled emissive light.

The main learning here is that you need to create your lights first before they will take effect on the other objects in the scene. This makes some sense. I imagine P5 is keeping not of all the lights, then working out for each new object how those lights affect the material.

Still needs rotation on the balls, and collision detection, but a good start!

Playing with a kind of walker / random function to displace the points in type.

Just some fun

This experiemnt was trying to recreate the game Snake with P5.

So far it seems to have gone well. It's desktop only, but mobile is to come!

Another little doodle seeing what it's like to connect points at random

Simple one just playing with a triangle and lining up the radii

Based on this pen https://www.pinterest.ie/pin/280208408053826026/

Just a little doodle

Fun with SVGs and using the amazing Ergast Formula1 API!

Most developers can tell you what the Box Model is. It's the margin, border, padding and content of an element. We've all seen this image describing it:

What this talk tries to do is explore how the Box Model works, why it works that way, and to point out a few tips and issues that might not be immediately obvious.

I worked on these SVGs for a talk for DublinCSS, enjoy!

I've always been fascinated by these kinds of simulation, it that's what you call them.

Very special shoutout to Takawo as this is basically a copy from this tweet of his reverse engineered so I could understand it myself.

Just a little doodle

I came across the idea of Chaikin Curve Subdivisions and decided to try it out myself without looking up any examples. I think I've done ok!

Another design completed in less than a tweet!

There's so much stress around this week, especially in the dev community.

Screw that, we're all here with the ablity to make cool things and share them with each other, everything you do doesnt have to be amazing or make a point.

Enjoy it.

Thinking about selectors and how it might be possible to make a dynamic app.

Here we have a grid of divs, each of which is essentially informing the coordinates of the mouse for an animation. With this we can animate where the eyes are pointing, and tell if the mouse is over the characters face.

This time I took a little inspiration from the amazing Takawo Shunusuke and specifically his tweets that contain an entire generative Processing app.

His examples are definitely more complicated, but a really fun process trying to see how each character can be optimised in an app.

What started as an experiment to recreate something like this image grew legs and turning into a kind of "breathing" forest.

It might not look like much more than the Spiritualised cover from last time, but it actually took a lot more learning to get there. I had to add in learning about lights, their positioning and the kinds of material that can take them.

By default p5.js vertex shapes dont take light. You need to add a material ( in this case specularMaterial() ) to gain the effect.

This is one I've been waiting to do for a long time.

Coming from regular website development I havent had the skills needed to get into anything 3D. But, as the weeks have gone on I've learned a lot to get here.

The path has been:

• Matt DesLauriers course on FrontEnd Masters
• Keith Peters' Coding Math on Youtube
• Learn P5.js
• Learn ThreeJS
• Lots of trial and error

How the effect works:

1. Import a 300x300 image of the album cover into a 2D canvas element
2. Create an array of each pixel in the image, recording x and y, and then record z as a decimal percentage of the average of the pixels RGB value / 255
3. Create a 3D canvas element, pop the vertices into place

Improvements that could be made:

• Camera controls
• Lighting
• Properly understand why x and y seem to be coming out sideways 🙈

Ever since seeing this tweet by Matt DesLauries I wanted to do something with mountain looking results.

I've been hearing a lot about p5.js and wanted to try it out. It seemed liek a good option for this kind of project too.

While I had used it before on the Off the Wall cover I did, I was never very happy with how that turned out. I'd really just grabbed a demo and forced it to work with the idea I had, but the two pieces didnt really want to fit.

After playing with it for the day, it's actally a lovely framework. It's very simple, but very powerful! I'm really looking forward to getting some more complex ideas working with it.

Playing with the Fibonacci sequence!

This week just a simple eploration of a style from the movie Spider-man Into the Spider-verse. In that movie they play a lot with a 3D effect where they split the cymk colors you would see in printing to create a kind of depth of field. I tried something similar with rgb here.

If you want to get more detial on the effects used in the movie, there's a great little video from Wired doing just that!

This week I had another challenge from my mate Stuart. He wanted me to recreate the album cover for The xx I See You.

Here's the original cover.

The trick to this is that there is a glassy effect on the page. It turned out that using almost the same trick of feDisplacementMap from Stuarts last request did the job, with a little CSS clip-path magic similar to the Velvet Underground cover.

If you watch the videos from those two posts, and then have a look at the code for this week, you should have a good idea of how the effect was reached. If not, let me know on Twitter! I'm always happy to answer questions.

Also, for those eagle eyed amongst you, no I havent used the same picture as in the I See You cover. That's because the original is already distorted! Instead I used this wonderful image from Unsplash bu Su San Lee!

After a trip to Japan last year I got found their pattern works lovely. Whether on cloths or paper, there always seemed to be a defined pattern, but with a little whimsy in there too.

Playing around with Canvas some more. This time, a simple clock.

Another I cant find attribution for, any help appreciated!

Cant find direct attribution for the original, any help greatly appreciated!

Following the same geometric path as I have been recently, but discovered Erich Borchert.

It seems he studied in the Bauhaus with Paul Klee, Wassily Kandinsky and Lyonel Feininger.

Pinterest is a great resource for finding inspiration, and I've found a rich vein of late. You can follow my board if you're into that sort of thing. The inspiration for this particular experiment is this pin.

The Coding Math YouTube channel, by Keith Peters, is incredible. In their short videos the explain trigonomerty as it applies to JavaScript in Canvas. I always found the idea of moving things around the screen and knowing how to very intimidating. It was something for other people, geniuses.

After watching only 3-4 of these videos Keith had me convinced I could do it on my own, so here is my attempt!

The learning from the original Thrill of the Arts demo, but upgraded to VueJS

Very simply just a little messing around with the kinds of effects seen in the Blobs Challenge on Codepen. Better late than never!

This week, instead of an album cover, I saw this illustration for the Adobe Animate CC splash screen on Abduzeedo and thought it might be fun to animate it.

What I've made isnt a perfect representation, but close enough, and a bit of fun!

This week I started to look into Canvas, and more specifically p5.js.

It was really very easy to get started with! The docs seem to be great and I was able to put together a DIY The Wall album cover just with the Getting Started tutorial!

This week a change of pace.

Trying to figure out how to do a technique, and then also trying to explain it in a video, is a lot to take on in one week. I was feeling that the videos were starting to lack quality, you guys were actually feeding back that maybe video was a bad place to show code anyway, and it was adding to stress!

As a result, this week I have tried to copy the cover of the delightfully stress-free album re:member by Ólafur Arnalds. Every time you refresh you should get a new version of the cover.

Please take a look at the code and let me know what you think on Twitter!

This week I got a request from my mate Stuart in work. He wanted to see the Car Seat Headrest - Twin Fantasy cover done in SVG.

Clearly the challenge here is the hand drawn effect. Vector tools arent famed for their spontaneity, so how can we get this done?

Luckily, as we've been learning, SVG on the web is often just as good or better than your design tool of choice.

Here are the links you need.

CodePen: https://codepen.io/loficodes/pen/XOvzbw

MDN feDisplacementMap: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap

Sara Soueidan feDisplacementMap: https://tympanus.net/codrops/2019/02/12/svg-filter-effects-conforming-text-to-surface-texture-with-fedisplacementmap/

CSS Tricks - How SVG Line Animation Works: https://css-tricks.com/svg-line-animation-works/

This week was a pretty straight forward win.

The aim was to reproduce the GoGo Penguin - Man Made Object cover, but figuring out blend modes in CSS. For some reason I felt this would be really complicated, but in the end it was super easy. One rule and I was done!

The main trick was not to use blend-mode from a background, but mix-blend-mode on the whole elements.

GoGo Penguin - Man Made Object https://codepen.io/loficodes/pen/PVXOjZ

Kasabian - 48:13: https://codepen.io/loficodes/pen/jdoNeX

MDN CSS mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

My friend Stuart and I both love SVGs and Vulfpeck. The issue is, SVGs can be a bit intimidating when you start to look at the code.

This is a quick look at how simple SVGs can be, all through the cover for the brilliant album Thrill of the Arts by Vulfpeck!

Codepen: https://codepen.io/loficodes/pen/PVwJmJ

SVG Resources

• MDN: https://developer.mozilla.org/en-US/docs/Web/SVG

• Sarah Drasner - Building an SVG video: https://www.youtube.com/watch?v=qA2DqKIjZ5I

• Sarah's SVG Animations book: https://www.amazon.com/SVG-Animations-Implementations-Responsive-Animation/dp/1491939702

This week we're looking at CSS masks. An effect that's like peeling the skin off a banana, so that's what we've done.

Codepen - The Velvet Underground & Nico

The Velvet Underground & Nico x4

CSS tricks clip-path article

My demo pen

This time I wanted to explore some neon light effects in SVG. This involved trying to figure out some blur effects, so what better way than with the Blur album cover for Magic Whip.

The puns are free.

Codepen: https://codepen.io/loficodes/pen/LqLjMX

Blur: https://jsfiddle.net/g57red1p/

Flicker animation: https://www.sitepoint.com/community/t/replicating-2-different-flicker-animations-on-an-svg/309035

I thought I would try an animated album cover.

The effect here is pretty simple, we're just changing the stroke-width of the SVG and background of the <body>. The trick was getting the Web Audio API to give back the decibel level.

Luckily Chris Wilson has a brilliant little plugin to work with it and I was able to get the decibel level incredibly easily. And the code is tiny! It’s only about ~60 lines! Great for learning the very basics of what can be a complicated API to start out with!

Codepen: https://codepen.io/loficodes/pen/exZyzm

Chris Wilson's Volume Meter: https://webaudiodemos.appspot.com/volume-meter/

MDN Web Audio API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

These days flexbox is the new hotness, but it still doesn't have universal browser support. This video will show you how to get back to floats and support every browser!

Links:

CodePen: https://codepen.io/loficodes/pen/roqVGL?editors=0100

Flex support data: https://caniuse.com/#search=flex

Float support data: https://caniuse.com/#search=float ( you gotta scroll down )

I was doing a doodle of the Basement Jaxx Singles album in HTML / CSS and wanted to create an infinitely ( or close to infinitely ) varied background using linear-gradients and prime numbers.

Here's how I did it.

Pen: https://codepen.io/loficodes/pen/jXXzZE

The Cicada Principle and Why It Matters to Web Designers: https://www.sitepoint.com/the-cicada-principle-and-why-it-matters-to-web-designers/

List of primes: https://primes.utm.edu/lists/small/1000.txt

Prime Repetition Calculation: https://codepen.io/loficodes/pen/NLLVOV

Basement Jaxx Pen: https://codepen.io/loficodes/pen/yGwoaO

Variation 1: https://codepen.io/loficodes/pen/WLPKNa

Variation 2: https://codepen.io/loficodes/pen/VqgBYp

Variation 3: https://codepen.io/loficodes/pen/ZVwjpz

Variation 4: https://codepen.io/loficodes/pen/PXVBKB

Variation 5: https://codepen.io/loficodes/pen/dwajdZ

Learn about the animation-fill-mode property and the great control it gives you over the states of elements before, during, and after an animation is applied to it.