Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Forest [Animated]
ID	4756972605243392
Created	6 years ago, 1572382383862
Updated	5 years ago, 1585685816910
Code	/* Collab between NitOwl007 and Gray Wolf October 2019 Image based of: https://www.pinterest.com.au/pin/523050944215399411/?nic=1a NitOwl007 projects: https://www.khanacademy.org/profile/OnlyOwl1/projects Gray Wolf projects: https://www.khanacademy.org/profile/grantjenkins/projects / //gradient (background) var setGradient = function(x, y, w, h, color1, color2) { background(0, 0, 0, 0); noFill(); for(var i = y; i <= y + h; i++) { var inter = map(i, y, y + h, 0, 1); var c = lerpColor(color1, color2, inter); stroke(c); line(x, i, x + w, i); } return get(0, 0, width, height); }; var gradient = setGradient(0, 0, width, height, color(1, 62, 66), color(44, 143, 148)); var ShootingStar = function(config) { this.pos = config.pos \|\| new PVector(random(0, width), -50); this.velocity = new PVector(random(-7, 7), random(5, 8)); this.radius = 1.5; this.update = function() { this.pos.add(this.velocity); }; this.display = function() { noStroke(); fill(250, 250, 250); ellipse(this.pos.x, this.pos.y, this.radius, this.radius); }; this.run = function() { this.update(); this.display(); }; }; var ShootingStarSystem = function() { this.shootingStars = []; this.trails = []; this.update = function() { if(random() < 0.01) { this.shootingStars.push(new ShootingStar({})); } for(var i = this.shootingStars.length - 1; i >= 0; i--) { var shootingStar = this.shootingStars[i]; shootingStar.update(); if(this.shootingStars[i].y > height) { this.shootingStars.splice(i, 1); } else { this.trails.push( { timeToLive: 100, pos: new PVector(shootingStar.pos.x, shootingStar.pos.y), radius: random(shootingStar.radius/2, shootingStar.radius/2), color: [150, 150, 150] } ); } } }; this.display = function() { noStroke(); for(var i = this.trails.length - 1; i >= 0; i--) { var trail = this.trails[i]; trail.timeToLive-= floor(random(5, 15)); if(trail.timeToLive <= 0) { this.trails.splice(i, 1); } else { fill(trail.color[0], trail.color[1], trail.color[2], trail.timeToLive); ellipse(trail.pos.x, trail.pos.y, trail.radius, trail.radius); } } for(var i = 0; i < this.shootingStars.length; i++) { this.shootingStars[i].display(); } }; this.run = function() { this.update(); this.display(); }; }; var Fire = function (config) { this.pos = config.pos \|\| new PVector(0, 0); this.radius = config.radius \|\| 40; this.velocity = config.velocity \|\| new PVector(random(-0.25, 0.25), random(-2, -1.5)); this.acceleration = config.acceleration \|\| new PVector(0, 0); this.wind = config.wind \|\| new PVector(random(0.02, 0.015), 0.005); this.angle = 45; this.timeToLive = 200; this.color = color(255, 255, 217); this.red = 254; this.green = 248; this.blue = 186; this.orangeR = 232; this.orangeG = 79; this.orangeB = 38; this.grayR = 92; this.grayG = 88; this.grayB = 83; this.transition = 0; this.dead = false; this.applyForce = function (force) { this.acceleration.add(force); }; this.update = function () { if(this.transition === 0) { this.red = constrain(this.red - 1 0.6, this.orangeR, this.red); this.green = constrain(this.green - 7.68 * 0.6, this.orangeG, this.green); this.blue = constrain(this.blue - 3 * 6.72 * 0.6, this.orangeB, this.blue); this.radius-=0.8; if(this.radius <= 4) { this.transition = 1; } } else if(this.transition === 1) { this.red = constrain(this.red - 2.3 * 5, this.grayR, this.red); this.green = constrain(this.green - 1.27 * 5, this.grayG, this.green); this.blue = constrain(this.blue - 1 * 5, this.grayB, this.blue); this.radius+=0.2; if(this.red === this.grayR && this.green === this.grayG && this.blue === this.grayB) { this.transition = 2; } } else if(this.transition === 2) { this.applyForce(this.wind); this.radius+=0.15; this.timeToLive-= 1.5; if(this.timeToLive <= 0) { this.dead = true; } } this.velocity.add(this.acceleration); this.pos.add(this.velocity); this.acceleration.mult(0); }; this.display = function () { pushMatrix(); translate(this.pos.x, this.pos.y); rotate(this.angle); noStroke(); fill(color(this.red, this.green, this.blue, this.timeToLive)); ellipse(-this.radius / 2, -this.radius / 2, this.radius, this.radius); popMatrix(); }; this.run = function () { this.update(); this.display(); }; }; var FireSystem = function(config) { this.pos = config.pos \|\| new PVector(0, 0); this.fire = []; this.run = function() { var n = 0; for(var i = this.fire.length - 1; i >= 0; i--) { this.fire[i].run(); if(this.fire[i].dead) { this.fire.splice(i, 1); n++; } } if(frameCount % 3 === 0) { this.fire.push(new Fire({ pos: new PVector(this.pos.x, this.pos.y) })); } }; }; //small plants var Leaf = function(config) { this.x = config.x; this.y = config.y; this.radius = config.radius \|\| random(7, 15); this.colors = [color(22, 74, 71, 200), color(79, 47, 11, 200), color(112, 105, 27, 200)]; //display mostly green, then brown, then yellow (least) this.index = 0; var rnd = random(); if(rnd < 0.55) { this.index = 0; } else if(rnd < 0.85) { this.index = 1; } else { this.index = 2; } this.color = config.color \|\| this.colors[this.index]; this.display = function() { pushMatrix(); translate(this.x, this.y - this.radius0.7); //leaf noStroke(); fill(this.color); beginShape(); vertex(0, -this.radius0.5); bezierVertex(this.radius0.4, -this.radius0.1, this.radius0.7, this.radius0.3, 0, this.radius0.5); bezierVertex(-this.radius0.7, this.radius0.3, -this.radius0.4, -this.radius0.1, 0, -this.radius0.5); endShape(CLOSE); //stem noFill(); stroke(this.color); line(0, this.radius0.5, 0, this.radius0.7); popMatrix(); }; }; var rock = function(x,y,sx,sy,r) { pushMatrix(); translate(x,y); scale(sx,sy); rotate(r); fill(9, 13, 10); triangle(272,242,266,184,241,225); fill(5, 5, 5); beginShape(); vertex(305,178); vertex(266,184); vertex(271,242); vertex(409,246); endShape(); popMatrix(); }; var leaf = function(x,y,sx,sy,r){ pushMatrix(); translate(x+5,y+26); scale(sx,sy); rotate(r-4); fill(2, 13, 12); beginShape(); vertex(17,400); vertex(29,405); curveVertex(84,392); curveVertex(132,406); vertex(218,442); vertex(239,455); vertex(182,450); curveVertex(112,433); vertex(69,416); vertex(41,408); vertex(260,488); endShape(); popMatrix(); }; var grass = function(x,y,sx,sy,r, color){ stroke(color); strokeWeight(3); pushMatrix(); translate(x,y); scale(sx,sy); rotate(r); fill(color); triangle(247,220,258,220,253,180); rotate(5); triangle(273,197,258,202,258,166); rotate(18); triangle(317,102,330,102,315,69); popMatrix(); }; //trees var Tree = function(config) { this.length = config.length; this.nodes = config.nodes; this.minWidth = config.minWidth \|\| 2; this.maxWidth = config.maxWidth \|\| 4; this.totalMaxWidth = 0; this.color = config.color \|\| color(0); this.shadeColor = config.shadeColor \|\| this.color; this.scale = config.scale \|\| 1; this.calc = 0; for(var i = 1; i <= this.nodes-0; i++) { this.calc+= i/this.nodes; this.totalMaxWidth+=7; } this.totalMaxWidth-=7; this.amount = this.length/this.calc; this.display = function() { background(0, 0, 0, 0); noStroke(); var leftW = 0, rightW = 0; var leftY = 0, rightY = 0; var y = 0, yStart = 0; pushMatrix(); scale(this.scale); fill(this.color); rect(this.totalMaxWidth-10, this.length-20, 20, 90); for(var i = 1; i <= this.nodes; i++) { y = i/this.nodesthis.amount + yStart; //left fill(this.color); leftW = random(this.minWidth, this.maxWidth); leftY = random(10, 15); beginShape(); vertex(this.totalMaxWidth+1, yStart0.9); bezierVertex(this.totalMaxWidth-leftW0.5, y + leftY 0.5, this.totalMaxWidth-leftW0.8, y + leftY 0.8, this.totalMaxWidth-leftW, y + leftY); bezierVertex(this.totalMaxWidth, y, this.totalMaxWidth, y, this.totalMaxWidth, y); vertex(this.totalMaxWidth+1, yStart0.9); endShape(CLOSE); //right fill(this.shadeColor); rightW = random(this.minWidth, this.maxWidth); rightY = random(10, 15); beginShape(); vertex(this.totalMaxWidth-1, yStart0.9); bezierVertex(this.totalMaxWidth+rightW0.5, y + rightY 0.5, this.totalMaxWidth+rightW0.8, y + rightY 0.8, this.totalMaxWidth+rightW, y + rightY); bezierVertex(this.totalMaxWidth, y, this.totalMaxWidth, y, this.totalMaxWidth, y); vertex(this.totalMaxWidth-1, yStart0.9); endShape(CLOSE); this.minWidth+=3; this.maxWidth+=7; yStart = y; } popMatrix(); return get(0, 0, (this.totalMaxWidth 2) * this.scale, (this.length + 70) * this.scale); }; this.treeImage = this.display(); }; var tree = new Tree({ length: 300, nodes: 18, color: color(1, 12, 16), //shadeColor: color(69, 67, 69), scale: 1 }); var treeHill = new Tree({ length: 300, nodes: 15, color: color(25, 34, 41) }); var drawBush = function(x,y,sx,sy,r,color) { pushMatrix(); translate(x,y); scale(sx,sy); rotate(r); fill(color); beginShape(); vertex(127, 173); vertex(119, 168); vertex(117, 178); vertex(107, 178); vertex(111, 191); vertex(104, 196); vertex(112, 202); vertex(105, 212); vertex(114, 213); vertex(108, 223); vertex(117, 225); vertex(113, 230); vertex(121, 238); vertex(172, 238); vertex(186, 231); vertex(178, 227); vertex(185, 217); vertex(178, 212); vertex(184, 203); vertex(173, 198); vertex(176, 188); vertex(166, 188); vertex(169, 178); vertex(154, 177); vertex(155, 170); vertex(142, 173); vertex(138, 163); endShape(CLOSE); popMatrix(); }; var treeDistance = new Tree({ length: 300, nodes: 15, color: color(94, 92, 94, 100) }); //stars var numOfStars = 50; var starX = [numOfStars]; var starY = [numOfStars]; var starSize = [numOfStars]; //cloud var cloud = function(x,y,sx,sy,r,color) { pushMatrix(); translate(x,y); scale(sx,sy); rotate(r); fill(color); beginShape(); curveVertex(-40,-132); curveVertex(21,-132); curveVertex(120,-126); curveVertex(134,-116); curveVertex(79,-115); curveVertex(60,-105); curveVertex(-74,-106); curveVertex(-140,-120); curveVertex(-40,-132); curveVertex(21,-132); curveVertex(120,-126); endShape(); popMatrix(); }; //Stars for(var i = 0; i < numOfStars; i++) { starX[i] = random(0, 600); starY[i] = random(0, 300); starSize[i] = random(1, 2); } //gradient background image(gradient, 0, 0); //Stars fill(255, 255, 255); for(var i = 0; i < numOfStars; i++) { ellipse(starX[i], starY[i], starSize[i], starSize[i]); } //moon rays noStroke(); fill(255, 255, 255, 8); for(var i = 1; i < 84; i += 5){ ellipse(113, 108, i * 2.5, i * 2.5); ellipse(113, 108, i * 1.6, i * 1.6); } //back glow noStroke(); //fill(255, 149, 0, 8); fill(207, 133, 84, 15); for(var i = 1; i < 84; i += 5){ ellipse(281, 329, i * 11.7, i * 4.1); ellipse(281, 378, i * 4.5, i * 2.7); } //moon fill(235, 235, 235); ellipse(113,108,80,80); fill(222, 222, 222); noStroke(); ellipse(88,94,20,20); ellipse(141,105,10,10); ellipse(98,131,15,15); ellipse(128,127,20,20); //clouds cloud(140,290,1,0.6,0,color(78, 107, 106,150)); cloud(485,128,-0.5,0.4,0,color(110, 138, 137,150)); cloud(408,198,0.4,0.4,0,color(58, 97, 95,150)); cloud(265,166,-0.5,0.4,0,color(87, 112, 111,150)); //get image from here as the back image, then display shooting stars, then front image var backSceneImage = get(0, 0, width, height); background(0, 0, 0, 0); //small hill in background fill(94, 92, 94, 100); ellipse(300, 460, 500, 200); //small trees on hill in background image(treeDistance.treeImage, 280, 352, 15, 10); var y = 361; var h = 0; for(var x = 272; x > 150; x-= 5) { h = random(8, 10); image(treeDistance.treeImage, x, y - h, random(10, 15), h); image(treeDistance.treeImage, 280 + (280-x), y - h, random(10, 15), h); y += 0.47; } //mountain - right pushMatrix(); translate(-15, 0); scale(1.04, 1.03); beginShape(); fill(74, 74, 74); vertex(560, 304); vertex(500, 267); vertex(586, 114); vertex(571, 188); vertex(589, 188); endShape(); beginShape(); fill(38, 40, 48); vertex(588, 188); vertex(570, 188); vertex(586, 115); vertex(695, 342); vertex(552, 294); endShape(); popMatrix(); //mountain - middle fill(38, 40, 48); triangle(438, 370, 364, 373, 411, 295); //mountain - left fill(69, 69, 69); triangle(562, 370, 393, 373, 469, 227); fill(38, 40, 48); triangle(628, 350, 446, 355, 470, 227); //hill noStroke(); fill(25, 34, 41); beginShape(); vertex(0, height0.47); vertex(width0.4, height0.67); vertex(width0.55, height0.67); vertex(width0.7, height0.62); vertex(width0.9, height0.5); vertex(width, height0.47); vertex(width, height); vertex(0, height); vertex(0, height0.45); endShape(CLOSE); //trees on hill //left var y = height0.48; var h = 0; for(var x = 0; x < 250; x+= 10) { h = random(25, 55); image(treeHill.treeImage, x, y - h, random(15, 25), h); y += 5.3; } //right - bottom y = height0.5; h = 0; for(var x = width0.9; x > width0.7; x-= 10) { h = random(22, 50); image(treeHill.treeImage, x, y - h, random(15, 25), h); y += 6; } //right - middle y = height0.618; h = 0; for(var x = width0.7; x > width0.5; x-= 10) { h = random(22, 50); image(treeHill.treeImage, x, y - h, random(15, 25), h); y += 3.4; } //right - top y = height0.47; h = 0; for(var x = width; x > width0.9; x-= 10) { h = random(40, 65); image(treeHill.treeImage, x, y - h, random(20, 28), h); y += 2.5; } //trees in front - left image(tree.treeImage, -40, 20, 140, 500); image(tree.treeImage, 10, 100, 140, 450); image(tree.treeImage, 160, 230, 50, 270); //trees in front - right image(tree.treeImage, 440, 220, 80, 330); image(tree.treeImage, 395, 100, 80, 400); //tree on angle pushMatrix(); rotate(7); scale(-1, 1); image(tree.treeImage, -480, -10, 165, 410); popMatrix(); //stump fill(10, 7, 4); pushMatrix(); translate(87,249); scale(0.7,0.7); beginShape(); vertex(52,148); vertex(53,235); vertex(102,229); vertex(88,118); vertex(80,152); vertex(66,170); endShape(CLOSE); popMatrix(); //ground noStroke(); fill(0, 8, 2); beginShape(); vertex(0, height0.65); vertex(width0.52, height0.75); vertex(width, height0.7); vertex(width, height); vertex(0, height); vertex(0, height0.65); endShape(CLOSE); //straight trees fill(0); rect(505, 0, 14, 440); beginShape(); vertex(505, 105); vertex(490, 90); vertex(480, 60); vertex(483, 95); vertex(505, 128); endShape(CLOSE); rect(525, 0, 6, 440); rock(237,209,1,1,0);//smaller rock rock(155,80,1.5,1.5,0);//biggr rock fill(26, 26, 26); rect(555, 0, 22, 470); beginShape(); vertex(575, 180); vertex(587, 165); vertex(591, 140); vertex(591, 180); vertex(575, 205); endShape(CLOSE); //mound in front of angle tree fill(1, 12, 16); beginShape(); vertex(312, 450); vertex(320, 440); vertex(328, 435); vertex(350, 432); vertex(370, 434); vertex(380, 440); vertex(385, 450); endShape(CLOSE); smooth(); //bushes on right side drawBush(-45,273,1.5,0.7,0,color(4, 28, 17)); drawBush(6,244,0.9,0.9,0,color(1, 13, 4)); drawBush(197,248,-0.8,0.9,5,color(66, 40, 18)); drawBush(-4,308,0.6,0.7,0,color(1, 10, 6)); //bushes on left side drawBush(509,204,0.6,0.99,5,color(66, 40, 18)); drawBush(393,276,1.3,0.9,0,color(6, 43, 26)); //rock fill(0); arc(576,525,126,98,189,348); drawBush(405,375,1.2,0.8,0,color(6, 43, 26)); //bottom rock on left side fill(0); arc(576,619,68,124,192,348); //small plants var leaves = []; //small plants - top-right for(var i = 0; i < 15; i++) { leaves.push(new Leaf({ x: random(400, 500), y: random(450, 470) })); } for(var i = 0; i < 10; i++) { leaves.push(new Leaf({ x: random(470, 530), y: random(470, 480) })); } //small plants - front-right for(var i = 0; i < 20; i++) { leaves.push(new Leaf({ x: random(420, 540), y: random(575, 595) })); } //small plants - top-left for(var i = 0; i < 20; i++) { leaves.push(new Leaf({ x: random(50, 150), y: random(475, 495) })); } for(var i = 0; i < leaves.length; i++) { leaves[i].display(); } //fire glow noStroke(); fill(90, 79, 46, 20); for(var i = 0; i < 10; i++) { ellipse(width0.5, height0.87, 400 + 10i, 60+ 10.5i); } //rock - middle-left fill(16, 29, 35); beginShape(); vertex(14, 340); vertex(42, 342); vertex(35, 350); vertex(5, 348); endShape(CLOSE); //fill(148, 138, 148); beginShape(); vertex(42, 342); vertex(70, 500); vertex(50, 510); vertex(35, 350); endShape(CLOSE); fill(9, 19, 2); beginShape(); vertex(35, 350); vertex(50, 510); vertex(5, 520); vertex(5, 348); endShape(CLOSE); //rock - bottom-left fill(0); beginShape(); vertex(0, 435); vertex(40, 440); vertex(60, 455); vertex(75, 495); vertex(83, 525); vertex(60, 540); vertex(30, 547); vertex(0, 547); vertex(0, 435); endShape(CLOSE); //plant on left side leaf(-180,79,0.5,1.0,-26); leaf(-83,155,0.4,0.7,-15); leaf(-119,59,0.6,0.9,-3); grass(258,513,1.0,1.5,-28,color(1, 10, 7)); grass(-327,229,1.3,1.8,-5,color(1, 10, 7)); grass(-170,99,1.3,1.8,16,color(1, 10, 7)); //take an image of everything that has previously been drawn var frontSceneImage = get(0, 0, width, height); //create a new fire system for animating the fire var fireSystem = new FireSystem({ pos: new PVector(width0.5, height0.92) }); var shootingStarSystem = new ShootingStarSystem(); var displayFire = function() { fill(87, 85, 87); ellipse(width0.47, height0.87, 30, 20); ellipse(width0.52, height0.86, 30, 20); ellipse(width0.535, height*0.87, 30, 20); //run the fire fireSystem.run(); //display the logs in front of the fire fill(92, 67, 53); beginShape(); vertex(270, 535); vertex(278, 519); vertex(300, 520); vertex(305, 535); vertex(275, 535); endShape(CLOSE); beginShape(); vertex(295, 535); vertex(310, 520); vertex(330, 520); vertex(335, 530); vertex(295, 535); endShape(CLOSE); //display the stones in front of the logs fill(74, 71, 74); beginShape(); vertex(256, 542); vertex(262, 523); vertex(288, 525); vertex(292, 532); vertex(320, 530); vertex(325, 526); vertex(340, 525); vertex(343, 542); vertex(325, 548); vertex(290, 548); vertex(265, 545); vertex(256, 542); endShape(CLOSE); }; draw = function() { image(backSceneImage, 0, 0); //display the shooting stars shootingStarSystem.run(); //display the front scene image(frontSceneImage, 0, 0); //display the fire displayFire(); };
Folds	10,21,24,43,44,97,99,176,177,197,200,241,243,258,260,280,282,296,299,370,371,377,384,420,422,426,435,455,457,461,468,470,475,478,484,487,577,581,586,590,595,599
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN7yj865CAw
Votes	246
Spin-Offs	8
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	NitOwl007 [INACTIVE]
Author Name	OnlyOwl1
Author ID	kaid_607413902639112014082643
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739369350988
Updated	8 months ago, 1744845568954
Source Deleted	unknown