p5实现原子旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现原子旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: rgb(20, 20, 20); height: 100vh; display: flex; overflow: hidden; align-items: center; justify-content: center; } </style> </head> <body translate="no"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-1.9.0.js"></script> <script > //deployed at: https://ofatoms.art/ // #WCCChallenge - scrolling let scrollPos = 0; let n = 100; let onMobile = false; let startX, startY; let bits = []; let bubbles = []; let c1; let xs = []; let lines = 0; let orbit1 = 20; function setup() { c1 = max(400, 0.97 * min(windowWidth, windowHeight)); createCanvas(c1, c1); textFont("Courier New"); startC = random(0, 255); orbit1 = random(20, 40); nOrbit = int(random(10, 25)); onMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ); describe( 'canvas with a circular porthole showing satin like structures that change colors with a spiral of orbits moving in and out. it is responsive to scroling and as it scrolls a poem is shown: breathe in, deeply, breathe out, fully,take a moment and notice,for there were breaths before",breaths at a beginning, generations,the winds breath, the oceans breath,an ebb and flow, zoom out or in, to see more, of atoms, of stars, of existence, breathe in as a tide pulls, breathe out as a star expands, breathe in finite moments, breathe out finite time, into the infinite , and then' ); textSize(20); textAlign(CENTER, CENTER); angleMode(DEGREES); for (let i = 0; i < c1; i++) { bits[i] = { x: 0, y: -c1 / 2 + i }; } strokeWeight(3); for (let i = 0; i < 100; i++) { bubbles[i] = { x: random(-c1 / 2, c1 / 2), y: random(0, c1), color: [ random(200, 255), random(200, 255), random(230, 255), random(2, 20) ], size: random(5, 20), m: random(5, 20) }; } for (let i = 0; i < 5; i++) { xs[i] = { x: random(-width / 1.9, width / 1.9), w: random(width / 8, width / 5), w2: random(width / 15, width / 10), a: random(40, 50), a2: random(40, 50), b: random(4, 9), c: random(2, 10), d: random(3, 11), e: random(5, 14) }; } } function draw() { translate(c1 / 2, c1 / 2); keyCheck(); p = color( 150 + 100 * sin(scrollPos / 31 + startC), 180 + 100 * sin(scrollPos / 23 + startC), 190 + 100 * sin(scrollPos / 51 + startC) ); background(p); t = -frameCount / 10; scrollPos += 0.3; for (let j = 0; j < xs.length; j++) { for (let i = 0; i < bits.length; i += 3) { y = bits[i].y; x = xs[j].x + (width / xs[j].a) * sin(-scrollPos + y / xs[j].d) * cos(scrollPos) - (width / xs[j].e) * sin(-scrollPos / xs[j].c + y / xs[j].e); y1 = bits[i].y; x1 = xs[j].x + xs[j].w + (width / xs[j].a2) * sin(-scrollPos + y / xs[j].b) * cos(scrollPos) - xs[j].w2 * sin(-scrollPos / xs[j].d + y / xs[j].b); stroke( 50 + 50 * sin((scrollPos + y) / xs[j].a2), 80 + 50 * sin((scrollPos + y) / (xs[j].b + xs[j].e)), 90 + 50 * sin((scrollPos + y) / xs[j].a), 60 ); // circle(x,y,10) line(x, y, x1, y1); line(-x, -y, -x1, -y1); line(y, -x, y1, 2 * x1); line(y, -2 * x, y1, x1); } } fill( 5 * sin(scrollPos / 31 + startC), 10 * sin(scrollPos / 23 + startC), 20 * sin(scrollPos / 51 + startC), 51 ); // noStroke() for (let i = 0; i < nOrbit; i++) { push(); scale(2 / (1 + i), 2 / (1 + i)); rotate(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0