Implemented eclipse and sun

Author: gabekus

assets/solar-eclipse.png

@@ -1,6 +1,7 @@
 import React from "react"
 import Moon from "./Moon.jsx"
 import Wave from "./Wave.jsx"
+import Sun from "./Sun.jsx"
 
 class App extends React.Component {
     constructor() {
@@ -12,6 +13,7 @@ class App extends React.Component {
         return (
             <div>
                 <Wave />
+                <Sun />
                 <Moon />
             </div>
         )

node_modules/.bin/eslint

@@ -0,0 +1,76 @@
+import React from "react";
+import sunSketch from "../sketches/sunSketch.js";
+import P5Wrapper from "./P5Wrapper.jsx";
+import eclipseSketch from "../sketches/eclipseSketch.js";
+
+class Sun extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.getData = this.getData.bind(this);
+    this.getCurrentYear = this.getCurrentYear.bind(this);
+    this.getNextEclipse = this.getNextEclipse.bind(this);
+
+    this.state = {
+      error: null,
+      daysUntilEclipse: null,
+      isLoading: false,
+      debug: false
+    };
+  }
+
+  componentDidMount() {
+    this.setState({ isLoading: true });
+    this.getData();
+    setInterval(this.getData, 600 * 1000);
+  }
+
+  componentWillMount() {
+    clearInterval(this.getData);
+  }
+
+  getData() {
+    const currentYear = this.getCurrentYear();
+    fetch(`http://api.usno.navy.mil/eclipses/solar?year=${currentYear}`)
+      .then(res => res.json())
+      .then(
+        result => {
+          this.getNextEclipse(result.eclipses_in_year);
+          this.setState({ isLoading: false, daysUntilEclipse: Math.random(0,10)*10 });
+        },
+        error => this.setState({ error, isloading: false })
+      );
+  }
+
+  getCurrentYear() {
+    return new Date().getFullYear();
+  }
+
+  getNextEclipse(eclipses) {
+
+  }
+
+  render() {
+    if (this.state.error) {
+      return <div>ERROR: {this.state.error}</div>;
+    } else if (this.state.isLoading) {
+      return <div>Loading...</div>;
+    } else if (this.state.debug) {
+      return (
+      <div>
+        <P5Wrapper sketch={sunSketch} debug={this.state.debug} />;
+        <P5Wrapper sketch={eclipseSketch} debug={this.state.debug} />;
+      </div>
+      );
+    } else {
+      return (
+        <div>
+      <P5Wrapper sketch={sunSketch} daysUntilEclipse={this.state.daysUntilEclipse} />
+      <P5Wrapper sketch={eclipseSketch} daysUntilEclipse={this.state.daysUntilEclipse} />;
+      </div>
+      );
+    }
+  }
+}
+
+export default Sun;

node_modules/.bin/eslint

@@ -0,0 +1,23 @@
+export default function sketch(p) {
+    const solarEclipseImg = p.loadImage("assets/solar-eclipse.png");
+    let daysUntilEclipse;
+    p.draw = function () {
+        if (daysUntilEclipse && daysUntilEclipse < 10) {            
+            p.clear();
+            p.tint(255, 255-(Math.abs(daysUntilEclipse)*17));
+            p.imageMode(p.CENTER);
+            p.image(solarEclipseImg, (p.windowWidth/2), (p.windowHeight/2)+5, 0);
+        }
+    }
+
+    p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
+        if (props.daysUntilEclipse) {
+            daysUntilEclipse = props.daysUntilEclipse;
+        }
+    }
+
+    p.setup = function () {
+        p.createCanvas(p.windowWidth, p.windowHeight);
+    }
+
+}

src/components/App.jsx

@@ -2,7 +2,7 @@ var moment = require('moment');
 
 export default function sketch(p) {
   let x = 0,
-      y = 0,
+      y = -500,
       phaseMod = 0;
 
   var ratio = 0;
@@ -33,6 +33,7 @@ export default function sketch(p) {
 
   p.draw = function () {
     if (data) {
+      p.clear();
       const moonPhase = data[0].phase;
       const progress = getTimeProgress();
       p.noStroke();
@@ -58,7 +59,7 @@ export default function sketch(p) {
           p.ellipse(p.windowWidth / 2, p.windowHeight / 2, 500);
           p.fill(255, 245, 200);
           ratio = calcRatio(data[0].date, data[1].date, ratio);
-          p.arc(p.windowWidth / 2, p.windowHeight / 2, 500, 500, p.HALF_PI, p.HALF_PI + p.PI);
+          p.arc(p.windowWidth / 2, (p.windowHeight / 2), 500, 500, p.HALF_PI, p.HALF_PI + p.PI);
           p.arc(p.windowWidth / 2, p.windowHeight / 2, (500 - (ratio / 500)), 500, p.HALF_PI + p.PI, p.HALF_PI);
           if ((500 - (ratio / 500)) == 0) {
             data[0].phase = "Last Quarter";

src/components/Sun.jsx

@@ -0,0 +1,25 @@
+export default function sketch(p) {
+    let x = 0;
+    let y = 0;
+
+    let daysUntilEclipse;
+
+    p.draw = function() {
+        if (daysUntilEclipse) {
+            p.clear();
+            p.fill('yellow');
+            p.ellipse((p.windowWidth/2 + daysUntilEclipse*-20), p.windowHeight/2, 500, 500);
+        }
+    }
+
+    p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
+        if (props.daysUntilEclipse) {
+            daysUntilEclipse = props.daysUntilEclipse;
+        }
+    }
+
+    p.setup = function() {
+        p.createCanvas(p.windowWidth, p.windowHeight);
+    }
+
+}