{"id":31608848,"url":"https://github.com/connordelacruz/channelshiftgui","last_synced_at":"2025-10-06T08:25:26.369Z","repository":{"id":42564672,"uuid":"198277442","full_name":"connordelacruz/ChannelShiftGUI","owner":"connordelacruz","description":"❤️  ⇄ 💚  ⇄ 💙  GUI interface for datamoshing images by manipulating RGB color channels using Processing","archived":false,"fork":false,"pushed_at":"2024-06-21T19:06:00.000Z","size":46475,"stargazers_count":17,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-06-22T11:18:26.526Z","etag":null,"topics":["databending","datamoshing","glitch","glitch-art","glitchart","gui","image-editing","processing","processing-sketch","processing3"],"latest_commit_sha":null,"homepage":"","language":"Processing","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/connordelacruz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-22T18:07:00.000Z","updated_at":"2024-06-21T19:06:04.000Z","dependencies_parsed_at":"2023-01-22T14:45:45.243Z","dependency_job_id":null,"html_url":"https://github.com/connordelacruz/ChannelShiftGUI","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/connordelacruz/ChannelShiftGUI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/connordelacruz%2FChannelShiftGUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/connordelacruz%2FChannelShiftGUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/connordelacruz%2FChannelShiftGUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/connordelacruz%2FChannelShiftGUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/connordelacruz","download_url":"https://codeload.github.com/connordelacruz/ChannelShiftGUI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/connordelacruz%2FChannelShiftGUI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278578239,"owners_count":26009763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["databending","datamoshing","glitch","glitch-art","glitchart","gui","image-editing","processing","processing-sketch","processing3"],"created_at":"2025-10-06T08:25:25.161Z","updated_at":"2025-10-06T08:25:26.354Z","avatar_url":"https://github.com/connordelacruz.png","language":"Processing","funding_links":[],"categories":[],"sub_categories":[],"readme":"--------------------------------------------------------------------------------\n\n# DEPRECATED\n\nI've created a web version of this app using p5.js and React and am shifting focus to that version.\n\nYou can check it out here: [cheezwhiz.biz](https://cheezwhiz.biz)\n\nOr check out the repo here: https://github.com/connordelacruz/react-p5-channel-shift\n\n--------------------------------------------------------------------------------\n\n# RGB Channel Shift Tool\n\nThis Processing sketch provides a GUI interface for datamoshing images by\nmanipulating RGB color channels.\n\n\n\u003c!-- vim-markdown-toc GFM --\u003e\n\n* [Overview](#overview)\n* [Installation](#installation)\n* [Features](#features)\n    * [Swap Color Channels](#swap-color-channels)\n    * [Shift Color Channels](#shift-color-channels)\n    * [Recursive Iterations](#recursive-iterations)\n    * [Randomization](#randomization)\n    * [Experimental Shift Types](#experimental-shift-types)\n* [Controls](#controls)\n    * [Color Channels](#color-channels)\n        * [Source Channel](#source-channel)\n        * [Target Channel](#target-channel)\n    * [Horizontal/Vertical Shift](#horizontalvertical-shift)\n    * [Randomize Options](#randomize-options)\n        * [Toggle Randomization Options](#toggle-randomization-options)\n        * [Set Random Shift Threshold](#set-random-shift-threshold)\n    * [Confirm Step](#confirm-step)\n    * [Reset Step](#reset-step)\n    * [Save Current Result](#save-current-result)\n    * [Load a New Source Image](#load-a-new-source-image)\n    * [Advanced Options](#advanced-options)\n* [Experimental Shift Types](#experimental-shift-types-1)\n    * [Scale](#scale)\n        * [Options](#options)\n        * [Shift Calculation](#shift-calculation)\n    * [Linear](#linear)\n        * [Options](#options-1)\n        * [Shift Calculation](#shift-calculation-1)\n            * [y=mx+b](#ymxb)\n            * [x=my+b](#xmyb)\n    * [Skew](#skew)\n        * [Options](#options-2)\n        * [Shift Calculation](#shift-calculation-2)\n    * [XY Multiply](#xy-multiply)\n        * [Options](#options-3)\n        * [Shift Calculation](#shift-calculation-3)\n    * [Noise](#noise)\n        * [Options](#options-4)\n        * [Shift Calculation](#shift-calculation-4)\n\n\u003c!-- vim-markdown-toc --\u003e\n\n## Overview\n\nThe basic features of this tool allow you to shift color channels vertically and\nhorizontally, as well as swap color channels with each other:\n\n![Basic Showcase](../assets/samples/basic-showcase.png?raw=true)\n\nIt also includes experimental shift types that modify how pixels are shifted,\nwhich can be combined for interesting effects:\n\n![Advanced Showcase](../assets/samples/advanced-showcase.png?raw=true)\n\n\n## Installation\n\nThis sketch requires [Processing 3+](https://processing.org/download/) (tested\nusing Processing 3.5). \n\nAfter installing Processing 3, clone the repo:\n\n```\ngit clone https://github.com/connordelacruz/ChannelShiftGUI.git\n```\n\nThis sketch uses the [G4P GUI library](http://www.lagers.org.uk/g4p/), which is\nincluded in this repo, so no additional setup is required.\n\n\n## Features\n\n### Swap Color Channels\n\nSwap the selected channel from the source image with the selected channel from\nthe target image.\n\n### Shift Color Channels\n\nShift the selected source image channel horizontally and/or vertically on the\ntarget image.\n\n### Recursive Iterations\n\nUse the target image as the source for subsequent iterations.\n\n### Randomization\n\nTarget channel, source channel, horizontal shift, and vertical shift can all be\nrandomized. You can select/deselect which options to randomize, as well as set a\nmax threshold for vertical and horizontal shift amounts.\n\n### Experimental Shift Types\n\nBy default, horizontal and vertical shifts translate the color channel along the\nx and y axes, respectively. You can also select experimental shift types with\ntheir own advanced options that modify how each pixel is shifted based on a\nnumber of conditions in addition to the horizontal/vertical shift amounts. \n\nFor explanations and examples of each type, see [Experimental Shift\nTypes](#experimental-shift-types-1).\n\n## Controls\n\n![GUI](../assets/screenshots/gui.png?raw=true)\n\n### Color Channels\n\n#### Source Channel\n\nSelects the color channel from the source image to be shifted.\n\n#### Target Channel\n\nSelects the color channel from the result image to swap the source channel with.\nIf you don't want to swap channels, set this to the same option as the source\nchannel.\n\n\n### Horizontal/Vertical Shift\n\nThe horizontal and vertical shift sliders offset the selected source channel\nalong the X and Y axis, respectively. \n\nBy default, both sliders use percentage values. If you want to set an exact\npixel distance to shift by, select the **Pixels** option to the right of the\nslider.\n\nYou can also set the shift value manually using the text input to the left of\nthe sliders.\n\n\n### Randomize Options\n\nThe **Randomize Options** panel is used to randomize the current step.\n\n#### Toggle Randomization Options\n\nBy default, all options are randomized. You can uncheck the boxes of any options\nyou do not want to randomize.\n\n#### Set Random Shift Threshold\n\nThe **Max Horizontal/Vertical Shift %** inputs can be used to put a limit on the\nrandomized shift values. For example, setting **Max Horizontal Shift %** to 10\nwill only result in random horizontal shift values of 10% of the image width or\nless. \n\n**Note:** that neither of these inputs will have any effect if the corresponding\n**Horizontal/Vertical Shift** checkbox is unchecked.\n\n\n### Confirm Step\n\nTo commit the current channel shift step, click the **Confirm Step** button.\nThis will update the working image to match the preview and reset all\nconfigurations so you can apply another step.\n\nIf the **Recursive** checkbox is checked upon clicking the confirm button, the\nsource image pixels will be updated to match the shifted image, so further\nchannel shifts/swaps will be applied based on the shifted image instead of the\noriginal image. Otherwise, further channel shifts/swaps will be based on the\noriginal channels.\n\n\n### Reset Step\n\nTo revert the current step to the default, click the **Reset Step** button. Note\nthat this will not affect any previously confirmed steps.\n\n\n### Save Current Result\n\nTo save the current result shown in the preview window, click the **Save\nResult** button. This will bring up the system \"Save As\" dialog.\n\n\n### Load a New Source Image\n\nTo load a source image, click the **Load Image** button and select the desired\nimage file. Note that this will clear the current result, so be sure to save it\nbefore loading if you don't want to lose your work.\n\n### Advanced Options\n\nThe advanced options panel allows you to select the shift type and has\nconfigurations specific to each one. The default shift type has no advanced\noptions, but selecting an experimental shift type from the dropdown will show\nits specific settings in this panel. See the following section for details on\neach experimental shift type.\n\n\n## Experimental Shift Types\n\nThe following section describes the different experimental shift types in the\n**Advanced Options** panel, as well as the way each pixel's horizontal and\nvertical shift is calculated.\n\n### Scale\n\n![Scale shift type](../assets/samples/scale.png?raw=true)\n\nScales the width and length of the channel by the specified multiplier.\nMultipliers greater than 1.0 shrink the image dimension and create a tiling\neffect. Multipliers less than 1.0 scale the image dimension up.\n\n#### Options\n\n- **Horizontal Shift Multiplier:** Value to multiply the width by\n- **Vertical Shift Multiplier:** Value to multiply the height by\n\n#### Shift Calculation\n\n```\n(coordinate * multiplier) + shift\n```\n\nWhere:\n\n- `coordinate`: x if horizontal, y if vertical\n- `multiplier`: the configured horizontal/vertical shift multiplier\n- `shift`: the horizontal/vertical shift amount\n\n\n### Linear\n\n![Linear shift type](../assets/samples/linear.png?raw=true)\n\nUses a linear equation to calculate shift offset.\n\n#### Options\n\n- **Equation Type:** select whether the linear equation format is y=mx+b or\n  x=my+b\n- **Slope (m):** the slope of the linear equation\n- **Negative Slope:** if checked, multiply slope (m) by -1\n\n#### Shift Calculation\n\nCalculations for x/y offset are determined by solving the equation for x/y,\nrespectively.\n\n##### y=mx+b\n\n**Horizontal Offset:**\n\n```\nx + (int)((y - shift) / (mSign * m))\n```\n\n**Vertical Offset:**\n\n```\ny + (int)((mSign * m) * x + shift)\n```\n\nWhere:\n\n- `x` and `y`: the coordinates of the pixel\n- `shift`: the horizontal/vertical shift amount\n- `m`: the configured slope\n- `mSign`: 1 if positive slope, -1 if negative slope\n\n##### x=my+b\n\n**Horizontal Offset:**\n\n```\nx + (int)((mSign * m) * y + shift)\n```\n\n**Vertical Offset:**\n\n```\ny + (int)((x - shift) / (mSign * m))\n```\n\nWhere:\n\n- `x` and `y`: the coordinates of the pixel\n- `shift`: the horizontal/vertical shift amount\n- `m`: the configured slope\n- `mSign`: 1 if positive slope, -1 if negative slope\n\n\n### Skew\n\n![Skew shift type](../assets/samples/skew.png?raw=true)\n\nSkew/shear the channel.\n\n#### Options\n\n- **Horizontal/Vertical Skew:** the amount to skew along the x/y axis\n- **Negative X/Y Skew:** if checked, invert the skew direction along the\n  corresponding axis\n\n#### Shift Calculation\n\n**Horizontal Offset:**\n\n```\nx + shift + (int)(xSign * xSkew * y)\n```\n\n**Vertical Offset:**\n\n```\ny + shift + (int)(ySign * ySkew * x)\n```\n\nWhere:\n\n- `x` and `y`: the coordinates of the pixel\n- `shift`: the horizontal/vertical shift amount\n- `xSkew` and `ySkew`: the horizontal and vertical skew amounts, respectively\n- `xSign` and `ySign`: 1 if positive skew, -1 if negative for the corresponding\n  dimension\n\n### XY Multiply\n\n![XY Multiply shift type](../assets/samples/xy-mult.png?raw=true)\n\nMultiply the x/y coordinates of a pixel and divide it by the corresponding\ndimension, so the shift modifier becomes more drastic for one dimension as the\nother dimension increases. (Kind of a weird one, leads to some cool results.\nRecommend playing around with different configurations)\n\n#### Options\n\n- **x shift + (x*y/height):** if checked, add x\\*y/height to horizontal shift\n- **y shift + (y*x/width):** if checked, add y\\*x/width to vertical shift\n- **Negative X/Y Coefficient:** if checked, multiply the corresponding\n  coordinate's shift modifier by -1\n\n#### Shift Calculation\n\n**Horizontal Offset:**\n\nIf **x shift + (x*y/height):** is checked:\n\n```\nx + shift + (int)(xSign*x*y / height)\n```\n\n(otherwise it's just `x + shift`)\n\n**Vertical Offset:**\n\nIf **y shift + (y*x/width):** is checked:\n\n```\ny + shift + (int)(ySign*y*x / width)\n```\n\n(otherwise it's just `y + shift`)\n\nWhere:\n\n- `x` and `y`: the coordinates of the pixel\n- `shift`: the horizontal/vertical shift amount\n- `xSign` and `ySign`: 1 if positive coefficient, -1 if negative for the\n  corresponding dimension\n\n\n### Noise\n\n![Noise shift type](../assets/samples/noise.png?raw=true)\n\nApply [Perlin noise](https://en.wikipedia.org/wiki/Perlin_noise) to the shift amount.\n\n#### Options\n\n- **X Start:** Starting value for x noise\n- **Y Start:** Starting value for y noise\n- **X Step:** Amount to increment x by each time `noise()` is called. Use a smaller number for smoother results\n- **Y Step:** Amount to increment y by each time `noise()` is called. Use a smaller number for smoother results\n- **Noise Multiplier:** Value to multiply result of `noise()` by. Higher values create more drastic effects\n\n#### Shift Calculation\n\n**Horizontal Offset:**\n\n```\nx + shift + (int)(noiseMultiplier * noise(xNoise, yNoise))\n```\n\n**Vertical Offset:**\n\n\n```\ny + shift + (int)(noiseMultiplier * noise(xNoise, yNoise))\n```\n\nWhere:\n\n- `x` and `y`: the coordinates of the pixel\n- `shift`: the horizontal/vertical shift amount\n- `noiseMultiplier`: the noise multiplier value\n- `xNoise` and `yNoise`: noise coordinates, calculated by adding offset to start value each time the corresponding coordinate (`x` or `y`) is incremented\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconnordelacruz%2Fchannelshiftgui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconnordelacruz%2Fchannelshiftgui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconnordelacruz%2Fchannelshiftgui/lists"}