Wave2D
How do I make an wave2d?
References:「Make a Splash With Dynamic 2D Water Effects」http://goo.gl/kSBRTK. What is a wave2d? How do you make a wave2d? This script and codes were developed by Takashi on 20 October 2022, Thursday.
Wave2D - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>wave2D</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wave2D - Script Codes CSS Codes
body,html{ margin: 0; padding: 0; overflow: hidden;
}
Wave2D - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Spring = function () { function Spring(_p5, p, v, a) { _classCallCheck(this, Spring); this._5p = _p5; this.p = p; this.v = v; this.a = a; this.k = 0.025; this.defaultPos = p.copy(); } Spring.prototype.addForce = function addForce(a) { this.a.add(a); }; Spring.prototype.avoid = function avoid(mouse, mouseVelocity) { var force = undefined; var dist = p5.Vector.dist(this.p, mouse); var maxForce = mouseVelocity.mag(); if (maxForce > 10) { maxForce = 10; }; var len = 40; if (dist < len) { //let strength = _p5.map(toMe.mag(),200,0,0,maxForce); mouseVelocity.normalize(); force = this._5p.map(mouseVelocity.mag(), len, 0, 0, maxForce); mouseVelocity.mult(force); mouseVelocity.x = 0; return mouseVelocity; } }; Spring.prototype.update = function update() { this.v.add(this.a); this.p.add(this.v); this.a.mult(0); }; return Spring;
}();
var Wave = function () { function Wave(_p5) { _classCallCheck(this, Wave); this._p5 = _p5; this.springNum = 0; this.springs = []; this.springs_interval = 0; this.leftDeltas = []; this.rightDeltas = []; this.spread = 0.25; this.defaultWaterLevel = 0; this.dumping = 0.95; //setting basic parameter this.defaultWaterLevel = this._p5.windowHeight / 2; this.springNum = this._p5.windowWidth / 3; this.springs_interval = this._p5.windowWidth / (this.springNum - 1); //init springs for (var i = 0; i < this.springNum; i++) { this.springs.push(new Spring(this._p5, this._p5.createVector(i * this.springs_interval, this.defaultWaterLevel), this._p5.createVector(0, 0), _p5.createVector(0, 0))); } } Wave.prototype.updateSprings = function updateSprings() { var _this = this; //spring basic move this.springs.forEach(function (spring, i, springs) { //spring force var springForce = _this._p5.createVector(0, 0);; var diff = spring.p.y - spring.defaultPos.y; springForce.y = -(spring.k * diff); spring.addForce(springForce); //mouse force var mouse = _this._p5.createVector(_this._p5.mouseX, _this._p5.mouseY); var pmouse = _this._p5.createVector(_this._p5.pmouseX, _this._p5.pmouseY); var mouseVelocity = p5.Vector.sub(mouse, pmouse); var avoid = spring.avoid(mouse, mouseVelocity); spring.addForce(avoid); //dump spring.v.mult(_this.dumping); //update spring.update(); }); //make wave var leftDeltas = [this.springNum]; var rightDeltas = [this.springNum]; for (var t = 0; t < 8; t++) { this.springs.forEach(function (spring, i, springs) { if (i > 0) { leftDeltas[i] = _this.spread * (springs[i].p.y - springs[i - 1].p.y); springs[i - 1].v.y += leftDeltas[i]; } if (i < _this.springNum - 1) { rightDeltas[i] = _this.spread * (springs[i].p.y - springs[i + 1].p.y); springs[i + 1].v.y += rightDeltas[i]; } }); this.springs.forEach(function (spring, i, springs) { if (i > 0) { springs[i - 1].p.y += leftDeltas[i]; } if (i < _this.springNum - 1) { springs[i + 1].p.y += rightDeltas[i]; } }); } }; Wave.prototype.show = function show() { var _this2 = this; this._p5.noStroke(); //gradation var grad = this._p5.drawingContext.createLinearGradient(0, 0, 0, this._p5.windowHeight); grad.addColorStop(0.0, 'rgb(112, 143, 255)'); grad.addColorStop(0.5, 'rgb(46, 89, 244)'); grad.addColorStop(1.0, 'rgb(0, 20, 91)'); this._p5.drawingContext.fillStyle = grad; //p.fill(0,191,255); //draw wave this._p5.beginShape(); this._p5.vertex(0, this._p5.windowHeight); //first control point this._p5.vertex(0, this._p5.windowHeight); //first point this.springs.forEach(function (spring, i) { var x = spring.p.x; var y = spring.p.y; _this2._p5.vertex(x, y); }); this._p5.vertex(this._p5.windowWidth, this._p5.windowHeight); //last point this._p5.vertex(this._p5.windowWidth, this._p5.windowHeight); //last control point this._p5.endShape(); //draw points // this._p5.fill(0); // for(let i = 0; i<this.springNum; i++){ // let x = this.springs[i].p.x; // let y = this.springs[i].p.y; // this._p5.ellipse(x,y,4,4); // } }; Wave.prototype.splash = function splash() { var index = this._p5.floor(this._p5.random(1, this.springNum)); var vy = this._p5.random(100, this._p5.windowHeight); if (index > 0 && index < this.springNum) { this.springs[index].v.y = vy; } }; return Wave;
}();
var scketch = function scketch(_p5) { var wave = undefined; _p5.setup = function () { _p5.createCanvas(_p5.windowWidth, _p5.windowHeight); _p5.background('#FFFCBF'); // generate wave wave = new Wave(_p5); //first splash for (var i = 0; i < 3; i++) { setTimeout(function () { wave.splash(); }, 250 * i); } }; _p5.draw = function () { _p5.background('#FFFCBF'); wave.updateSprings(); wave.show(); }; _p5.mousePressed = function (event) { wave.splash(); }; _p5.windowResized = function () { _p5.resizeCanvas(_p5.windowWidth, _p5.windowHeight); wave = new Wave(_p5); };
};
new p5(scketch);
Developer | Takashi |
Username | tksiiii |
Uploaded | October 20, 2022 |
Rating | 4.5 |
Size | 4,772 Kb |
Views | 14,168 |
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 |
Magic circle1 | 3,558 Kb |
Noise curve 2D | 3,551 Kb |
Mosaic Pixel Effect | 358,869 Kb |
Colorful 2D particle attractor | 2,841 Kb |
Magic circle3 | 3,584 Kb |
Lines circle | 1,959 Kb |
Glitch Effect | 215,738 Kb |
Floating circle particle | 2,698 Kb |
Magic circle2 | 3,551 Kb |
Colorful smoke | 2,247 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 |
Project MMetro beta | Atomicsong | 5,157 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Layout 11 | Altynai | 1,690 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Video mute | Leon9208 | 2,131 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
GLSL Hills | Ykob | 6,991 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
DFF Website | Hawcubite | 10,123 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!