{"author_link":"\/users\/stateoff","author_name":"StateOff","author_uid":"stateoff","comments":[],"epoch":1512599713,"event":"LD40","format":"md","ldjam_node_id":63468,"likes":4,"metadata":{"p_key":"103570","p_author":"StateOff","p_authorkey":"1052236","p_urlkey":"319343","p_title":"\"Need more coffee\" shader effect","p_cat":"LDJam ","p_event":"LD40","p_time":"1512599713","p_likes":"4","p_comments":"0","p_status":"WAYBACK","us_key":"1052236","us_name":"StateOff","us_username":"stateoff","event_start":"1512086400","event_key":"70","event_name":"LD 40"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD40","removed_author":false},"_superparent":49883,"_trust":2,"author":52236,"body":"I was asked in the comments how the \"coffee-effect\" is done.\n\nIt pretty much boils down to a screen space (fragment) shader that is driven by a float I call \"phase\". This was made in godot but should apply to any shader.\n\nThere is essentially a combination of 3 phases which define the amplitude, frequency and speed (time factor) of a sine function.\n\nBased on the phase I interpolate between each phase, so e.g. phase 1 defines:\n\n```\nfloat amp_1 = 0.0075\nfloat speed_1 = 3.0\nfloat freq_1 = 10\n```\n\nI get the final value by interpolating (lerp\/mix) between phase 0 and 1:\n\n```\namp = mix(0, amp_1, phase1)\nspeed = mix(0, speed_1, phase1)\nfreq = mix(0, freq_1, phase1)\n```\n\nThe real magic happens in the final function that takes the original screen space coordinate (uv) with the sine function:\n\n```\nuv.x = uv.x * (1 - 2 * amp) + amp\nuv.x = mix(uv.x - amp, uv.x + amp, (1 + sin(speed * TIME + uv.y * freq))*0.5)\n```\n\nWhat's up with al these offsets? Well the input uv coordinates range from 0.0-1.0f.\n\nThat means that if the sine is applied directly the wave goes below 0 in x and above 1.\nThis ends up in a clamp or duplicate pixel which looks really bad.\n\nSo instead we offset the whole effect by the amplitude and scale the final image. Sine we gradually move the amplitude up it is barely noticeable but fixes the ugly effect on the edges of the screen.\n\nThat's it. Here the full effect visualized in an ideal world where the coffee cup is never empty:\n\n![need_more_coffee_shader.gif](\/\/\/raw\/c0c\/c\/z\/e0e9.gif)\n\nNote how the heart beat also gets faster with the phase :)\n\nDon't forget to play at:\n\nhttps:\/\/ldjam.com\/events\/ludum-dare\/40\/need-more-coffee","comments":2,"comments-timestamp":"2017-12-06T22:41:02Z","created":"2017-12-03T04:59:29Z","files":[],"files-timestamp":0,"id":63468,"love":4,"love-timestamp":"2017-12-07T09:58:37Z","meta":[],"modified":"2017-12-07T09:58:37Z","name":"\"Need more coffee\" shader effect","node-timestamp":"2017-12-07T01:03:39Z","parent":57678,"parents":[1,5,9,49883,57678],"path":"\/events\/ludum-dare\/40\/need-more-coffee\/need-more-coffee-shader-effect","published":"2017-12-06T22:35:13Z","scope":"public","slug":"need-more-coffee-shader-effect","subsubtype":"","subtype":"","type":"post","version":203169},"node_metadata":{"n_key":"63468","n_urlkey":"319343","n_parent":"57678","n_path":"\/events\/ludum-dare\/40\/need-more-coffee\/need-more-coffee-shader-effect","n_slug":"need-more-coffee-shader-effect","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"52236","n_created":"1512277169","n_modified":"1512640717","n_version":"203169","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/40\/need-more-coffee\/need-more-coffee-shader-effect","text":"I was asked in the comments how the \"coffee-effect\" is done.\n\nIt pretty much boils down to a screen space (fragment) shader that is driven by a float I call \"phase\". This was made in godot but should apply to any shader.\n\nThere is essentially a combination of 3 phases which define the amplitude, frequency and speed (time factor) of a sine function.\n\nBased on the phase I interpolate between each phase, so e.g. phase 1 defines:\n\n```\nfloat amp_1 = 0.0075\nfloat speed_1 = 3.0\nfloat freq_1 = 10\n```\n\nI get the final value by interpolating (lerp\/mix) between phase 0 and 1:\n\n```\namp = mix(0, amp_1, phase1)\nspeed = mix(0, speed_1, phase1)\nfreq = mix(0, freq_1, phase1)\n```\n\nThe real magic happens in the final function that takes the original screen space coordinate (uv) with the sine function:\n\n```\nuv.x = uv.x * (1 - 2 * amp) + amp\nuv.x = mix(uv.x - amp, uv.x + amp, (1 + sin(speed * TIME + uv.y * freq))*0.5)\n```\n\nWhat's up with al these offsets? Well the input uv coordinates range from 0.0-1.0f.\n\nThat means that if the sine is applied directly the wave goes below 0 in x and above 1.\nThis ends up in a clamp or duplicate pixel which looks really bad.\n\nSo instead we offset the whole effect by the amplitude and scale the final image. Sine we gradually move the amplitude up it is barely noticeable but fixes the ugly effect on the edges of the screen.\n\nThat's it. Here the full effect visualized in an ideal world where the coffee cup is never empty:\n\n![need_more_coffee_shader.gif](\/\/\/raw\/c0c\/c\/z\/e0e9.gif)\n\nNote how the heart beat also gets faster with the phase :)\n\nDon't forget to play at:\n\nhttps:\/\/ldjam.com\/events\/ludum-dare\/40\/need-more-coffee","title":"\"Need more coffee\" shader effect","wayback_source":[]}