#glsl | Explore Tumblr Posts and Blogs

vyralpite · 2 months

Text

going in circles

there is one goal i've been trying to reach, and i'd say i've been attempting on and off for a couple months now

as i continue making videos, i continue developing my style and vision i want for how i want my videos to, well, actually look. after watching petscop, i think i know what one thing i want to heavily include in my videos. an ntsc filter. the ntsc filter in petscop looks fucking fantastic, and woah, the shaders are just out there and already existing! i'll just download them!

and now for the hard part that i didn't think would be hard

how do i put this on video

see ideally, i thought there would be some plugin for applying these shaders easily, and there kind of is. it's called isf for motion (i use final cut pro), and supposedly it allows you to put glsl shaders onto apple motion and final cut timelines. however, i never figured out putting the libretro ntsc shader into it, so i gave up.

so now on the windows end, considering i have a desktop

there is a program that fucking does this (kind of). it's called shaderglass, and it lets you apply any libretro shader over your windows desktop. however, it does not allow you to outright render video, or let alone work on mac or let you put into editing software.

i tried some other solutions, but none worked

so now my ideal outcome; make a version of shaderglass (considering it's open source) that i can drop into fcp or davinci or premiere, and have it let me put libretro shaders over video with one layer.

i am not nearly experienced enough at c++ to do this, nor do i have the knowledge to create plugins for editing software

i guess i kind of need some kind of jumping off point, some kind of kickstart to figure out what i need to learn to do any of this. i wish there was more documentation i can easily access and process that surround this stuff, but my findings have come up my dry.

if anybody has any tips or easier ways to do this, let me know please.

important links:

#programming #coding #cpp #video #video editing #glsl

14 notes · View notes

sublingual-art · 5 months

Text

Recent shader practice

#glsl #shadertoy #shaders #digital art #creative coding

13 notes · View notes

connorbell · 1 year

Photo

#generative art #code art #algorithmic art #glsl #raymarching #trippy

88 notes · View notes

framelandgame · 1 year

Text

💡 A Dynamic Light System for 2D RPGs

We've implemented a brand-new lighting system into our game, Frameland. This post shows the process of how we got there! But first, a before-and-after:

This post is a bit more technical, but you should still be able to follow along as a non-programmer.

1 – Starting point This cave is alright, but it looks a bit bland: everything's well-lit — too well-lit! That's not how light works in a cave, and it lacks atmosphere.

2 – Adding light sources The first step is to define points where light will be emitted, which we call light sources. We want everything to be darker than usual, except around a light source. So we "carve" out some space where things are NOT dark.

View Code

🗒️Note: This is a shader, a program that defines what happens for each pixel on screen. Here, we use GLSL (Open GL Shading Language).

3 – Removing smoothness In a pixel-art game, a smooth lighting system looks out of place. Instead of nearly infinite shades, we want discrete steps. We can achieve this by using a process called quantization, which reduces the number of values. In our case, we'll reduce the number of colors from our light source circle to three:

View Code

4 – Pixel density As our sprites and maps have a different pixel density (pixels appear 'larger'), we need to adapt our new lights to that. We'll first reduce our resolution to 50%. Then, we use that low-res version and scale it up to 2x. This achieves a more pixelated look. (You may only be able to see the difference when you enlarge the images.)

View Code

5 – Overlapping lights Right now, if two light sources overlap, their color will add to each other, creating a weird bright spot in the middle. Instead, they should merge together — like a 'blob'.

View Code

6 – Color temperature But the light seems a bit cold for a torch. Let's change that by adding a light color that we can change per map — the color temperature.

View Code

7 – Animation And, for a final touch, let's make the light move a bit.

View Code

This system is far from perfect, and there is still room for improvement, but we're pretty happy with the results.

Btw, you can check out our game on Steam (wishlist!). There'll be even more lights 💡 Promise!

#indie games #indiedev #indiegamedev #pixel art #lighting #frameland #glsl #shader

32 notes · View notes

kawaoneechan · 6 days

Text

Today I learned about the smoothstep function.

#glsl #project special k

4 notes · View notes

blake447 · 4 months

Text

So I've been playing Monster Hunter with my SO and have made perhaps the most cursed colorblind shader I can think of. Basically, they have blue-yellow blindness, so what I've done here is isolate those colors (well, the best I know how to) and replace them with plaid. Blue is now red plaid, yellow is now green plaid lmao.

Some parts of the game are absolutely gorgeous this way

Some parts are functional if not a little obnoxious

Some parts are downright hilarious.

Poison is typically a blue-purple color, so in this shader it turns into a hot pink plaid lmao. Idk I just find something so hilarious about plaid poison hurtling towards me. I think the raw contrast needs to be boosted in some areas of the game, and they haven't plaid with it quite yet but uh, this was fun nonetheless! My eariler attempt had both of them red / green plaid, but that looked especially ugly underwater, so I started using monochrome plaids, but still here's the general principle

Future plans include other dithering effects instead of plaid but for now, we got plaid.

#programming #shaders #postprocessing #codeblr #gamedev #glsl #accessibility?? idk if I can call this that lmao

11 notes · View notes

agatedragongames · 11 days

Text

Creating a hand crafted glitch shader effect using displacement lines

Glitch shader effect with displacement lines – Agate DRAGON Games

#glitch #shader #shaders #glsl #creative coding #gamedev

3 notes · View notes

bizarre-furry-bastard · 4 months

Text

the only things a trans woman wants in life is estrogen and a non hacky way to debug GLSL shaders

#programming #glsl #opengl #graphics programming #computer science

5 notes · View notes

gwyndolinadmirer · 10 months

Text

A while ago I made a physarum polycephalum simulator in webGL, so every now and again I play around with it and sometimes get some pretty screenshots & videos <3

#the actual slime molds these are based off look super pretty too #glsl #generative art #art #biology #physarum polycephalum #mypost

8 notes · View notes

spinkdinky · 3 months

Text

Texture and color technique study

#generative art #genart #genartclub #graphics programming #p5js #glsl #shader #digital art #art #aesthetic #artwithcode

2 notes · View notes

yarnk · 6 months

Text

#mash #m*a*s*h #glitch art #glsl #radar #visual art #supermosh

2 notes · View notes

sublingual-art · 10 months

Text

More recent GLSL practice

#digital art #code art #shaders #glsl #patterns

20 notes · View notes

daeincmotion · 1 year

Text

#createssam #glsl #shader #creativecoding #webgl #generativeart #abstractart #motion #loop

8 notes · View notes

jadonulrich · 1 year

Photo

Melissa Wiederrecht Take Wing, September 15, 2022 Technologies: p5.js, GLSL Iterations: 250

#Melissa Wiederrecht #P5.js #GLSL #generative #code #abstract #art #generative art

14 notes · View notes

kawaoneechan · 17 days

Text

I think near-bedtime me might be smarter than awake me, considering I just hammered this out in Shadertoy in about ten minutes, after finding an extension that lets me load local textures.

Yes, this is the wobbly dialogue box effect from Animal Crossing New Horizons.

I should add that I wasn't the one to figure out the effect, but this time it's not nodes.

#animal crossing #glsl #ballmer peak but sleepy instead of drunk

3 notes · View notes

blake447 · 10 months

Text

Dragon Curves

This is one of my personal favorite fractals, the Harter-Heighway Dragon Curve, featured in the original Jurrassic park book shown skipping a few steps at a time, unpredictably evolving into this shape here to highlight the chaotic but organized mess of nature we struggle to predict and understand. This is among the friends I am most deeply and intimately familiar with. I started playing around with these based off an old ViHart video explaining how to make them in terms of squiggles and folding papers

My traditional method has always been to take a sequence, reverse it, and add one, rolling over when you hit 4. Example 0 01 01 21 01 21 23 21 01 21 23 21 23 03 23 21

If you change each number into a direction, 0 being right, 1 being up, and so on, then follow that path along the sequence you will also get a dragon curve. There are so many wonderful ways to construct these

However, here’s my favorite

This is my Dragon Curve *unity shader* that I wrote. It comes with an editor script that you can use to bake it into a texture, since the process is a bit heavy. Why is this so special you ask? Well it comes down to the fact that this is running in real time, in parallel. See algorithms have two main kinds of families, parallel and serial. A serial algorithm goes step by step, like taking a math test alone. A parallel algorithm runs side by side, like everyone doing one problem on the test. Its much faster, but they aren’t allowed to talk to each other so if the same problem shows up twice, or if a second problem relies on the answer to the first, its much more difficult. This is why dragon curves are hard to parallelize. You take the sequence *before* and reverse / increase. You take the segments *from the last step* and fold them again. You fold the paper *back over itself* referencing previous work. This problem is about as serializable as it comes. So how do you parallelize? Will, you change your perspective

See instead of trying to split everyone up to try to *create* a dragon curve, you give every pixel a job to decide *is it on* a dragon curve. By rotating the space itself in alternating grid patterns you can twist a dragon curve down into a single line. If your point in space ends up on the line, then it was on the dragon curve! Furthermore, the direction it turns due to how the grids line up actually encodes how far along the dragon curve it was in binary (left being a 0, right being a 1), so by keeping track of that and converting it to decimal we can give subtle coloration to points on one dragon curve from 0-2^n, and clip out anything that isn’t on it. As far as I know, I’m the only person to have implemented it this way and it might be a straight up novel algorithm, which I’m super proud of!

And this is how I create these beautiful Dragon Curve Plaids. Since we’re warping the space itself, we do our twisting to collapse it, put some little checker and strip patterns on that space, color it a little bit based on the direction, and unwind it again to twist the pattern into the dragon curve instead of the space. I also have a live demonstration of the algorithm up on shadertoy, though its a very outdated implementation and not well optimized. Here’s one thats animated, and here’s a newer one that tracks the folds in binary. They are rendering in real time, so potatos beware. Finally, here’s a zoom on one of my youtube accounts of a 41st iteration dragon curve zoom, twice as many iterations in realtime as my old laptop could do in 20 minutes. Computer Science enthusiasts will realize how mind boggling cool that is, even if its is entirely useless.

#Dragon curve #fractal #jurrasicpark #math #shaders #glsl #hlsl #shadertoy #math art #mathematics #mathematical art #vihart #im liking it here i found my happy ranting space i think

8 notes · View notes