html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- check jS part for details-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weighted Voronoi Stippling</title>
<script src="https://cdn.jsdelivr.net/npm/d3-delaunay@6"></script>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
let points = [];
let delaunay, voronoi;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
css
css
1
2
3
body {
}
js
js
1
2
3
4
5
6
7
8
9
10
11
12
// Coding Train / Daniel Shiffman
// CC_181_Lloyd's_Relaxation_2024_04_27_04_51_22
// Weighted Voronoi Stippling
// https://thecodingtrain.com/challenges/181-image-stippling
// https://editor.p5js.org/codingtrain/sketches/04sgsAcNu
// I don't use p5.js
// It uses the canvas API for drawing and plain JavaScript for handling calculations and interactions.
// Move your fingers through the screen to see an effect
// https://en.m.wikipedia.org/wiki/Sweep_line_algorithm
// https://en.m.wikipedia.org/wiki/Lloyd%27s_algorithm
// Video tutorial: https://youtu.be/Bxdt6T_1qgc?si=4Fz8lP4adSuWGtZD
alert ("Just drag your finger through the mobile screen! The effect was added by me. Enjoy the effect!! They looks like Human Cells...\n\nInspired from: https://editor.p5js.org/codingtrain/sketches/04sgsAcNu")
BROWSER
Console
Run