Leveraging the incredible flat surface shader from Matthew Wagerfield (http://matthew.wagerfield.com/flat-surface-shader/), this demo uses simple image (for the time being) masks to create a low-poly earth with animated water. Looking forward to taking this idea and masking concept further.
A Pen by Daniel Yuschick on CodePen.
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| import React from 'react'; | |
| // Exercise 1: Passing props | |
| // TODO: Make all the buttons pink | |
| const Ex1 = () => { | |
| // Pass the background color through to the components | |
| const backgroundColor = 'black'; | |
| return ( |
Navigate to the project director
cd week-4-project
Install the required tools for React development with Create React App.
I hereby claim:
To claim this, I am signing this object:
| <!-- This goes into the head of the page --> | |
| <script> | |
| !function(s,r,o){var a,p,i,c=[],u=[];s[o]={init:function(){a=arguments;var n={then:function(e){return u.push({type:"t",next:e}),n},catch:function(e){return u.push({type:"c",next:e}),n}};return n},on:function(){c.push(arguments)},render:function(){p=arguments},destroy:function(){i=arguments}},s.__onWebMessengerHostReady__=function(e){if(delete s.__onWebMessengerHostReady__,s[o]=e,a)for(var n=e.init.apply(e,a),t=0;t<u.length;t++){var r=u[t];n="t"===r.type?n.then(r.next):n.catch(r.next)}p&&e.render.apply(e,p),i&&e.destroy.apply(e,i);for(t=0;t<c.length;t++)e.on.apply(e,c[t])};var e=new XMLHttpRequest;e.addEventListener("load",function(){try{var e;if((e="string"==typeof this.response?JSON.parse(this.response):this.response).url){var n=r.getElementsByTagName("script")[0],t=r.createElement("script");t.async=!0,t.src=e.url,n.parentNode.insertBefore(t,n)}}catch(e){}}),e.open("GET","https://chat-engagor.netdna-ssl.com/loader.json",!0),e.responseType="json",e.se |
