4QR.xyz Refrence

Refrence page for 4QR.xyz

About this site.

Please report any issues or suggestions on GitHub


--- Encoding /decoding scheme ---



No Compression
https://4QR.xyz/r/?

Encoding: 
var URL = "https://4QR.xyz/r/?" + encodeURIComponent(btoa(USER CODE HERE));

Decoding: 
document.write(atob(decodeURIComponent(window.location.search.substring(1))));

Or to include support for URL safe base64 as per RFC 4648.

document.write(atob(decodeURIComponent(window.location.search.substring(1).replace(/-/g,'\+').replace(/_/g,'\/'))));



Compression
https://4QR.xyz/c/?

Add support for unicode encoding.
Uses pako for zlib type compression. Sould be compatible with deflate / inflate.

Encoding: 
var pako = window.pako;
var compressed = btoa(pako.deflate(USER CODE HERE, { to: 'string' }));
compressed = compressed.replace(/\+/g, '-').replace(/\//g, '_').replace(/\=/g, '');
var URL = "https://4QR.xyz/c/?" + compressed;

Decoding: 
document.write(window.pako.inflate(atob(window.location.search.substring(1).replace(/-/g,'\+').replace(/_/g,'\/')),{to:'string'}));


--- Library wrappers ---


Library wrappers are provided for some major libraries and formats to save URL size.


p5.js
https://4QR.xyz/p5/V#/?

p5.js home page
p5.js GitHub page

Wrapper code: 
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.min.js"></script>
    <script>
USER CODE HERE
    </script>
    <style>
    body {
        padding: 0;
        margin: 0;
    }
    </style>
</head>

<body></body>

</html>

Example code: 
function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}

Generated URL: https://4QR.xyz/p5/1m/?eJxLK81LLsnMz1MoTi0pLdDQVKjm4qrl4kqDCacUJZaDRRUUUnNyMguKUzVMDXQUQNgCjDWtuWoBEDwUMg


three.js
https://4QR.xyz/th/V#/?

three.js home page
three.js GitHub page

Wrapper code: 
<!DOCTYPE HTML>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.module.js"></script>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    body {
        margin: 0px;
        overflow: hidden
    }
    
    canvas {
        width: 100%;
        height: 100%
    }
    </style>
</head>

<body>
    <script>
USER CODE HERE
    </script>
</body>

</html>

Example code: 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 4;

var renderer = new THREE.WebGLRenderer({
    antialias: true
});

renderer.setClearColor("#000000");

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
    color: "#433F81"
});
var cube = new THREE.Mesh(geometry, material);

scene.add(cube);

var render = function() {
    requestAnimationFrame(render);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
};

render();

From here.

Generated URL: https://4QR.xyz/th/2d/?eJxtUstuwjAQvOcrLLg4auQmgqoViEOJeByKVJVKnE28JZYSO3UcXhX_XtsYqhSsHKKd3Zmd3d1SheoMBKARErBDn_OPyYQsbQSHw2Br4IyWoGgLfwdVV5BpvoXUofj5KUI7LpjcES4EqBVnOkePrdgc-CbXEYpJEqEkjmMjcCYnlay55lKQo9HpDwMnrEAwUKBa0itYz94-PIJ_AmQeFZrTgtN6gLRqIDgZ4uBSTWrQaQFUpbKQCne6sXud_zlLfgR8YyG648BWMpk1JQhN1pIdCK0qw5TmvGD4yslkOSnAJoXe0AZkCVodWobGcj_zcWznYj4_-JJqUMZYK30BdT6mNc8WHvUzyKy7Aep0-73e9CXpuCG49TVruGHAl1aiq4pt0l0CoYxhWxW29mA4vhqR2S3hEJ1FFXw3UOtXwQ2LAabKrNNPwFa7xgwTUVK7BLJHDyNzAHEyvAMe_kBP70d5_sGuvcgfpOE_XVdobvUXVk3msQ


paper.js
https://4QR.xyz/pa/V#/?

paper.js home page
paper.js GitHub page

Wrapper code: 
<!DOCTYPE html>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.3/paper-full.min.js"></script>
    <script type="text/paperscript" canvas="myCanvas">
USER CODE HERE
    </script>
</head>

<body>
    <canvas id="myCanvas" resize></canvas>
</body>

</html>

Example code: 
var path = new Path();
path.strokeColor = 'black';
var start = new Point(100, 100);
path.moveTo(start);
path.lineTo(start + [ 100, -50 ]);

Generated URL: https://4QR.xyz/pa/1a/?eJwrSyxSKEgsyVCwVchLLVcIADI1NK25QEJ6xSVF-dmpzvk5-UVAafWknMTkbHVrrjKgluKSxKISmJ78zLwSDUMDAx0FIAHTnJtflhqSrwFWCBPLycyDiyloK0QrgDXpmhooxGpaAwAq3CsX


Dwitter
https://4QR.xyz/dw/?

Dwitter home page
Dwitter GitHub page

Wrapper code: 
<!DOCTYPE html>
<html>
<style>
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

canvas {
    width: 100%
}
</style>
<canvas id=c></canvas>
<script>
c.width = 1920;
c.height = 1080;
var S = Math.sin;
var C = Math.cos;
var T = Math.tan;

function R(r, g, b, a) {
    a = a === undefined ? 1 : a;
    return "rgba(" + (r | 0) + "," + (g | 0) + "," + (b | 0) + "," + a + ")";
};
var x = c.getContext("2d");
var time = 0;
var frame = 0;

function u(t) {
USER CODE HERE
}

function loop() {
    u(time);
    requestAnimationFrame(loop);
    time = frame / 60;
    if (time * 60 | 0 == frame - 1) {
        time += 0.000001;
    }
    frame++;
}
loop();
</script>

</html>

Example code: 
c.width^=0;for(i=9;i<2e3;i+=2)s=3/(9.1-(t+i/99)%9),x.beginPath(),j=i*7+S(i*4+t+S(t)),x.lineWidth=s*s,x.arc(960,540,s*49,j,j+.6),x.stroke()

From here.

Generated URL:https://4QR.xyz/dw/?eJwVjMsKwjAQAL9G2DxMYxsrS8w_CB68CbXGdqO0kCzo59uchoFhRvOlJ8_3YP1rzUABPZ3b2HlSoRUldA2gOeyBFTWIYodC_8wjTrRcBp5B6BRIntQVSDrFG1nU4kNLvNVxKLJsPuQRsLf66Kwu0qFOOinT17RwXt8RxB_F-CeR