p5实现宇宙星球运转动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现宇宙星球运转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script> <style> /*INSPIRED BY Hyper Glu's Going to Quasar. https://www.behance.net/gallery/45428489/Going-to-Quasar*/ html, body { height: 100%; overflow: hidden; background-color: #000; } body { margin: 0; display: flex; /* This centers our sketch horizontally. */ justify-content: center; /* This centers our sketch vertically. */ align-items: center; } </style> </head> <body> <script> // INSPIRED BY Hyper Glu's Going to Quasar. // https://www.behance.net/gallery/45428489/Going-to-Quasar var c1, c2; var N = 150; var n = 100; var t = 80; var b = 60; var th = 0; var back = []; var middle = []; var inter = []; var front = []; var points = []; var planet, planet2; var sz, msz; var viewport; function setup() { var density = displayDensity(); pixelDensity(density); createCanvas(windowWidth, windowHeight); c1 = color("#140c35"); c2 = color("#1dada4"); c3 = color("#edf683"); c4 = color("#fcfdef"); viewport = min(windowHeight, windowWidth); planet = createVector(viewport/4.1, -viewport/5); sz = viewport/7; msz = sz/4; frameRate(60); init(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); viewport = min(windowHeight, windowWidth); planet = createVector(viewport/4.1, -viewport/5); sz = viewport/7; msz = sz/4; } function init() { for (var i = 0; i < N; i++) { var color; if (i/(N-1) < 1/3) { color = lerpColor(c1, c2, i/(N/3)); } else if (i/(N-1) < 2/3) { color = lerpColor(c2, c3, (i-N/3)/(N/3)); } else { color = lerpColor(c3, c4, (i-2*N/3)/(N/3-1)); } color.setAlpha(20 + 5*i/(N-1)); back.push([color]); } for (var i = 0; i < b; i++) { var color; if (i/(b-1) < 1/3) { color = lerpColor(c1, c2, min(i/(b/3) + random(0, 0.15), 1)); } else if (i/(b-1) < 2/3) { color = lerpColor(c2, c3, min((i-b/3)/(b/3) + random(0, 0.15), 1)); } else { color = lerpColor(c3, c4, min((i-2*b/3)/(b/3-1) + random(0, 0.15), 1)); } color.setAlpha(70 + 5*i/(b-1)); r = random(5, 9); k = 0; middle.push([]); for (var j = 0; j < r; j++) { var x = random(k, k+(TWO_PI-0.01)/r/2); var y = random(k+(TWO_PI-0.01)/r/2, k+(TWO_PI-0.01)/r); if (y < x) { tmp = x; x = y; y = x; } var dir = 1; if (random(0, 1) < 0.5) dir *= -1; middle[i].push([color, x, y, dir]); k += (TWO_PI-0.01)/r; } } for (var i = 0; i < t; i++) { var color; if (i/(t-1) < 1/3) { color = lerpColor(c1, c2, max(i/(t/3) + random(0, -0.3), 0)); } else if (i/(t-1) < 2/3) { color = lerpColor(c2, c3, max((i-t/3)/(t/3) + random(0, -0.3), 0)); } else { color = lerpColor(c3, c4, max((i-2*t/3)/(t/3-1) + random(0, -0.3), 0)); } color.setAlpha(70 + 5*i/(t-1)); r = random(9, 15); k = 0; inter.push([]); for (var j = 0; j < r; j++) { var x = random(k, k+(TWO_PI-0.01)/r/2); var y = random(k+(TWO_PI-0.01)/r/2, k+(TWO_PI-0.01)/r); if (y < x) { tmp = x; x = y; y = x; } var dir = 1; if (random(0, 1) < 0.5) dir *= -1; inter[i].push([color, x, y, dir]); k += (TWO_PI-0.01)/r; } } for (var i = 0; i < n; i++) { var color; if (i/(n-1) < 1/3) { color = lerpColor(c1, c2, min(i/(n/3) + random(0, 0.15), 1)); } else if (i/(n-1) < 2/3) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0