Surface
How do I make an surface?
What is a surface? How do you make a surface? This script and codes were developed by KyleDavidE on 11 August 2022, Thursday.
Surface - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>surface</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ svg{ width:100vw; height:100vh; display:block;
}
body{ margin:0; background:rgb(238, 239, 224);
}
polyline {
/* vector-effect: non-scaling-stroke; */ stroke-width:0.01;
}
.fill{ stroke:none; fill:rgb(238, 239, 224); opacity:0.5
}
polyline:not(.fill){ opacity:0.9; stroke:black; fill:none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <svg viewbox="0 0 1 1" >
</svg> <script src="js/index.js"></script>
</body>
</html>
Surface - Script Codes CSS Codes
svg{ width:100vw; height:100vh; display:block;
}
body{ margin:0; background:rgb(238, 239, 224);
}
polyline {
/* vector-effect: non-scaling-stroke; */ stroke-width:0.01;
}
.fill{ stroke:none; fill:rgb(238, 239, 224); opacity:0.5
}
polyline:not(.fill){ opacity:0.9; stroke:black; fill:none;
}
Surface - Script Codes JS Codes
class Gen { constructor(detail,roughness) { this.roughness = roughness; this.size = Math.pow(2, detail) + 1; this.max = this.size - 1; this.map = new Float32Array(this.size * this.size); this.set(0, 0, this.max / 3); this.set(this.max, 0, this.max / 3); this.set(this.max, this.max, this.max /3); this.set((this.max)/2, (this.max)/2, this.max); this.set(0, this.max, this.max / 3); this.divide(this.max,true); } set(x,y,v){ if((x >= 0) && (y >= 0) && (x < this.size) && (y < this.size)) this.map[x+y*this.size] = v; } get(x,y){ return (x >= 0) && (y >= 0) && (x < this.size) && (y < this.size) ? this.map[x+y*this.size] : null; } divide(size, ss) { let x, y, half = size / 2; let scale = this.roughness * size; if (half < 1) return; if(!ss) for (let y = half; y < this.max; y += size) { for (let x = half; x < this.max; x += size) { this.square(x, y, half, Math.random() * scale * 2 - scale); } } for (let y = 0; y <= this.max; y += half) { for (let x = (y + half) % size; x <= this.max; x += size) { this.diamond(x, y, half, Math.random() * scale * 2 - scale); } } this.divide(size / 2); } average(arr){ const reduced = arr.filter(e=>e!==null); // console.log(reduced.length); return reduced.reduce((a,b)=>a+b,0)/reduced.length; } diamond(x, y, size, offset) { var ave = this.average([ this.get(x, y - size), this.get(x + size, y), this.get(x, y + size), this.get(x - size, y) ]); this.set(x, y, ave + offset); } square(x, y, size, offset) { var ave = this.average([ this.get(x - size, y - size), this.get(x - size, y + size), this.get(x + size, y + size), this.get(x + size, y - size) ]); this.set(x, y, ave + offset); }
}
function go(){ let map = new Gen(5,0.25); function project([x,y,z]){ return [ (y-x)*Math.sqrt(3)/2, -(z+(x+y)/2) ] } function mapToCube([x,y,z]){ return [ x/map.size, y/map.size, z/map.size ] } function fullProject(v){ return project(mapToCube(v)); } const svg = document.querySelector('svg'); Array.from(svg.children).forEach(e=>e.remove()); let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; for(let x = map.max; x >= 0 ; x--){ let line = document.createElementNS(svg.namespaceURI,'polyline'); let ry = Math.sqrt(Math.pow(map.max/2,2) - Math.pow(x - map.max/2,2)); svg.appendChild(line); let points = [ fullProject([ x, map.max/2-Math.round(ry), -map.max ]) ]; for(let y = map.max/2-Math.round(ry); y < map.max/2+Math.round(ry); y++){ points.push( fullProject([ x, y, map.get(x,y) ]) ); } points.push( fullProject([ x, map.max/2+Math.round(ry), -map.max ]) ) line.setAttribute('points', points.map(p=>p.join(",")).join(" ")) line.classList.add('fill'); let line2 = document.createElementNS(svg.namespaceURI,'polyline'); svg.appendChild(line2); line2.setAttribute('points', points.slice(1,-1).map(p=>p.join(",")).join(" ")) points.slice(1,-1).forEach(([x,y]) => { minX = Math.min(x,minX); minY = Math.min(y,minY); maxX = Math.max(x,maxX); maxY = Math.max(y,maxY); }); } svg.setAttribute('viewBox', [ minX - 0.1, minY - 0.1, maxX - minX + 0.2, maxY - minY + 0.2 ].join(" "));
}
go();
setInterval(go,1000);
Developer | KyleDavidE |
Username | KyleDavidE |
Uploaded | August 11, 2022 |
Rating | 4 |
Size | 3,117 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A cube | 18,627 Kb |
Abstract shape 3d | 6,805 Kb |
A Pen by KyleDavidE | 4,166 Kb |
A Pen by KyleDavidE | 4,557 Kb |
BLOCK CLOCK | 4,215 Kb |
A Pen by Kyle Ehrlich | 2,721 Kb |
Flexbox Dna Helix by Joe Ski | 4,041 Kb |
Sunshades | 4,337 Kb |
XKCD 1608 Hoverboard zoomable | 7,038 Kb |
Android 4.4 kitkat time picker | 6,524 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Button Option Group | Honchoman | 1,859 Kb |
Css3 slide | Nakome | 3,190 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!