let backgroundGraduationStrong = 100; let sphereColorList; let spherePositionList; let depthRange = 100; //背景の深度 let num_trail = 4; let num_group_trail = 5; let cameraPosition; let sceneMoveStep = -2; let min_inRangePosition; let max_inRangePosition; let trailGenerateInterval = 4; let treeGenerateInterval = 3; let emissionOccurInterval = 100; let emissionTimeStep = 1; let bornBranchProbability = 0.01; //wall paramater let wall_center; let wall_range; let min_wall_position; let max_wall_position let trailsSystemer; let treesSystemer; let mullerFont; let gradationShader; let backscene,mainscene; let vs = ` // バーテックスシェーダー precision mediump float; // どれくらいの精度で計算するかを定義 attribute vec3 aPosition; // 頂点の位置 uniform mat4 uProjectionMatrix; // プロジェクション変換行列(カメラに映る範囲の決定に使う) uniform mat4 uModelViewMatrix; // ビュー変換行列(カメラの視点の決定に使う) void main() { vec4 positionVec4 = vec4(aPosition, 1.0); // 位置座標をvec4型にして格納 gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4; // 座標変換を実行(プロジェクション変換行列×ビュー変換行列×頂点座標) } `; let fs = ` precision highp float; uniform vec2 resolution; void main() { vec2 uv = (gl_FragCoord.xy - resolution.xy) / min(resolution.x, resolution.y); //135,206,250 //218,112,214 //x(1-a)+y*a 線形補間 //色を0~255の空間から0~1の空間に255を割ることで変換する float r = (218.0*(1.0-uv.y)+135.0*uv.y)/255.0; float g = (112.0*(1.0-uv.y)+206.0*uv.y)/255.0; float b = (214.0*(1.0-uv.y)+250.0*uv.y)/255.0; gl_FragColor = vec4(r, g, b, 1.0); } `; function preload() { mullerFont = loadFont('https://stat.neort.io/externalResource/ci6buukn70rnc8e7s69g.otf'); } function setup(){ createCanvas(windowWidth, windowHeight, WEBGL); setAttributes('antialias', true); frameRate(30); backscene = createGraphics(width,height,WEBGL); mainscene = createGraphics(width,height,WEBGL); cameraPosition = createVector(0,0,0); min_inRangePosition = createVector(-4*width,-height,-depthRange); max_inRangePosition = createVector(4*width,height,depthRange); wall_center = createVector(0,0,-width/5); wall_range = createVector(width/2,height,3*width/4); min_wall_position = p5.Vector.sub(wall_center,wall_range.copy().div(2)); max_wall_position = p5.Vector.add(wall_center,wall_range.copy().div(2)); trailsSystemer = new trailsSystem(); treesSystemer = new treeSystem() textFont(mullerFont); gradationShader = createShader(vs,fs); } function draw(){ gradationShader.setUniform('resolution', [width, height]); backgroundGraduation(); camera(0, cameraPosition.y, 650, 0, cameraPosition.y, 0, 0, 1, 0); ambientLight(200); //cameraの移動に合わせてpointLightも移動 pointLight(255,255,255,width,-height+cameraPosition.y,300); //p5.jsの更新&ドローコール drawPhongSpheres(10); trailsSystemer.update(); treesSystemer.update(); cameraPosition.y += sceneMoveStep; //wallにcameraの移動分計算 wall_center.y += sceneMoveStep; min_wall_position.y += sceneMoveStep; max_wall_position.y += sceneMoveStep; //描画範囲にcameraの移動分計算 min_inRangePosition.y += sceneMoveStep; max_inRangePosition.y += sceneMoveStep; //debug用 //debugWall(); drawFrameInterval(); } //draw function //線形補間で背景をグラデーション function backgroundGraduation(){ translate(0,cameraPosition.y,-1000); shader(gradationShader); noStroke(); quad(-width*4, -height*4, width*4, -height*4, width*4, height*4, -width*4, height*4); } function drawPhongSpheres(num){ colorMode(HSB,100); if(!sphereColorList){ sphereColorList = new Array(num); for(let i=0; ithis.maxVelocity){ v.x=v.x/vmag*this.maxVelocity; v.z=v.z/vmag*this.maxVelocity; } return v } applyForce(f){ this.acceleration.add(f); } } class trailsSystem{ constructor(){ //y軸の速度は一定 this.trails = Array(num_trail * num_group_trail).fill().map(() => new trail(createVector(random(-width/4, width/4), random(-50,50), random(-width/2, 0)),createVector(random(-3,3),sceneMoveStep,random(-3,3)))); this.trailEmissionIndex = new Array(num_trail * num_group_trail); //行の用意 this.trailQueue = new Array(num_trail * num_group_trail); //列の用意 for(let i=0; iMath.abs(d)){ //separate separateAverage.add(revForce.div(d*d)); //cohesion cohesionAverage.add(tsub.position); //alienment alienmentAvarage.add(tsub.velocity); culcCount++; } } //cohesion:main to center cohesionAverage.div(culcCount+Number.EPSILON); let separateForce=p5.Vector.mult(separateAverage, this.separateWeight); let cohesionForce; if(culcCount!=0) cohesionForce=p5.Vector.mult(p5.Vector.sub(cohesionAverage, tmain.position), this.cohesionWeight); let alienmentForce=p5.Vector.mult(p5.Vector.div(alienmentAvarage,culcCount+Number.EPSILON), this.alienmentWeight); //力の追加 tmain.applyForce(separateForce); tmain.applyForce(cohesionForce); tmain.applyForce(alienmentForce); //壁の判定 this.avoidWall(tmain); //位置と速度の更新 tmain.update(); //描画処理 tmain.display(); let tmainQueue = this.trailQueue[gi*num_trail+i]; //trailを用意する if(frameCount%trailGenerateInterval==0){ let p = tmain.position.copy(); let v = tmain.velocity.copy(); let t = new trail(p,v); //デックの先頭に要素を追加 tmainQueue.unshift(t); //先頭の追加に合わせてemissionの位置も移動 this.trailEmissionIndex[gi*num_trail+i]++; } if(frameCount%emissionOccurInterval==0) this.trailEmissionIndex[gi*num_trail+i]=0; //trailのemissionのイテレータ let tei = this.trailEmissionIndex[gi*num_trail+i]; if(frameCount%emissionTimeStep==0 && teitmainQueue.length-1){ tmain.isOnEmission=true; tmainQueue[tmainQueue.length-1].isOnEmission=false; } } } //trailを描画する for(let ti=0; ti=0){ console.log("子が生まれました"); let r = random(-20,20); let radian=radians(this.degree); let p = createVector(this.position.x+cos(radian)*this.endPositionX,this.position.y+sin(radian)*this.endPositionX,this.position.z); let d = this.degree+r; let b = new branchElement(p,d,this.growRate); this.childBranches.push(b); p = createVector(this.position.x+cos(radian)*this.endPositionX,this.position.y+sin(radian)*this.endPositionX,this.position.z); d = this.degree-r; b = new branchElement(p,d,this.growRate); this.childBranches.push(b); this.growing=false; } else if(this.growRate>=0){ this.endPositionX+=this.growStep; this.growRate-=1; } } //子の成長中 else if(!this.growing){ this.childBranches[0].update(); this.childBranches[0].display(); this.childBranches[1].update(); this.childBranches[1].display(); } this.branchLife-=0.5; } display(){ push(); translate(this.position.x,this.position.y,this.position.z); let radian=radians(this.degree); rotateZ(radian); //224,255,255 //221,160,221 let R = map(this.growRate,255,0,224,221); let G = map(this.growRate,255,0,255,160); let B = map(this.growRate,255,0,255,221); stroke(R,G,B,this.fadeout); strokeWeight(5); beginShape(LINES); vertex(0,0,0); vertex(this.endPositionX,0,0); endShape(); pop(); } } class treeSystem{ constructor(){ //y軸の速度は一定 this.trees = new Array(3); //行の用意 this.treeQueue = new Array(3); //列の用意 for(let i=0; i