Viewing Program

Program Data

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

Title	Sunset on The Water
ID	4909397612822528
Created	9 years ago, 1454007703265
Updated	7 years ago, 1545068706612
Code	/** * Works with all canvas sizes! Obviously a bit laggier on bigger canvases * --- * This took me about a week or so to complete fully. I used concepts from some of my other projects, like the 3D water effect. * --- * How it works: * * First a couple of PVectors are declared, one at the position of the sun, and one at each of the four corners. A function calculates the maximum distance that a point can be from the sun. A line then moves down the screen and each point on the line is colored based on how far it is from the sun. * * Once the line reaches the bottom the sun is drawn and water starts to be drawn. the water is a line that is generated by noise, the water is colored based on how high the line goes. It's speed, scale, and height are changed the further down the screen it goes to show depth. A second line of dots is drawn right above the water line, a function calculates the distance between it and the sun, then colors it accordingly, giving it the illusion of light from the sun. * --- * Let me know what you think I should work on or change! Thanks! * --- * Things to add: * -Clouds * -Birds * -Loch Ness Monster? * --- */ // A bunch of variables for different stuff. I could've made this way more efficient with like objects of something, but this works too //variable for how big the sun is, this variable doesn't do much var sunSize = (width+height)/8; //what color the sun is var sunColor = color(255, 213, 0, 150); //A kind of pointless variable var opacity = 20; //A color for what is closest to the sun var nearC = color(255, 89, 0); //A color for what is furthest from the sun var farC = color(101, 101, 240); //The color that the light on the water is var lightNear = color(255, 213, 0, 25); //The other colorfor light on the water var lightFar = color(105, 114, 219, 0); //the position of the sun var sunPos = new PVector(200, 200); //Position of the origin var topLeft = new PVector(0, 0); //Position of the top right corner var topRight = new PVector(400, 0); //position of the bottom right corner var bottomRight = new PVector(width, height); //position of the bottom right corner var bottomLeft = new PVector(0, height); //The color of the lowest point the water reaches var waterLow = color(10, 38, 122); //Color of the highest point the water reaches var waterHigh = color(105, 114, 219); //Where the water starts var waterHeight = sunPos.y; //where the water ends var waterEnd = height; //conditional variables that will be changed later var waterStart = false; var waterDone = false; //Variables that are for a thing I never actually used var lightInt = 50; var startLightInt = lightInt; //Variables for noise values //Scale var Nscale = 0.008; //Max height var maxNheight = 250; //Makes the water different each time var r = random(10000); //variables that increase each frame var y = waterHeight; var int = 0; //function for drawing the sun var drawSun = function() { noStroke(); fill(sunColor); ellipse(sunPos.x, sunPos.y, sunSize, sunSize); }; //function that isnt being used right now var drawSunStrokes = function() { var size = sunSize(lightInt/startLightInt); var y = startLightInt-lightInt(lightInt/(startLightInt-5)); noStroke(); fill(255, 213, 0, opacity); ellipse(sunPos.x, sunPos.y+y, size, size); }; //object constructor for a bird var Bird = function(x, y, size) { this.position = new PVector(x, y); this.size = size; }; //thing that draws the Bird.prototype.drawBird = function() { stroke(0, 0, 0); strokeWeight(2); noFill(); arc(this.x-this.size/2, this.y, this.size, this.size/1.5, 225, 345); arc(this.x+this.size/2, this.y, this.size, this.size/1.5, 190, 325); }; var drawBirds = function(birds) { for(var i = 0; i < birds.length; i++) { birds[i].drawBird(); } }; var birds = []; for(var i = 0; i < random(2, 5); i++) { var bird = new Bird(random(0, width), random(0, waterHeight), random(12, 18)); birds.push(bird); } //function for calculating which corner the sun is furthest from var calcMaxDist = function(x, y) { //the distances between the sun and each corner of the canvas var bl = dist(bottomLeft.x, bottomLeft.y, sunPos.x, sunPos.y); var br = dist(bottomRight.x, bottomRight.y, sunPos.x, sunPos.y); var tl = dist(topLeft.x, topLeft.y, sunPos.x, sunPos.y); var tr = dist(topRight.x, topRight.y, sunPos.x, sunPos.y); var f; var d; //finds the largest distance if (bl > br && bl > tl && bl > tr) { var f = bl; } else if (br > bl && br > tl && br > tr) { var f = br; } else if (tl > br && tl > bl && bl > tr) { var f = tl; } else if (tr > br && bl > bl && bl > tl) { var f = tr; } else { var f = tl; } return f; }; var maxDist = calcMaxDist(); //functions for calculating dist var calcDist = function(x, y) { var d = dist(x, y, sunPos.x, sunPos.y); var finalDist = map(d, 0, maxDist, 0, 1); return finalDist; }; var calcDist2= function(x, y) { var bl = dist(bottomLeft.x, bottomLeft.y, sunPos.x, sunPos.y); var br = dist(bottomRight.x, bottomRight.y, sunPos.x, sunPos.y); var f; var d; if(br > bl) { var f = br; var d = dist(x, y, sunPos.x, sunPos.y); } else if (bl > br) { var f = bl; var d = dist(x, y, sunPos.x, sunPos.y); } else { var f = bl; var d = dist(x, y, sunPos.x, sunPos.y); } var finalDist = map(d, 0, f, 0, 1); return finalDist; }; //function for the y of the sky var y1 = 0; draw= function() { //background(255, 255, 255); //This is for the gradient sky if(y1<=height) { //for loop draws a line of pixels across the whole screen then moves down 1 pixel and does it again for(var x = 0; x < width; x++) { //finds the color of the pixel based on how far it is away from the sun var c = lerpColor(nearC, farC, calcDist(x, y1)); //draws the point stroke(c); strokeWeight(3); point(x, y1); } y1++; //if statement that makes the water start if (y1 === height){ waterStart = true; drawSun(); } } //This part is for the water if(y < waterEnd && waterStart === true) { //println("asdfasdf"); //These three variables change as the line moves up. This gives the illusion that the water stretches into the background var correctedScale = map(y, waterHeight, waterEnd, 1, Nscale); var speed = map(y, waterHeight, waterEnd, 0.01, 0.38); var correctedHeight = map(y, waterHeight, waterEnd, 60, maxNheight); //for loop that draws a line of points based on noise for(var i = 0; i < width; i++) { //makes a noise value var Nval = noise(intNscale + r, iNscale + r); //uses the second calcdist function to determine how close the point is to the sun var light = calcDist2(i, y+NvalcorrectedHeight); //turns the value above into a color var lightC = lerpColor(lightNear, lightFar, light); //makes a color based on how high the noise is var finalC = lerpColor(waterHigh, waterLow, Nval); //draws the blue, water point stroke(finalC); strokeWeight(3); point(i, y+NvalcorrectedHeight); //draws the light from the sun stroke(lightC); point(i, y+NvalcorrectedHeight-1); } y+=speed; int++; } else if (waterStart === true) { //tells the computer that the water is done being drawn waterDone = true; } //this bit is for the birds if(waterDone === true) { drawBirds(birds); } };
Folds	96,99,101,108,109,113,115,118,121,145,149,153,154,175,179,240
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJimo6LcCAw
Votes	225
Spin-Offs	20
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Harrison DeMoss
Author Name	HarrisonTheMighty
Author ID	kaid_547603459149084370678045
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739371595799
Updated	10 months ago, 1739371604567
Source Deleted	unknown