Skip to content

Instantly share code, notes, and snippets.

@stephanbogner
stephanbogner / commandline
Last active July 28, 2021 11:51
Convert series of images to .webm video file with transparent background using ffmpeg
// Convert all images in directory
ffmpeg -framerate 30 -pattern_type glob -i '*.png' -pix_fmt yuva420p _export.webm
// For image names frame-1.png, frame-2.png, frame-3.png, etc.
ffmpeg -framerate 30 -i frame-%d.png -pix_fmt yuva420p _export.webm
// For image names frame-00001.png, frame-00002.png, frame-00003.png, etc. (5 apparently stand for the length of the number)
ffmpeg -framerate 30 -i frame-%05d.png -pix_fmt yuva420p _export.webm
@stephanbogner
stephanbogner / index.html
Created May 27, 2018 14:21
Modal with return value using promises
<button id="show">Show</button>
<div id="popup">
<button id="option1">Option 1</button>
<button id="option2">Option 2</button>
<button id="option3">Option 3</button>
<button id="option4">Option 4</button>
<button id="option5">Option 5</button>
</div>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
@stephanbogner
stephanbogner / index.js
Created March 7, 2018 22:17
Create tree structure from paths array
var paths = [
["Account"],
["Account", "Payment Methods"],
["Account", "Payment Methods", "Credit Card"],
["Account", "Payment Methods", "Paypal"],
["Account", "Emails"],
["Account", "Emails", "Main Email"],
["Account", "Emails", "Backup Email"],
["Account", "Devices"],
["Account", "Devices", "Google Pixel"],
@stephanbogner
stephanbogner / promise.js
Last active July 15, 2021 15:36
The simplest (and a bit non-sensical) example for using promises in Javascript JS
getSquare(5)
.then(function(result){
console.log(result)
})
function getSquare(input) {
return new Promise(function(resolve, reject) {
var output = input*input
resolve(output)
});
@stephanbogner
stephanbogner / index.js
Last active January 4, 2018 10:44
Converts points on a sphere to longitude and latitude (assumes that sphere is located at 0,0,0)
// Adapted from https://stackoverflow.com/questions/5674149/3d-coordinates-on-a-sphere-to-latitude-and-longitude
// Coordinates will be between -180,180 (lon) and -90,90 (lat)
function sphericalPointsToCoordinates(points) {
var coordinates = [];
for (var i = 0; i < points.length; i++) {
var point = points[i];
var coordinate = sphericalPointToCoordinate(point);
coordinates.push(coordinate);
}
@stephanbogner
stephanbogner / fibonacciSphere.html
Last active July 11, 2023 12:49
Simple implementation of a fibonacci sphere in ThreeJS
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Fibonacci Sphere in ThreeJS</title>
<style>
body {
margin: 0;
}
@stephanbogner
stephanbogner / index.js
Created November 22, 2017 14:13
Snippet on how to get the zoomlevel for a certain bounding box and rotate a map smoothly
function getBoundsZoomLevel(bounds, mapWidth, mapHeight) {
// Adjusted from https://stackoverflow.com/a/13274361
var WORLD_DIM = { height: 256, width: 256 };
var ZOOM_MAX = 21;
function latRad(lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}
@stephanbogner
stephanbogner / index.html
Created November 10, 2017 14:08
Simple example to detect if a user has do not track enabled
<div id="doNotTrack">You won't be tracked</div>
<script type="text/javascript">
function initDoNotTrackDetect() {
if (isDoNotTrackEnabled() == false) {
loadjscssfile("assets/scripts/analytics.js", "js")
} else {
document.getElementById('doNotTrack').style.display = 'none';
}
}
@stephanbogner
stephanbogner / index.html
Created November 10, 2017 14:05
Simple example to check if a user leaves a browser window and show some information
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
body {
background-color: #ECECEC;
font-family: sans-serif;
@stephanbogner
stephanbogner / index.html
Created November 8, 2017 14:49
Simple example of using javascript to take a photo from a website
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Camera</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
.cameraRoll {