Skip to content

Commit

Permalink
Added rotation center. Version 1.2.4.
Browse files Browse the repository at this point in the history
  • Loading branch information
pelusanchez committed Oct 11, 2021
1 parent 290706e commit c1b9bfa
Show file tree
Hide file tree
Showing 10 changed files with 64 additions and 31 deletions.
23 changes: 15 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,18 @@ Sample: [https://rext.es](https://rext.es)
* Atmospheric light: Used for dehaze.

### Transformations
* Rotation.
* Scale.
* Translate.
* Rotation: Radians.
* Rotation origin: Set the origin of the rotation. The image center by default. Range: [-1, 1]. Center at (0,0)
* Scale. Multiplier number.
* Translate. Range: [-1, 1].

## HTML Vanilla example:

```[html]
<!DOCTYPE html>
<html>
<head>
<script languaje="javascript" src="../build/index.js"></script>
<script languaje="javascript" src="./index.js"></script>
<style type="text/css">
#playground {
display: flex;
Expand Down Expand Up @@ -83,6 +84,10 @@ Sample: [https://rext.es](https://rext.es)
darkColor: 0,
darkSat: 1,
rotation: 0.0,
rotation_center: {
x: 0,
y: 0,
},
scale: {
x: 1,
y: 1,
Expand Down Expand Up @@ -119,9 +124,10 @@ Sample: [https://rext.es](https://rext.es)
rext.setCanvas(document.querySelector("#frame"));
document.querySelector("#file").addEventListener("change", onFileUpload)
document.querySelector("#rext-params").value = JSON.stringify(defaultParams, null, 2)
document.querySelector("#rext-params").addEventListener("change", updateParams)
})
document.querySelector("#rext-params").addEventListener("change", updateParams);
rext.load("/test.jpg");
});
</script>
</head>
Expand All @@ -130,8 +136,8 @@ Sample: [https://rext.es](https://rext.es)
<input type="file" id="file"/>
</div>
<div id="playground">
<canvas width="1200" height="800" style="width: 800px; height: auto;" id="frame"></canvas>
<div class=>
<canvas width="640" height="468" style="width: 640px; height: 468px;" id="frame"></canvas>
<div>
<textarea id="rext-params"></textarea>
<button onClick="updateParams">Apply</button>
</div>
Expand Down Expand Up @@ -185,5 +191,6 @@ rext.updateParams(nextParams : Params)
| darkColor | number |
| darkSat | number |
| rotation | number (Radians) |
| rotation_center | 2d number { x: number; y: number } |
| scale | 2d number { x: number; y: number }|
| translate | 2d number { x: number; y: number }|
4 changes: 4 additions & 0 deletions build/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@
darkColor: 0,
darkSat: 1,
rotation: 0.0,
rotation_center: {
x: 0,
y: 0,
},
scale: {
x: 1,
y: 1,
Expand Down
2 changes: 1 addition & 1 deletion build/index.js

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions dist/editor.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ export declare class RextEditor {
resize(width: number, height: number): void;
getWidth(): number;
getHeight(): number;
rotateFrom(x: number, y: number): void;
rotateFromCenter(x: number, y: number): void;
private get2dRotation;
private get2dRotationCenter;
private loadImage;
load(url: string): void;
setLog(log: Log): void;
Expand Down
1 change: 1 addition & 0 deletions dist/models/models.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export interface Params extends ParamsAbs {
darkColor: number;
darkSat: number;
rotation: number;
rotation_center: f2Number;
scale: f2Number;
translate: f2Number;
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rext-image-editor",
"version": "1.2.3",
"version": "1.2.4",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"description": "REXT is a client side image editor that uses GPU.",
Expand Down
37 changes: 26 additions & 11 deletions src/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export class RextEditor {
u_lut: null,
u_image: null,
u_rotation: null,
u_rotation_center: null,
u_scale: null,
u_translate: null,
}
Expand Down Expand Up @@ -155,14 +156,30 @@ export class RextEditor {
public getHeight() {
return this.HEIGHT;
}

public rotateFrom(x: number, y: number) {
this.params.rotation_center.x = x;
this.params.rotation_center.y = y;
}

public rotateFromCenter(x: number, y: number) {
this.params.rotation_center.x = 0;
this.params.rotation_center.y = 0;
}

private get2dRotation(): f2Number {
return {
x: Math.sin(this.params.rotation),
y: Math.cos(this.params.rotation)
};
private get2dRotation(): number[] {
return [
Math.sin(this.params.rotation),
Math.cos(this.params.rotation)
];
}

private get2dRotationCenter(): number[] {
const x = (this.params.rotation_center.x + 1) * this.WIDTH / 2.0;
const y = (this.params.rotation_center.y + 1) * this.HEIGHT / 2.0;
return [x, y];
}

private loadImage(image: HTMLImageElement) {
image.onload = () => {
if (this.currentImage == null) {
Expand All @@ -178,7 +195,7 @@ export class RextEditor {
}

load(url: string) {
this.log.log("Version 1.2.3")
this.log.log("Version 1.2.4")
// Save real image as a copy
this.realImage = new Image();
this.loadImage(this.realImage)
Expand Down Expand Up @@ -331,8 +348,6 @@ export class RextEditor {
* context: webgl context. Default: __window.gl
* SET_FULL_RES: no resize the image to edit. Default: false (resize the image)
*/


private render(image: HTMLImageElement, preventRenderImage?: boolean) {
// Load GSLS programs
var VERTEX_SHADER_CODE = createShader(this.gl, this.gl.VERTEX_SHADER, VERTEX_SHADER);
Expand Down Expand Up @@ -404,6 +419,7 @@ export class RextEditor {
this.pointers.u_bAndW = this.gl.getUniformLocation(this.program, "u_bAndW");
this.pointers.u_hdr = this.gl.getUniformLocation(this.program, "u_hdr");
this.pointers.u_rotation = this.gl.getUniformLocation(this.program, "u_rotation");
this.pointers.u_rotation_center = this.gl.getUniformLocation(this.program, "u_rotation_center");
this.pointers.u_scale = this.gl.getUniformLocation(this.program, "u_scale");
this.pointers.u_translate = this.gl.getUniformLocation(this.program, "u_translate");

Expand Down Expand Up @@ -457,9 +473,8 @@ export class RextEditor {
.concat(asArray(hsv2rgb({ x: this.params.darkColor * 360, y: this.params.darkSat, z: this.params.darkFill })))); // vec3 x3
this.gl.uniform1f(this.pointers.u_bAndW, this.params.bAndW);
this.gl.uniform1f(this.pointers.u_hdr, this.params.hdr);

const rotation = this.get2dRotation();
this.gl.uniform2f(this.pointers.u_rotation, rotation.x, rotation.y );
this.gl.uniform2fv(this.pointers.u_rotation, this.get2dRotation() );
this.gl.uniform2fv(this.pointers.u_rotation_center, this.get2dRotationCenter() );
this.gl.uniform2f(this.pointers.u_scale, this.params.scale.x, this.params.scale.y );
this.gl.uniform2f(this.pointers.u_translate, this.params.translate.x, this.params.translate.y );

Expand Down
4 changes: 4 additions & 0 deletions src/lib/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ export const defaultParams : Params = {
darkColor: 0,
darkSat: 1,
rotation: 0,
rotation_center: {
x: 0,
y: 0,
},
scale: {
x: 1,
y: 1,
Expand Down
1 change: 1 addition & 0 deletions src/models/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export interface Params extends ParamsAbs {
darkColor: number;
darkSat: number;
rotation: number;
rotation_center: f2Number;
scale: f2Number;
translate: f2Number;
}
18 changes: 8 additions & 10 deletions src/shaders/vertex_shader.vert
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,21 @@ attribute vec2 a_texCoord;
uniform vec2 u_resolution;
varying vec2 v_texCoord;
uniform vec2 u_rotation;
uniform vec2 u_rotation_center;
uniform vec2 u_scale;
uniform vec2 u_translate;

void main() {

vec2 scaled = a_position * u_scale;
vec2 center = u_resolution / 2.0;
vec2 scaled = a_position * vec2(u_scale);
vec2 pos_r_t = scaled - u_rotation_center;
vec2 pos_rotated = vec2(
(scaled.x - center.x) * u_rotation.y + (scaled.y - center.y) * u_rotation.x,
(scaled.y - center.y) * u_rotation.y - (scaled.x - center.x) * u_rotation.x);
pos_r_t.x * u_rotation.y + pos_r_t.y * u_rotation.x,
pos_r_t.y * u_rotation.y - pos_r_t.x * u_rotation.x);

vec2 dist = (pos_rotated + center) / u_resolution;
dist.x = dist.x + u_translate.x;
dist.y = dist.y + u_translate.y;
vec2 dist = (pos_rotated + u_rotation_center) / u_resolution;

vec4 pos = vec4((dist * 2.0 - 1.0) * vec2(1, -1), 0, 1);

gl_Position = pos;
vec2 pos = vec2((dist + u_translate) * 2.0 - 1.0) * vec2(1, -1);
gl_Position = vec4(pos, 0, 1);
v_texCoord = a_texCoord;
}

0 comments on commit c1b9bfa

Please sign in to comment.