{"id":6746,"date":"2023-01-17T16:35:57","date_gmt":"2023-01-17T16:35:57","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=6746"},"modified":"2023-09-07T15:49:27","modified_gmt":"2023-09-07T14:49:27","slug":"water-caustics-gimp","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/water-caustics-gimp\/","title":{"rendered":"Simple Water Caustics using GIMP"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f1f45f2a427\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f1f45f2a427\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/codex\/water-caustics-gimp\/#caustics-in-gimp\" >Caustics in GIMP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/water-caustics-gimp\/#coloured-caustics\" >Coloured Caustics<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/3lr79fm56XM?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p>Without using a &#8216;<i>water caustics generator<\/i>&#8216; creating images by hand can be a little tricky as the process typically relies on using specific image filters that may not be available. However, it is possible the create that stylised &#8216;caustics&#8217; look using commonly available tools and filters in <a href=\"https:\/\/www.gimp.org\/\" rel=\"noopener\" target=\"_blank\">GIMP<\/a>.<\/p>\n<blockquote><p><b>Design note<\/b>: the same techniques outlined below should be applicable to other applications in the absence of the typically used <b><i>voronoi<\/i><\/b> noise filter\/effect.<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"caustics-in-gimp\"><\/span>Caustics in GIMP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The basic process of creating a caustics image in GIMP relies on using the <b>Difference Clouds<\/b> filter to generate some base noise which is then altered using the <b>Curves<\/b> tool. This can then be set up for tiling using the <b>Tile Seamless<\/b> tool. <\/p>\n<blockquote><p><b>Design note<\/b>: while this quick technique does generate a <i>caustic style<\/i> image it may not necessarily result in the same <i>caustic pattern<\/i> typical of caustic images created using a generator.<\/p><\/blockquote>\n<p>So, using <a href=\"#coloured-caustics\">white as the background image colour<\/a>, first add the noise; from the <b>Filters<\/b> menu [1] select <b>Render<\/b>, <b>Noise<\/b> then <b>Difference Clouds<\/b> [2] &#8211; <b><i>Filters \u00bb Render \u00bb Noise \u00bb Difference Clouds<\/i><\/b>. This generates the initial cloud noise pattern [3].<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/difference-noise.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/difference-noise.jpg\" alt=\"Adding Difference Cloud\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Starting from a white image use the <b>Difference Clouds<\/b> filter [2] to add some an initial noise data [3]&#8230;<\/i><\/p>\n<p>Once the noise has been added, from the <b>Colors<\/b> menu select <b>Curves<\/b> [4] to open the Adjust Color Curves properties pop-up &#8211; <b><i>Colors \u00bb Curves<\/i><\/b>. Here, because a caustics style image is being created, click the curve to add an adjustment node at the mid-point [5] and drag it to the top of the aperture &#8211; essentially setting a coordinate of x:128\/y:255. Next, drag the node bottom-left corner to roughly x:96\/y:0 [6] keeping it locked to the baseline. Then finally drag the node upper-right corner to x:160\/y:0 [7], again locked to the baseline. This should result in an image approximating a caustics base image [8]. Adjust each node to achieve the desired look.<\/p>\n<blockquote><p><b>Design note<\/b>: while additional adjustment nodes can be added preference should be to limit them to three that essentially equate to low, mid and high tonal values and contrasts.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/curves.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/curves.jpg\" alt=\"Using Curves to adjust image\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>&#8230; using the Curves tool [4] alter the mid [5], low [6] and high [7] ranges affecting the initial noise data. <\/i><\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: the number of nodes, and their position relative to the curve, will vary depending on the desired outcome; the above creates a stark, contrasting image, whereas more nodes and less extreme positions will generate a softer, greyer image.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/caustics-grey.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/caustics-grey.jpg\" alt=\"Relative node positions\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Using more nodes, and adjusting their position, changes the appearance of the caustic.<\/i>\n<\/p><\/blockquote>\n<p>Once the caustics image is available it should be tiled so it can be repeated across a surface. To do this, from the <b>Filters<\/b> menu select <b>Map<\/b> then <b>Tile Seamless&#8230;<\/b> [9] to access the <b>Tile Seamless<\/b> properties pop-up &#8211; <b><i>Filters \u00bb Map \u00bb Tile Seamless&#8230;<\/i><\/b>. Here, adjust the <b>Opacity<\/b> [10] setting as needed to adjust the behaviour of the tool, leave everything else untouched then click <b>OK<\/b> once done to finish with a tile-able caustics image [11].<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/tile-seamless.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/tile-seamless.jpg\" alt=\"Tiling the caustics image\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the caustic is made use the <b>Tile Seamless<\/b> filter [9] to create a tileable image.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"coloured-caustics\"><\/span>Coloured Caustics<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To generate a functional caustic image, preference should be to start from <i>white<\/i> (RGB 255,255,255), <i>mid-grey<\/i> (RGB 127,127,127) or black (RGB 0,0,0) to ensure proper caustic image generation. Once this base is available it can be colour tinted by adding a new document layer [12] that&#8217;s colour flood-filled as needed, turquoise-blue for example (RGB:51,203,213\/Hex:33cbd5). This can then be blended with the underlying caustics layer using <b>Mode<\/b> set to <b>Hard light<\/b> [13] to maintain the fill colour while being influenced by the caustic pattern.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/coloured-caustics.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/coloured-caustics.jpg\" alt=\"Colour tinted caustics\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Add colour to a caustic use a filled layer [12] that&#8217;s blended using <b>Hard Light<\/b> [13] (or other mode).<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":6761,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[938,32,230],"tags":[935,936,739,746,156,934,937,933],"class_list":["post-6746","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gimpeditor","category-texturing","category-tutorials","tag-curves","tag-filters","tag-gimp","tag-texture-painting","tag-textures","tag-tile-seamless","tag-tileable","tag-water-caustics"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/comments?post=6746"}],"version-history":[{"count":15,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6746\/revisions"}],"predecessor-version":[{"id":6768,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6746\/revisions\/6768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/6761"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=6746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=6746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=6746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}