How to make this effect (sweater stitch)

0nepice

Hi, is there a way to make a sweater stitch shader like this? :)

kfrajer

Alternative to shaders, you could do that by placing a pattern weighted by the color underneath. It runs along the same lines as in the next post (No pun intended...) https://forum.processing.org/two/discussion/comment/82074/#Comment_82074

Kf

0nepice

Sorry i don't get it xD, but ty anyway :).

0nepice

is this possible using normal maps instead maybe? :-??

kfrajer

Run the sketch in the link. Use the image you provided as the source image of that sketch. You will see the effect.

Kf

0nepice

i dunno how xd

jeremydouglass

Some approaches:

1. Use a shader on the color. See the "pixelate effect" example from the Shaders Tutorial.
2. Use your input image to generate an output image by color-mapping each stitch. See kfrajer's link, or this thread: https://forum.processing.org/two/discussion/18443/svg-rotation-based-on-pixel-value

Some partial approaches -- these won't give you clean color separations on each stitch:

1. Use a shader to create a 3D texture map. See the Java Examples > Demos > Graphics > MeshTweening, and roll your mouse left and right to adjust the height. You could instead height-map the stitches.
2. Group the pixels of each stitch together into an average color using a stained glass effect -- https://forum.processing.org/two/discussion/comment/79307/#Comment_79303. 3. Create an image mask (semi-transparent overlay) in the shape of the stitch pattern, and use mask to apply it directly on top of the source image, "stamping" the source image with thread texture.

Finally, you could use Processing to turn your image into a knitting pattern, knit it, and then take a picture of it! https://forum.processing.org/two/discussion/18806/circular-hand-knitting/p1

koogs

I think there's a clue in the picture... The way it shrinks down in the middle. It's resizing the original to a smaller version and then replacing each pixel in the smaller version with a stitch image coloured as per the pixels there.

As people point out, this doesn't really need a shader, just a single stitch image in black and white that you can tint.