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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Motion with Vector Field</title>
<style>
body { margin: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
outline: none;
background: #000;
-webkit-tap-highlight-color: transparent;
}
canvas { display: block; }
#infoButton {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
background: none;
border: none;
color: red;
cursor: pointer;
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
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
/*
✨🌊 How the code is made:
This algorithm creates a dynamic and interactive liquid motion effect using HTML5 Canvas and JavaScript. It consists of particles (bubbles) that move fluidly across the screen and vector fields (arrows) that simulate directional flow, producing an organic and mesmerizing effect. The particles react to touch, expanding and changing colors when interacted with.
1. Initialize Canvas and Variables:
- The <canvas> element is selected, and its 2D rendering context (ctx) is retrieved.
- The canvas dimensions are set to match the full screen.
- Arrays for particles and vectors are initialized.
- A color palette (cyan, yellow, magenta) is defined for the particles.
- A time variable is used for dynamic animation updates.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];
let vectors = [];
let colors = ["cyan", "yellow", "magenta"];
let time = 0;
2. Define the Particle Class (Bubbles): Each particle behaves like a moving bubble with dynamic properties:
- Position (x, y): Starts at a random location.
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Correr