Guess the semi-golf
a=3217+'';a=[a];console.log(a[0][2])
Try and guess what would be logged here…
const SCALE = 0.25;
const TWO_PI = Math.PI * 2;
const HALF_PI = Math.PI / 2;
const canvas = document.createElement("canvas");
const c = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
class Blob {
constructor() {
this.wobbleIncrement = 0;
// use this to change the size of the blob
// use this to change the size of the blob
this.radius = 1100;
// think of this as detail level
// number of conections in the `bezierSkin`
this.segments = 14;
this.step = HALF_PI / this.segments;
this.anchors = [];
this.radii = [];
this.thetaOff = [];
const bumpRadius = 200;
const halfBumpRadius = bumpRadius / 2;
for (let i = 0; i < this.segments + 2; i++) {
this.anchors.push(0, 0);
this.radii.push(Math.random() * bumpRadius - halfBumpRadius);
this.thetaOff.push(Math.random() * TWO_PI);
}
this.theta = 0;
this.thetaRamp = 0;
this.thetaRampDest = 12;
this.rampDamp = 25;
}
update() {
this.thetaRamp += (this.thetaRampDest - this.thetaRamp) / this.rampDamp;
this.theta += 0.03;
this.anchors = [0, this.radius];
for (let i = 0; i <= this.segments + 2; i++) {
const sine = Math.sin(this.thetaOff[i] + this.theta + this.thetaRamp);
const rad = this.radius + this.radii[i] * sine;
const theta = this.step * i;
const x = rad * Math.sin(theta);
const y = rad * Math.cos(theta);
this.anchors.push(x, y);
}
c.save();
c.translate(-10, -10);
c.scale(SCALE, SCALE);
c.fillStyle = "blue";
c.beginPath();
c.moveTo(0, 0);
bezierSkin(this.anchors, false);
c.lineTo(0, 0);
c.fill();
c.restore();
}
}
const blob = new Blob();
function loop() {
c.clearRect(0, 0, canvas.width, canvas.height);
blob.update();
window.requestAnimationFrame(loop);
}
loop();
// array of xy coords, closed boolean
function bezierSkin(bez, closed = true) {
const avg = calcAvgs(bez);
const leng = bez.length;
if (closed) {
c.moveTo(avg[0], avg[1]);
for (let i = 2; i < leng; i += 2) {
let n = i + 1;
c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
}
c.quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);
} else {
c.moveTo(bez[0], bez[1]);
c.lineTo(avg[0], avg[1]);
for (let i = 2; i < leng - 2; i += 2) {
let n = i + 1;
c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
}
c.lineTo(bez[leng - 2], bez[leng - 1]);
}
}
// create anchor points by averaging the control points
function calcAvgs(p) {
const avg = [];
const leng = p.length;
let prev;
for (let i = 2; i < leng; i++) {
prev = i - 2;
avg.push((p[prev] + p[i]) / 2);
}
// close
avg.push((p[0] + p[leng - 2]) / 2, (p[1] + p[leng - 1]) / 2);
return avg;
}
This is a stackoverflow answer of mine. The question was asking how to create a wobbling blob like the one in the background of the discord login page. Take a look at the answer here.
User AmooHesam wrapped it up in a github repo here.
const RIGHT_BOUND = 200;
const measureEl = document.createElement('div');
Object.assign(measureEl.style, {
position: 'absolute',
left: 0,
top: 0,
zIndex: 999
});
function localPosition(e, element, w = 1, h = 1) {
// normalize desktop and mobile
const touches = e.touches;
let x;
let y;
if (touches != null && touches.length > 0) {
x = touches[0].clientX;
y = touches[0].clientY;
} else {
x = e.clientX;
y = e.clientY;
}
function location(width) {
let left = 0;
let right = RIGHT_BOUND;
let mid;
while (right - left > 0.0001) {
mid = (right + left) / 2;
measureEl.style[width ? 'width' : 'height'] = `${mid}%`;
measureEl.style[width ? 'height' : 'width'] = '100%';
element.appendChild(measureEl);
const el = document.elementFromPoint(x, y);
element.removeChild(measureEl);
if (el === measureEl) {
right = mid;
} else {
if (right === RIGHT_BOUND) {
return null;
}
left = mid;
}
}
return mid;
}
const left = location(1);
const top = location(0);
return left != null && top != null
? {
// percentage values
left,
top,
// pixel values
x: left * w * 0.01,
y: top * h * 0.01
}
: null;
}
const div = document.body.appendChild(document.createElement('div'));
div.innerHTML = 'click me';
Object.assign(div.style, {
postition: 'absolute',
transform: 'translate(20px, 20px) rotate(45deg) scale(0.8)',
width: '120px',
height: '90px',
color: 'white',
fontFamily: 'sans-serif',
background: 'gray'
});
document.addEventListener('touchstart', onClick);
document.addEventListener('mousedown', onClick);
function onClick(e) {
const info = localPosition(e, e.target, 120, 90);
console.log(info);
}
Find the local percentage and pixel values of the mouse/touch location.
I found this one on stackoverflow here by user 4esn0k.
This is an interesting alternative to semi-broken native browser solutions and custom matrix math đ
x='hello'
x.replace(/h/g,'') // 17 bytes
x.split`h`.join`` // 16 bytes
x.replaceAll('h','') // 19 bytes
Another fun one from the great javascript golfing tips stackexchange thread.
This one comes from user emanresu-a and this answer.
<style>
.frac {
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.001em;
text-align: center;
}
.frac > span {
display: block;
padding: 0.1em;
}
.frac span.bottom {
border-top: thin solid black;
}
.frac span.symbol {
display: none;
}
</style>
<div class="frac">
<span>1</span>
<span class="symbol">/</span>
<span class="bottom">2</span>
</div>
·
<div class="frac">
<span>3</span>
<span class="symbol">/</span>
<span class="bottom">4</span>
</div>
I saw this trick on stackoverflow by user lokesh. It will display: