p5实现星空夜景动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现星空夜景动画效果代码,点击可暂停。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: black; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script> <script > //welcome to my stream of consciousness code - read at your own risk - no planning here, just messing around and not cleaning up aftermyself let nStars=1000; let starArray=[]; let terrain1 = []; let terrain2 = []; let x,y,p1,p2,p3,h; let playBool = true; function setup(){ c=500//min(windowWidth,windowHeight)*0.9 createCanvas(c,c); angleMode(DEGREES) r1=random(0,20); g1=random(0,60) b1=random(0,90); terrain1[0]=[] terrain2[0]=[] h=random(-360,360) p1 = random(0.3,1.2); p2 = random(0.2,1.2); p3 = random(0.2,1.2); stars() setTer() t=h; } function draw(){ if (playBool){ t+=0.25} background(r1,g1,b1); translate(width/2,height/2); rotate(t/10) plotStars(); moons(); push() translate(0,-height/3) scale(1.6,1.4) ter1(); pop() } function stars(){ for(let i=0;i<nStars;i++){ x =int(random(-c,c)); y= int(random(-c,c)); starArray[i]=createVector(x,y); } } function plotStars(){ push() rotate(t) noStroke(); fill(255-r1,255-g1,255-b1); for(let i=0;i<nStars;i++){ circle(starArray[i].x,starArray[i].y,1) } pop() } function ter1(){ push() noFill() strokeWeight(12) for(let j=0;j<60;j+=5){ stroke(120-r1-j*3,120-g1-j*1.5,120-b1-j) scale(1+sqrt(j)/100,1+sqrt(j)/100) beginShape() for (let i=0; i < terrain1[0].length; i++) { vertex(terrain1[0][i].x,terrain1[0][i].y) } endShape(CLOSE); } pop() scale(1,1) push() noFill() strokeWeight(10) for(let j=0;j<30;j++){ stroke(180-r1-j*4,220-g1-j*3,240-b1-j*5) scale.........完整代码请登录后点击上方下载按钮下载查看
网友评论0