Creation de la base du glitcher
This commit is contained in:
@@ -0,0 +1,55 @@
|
|||||||
|
/*=============Typo*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'lineal';
|
||||||
|
src: url('../typo/Lineal-Heavy.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'pressStart2P';
|
||||||
|
src: url('../typo/PressStart2P-Regular.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'velvelyne';
|
||||||
|
src: url('../typo/Velvelyne-Light.ttf') format('truetype');
|
||||||
|
font-weight:lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'velvelyne';
|
||||||
|
src:url('../typo/Velvelyne-Bold.ttf') format('truetype');
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============General*/
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--back-color: black;
|
||||||
|
--main-color: white;
|
||||||
|
--accent-color: #3CFF00;
|
||||||
|
--neon-color: #3CFF00;
|
||||||
|
|
||||||
|
color: var(--main-color);
|
||||||
|
font-size: 1rem;
|
||||||
|
background: var(--back-color);
|
||||||
|
font-family: 'velvelyne', sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'lineal', sans-serif;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ui-canvas {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 100vw;
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { Glitcher } from "./lib/glitcher";
|
||||||
|
|
||||||
|
const UI_GLITCHER = new Glitcher(document.getElementById("ui-canvas"))
|
||||||
|
const FORM = document.getElementById("glitcher-form")
|
||||||
|
|
||||||
|
async function updateFromForm(){
|
||||||
|
let data = new FormData(FORM)
|
||||||
|
|
||||||
|
let image = data.get("image")
|
||||||
|
if(image){
|
||||||
|
await UI_GLITCHER.setImage(image)
|
||||||
|
} else {
|
||||||
|
UI_GLITCHER.clearImage()
|
||||||
|
}
|
||||||
|
|
||||||
|
UI_GLITCHER.render()
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let el of FORM.elements){
|
||||||
|
el.addEventListener("change", () => FORM.requestSubmit())
|
||||||
|
}
|
||||||
|
|
||||||
|
FORM.addEventListener("submit", e => {
|
||||||
|
e.preventDefault()
|
||||||
|
updateFromForm()
|
||||||
|
})
|
||||||
|
|
||||||
|
updateFromForm()
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="glitcher.css">
|
||||||
|
<title>Drags&Nerds Glitcher</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<form id="glitcher-form">
|
||||||
|
<div id="welcome-panel">
|
||||||
|
<h1>Glitcher</h1>
|
||||||
|
<p>Séléctionne un photo pour la glitcher</p>
|
||||||
|
|
||||||
|
<input type="file" name="image" accept="image/jpg, image/jpeg,image/png,image/webp" />
|
||||||
|
</div>
|
||||||
|
<div id="glitch-panel">
|
||||||
|
<canvas id="ui-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script type="module" src="glitcher.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
varying highp vec2 vTextureCoord;
|
||||||
|
uniform sampler2D uImageSampler;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
gl_FragColor = texture2D(uImageSampler, vTextureCoord);
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
attribute vec4 aVertexPosition;
|
||||||
|
attribute vec2 aTextureCoord;
|
||||||
|
|
||||||
|
varying highp vec2 vTextureCoord;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
gl_Position = aVertexPosition;
|
||||||
|
vTextureCoord = aTextureCoord;
|
||||||
|
}
|
||||||
@@ -0,0 +1,221 @@
|
|||||||
|
import resizeToFit from 'intrinsic-scale';
|
||||||
|
import baseVertSource from "./base.vert?raw"
|
||||||
|
import baseFragSource from "./base.frag?raw"
|
||||||
|
|
||||||
|
export class Glitcher {
|
||||||
|
|
||||||
|
/** @type {HTMLCanvasElement} */
|
||||||
|
canvas
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {HTMLCanvasElement} canvas
|
||||||
|
*/
|
||||||
|
constructor(canvas) {
|
||||||
|
this.canvas = canvas
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
|
||||||
|
init(){
|
||||||
|
this.ctx = this.canvas.getContext("webgl")
|
||||||
|
if(!this.ctx){
|
||||||
|
throw new Error("WebGL isn't supported")
|
||||||
|
}
|
||||||
|
|
||||||
|
let baseVertShader = this.ctx.createShader(this.ctx.VERTEX_SHADER)
|
||||||
|
this.ctx.shaderSource(baseVertShader, baseVertSource)
|
||||||
|
this.ctx.compileShader(baseVertShader)
|
||||||
|
|
||||||
|
if (!this.ctx.getShaderParameter(baseVertShader, this.ctx.COMPILE_STATUS)) {
|
||||||
|
throw new Error(`failed to compile base.vert: ${this.ctx.getShaderInfoLog(baseVertShader)}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
let baseFragShader = this.ctx.createShader(this.ctx.FRAGMENT_SHADER)
|
||||||
|
this.ctx.shaderSource(baseFragShader, baseFragSource)
|
||||||
|
this.ctx.compileShader(baseFragShader)
|
||||||
|
|
||||||
|
if (!this.ctx.getShaderParameter(baseFragShader, this.ctx.COMPILE_STATUS)) {
|
||||||
|
throw new Error(`failed to compile base.frag: ${this.ctx.getShaderInfoLog(baseFragShader)}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
let baseShaderProgram = this.ctx.createProgram()
|
||||||
|
this.ctx.attachShader(baseShaderProgram, baseVertShader)
|
||||||
|
this.ctx.attachShader(baseShaderProgram, baseFragShader)
|
||||||
|
this.ctx.linkProgram(baseShaderProgram)
|
||||||
|
|
||||||
|
if (!this.ctx.getProgramParameter(baseShaderProgram, this.ctx.LINK_STATUS)) {
|
||||||
|
throw new Error(`failed to link base shaders: ${this.ctx.getProgramInfoLog(baseShaderProgram)}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.baseProgram = baseShaderProgram;
|
||||||
|
this.aVertexPosition = this.ctx.getAttribLocation(baseShaderProgram, "aVertexPosition")
|
||||||
|
this.aTextureCoord = this.ctx.getAttribLocation(baseShaderProgram, "aTextureCoord")
|
||||||
|
this.uImageSampler = this.ctx.getUniformLocation(baseShaderProgram, "uImageSampler")
|
||||||
|
|
||||||
|
let panelPositionBuffer = this.ctx.createBuffer()
|
||||||
|
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelPositionBuffer)
|
||||||
|
const positions = [
|
||||||
|
-1.0, 1.0,
|
||||||
|
1.0, 1.0,
|
||||||
|
-1.0, -1.0,
|
||||||
|
1.0, -1.0,
|
||||||
|
]
|
||||||
|
this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(positions), this.ctx.STATIC_DRAW)
|
||||||
|
this.panelPositionsBuffer = panelPositionBuffer
|
||||||
|
|
||||||
|
let panelUVBuffer = this.ctx.createBuffer()
|
||||||
|
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelUVBuffer)
|
||||||
|
const uv = [
|
||||||
|
0.0, 0.0,
|
||||||
|
1.0, 0.0,
|
||||||
|
0.0, 1.0,
|
||||||
|
1.0, 1.0,
|
||||||
|
]
|
||||||
|
this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(uv), this.ctx.STATIC_DRAW)
|
||||||
|
this.panelUVBuffer = panelUVBuffer
|
||||||
|
|
||||||
|
let imageTexture = this.ctx.createTexture()
|
||||||
|
this.imageTexture = imageTexture;
|
||||||
|
this.clearImage();
|
||||||
|
}
|
||||||
|
|
||||||
|
clearImage(){
|
||||||
|
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
|
||||||
|
this.ctx.texImage2D(
|
||||||
|
this.ctx.TEXTURE_2D,
|
||||||
|
0,
|
||||||
|
this.ctx.RGBA,
|
||||||
|
1, 1,
|
||||||
|
0,
|
||||||
|
this.ctx.RGBA,
|
||||||
|
this.ctx.UNSIGNED_BYTE,
|
||||||
|
new Uint8Array([0, 0, 0, 0])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {File} imageFile
|
||||||
|
*/
|
||||||
|
async setImage(imageFile){
|
||||||
|
if(imageFile == this.currentImageFile){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.currentImage){
|
||||||
|
URL.revokeObjectURL(this.currentImage.src)
|
||||||
|
}
|
||||||
|
|
||||||
|
let image = new Image()
|
||||||
|
const loadProm = new Promise((res, rej) => {
|
||||||
|
function ok(){
|
||||||
|
image.removeEventListener("error", nok)
|
||||||
|
res()
|
||||||
|
}
|
||||||
|
|
||||||
|
function nok(){
|
||||||
|
image.removeEventListener("load", ok)
|
||||||
|
rej()
|
||||||
|
}
|
||||||
|
|
||||||
|
image.addEventListener("load", ok)
|
||||||
|
image.addEventListener("error", nok)
|
||||||
|
})
|
||||||
|
image.src = URL.createObjectURL(imageFile)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await loadProm
|
||||||
|
} catch(e) {
|
||||||
|
URL.revokeObjectURL(image.src)
|
||||||
|
throw e
|
||||||
|
}
|
||||||
|
this.resize(image.width, image.height)
|
||||||
|
|
||||||
|
this.currentImageFile = imageFile
|
||||||
|
this.currentImage = image
|
||||||
|
|
||||||
|
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
|
||||||
|
this.ctx.texImage2D(
|
||||||
|
this.ctx.TEXTURE_2D,
|
||||||
|
0,
|
||||||
|
this.ctx.RGBA,
|
||||||
|
this.ctx.RGBA,
|
||||||
|
this.ctx.UNSIGNED_BYTE,
|
||||||
|
this.currentImage
|
||||||
|
)
|
||||||
|
|
||||||
|
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
|
||||||
|
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
|
||||||
|
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
|
||||||
|
}
|
||||||
|
|
||||||
|
resize(width, height){
|
||||||
|
let computedStyle = window.getComputedStyle(this.canvas)
|
||||||
|
let maxWidth = parseFloat(computedStyle["max-width"])
|
||||||
|
let maxHeight = parseFloat(computedStyle["max-height"])
|
||||||
|
|
||||||
|
if(window.devicePixelRatio){
|
||||||
|
maxWidth *= window.devicePixelRatio
|
||||||
|
maxHeight *= window.devicePixelRatio
|
||||||
|
}
|
||||||
|
|
||||||
|
if(Number.isNaN(maxWidth)){
|
||||||
|
maxWidth = width
|
||||||
|
}
|
||||||
|
|
||||||
|
if(Number.isNaN(maxHeight)){
|
||||||
|
maxHeight = height
|
||||||
|
}
|
||||||
|
|
||||||
|
let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})
|
||||||
|
|
||||||
|
this.canvas.width = resize.width
|
||||||
|
this.canvas.height = resize.height
|
||||||
|
this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
if(!this.ctx){
|
||||||
|
throw new Error("Glitcher not initialized, please run init()")
|
||||||
|
}
|
||||||
|
|
||||||
|
this.ctx.clearColor(0.0, 0.0, 0.0, 0.0)
|
||||||
|
this.ctx.clearDepth(1.0)
|
||||||
|
this.ctx.enable(this.ctx.DEPTH_TEST)
|
||||||
|
this.ctx.enable(this.ctx.LEQUAL)
|
||||||
|
|
||||||
|
this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT)
|
||||||
|
|
||||||
|
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.panelPositionsBuffer)
|
||||||
|
this.ctx.vertexAttribPointer(
|
||||||
|
this.aVertexPosition,
|
||||||
|
2, // N components per iteration
|
||||||
|
this.ctx.FLOAT,
|
||||||
|
false, //Normalize,
|
||||||
|
0, // (stride) how many bytes to get from one set of values to the next
|
||||||
|
0, // Start offset
|
||||||
|
)
|
||||||
|
this.ctx.enableVertexAttribArray(this.aVertexPosition)
|
||||||
|
|
||||||
|
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.panelUVBuffer)
|
||||||
|
this.ctx.vertexAttribPointer(
|
||||||
|
this.aTextureCoord,
|
||||||
|
2,
|
||||||
|
this.ctx.FLOAT,
|
||||||
|
false,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
)
|
||||||
|
this.ctx.enableVertexAttribArray(this.aTextureCoord)
|
||||||
|
|
||||||
|
this.ctx.activeTexture(this.ctx.TEXTURE0)
|
||||||
|
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
|
||||||
|
this.ctx.uniform1i(this.uImageSampler, 0)
|
||||||
|
|
||||||
|
this.ctx.useProgram(this.baseProgram)
|
||||||
|
|
||||||
|
this.ctx.drawArrays(
|
||||||
|
this.ctx.TRIANGLE_STRIP,
|
||||||
|
0, // Vertex offset
|
||||||
|
4, // Total vertex
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Generated
+13
@@ -8,6 +8,7 @@
|
|||||||
"name": "v1-com-officielle",
|
"name": "v1-com-officielle",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"intrinsic-scale": "^5.0.0",
|
||||||
"vite-svg-loader": "^5.1.1",
|
"vite-svg-loader": "^5.1.1",
|
||||||
"vue": "^3.5.25",
|
"vue": "^3.5.25",
|
||||||
"vue3-clipboard": "^1.0.0",
|
"vue3-clipboard": "^1.0.0",
|
||||||
@@ -1442,6 +1443,18 @@
|
|||||||
"delegate": "^3.1.2"
|
"delegate": "^3.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/intrinsic-scale": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/intrinsic-scale/-/intrinsic-scale-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-NJY7170uG8gYkaGGV0ddakq5VAWSvM2FKhARgXj8OQwod1hQFRBWCXn7dk35bGd+vsRYYnJQw/Qpebk8MWp4dg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/fregante"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/keycode": {
|
"node_modules/keycode": {
|
||||||
"version": "2.2.1",
|
"version": "2.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"intrinsic-scale": "^5.0.0",
|
||||||
"vite-svg-loader": "^5.1.1",
|
"vite-svg-loader": "^5.1.1",
|
||||||
"vue": "^3.5.25",
|
"vue": "^3.5.25",
|
||||||
"vue3-clipboard": "^1.0.0",
|
"vue3-clipboard": "^1.0.0",
|
||||||
|
|||||||
@@ -6,13 +6,21 @@ import svgLoader from 'vite-svg-loader'
|
|||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue(), svgLoader()],
|
plugins: [vue(), svgLoader()],
|
||||||
server:{
|
server: {
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
port:8080
|
port: 8080
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': path.resolve(__dirname, './src')
|
'@': path.resolve(__dirname, './src')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: path.resolve(import.meta.dirname, 'index.html'),
|
||||||
|
glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user