Skip to content

Instantly share code, notes, and snippets.

@AdmiralPotato

AdmiralPotato/.editorconfig

Last active January 9, 2021 02:54
Show Gist options
  • Save AdmiralPotato/219413ceba0b97ab5478417e0997f9c8 to your computer and use it in GitHub Desktop.
Save AdmiralPotato/219413ceba0b97ab5478417e0997f9c8 to your computer and use it in GitHub Desktop.
Download ZIP
Tribute to "Connecting Noise Walk"
Raw
.editorconfig
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
max_line_length = off
# Matches multiple files with brace expansion notation
# Set default charset
[*.*]
charset = utf-8
# 4 space indentation
[*.*]
indent_style = tab
indent_size = 4
# Tab indentation (no size specified)
[Makefile]
indent_style = tab
# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="./styles.css" />
<title>Tribute to "Connecting Noise Walk"</title>
</head>
<body>
<canvas id="3d"></canvas>
<script src="https://unpkg.com/three@0.124.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.124.0/examples/js/controls/OrbitControls.js"></script>
<script src="./tribute_to_connecting_noise_walk.js"></script>
</body>
</html>
Raw
styles.css
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
text-align: inherit;
text-decoration: inherit;
color: inherit;
background-color: transparent;
}
html, body{
height: 100%;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
background-color: #262626;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
font-style: normal;
vertical-align: top;
font-family: sans-serif;
text-align: left;
text-decoration: none;
color: #ccc;
position: relative;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Raw
tribute_to_connecting_noise_walk.js
var canvas = document.getElementById('3d');
var tau = Math.PI * 2;
var degree = tau / 360;
var width = 0;
var height = 0;
var colors = [
0xef476f,
0xffd166,
0x06d6a0,
0x118ab2,
0x073b4c
];
var scene = new THREE.Scene();
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
directionalLight.position.set(2, 2, 2);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 4096;
directionalLight.shadow.mapSize.height = 4096;
scene.add(directionalLight);
var camera = new THREE.PerspectiveCamera(
75,
1,
0.1,
1000,
);
camera.position.set(4, 0, 0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true,
antialias: true,
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.autoRotate = true;
const icosphereGoemetry = new THREE.IcosahedronGeometry( 1, 0 );
const sphereMaterial = new THREE.LineBasicMaterial({
color: colors[0],
});
const sphere = new THREE.LineLoop(
icosphereGoemetry,
sphereMaterial
);
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add( sphere );
const curve = new THREE.CatmullRomCurve3(icosphereGoemetry.vertices);
const curvePoints = curve.getPoints(icosphereGoemetry.vertices.length * 20);
const curveGeometry = new THREE.BufferGeometry().setFromPoints( curvePoints );
const curveMaterial = new THREE.LineBasicMaterial({
color: colors[1],
});
const lineMesh = new THREE.Line( curveGeometry, curveMaterial );
lineMesh.castShadow = true;
lineMesh.receiveShadow = true;
scene.add( lineMesh );
const planeGeometry = new THREE.CircleBufferGeometry(4, 180);
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } );
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
plane.position.set(0, -1, 0);
plane.rotation.x = -tau / 4;
scene.add( plane );
const ambientLight = new THREE.AmbientLight(0xffffff, .125);
scene.add(ambientLight);
function updateSizeToDomNode(domNode) {
var clientWidth = domNode.clientWidth;
var clientHeight = domNode.clientHeight;
var dpr = window.devicePixelRatio;
width = clientWidth * dpr;
height = clientHeight * dpr;
if (
canvas.width !== width ||
canvas.height !== height
) {
var aspect = width / height;
const desiredMinimumFov = Math.PI / 4 //90 deg
// this ensures that I always have a 90deg square in the center of both landscape and portrait viewports
camera.fov = (
aspect >= 1
? desiredMinimumFov
: 2 * Math.atan(Math.tan(desiredMinimumFov / 2) / aspect)
) / degree;
camera.aspect = aspect;
camera.updateProjectionMatrix();
renderer.setPixelRatio(dpr);
renderer.setSize(
clientWidth,
clientHeight,
false
);
}
}
function loop () {
requestAnimationFrame(loop);
updateSizeToDomNode(canvas);
// required if controls.enableDamping or controls.autoRotate are set to true
controls.update();
renderer.render(scene, camera);
}
requestAnimationFrame(loop);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment