Neon canvas p5
p5js
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.min.js"></script>
<h1>p5.js</h1>
<div>
<h1>sadasjd</h1>
</div>
CSS
h1 {
display: none;
}
JavaScript
var H = 10;
function setup() {
createCanvas(windowWidth, windowHeight);
globalAlpha = 4;
blendMode(SCREEN);
}
function draw() {
background(11, 11, 18, 220);
// ellipse(mouseX, mouseY, 50, 50);
// c();
colorMode(HSB, 360, 100, 100);
b();
}
function text() {
// globalCompositeOperation = "lighter";
strokeWeight(0.5);
textStyle("Arial");
textSize(80);
var n = 360;
while (n--) {
globalAlpha = n / 1200;
stroke(n + 110 % 360, 99, 50);
var x = -n * cos(n / 360);
var y = 250 - sin(n / 360 * 2) * n / 2.5;
text("Neon", x + 230, y + 60);
text("Lights", x + 380, y + 245);
}
}
// }, 0);
onmousedown = function (e) {
function f(e, m) {
X = mouseX;
Y = mouseY;
if (m == "down") {
var a;
var b;
var A = X,
B = Y,
R = random(99), //rolling circle radius
r = random(99), // fixed circle radius
d = random(99), // distance
t = 0; //theta
time = setInterval(function () {
i = 10;
while (i--) {
beginShape();
q = (R / r - 1) * t;
x = (R - r) * cos(t) + d * cos(q) + (A + (X - A) * (i / 10)) + (R - r);
y = (R - r) * sin(t) - d * sin(q) + (B + (Y - B) * (i / 10));
if (a) {
// translate(A, B);
line(a, b, x, y);
// vertex(px, py);
// vertex(x, y);
}
stroke((H % 360), 99, 50);
t += radians(360);
a = x;
b = y;
// endShape();
}
H++;
A = X;
B = Y;
}, 5);
}...