// _____ ___ ____ ____ // / ___// | / __ \/ __ \ // \__ \/ /| | / /_/ / / / / // ___/ / ___ |/ ____/ /_/ / // /____/_/ |_/_/ \____/.JS // // Welcome to sapo.js interactive procedural texture generator! // // Author: doup – http://doup.illarra.com // Repository: https://github.com/doup/sapo.js (PR your textures!) // // See available helper functions: https://github.com/doup/sapo.js/blob/master/src/js/helpers.js // function render( s, t, x_repeat = i(4, 1, 8), y_repeat = i(6, 1, 14), shadow = c(0.318, 0.267, 0.157, 1.0), color = c(0.902, 0.882, 0.816, 1.0), highlight = c(0.984, 0.984, 0.992, 1.0), type = i(0, 0, 1) ) { var cut, column, row, ss, tt, border, mid; var border_start, border_mid, border_end; var origin, dist, hl_width, hl_start, hl_end, pos; // Let's calculate in wich column and row we are. column = parseInt(s * x_repeat); row = parseInt(t * y_repeat); // New coordinates ss = wrap(s * x_repeat); tt = wrap(t * y_repeat); if (odd(row)) { ss = wrap(ss + 0.5); } // Fold coordinates // ____ __ // |\ /| |\ | // |_\/_| => |_\| // ss = (ss < 0.5) ? ss : 0.5 - (ss - 0.5); // Calculate cut height for the given ss // Separates the top and bot region of the scale // ss // __|_ // |\ | TOP TRIANGLE // | \. |_ cut // BOT | \ | // TRI. |___\| if (type === 0) { cut = Math.sin(ss * Math.PI); } else if (type == 1) { cut = clamp(ss * 3.0); } else { cut = ss * 2.0; } // DRAWING // Width of the scale border border = 0.08; border = border + (border * (1 - cut)) * 0.5; // modulate width // Mid position (%) when border color is darkest // ROTATED visualization: // // mid // . // . . // . . // ######### tt mid = 0.6; // Border position border_start = cut - border; border_mid = border_start + (mid * border); border_end = cut; // Change origin based on triangle (top/bot) if (tt < border_mid) { origin = [0.5, -1.0]; } else { origin = [0.0, 0.0]; } // Calculate distance to scale origin // Multiply horizontal (x2.5) axis to exagerate roundness dist = Math.sqrt(Math.pow((ss - origin[0]) * 2.5, 2) + Math.pow(tt - origin[1], 2)); // Calculate color color = mix(highlight, color, smoothstep(0.0, 1.0, (dist * 1.25) - 0.75)); // Highlight color = mix(shadow, color, smoothstep(0.0, 1.0, (tt - origin[1]) * 2.7)); // Origin shadow // Scale shadow cut = (Math.sin((ss + origin[0]) * Math.PI) * 1.2) - 0.85; color = mix(shadow, color, smoothstep(0.0, 1.0, tt - origin[1] - cut)); // Border Highlight hl_width = 0.15; hl_start = border_start - hl_width; hl_end = hl_start + hl_width; if (tt > hl_start && tt <= hl_end) { pos = (tt - hl_start) / hl_width; color = mix(color, highlight, ( smoothstep(0.0, 1.0, ss * 2) * // Horizontal control smoothstep(0.0, 1.0, pos * 2) * // Start slope _/' smoothstep(0.0, 1.0, 2 - pos * 2) * // End slope '\_ 0.3 // Reduce intensity )); } // Draw border if (tt > border_start && tt <= border_end) { // Map from border_start = 0.0 to border_end = 1.0 // | // | border_start ------- // tt | // | border_end ------- // v pos = (tt - border_start) / border; return mix(color, shadow, ( smoothstep(0.0, 1.0, clamp(pos / mid)) * smoothstep(1.0, 0.0, clamp((pos - mid) / (1 - mid))) * 0.5 )); } else { return color; } }