Graphic 3D
2D, 3D, game, games, online game, game development, game engine, programming, OpenGL, Open AI, math, graphics, design, graphic, graphics, game development, game engine, programming, web development, web art, web graphic, arts, tutorial, tutorials,
marți, 19 mai 2026
Shadertoy: buttons with effect - 001.
A simple effect on buttons with a little help of artificial intelligence.
// with a little help with artificial inteligence
// ============================================================================
// HELPER FUNCTIONS
// ============================================================================
// Matrix for 2D rotation (useful if you want to rotate internal effects)
mat2 rotate2d(float angle){
return mat2(
cos(angle), -sin(angle),
sin(angle), cos(angle)
);
}
// Signed Distance Field (SDF) for a rectangle with independent corner radii
// r.x = Top-Right, r.y = Bottom-Right, r.z = Top-Left, r.w = Bottom-Left
float sdRoundedBox( in vec2 p, in vec2 b, in vec4 r )
{
r.xy = (p.x > 0.0) ? r.xy : r.zw;
r.x = (p.y > 0.0) ? r.x : r.y;
vec2 q = abs(p) - b + r.x;
return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x;
}
// ============================================================================
// MAIN SHADERTOY ENTRY POINT
// ============================================================================
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// 1. Normalize coordinates (from 0.0 to 1.0)
vec2 uv = fragCoord / iResolution.xy;
float ratio = iResolution.x / iResolution.y;
// 2. Define the Color Palette (Sci-Fi / Neon Theme)
vec3 backgroundColor = vec3(0.06, 0.06, 0.09); // Dark background
vec3 buttonBaseColor = vec3(0.05, 0.18, 0.35); // Base body fill color
vec3 neonBlue = vec3(0.27, 0.67, 1.0); // Sharp border stroke
vec3 aquaGlow = vec3(0.0, 0.95, 1.0); // Outer aura glow
vec3 finalColor = backgroundColor;
// 3. Split the screen into a 2x3 grid (2 columns, 3 rows) to show 6 variations
vec2 gridSize = vec2(2.0, 3.0);
vec2 gridId = floor(uv * gridSize);
// Localize UV coordinates inside each grid cell, and center the origin (0,0)
vec2 localUV = fract(uv * gridSize) - 0.5;
// Adjust aspect ratio locally for the 2x3 grid mapping
float localRatio = (iResolution.x / gridSize.x) / (iResolution.y / gridSize.y);
localUV.x *= localRatio;
// 4. Define Button Size (scaled for the 2x3 grid layout)
vec2 buttonSize = vec2(0.38, 0.13);
// 5. Initialize the corner radii vector
// Format: vec4(Top-Right, Bottom-Right, Top-Left, Bottom-Left)
vec4 cornerRadii = vec4(0.0);
// 6. Assign a different combination to each grid area (Rows from bottom=0 to top=2)
if (gridId.y == 2.0) // === TOP ROW ===
{
if (gridId.x == 0.0) {
// [TOP-LEFT]: All corners rounded equally (Standard Pill Button)
cornerRadii = vec4(0.07, 0.07, 0.07, 0.07);
} else {
// [TOP-RIGHT]: Sharp rectangular button (No rounding)
cornerRadii = vec4(0.00, 0.00, 0.00, 0.00);
}
}
else if (gridId.y == 1.0) // === MIDDLE ROW (THE LEAF DIAGONALS) ===
{
if (gridId.x == 0.0) {
// [MIDDLE-LEFT]: Leaf Style 1 (Top-Right and Bottom-Left rounded)
cornerRadii = vec4(0.15, 0.00, 0.00, 0.15);
} else {
// [MIDDLE-RIGHT]: Leaf Style 2 (Top-Left and Bottom-Right rounded)
cornerRadii = vec4(0.00, 0.15, 0.15, 0.00);
}
}
else if (gridId.y == 0.0) // === BOTTOM ROW ===
{
if (gridId.x == 0.0) {
// [BOTTOM-LEFT]: Tab Style (Top corners rounded only)
cornerRadii = vec4(0.08, 0.00, 0.08, 0.00);
} else {
// [BOTTOM-RIGHT]: Asymmetric single corner rounded
cornerRadii = vec4(0.00, 0.00, 0.16, 0.00);
}
}
// 7. Calculate the distance field for the current button shape
float d = sdRoundedBox(localUV, buttonSize, cornerRadii);
// 8. Render Button Body (Fill with a clean vertical light-to-dark gradient)
float fillMask = smoothstep(0.003, 0.0, d);
vec3 buttonBody = buttonBaseColor * (1.1 - (localUV.y + 0.5) * 0.4);
finalColor = mix(finalColor, buttonBody, fillMask);
// 9. Render Sharp Neon Border (Stroke)
float borderThickness = 0.004;
float borderMask = smoothstep(borderThickness, 0.0, abs(d)) * smoothstep(d, d + 0.004, 0.0);
finalColor += borderMask * neonBlue * 1.8;
// 10. Render Dynamic External Glow Effect (Pulses over time using iTime)
float pulse = sin(iTime * 3.5) * 0.12 + 0.88;
float glowIntensity = exp(-max(d, 0.0) * 28.0) * pulse;
finalColor += glowIntensity * aquaGlow * 0.5 * (1.0 - fillMask);
// 11. Render Internal Scanline Laser Effect
if (d < 0.0)
{
// Laser position sweeps horizontally across the local cell width
float scanSpeed = 0.5;
float scanX = fract(iTime * scanSpeed) * 2.2 - 1.1;
// Render the vertical beam profile
float scanlineWidth = 0.07;
float scanline = smoothstep(scanlineWidth, 0.0, abs((localUV.x / localRatio) - scanX));
// Add reflection overlay inside the button
finalColor += scanline * neonBlue * 0.45;
// Add inner vignette shadow
float innerShadow = smoothstep(-0.06, 0.0, d);
finalColor -= vec3(0.15) * innerShadow;
}
// 12. Draw grid lines to separate the 6 showcase zones clean
float gridLines = smoothstep(0.004, 0.0, abs(uv.x - 0.5)) +
smoothstep(0.004, 0.0, abs(uv.y - 0.3333)) +
smoothstep(0.004, 0.0, abs(uv.y - 0.6666));
finalColor = mix(finalColor, vec3(0.15, 0.15, 0.2), gridLines * 0.4);
// 13. Output processed pixels to screen
fragColor = vec4(finalColor, 1.0);
}Let's see the result:
Posted by
Cătălin George Feștilă
Labels:
2026,
online,
online tool,
shader,
shadertoy,
web,
web development,
website
luni, 18 mai 2026
News : Update pack for the K-Lite Codec Pack
KLCP gets updated frequently. However, there may be worthwhile updates to some of the included components in between the regular releases of KLCP. The update pack below can be used to keep your current installation up-to-date.
This update pack is suppossed to be installed on top of the latest version of the codec pack. The minimum required version of your currently installed codec pack is mentioned below. The update pack is cumulative, meaning it contains all changes since that version. You do not need to install any versions in between.
version 19.7.0 ~ 9.7 MB ~ May 7th 2026
Update for:
K-Lite Codec Pack 19.6.6 and newer (Basic/Standard/Full/Mega)
See the official website.
duminică, 17 mai 2026
News : How much does a Romanian freelancer keep from 100 EUR AdSense revenue?
How much does a Romanian freelancer keep from 100 EUR AdSense revenue?
- There are two taxes involved:
- 30% withheld in the United States (no treaty reduction for AdSense), not YouTube where is 10%
- 10% income tax in Romania, applied only to the money actually received
- Because there is no other income:
- No CASS (health contribution)
- No CAS (pension contribution)
- Step-by-step for 100 EUR example:
- Gross AdSense revenue: 100 EUR
- US withholding: 30% of 100 EUR = 30 EUR
- Amount received in bank account: 100 EUR - 30 EUR = 70 EUR
- Romanian income tax: 10% of 70 EUR = 7 EUR
- Final net amount kept: 70 EUR - 7 EUR = 63 EUR
- Summary:
- Gross: 100 EUR
- US tax (30%): -30 EUR
- Received: 70 EUR
- Romanian tax (10%): -7 EUR
- Net kept by freelancer in Romania: 63 EUR
This does NOT mean AdSense is a bad business in general.
- AdSense becomes profitable when:
- you have high traffic
- you have consistent monthly revenue
- you earn hundreds or thousands of euros per month
- At 100 EUR, the taxes look huge.
- At 1,000 EUR, you already keep around 630 EUR, which is a completely different situation.
To earn 1,000 EUR per month with AdSense, you need:
- 100,000 – 500,000 pageviews per month (depending on RPM)
- CTR between 0.5% and 2%
- RPM between 3 and 10 EUR
- real and consistent traffic
- high‑quality content
Posted by
Cătălin George Feștilă
Labels:
2026,
2026 news,
AdSense,
freelancer,
google,
Google Adsense,
news,
taxes,
tutorial,
tutorials
sâmbătă, 16 mai 2026
News : Inkscape supports German petition to recognize Open Source volunteers
The Inkscape project has joined the group of supporting organizations for the German petition to recognize open source work as volunteering for the common good ("Ehrenamt"). Despite the petition being local to Germany, we believe that strengthening the position of open source contributors there will be beneficial to the open source community as a whole.
See the official blogger.
Abonați-vă la:
Postări (Atom)
