p5实现canvas气球上升城市动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现canvas气球上升城市动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script> let nStars = 5000; nB = 50; let starA = []; let buildA = []; function setup() { cnv = createCanvas(windowWidth, windowHeight); makeStars(); for (let i = 0; i < nB; i++) { buildA.push(new Building()); } angleMode(DEGREES); } function draw() { background(30, 0, 255); translate(width / 2, height / 2); push(); t = frameCount / 30; rotate(t); showStars(); pop(); fill(0, 255, 157); stroke(0, 255, 157); strokeWeight(2); line(20 * sin(t * 50), (height / 4) * sin(t * 10) - 100, 0, height / 2); ellipse(20 * sin(t * 50), (height / 4) * sin(t * 10) - 100, 100, 120); triangle( 20 * sin(t * 50), (height / 4) * sin(t * 10) - 100, 20 * sin(t * 50) + 5, (height / 4) * sin(t * 10) - 100 + 65, 20 * sin(t * 50) - 5, (height / 4) * sin(t * 10) - 100 + 65 ); skyline(); circle(0, height / 2, 10); } function makeStars() { for (let i = 0; i < nStars; i++) { starA.push(new Star()); } } function showStars() { fill(225, 255, 0); noStroke(); for (let i = 0; i <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0