Add completed the sun, earth and moon

2021-07-24 23:56:07 -05:00
parent 3d408fac3a
commit 7a584896c9
6 changed files with 98 additions and 0 deletions
--- a/System/assets/earth.jpg
+++ b/System/assets/earth.jpg
--- a/System/assets/moon.jpg
+++ b/System/assets/moon.jpg
--- a/System/assets/sun.jpg
+++ b/System/assets/sun.jpg
--- a/System/index.html
+++ b/System/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  
+  <script src="p5.min.js"></script>
+  <script src="sketch.js"></script>
+</body>
+</html>
--- a/System/p5.min.js
+++ b/System/p5.min.js
--- a/System/sketch.js
+++ b/System/sketch.js
@ -0,0 +1,81 @@
+let sun;
+let earth;
+let moon;
+let myStars;
+let starsBack;
+
+function preload() {
+  sun = loadImage('/assets/sun.jpg');
+  earth = loadImage('/assets/earth.jpg');
+  moon = loadImage('/assets/moon.jpg');
+}
+
+function setup() {
+  createCanvas(900, 600, WEBGL);
+  angleMode(DEGREES);
+  myStars = new stars();
+  noStroke();
+  
+}
+
+function draw() {
+  background(0);
+  myStars.show(starsBack);
+
+  push();
+  texture(sun);
+  rotateY(frameCount / 3);
+  sphere(100, 30, 30);
+  pop();
+
+  pointLight(255, 255, 255, 0, 0, 0);
+  pointLight(255, 255, 255, 0, 0, 0);
+
+  push();
+  texture(earth);
+  translate(cos(frameCount/2) * 300, 0, sin(frameCount/2) * 300);
+  rotateY(frameCount / 2);
+  sphere(50, 30, 30);
+  pop();
+
+
+  push();
+  translate(cos(frameCount/2) * 300, 0, sin(frameCount/2) * 300);
+  translate(cos(frameCount * 2) * 100, 0, sin(frameCount * 2) * 100);
+  rotateY(frameCount);
+  texture(moon);
+  sphere(20, 30, 30);
+  pop();
+
+
+  camera(0, -250, 800);
+  //noLoop();
+}
+
+function stars() {
+  background(0);
+  starArray = [];
+  let maxLife = 500;
+  let starNum = 100;
+  for(let i=0; i<starNum; ++i)
+  {
+    let ranX = random(-width, width);
+    let ranY = random(-height, height);
+    starArray.push({x: ranX, y: ranY, life:random(Math.floor(maxLife*0.25), maxLife)});
+  }
+  this.show = function()
+  {
+    for(let i=0; i<starArray.length; ++i)
+    {
+      fill(255);
+      ellipse(starArray[i].x, starArray[i].y, 3, 3);
+      starArray[i].life += 1;
+      if(starArray[i].life >= maxLife)
+      {
+        starArray[i].x = random(-width, width);
+        starArray[i].y = random(-height, height);
+        starArray[i].life = 0;
+      }
+    }
+  }
+}