Tweet

https://twitter.com/mattdesl/status/1402318658941108224?s=20

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @mattdesl

Matt DesLauriers

@mattdesl

28 Jun

I have a 7-color e-ink screen arriving tomorrow, so I'm experimenting with custom color dithering techniques. Here is Subscapes #39 reduced to a 7-color, 600x448px paletted image.

One thing that is worth more exploration is an error diffusion technique that isn't based on a simple scanline. On the left is left-to-right scanline, on the right first I run through with random jumps, and then apply a second pass with left-to-right, to avoid dither patterns.

Notice the very top is problematic in both. On the left, it repeats noticeably until it 'fixes' itself. On the right, the first scanline hasn't yet received any error diffuse, so it doesn't match the rest.

Read 6 tweets

Matt DesLauriers

@mattdesl

28 Nov 19

Speculative design for a new creative coding toolkit.

You layer together "Components", each is just a single script that exposes some attributes and/or UI props.

Now that I've coded the LinearGradient and NoiseLines components, I could easily re-use them in other projects, or even publish them online for other users of the tool to bring into their own designs.

I added a few more details and the code for those 3 components in the following gist:

gist.github.com/mattdesl/b7c96…

Read 5 tweets

Matt DesLauriers

@mattdesl

19 Aug 18

Linear interpolation (sometimes called 'lerp' or 'mix') is a really handy function for creative coding, gamedev and generative art.

The function interpolates within the range [start..end] based on a 't' parameter, where 't' is typically within a [0..1] range.

A thread...

For example, divide 'loop time' by 'loop duration' and you get a 't' value between 0..1.

Now you can map this 't' value to a new range, such as `lerp(20, 50, t)` to gradually increase a circle's radius, or `lerp(20, 10, t)` to gradually decrease its line thickness.

Another example: you can use linear interpolation to smoothly animate from one coordinate to another. Define a start point (x1, y1) and end point (x2, y2), then interpolate the 'x' and 'y' dimensions separately to find the computed point in between.

Read 8 tweets

Matt DesLauriers

@mattdesl

2 Jul 18

A function that produces a scribble.
#generative #code #javascript

So many of my sketches begin with the same function: producing a uniform distribution of values along an array, between [0..1] range. Here's how it looks in JavaScript.

I'm calling it "arcs" (for arc lengths) but perhaps there is a proper name for this sort of thing?

I use this for all sorts of things, like generating an N-sided polygon:

Read 11 tweets

Share this page!

Matt DesLauriers

Try unrolling a thread yourself!

More from @mattdesl

Matt DesLauriers

Matt DesLauriers

Matt DesLauriers

Matt DesLauriers

Did Thread Reader help you today?

Like this author's thread?