biipadmin/Burn-My-Windows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into feature/transporter

Browse Source
This commit is contained in:
Simon Schneegans
2022-01-13 16:30:54 +01:00
parent 3228106ddf 04b8d1060a
commit c7c28184eb
6 changed files with 588 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+3 -1
View File
@@ -16,6 +16,7 @@ Effect | Preview
**Matrix** <br> Turn your windows into a shower of green letters! The color is actually configurable. <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/matrix.gif" />
**T-Rex Attack** <br> Destroy your windows with a series of violent slashes! <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/trex.gif" />
**TV-Effect** <br> This is a very simple effect to demonstrate that this extension could also be used in a more professional environment. | <img src ="docs/pics/tv.gif" />
**Your Effect!** <br> The extension is very modular and with a bit of creativity and GLSL knowledge, you can easily create your own effects. | [A tutorial for creating custom effects is available here.](docs/how-to-create-new-effects.md)
## 💞 These People _love_ this Extension
@@ -109,7 +110,8 @@ gnome-extensions enable burn-my-windows@schneegans.github.com
## :octocat: I want to contribute!
That's great!
Here are some basic rulles to get you started:
Most likely, you want to [create a new effect](docs/how-to-create-new-effects.md)?
Here are some basic rules to get you started:
Commits should start with a Capital letter and should be written in present tense (e.g. __:tada: Add cool new feature__ instead of __:tada: Added cool new feature__).
You should also start your commit message with **one** applicable emoji.
This does not only look great but also makes you rethink what to add to a commit. Make many but small commits!
docs/how-to-create-new-effects.md
+575
View File
@@ -0,0 +1,575 @@
# 🔥 Creating a new Effect for Burn-My-Windows
The extension is very modular and with a bit of creativity and GLSL knowledge, you can easily create your own effects.
If you are happy with your results, please open a pull request so that we can include your effect in the next version of Burn-My-Windows!
### Before you Start
First you should [fork the repository](https://github.com/Schneegans/Burn-My-Windows/fork) and clone it to your PC.
Afterwards, use a terminal in the directory of the cloned repository to install the extension.
```bash
make install
```
_:information_source: Whenever you changed something in the source code, you will have to call this command and restart GNOME Shell with <kbd>Alt</kbd> + <kbd>F2</kbd>, <kbd>r</kbd> + <kbd>Enter</kbd>.
Or logout / login if you are on Wayland to see the changes._
### Debugging
Debugging GNOME Shell extensions is a bit difficult.
Most of the time, you will print messages to a log in order to understand what is going on.
To make this a bit more convenient, Burn-My-Windows includes the method `utils.debug("Hello World")`.
With this, each line will be prefixed with the extension's name, which will make spotting log messages more easy. You can use the following command to watch the log output; it will highlight all messages from Burn-My-Windows:
```bash
journalctl -f -o cat | grep -E 'burn-my-windows|'
```
## Adding a new Effect
For the sake of this tutorial, we will create a **"Simple Fade"** effect.
Of course, you can replace any occurrence of this name and its nick `simple-fade` with your custom effect name.
Three simple steps are required to create a new effect.
You will have to ...
1. add a preferences key for enabling the effect,
2. create an additional effects class, and finally
3. register the new effect in two places.
### 1. Expanding the Schema
For enabling the new effect, the boolean settings key `simple-fade-close-effect` is required.
In this example, we also add an integer valued settings key for storing the animation time of the new effect and a floating point value for storing another property of the effect - we will use them later in the tutorial.
Just copy the XML code below to the file [`schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml`](../schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml).
Just remember to replace `simple-fade` with your custom name!
```xml
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Simple Fade Effect Options -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<key name="simple-fade-close-effect" type="b">
<default>false</default>
<summary>Simple Fade Close Effect</summary>
<description>Use the Simple Fade effect for window closing.</description>
</key>
<key name="simple-fade-animation-time" type="i">
<default>1500</default>
<summary>Simple Fade Animation Time</summary>
<description>The time the Simple Fade effect takes.</description>
</key>
<key name="simple-fade-width" type="d">
<default>0.1</default>
<summary>Simple Fade Width</summary>
<description>Width of the fading effect.</description>
</key>
```
### 2. Creating the Effect Class
You will have to create a new file called `src/SimpleFadeEffect.js` and paste the following code to it.
Please study this code carefully, all of it is explained with inline comments.
<details>
<summary>Expand this to show the code.</summary>
```javascript
//////////////////////////////////////////////////////////////////////////////////////////
// ) ( //
// ( /( ( ( ) ( ( ( ( )\ ) ( ( //
// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( //
// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ //
// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) //
// | '_ \ || | '_| ' \)) | ' \()| || | \ V V / | ' \)) _` / _ \ V V (_-< //
// |_.__/\_,_|_| |_||_| |_|_|_| \_, | \_/\_/|_|_||_|\__,_\___/\_/\_//__/ //
// |__/ //
// Copyright (c) 2021 Simon Schneegans //
// Released under the GPLv3 or later. See LICENSE file for details. //
//////////////////////////////////////////////////////////////////////////////////////////
'use strict';
const GObject = imports.gi.GObject;
const ExtensionUtils = imports.misc.extensionUtils;
const Me = imports.misc.extensionUtils.getCurrentExtension();
const utils = Me.imports.src.utils;
//////////////////////////////////////////////////////////////////////////////////////////
// This effect ... //
// <- Please add a description of your effect here -> //
//////////////////////////////////////////////////////////////////////////////////////////
// The shader class for this effect is registered further down in this file.
let Shader = null;
// The effect class is completely static. It can be used to get some metadata (like the
// effect's name or supported GNOME Shell versions), to initialize the respective page of
// the settings dialog, as well as to create the actual shader for the effect.
var SimpleFadeEffect = class SimpleFadeEffect {
// ---------------------------------------------------------------------------- metadata
// The effect is available on all GNOME Shell versions supported by this extension.
static getMinShellVersion() {
return [3, 36];
}
// This will be called in various places where a unique identifier for this effect is
// required. It should match the prefix of the settings keys which store whether the
// effect is enabled currently (e.g. the '*-close-effect').
static getNick() {
return 'simple-fade';
}
// This will be shown in the sidebar of the preferences dialog as well as in the
// drop-down menus where the user can choose the effect.
static getLabel() {
return 'Simple Fade Effect';
}
// -------------------------------------------------------------------- API for prefs.js
// This is called by the preferences dialog. It loads the settings page for this effect,
// binds all properties to the settings and appends the page to the main stack of the
// preferences dialog.
static initPreferences(dialog) {
// Empty for now... Code is added here later in the tutorial!
}
// ---------------------------------------------------------------- API for extension.js
// This is called from extension.js whenever a window is closed with this effect.
static createShader(settings) {
return new Shader(settings);
}
// This is also called from extension.js. It is used to tweak the ongoing transitions of
// the actor - usually windows are faded to transparency and scaled down slightly by
// GNOME Shell. Here, we modify this behavior as well as the transition duration.
static tweakTransitions(actor, settings) {
const animationTime = settings.get_int('simple-fade-animation-time');
const tweakTransition = (property, value) => {
const transition = actor.get_transition(property);
if (transition) {
transition.set_to(value);
transition.set_duration(animationTime);
}
};
// We re-target these transitions so that the window is neither scaled nor faded.
tweakTransition('opacity', 255);
tweakTransition('scale-x', 1);
tweakTransition('scale-y', 1);
}
}
//////////////////////////////////////////////////////////////////////////////////////////
// The shader class for this effect will only be registered in GNOME Shell's process //
// (not in the preferences process). It's done this way as Clutter may not be installed //
// on the system and therefore the preferences would crash. //
//////////////////////////////////////////////////////////////////////////////////////////
if (utils.isInShellProcess()) {
const Clutter = imports.gi.Clutter;
const shaderSnippets = Me.imports.src.shaderSnippets;
Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
_init(settings) {
super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
this.set_shader_source(`
// The code below injects some standard uniforms which will be updated during the
// animation. This includes:
// uTexture: Contains the texture of the window.
// uProgress: A value which transitions from 0 to 1 during the entire animation.
// uTime: A steadily increasing value in seconds.
// uSizeX: The horizontal size of uTexture in pixels.
// uSizeY: The vertical size of uTexture in pixels.
${shaderSnippets.standardUniforms()}
// The width of the fading effect is directly loaded from the settings.
const float FADE_WIDTH = ${settings.get_double('simple-fade-width')};
void main() {
// Get the color from the window texture.
vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
// Radial distance from window edge to the window's center.
float dist = length(cogl_tex_coord_in[0].st - 0.5) * 2.0 / sqrt(2.0);
// This gradually dissolves from [1..0] from the outside to the center.
float mask = (1.0 - uProgress * (1.0 + FADE_WIDTH) - dist + FADE_WIDTH) / FADE_WIDTH;
// Make the mask smoother.
mask = smoothstep(0, 1, mask);
// Set the final output color. This uses premultiplied alpha.
cogl_color_out = windowColor * mask;
}
`);
};
});
}
```
</details>
### 3. Registering the new Effect
You will have to register the new effect in two files.
Both, [`extension.js`](../extension.js) and [`prefs.js`](../prefs.js) define an array in the beginning where you have to add an import to your new effect.
Like this:
```javascript
const ALL_EFFECTS = [
...
Me.imports.src.SimpleFadeEffect.SimpleFadeEffect,
...
];
```
### Testing your Effect
Now you can call `make install` and restart GNOME Shell with <kbd>Alt</kbd> + <kbd>F2</kbd>, <kbd>r</kbd> + <kbd>Enter</kbd>.
Or logout / login if you are on Wayland.
You can open the extension's preferences and choose the new effect!
However, there are no configuration options yet.
It is also not possible to adjust the animation time setting.
```bash
gnome-extensions prefs burn-my-windows@schneegans.github.com
```
## Adding a Preferences Page
There should be two sliders in this example: The animation duration and the width of the fading gradient.
If your effect supports GNOME Shell 3.3x _and_ GNOME Shell 40+, you will have to provide two `*.ui` files for this.
This is because starting with GNOME Shell 40, the preference dialog uses GTK4, before it used to use GTK3.
Usually, there are only a few minor differences between the two files.
We will load the respective file in the `initPreferences()` method of your new effect class.
Just save the code below to `resources/ui/gtk3/simpleFadePage.ui` and `resources/ui/gtk4/simpleFadePage.ui` respectively.
Remember to replace any occurrence of `simple-fade` with your effect's nick-name!
<details>
<summary>Expand this to show the GTK3 code.</summary>
```xml
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkAdjustment" id="simple-fade-animation-time">
<property name="upper">5000</property>
<property name="lower">100</property>
<property name="step-increment">10</property>
<property name="page-increment">100</property>
</object>
<object class="GtkAdjustment" id="simple-fade-width">
<property name="upper">1</property>
<property name="lower">0</property>
<property name="step-increment">0.01</property>
<property name="page-increment">0.1</property>
</object>
<object class="GtkBox" id="simple-fade-prefs">
<property name="orientation">vertical</property>
<property name="margin-start">60</property>
<property name="margin-end">60</property>
<property name="margin-top">60</property>
<property name="margin-bottom">60</property>
<child>
<object class="GtkFrame">
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<style>
<class name="rich-list" />
</style>
<child>
<object class="GtkListBoxRow">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Animation Time [ms]</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">simple-fade-animation-time</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-simple-fade-animation-time">
<child>
<object class="GtkImage">
<property name="icon-name">edit-clear-symbolic</property>
<property name="icon-size">1</property>
</object>
</child>
<property name="tooltip-text">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Fade Width</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">2</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">simple-fade-width</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-simple-fade-width">
<child>
<object class="GtkImage">
<property name="icon-name">edit-clear-symbolic</property>
<property name="icon-size">1</property>
</object>
</child>
<property name="tooltip-text">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</interface>
```
</details>
<details>
<summary>Expand this to show the GTK4 code.</summary>
```xml
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkAdjustment" id="simple-fade-animation-time">
<property name="upper">5000</property>
<property name="lower">100</property>
<property name="step-increment">10</property>
<property name="page-increment">100</property>
</object>
<object class="GtkAdjustment" id="simple-fade-width">
<property name="upper">1</property>
<property name="lower">0</property>
<property name="step-increment">0.01</property>
<property name="page-increment">0.1</property>
</object>
<object class="GtkBox" id="simple-fade-prefs">
<property name="orientation">vertical</property>
<property name="margin-start">60</property>
<property name="margin-end">60</property>
<property name="margin-top">60</property>
<property name="margin-bottom">60</property>
<child>
<object class="GtkFrame">
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<style>
<class name="rich-list" />
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Animation Time [ms]</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">simple-fade-animation-time</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-simple-fade-animation-time">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Fade Width</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">2</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">simple-fade-width</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-simple-fade-width">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</interface>
```
</details>
### Loading the Preferences Page
In order to load the above `*.ui` files, add the following code to your effect's `initPreferences()` method.
```javascript
static initPreferences(dialog) {
// Add the settings page to the builder.
dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/simpleFadePage.ui`);
// These connect the settings to the UI elements. Have a look at prefs.js
// on how to bind other types of UI elements.
dialog.bindAdjustment('simple-fade-animation-time');
dialog.bindAdjustment('simple-fade-width');
// Finally, append the settings page to the main stack.
const stack = dialog.getBuilder().get_object('main-stack');
stack.add_titled(
dialog.getBuilder().get_object(SimpleFadeEffect.getNick() + '-prefs'),
SimpleFadeEffect.getNick(), SimpleFadeEffect.getLabel());
}
```
Once this is in place, you can kill the extension-preferences process and re-open the settings.
It is not required to reload GNOME Shell for developing the preferences dialog!
Here's a handy one-liner to do this:
```bash
make install && pkill -f '.Extensions' && sleep 2 ; gnome-extensions prefs burn-my-windows@schneegans.github.com
```
## Summing Up
That's it!
If you have any questions, feel free to [ask them on the discussions board](https://github.com/Schneegans/Burn-My-Windows/discussions).
If you are happy with your effect, submit a pull request, and it may get included in the next version!
resources/img/scalable/actions/burn-my-windows-symbolic.svg
+5 -5
View File
@@ -25,9 +25,9 @@
inkscape:document-units="mm"
showgrid="false"
units="px"
inkscape:zoom="4.9362795"
inkscape:cx="152.03758"
inkscape:cy="214.93921"
inkscape:zoom="2.5309183"
inkscape:cx="71.713102"
inkscape:cy="128.807"
inkscape:window-width="1920"
inkscape:window-height="1131"
inkscape:window-x="0"
@@ -827,7 +827,7 @@
transform="scale(1,-1)"
ry="0.52187622" />
<path
d="m 52.973458,311.84361 c -17.19257,-10.18416 -13.627212,-21.32974 -7.581704,-32.19597 -5.294034,6.5384 -8.483787,14.0264 -8.550599,19.92657 -6.947399,-3.98531 -12.825932,-11.956 -12.825932,-19.92657 0,-10.3682 3.858911,-18.12445 13.745601,-21.44029 -0.730464,9.86958 -0.743042,9.35901 0.588169,18.66206 1.091225,1.45177 12.181505,1.77857 27.746426,2.76671 1.048021,-6.0838 1.779188,-13.44988 1.386469,-18.31657 5.658192,4.8458 8.619944,20.64515 0.986181,29.87614 -7.633763,9.23099 -15.816268,12.24946 -15.494611,20.64792 z"
d="m 55.481718,311.84361 c -17.19257,-10.18416 -13.28388,-21.36482 -7.238372,-32.23105 -5.294034,6.5384 -8.827119,14.06148 -8.893931,19.96165 -6.947399,-3.98531 -12.825932,-11.956 -12.825932,-19.92657 0,-10.3682 3.634338,-16.49279 11.238643,-21.23708 -0.730464,9.86958 -1.07534,9.87792 0.255871,19.18097 1.091225,1.45177 13.247842,0.98189 28.812763,1.97003 1.048021,-6.0838 0.786877,-14.5301 0.394158,-19.39679 9.058119,4.13463 11.385174,21.79993 3.751411,31.03092 -7.633763,9.23099 -15.816268,12.24946 -15.494611,20.64792 z"
fill="#2e3436"
id="path5150"
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#ef2929;fill-opacity:1;stroke:none;stroke-width:0.515585;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;marker:none;stop-color:#000000;stop-opacity:1"
@@ -1044,7 +1044,7 @@
style="fill:url(#radialGradient7387);fill-opacity:1;stroke:#303030;stroke-width:1.00157;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<path
d="m 49.746992,297.89274 c 2.921113,-6.70052 7.774398,-18.46795 -3.12961,-19.48327 -4.530056,-0.51686 -12.585796,6.67666 -12.633315,11.17836 -5.598534,-6.81781 -4.761608,-18.9136 2.699934,-25.26505 3.579612,1.56789 -2.564763,6.03158 1.539159,10.07564 10.611921,2.13789 18.7402,5.16893 27.835867,4.80357 1.981671,-1.05176 1.0129,-4.40152 1.331478,-4.7951 3.205597,12.14363 -9.848011,19.72051 -17.643513,23.48585 z"
d="m 52.255252,297.89274 c 2.921113,-6.70052 7.774398,-18.46795 -3.12961,-19.48327 -4.530056,-0.51686 -12.585796,6.67666 -12.633315,11.17836 -5.598534,-6.81781 -6.800253,-17.59585 0.661289,-23.9473 -0.184506,4.51295 0.846628,11.73377 0.846628,11.73377 0,0 19.020083,2.41681 28.11575,2.05145 1.981671,-1.05176 1.462193,-12.26798 1.780771,-12.66156 10.336216,14.88568 -7.846011,27.36321 -15.641513,31.12855 z"
fill="#2e3436"
id="path3847"
style="font-variation-settings:normal;opacity:0.798054;mix-blend-mode:normal;vector-effect:none;fill:#f57900;fill-opacity:1;stroke:none;stroke-width:0.501652;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;marker:none;stop-color:#000000;stop-opacity:1"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

resources/ui/gtk3/generalPage.ui
+2 -1
View File
@@ -21,7 +21,8 @@
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Welcome to Burn-My-Windows!</property>
<property name="margin-bottom">4</property>
<property name="margin-top">8</property>
<property name="margin-bottom">6</property>
<style>
<class name="large-title" />
</style>
resources/ui/gtk4/generalPage.ui
+2 -1
View File
@@ -21,7 +21,8 @@
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Welcome to Burn-My-Windows!</property>
<property name="margin-bottom">4</property>
<property name="margin-top">8</property>
<property name="margin-bottom">6</property>
<style>
<class name="large-title" />
</style>
src/TRexEffect.js
+1 -1
View File
@@ -182,7 +182,7 @@ if (utils.isInShellProcess()) {
cellUV -= 0.5;
cellUV = vec2(cellUV.x * cos(rotation) - cellUV.y * sin(rotation),
cellUV.x * sin(rotation) + cellUV.y * cos(rotation));
cellUV.x * sin(rotation) + cellUV.y * cos(rotation));
cellUV += 0.5;
// Clamp resulting coordinates.