Text by Brownian Motion

Developer
Johan Karlsson
Size
3,182 Kb
Views
68,816
  1. Text by Brownian Motion Previews
  2. Text by Brownian Motion HTML Codes
  3. Text by Brownian Motion CSS Codes
  4. Text by Brownian Motion JS Codes

How do I make an text by brownian motion?

What is a text by brownian motion? How do you make a text by brownian motion? This script and codes were developed by Johan Karlsson on 24 July 2022, Sunday.

Text by Brownian Motion Previews
IQ Test

Text by Brownian Motion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text by Brownian Motion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Text by Brownian Motion - Script Codes CSS Codes

html, body { margin: 0;
}
canvas { display: block;
}

Text by Brownian Motion - Script Codes JS Codes

"use strict";
/* Johan Karlsson (DonKarlssonSan)
*/
function Particle() { this.x = random([0, w]); this.y = random([0, h]); this.oldX = this.x; this.oldY = this.y;
}
Particle.prototype.move = function (stepSize) { this.oldX = this.x; this.oldY = this.y; this.x += random(-stepSize, stepSize); this.y += random(-stepSize, stepSize); if (this.x < 0) this.x = 0; if (this.x > w) this.x = w; if (this.y < 0) this.y = 0; if (this.y > h) this.y = h;
};
Particle.prototype.draw = function () { line(this.oldX, this.oldY, this.x, this.y);
};
var particles;
var iterations;
var px;
var w;
var h;
function setup() { cursor(HAND); iterations = 5; w = windowWidth; h = windowHeight; createCanvas(w, h); reset(); stroke(0, 10);
}
function draw() { for (var i = 0; i < iterations; i++) { particles.forEach(function (p) { var x = floor(p.x); var y = floor(p.y); var off = (y * w + x) * 4; var stepSize = 30; if (px[off + 3] > 100) { stepSize = 2; } p.move(stepSize); p.draw(); }); }
}
function initParticles() { particles = []; for (var i = 0; i < 50; i++) { particles.push(new Particle()); }
}
function initImage() { var message = "I love you"; var tSize = 150; textSize(tSize); var tWidth = textWidth(message); text(message, w / 2 - tWidth / 2, h / 2 + tSize / 2); var image = get(0, 0, w, h); image.loadPixels(); px = image.pixels; background(255);
}
function reset() { initParticles(); clear(); initImage();
}
function windowResized() { resizeCanvas(windowWidth, windowHeight); w = windowWidth; h = windowHeight; reset();
}
function mouseClicked() { reset();
}
Text by Brownian Motion - Script Codes
Text by Brownian Motion - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded July 24, 2022
Rating 4.5
Size 3,182 Kb
Views 68,816
Do you need developer help for Text by Brownian Motion?

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!

Johan Karlsson (DonKarlssonSan) Script Codes
Name
Antenna Generator
Portrait by Brownian Motion
Random Fractal
In Tribute to Simon Plouffe
Particle Text
Cash by Brownian Motion
Phone Case Pattern Animation
The Birth of a Sine Wave
Rainbow 6-fold Pentille
Lissajous x Lissajous
Create amazing love letters with AI!

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!