Shaded relief with gpujs and d3js / Roger Veciana i Rovira

Published

Edited

Feb 17, 2018

7 stars

function hillshade(demData) {

let azimuthrad = this.constants.azimuth * 0.017453292519943295;

let altituderad = this.constants.angleAltitude * 0.017453292519943295;

let gradX, gradY;

let yPos = this.constants.ySize - this.thread.y;

if(this.thread.x==0) gradX = demData[yPos][this.thread.x+1] - demData[yPos][this.thread.x];

else if(this.thread.x==this.constants.xSize-1) gradX = demData[yPos][this.thread.x] - demData[this.thread.y][this.thread.x-1];

else gradX = (demData[yPos][this.thread.x+1] - demData[yPos][this.thread.x])/2 + (demData[yPos][this.thread.x] - demData[yPos][this.thread.x-1])/2;

if(yPos==0) gradY = demData[yPos+1][this.thread.x] - demData[yPos][this.thread.x];

else if(yPos==this.constants.ySize-1) gradY = demData[yPos][this.thread.x] - demData[yPos-1][this.thread.x];

else gradY = (demData[yPos+1][this.thread.x] - demData[yPos][this.thread.x])/2 + (demData[yPos][this.thread.x] - demData[yPos-1][this.thread.x])/2;

let slope = 3.141593/2 - Math.atan(Math.sqrt(gradX*gradX + gradY*gradY));

let aspect = Math.atan(-gradY, gradX); //should be atan2, but not working!

let hs_value = Math.sin(altituderad) * Math.sin(slope)

+ Math.cos(altituderad) * Math.cos(slope)

* Math.cos(azimuthrad - aspect);

this.color(hs_value, hs_value, hs_value);

}

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.