diff --git a/cancer-zodiac/index.html b/cancer-zodiac/index.html new file mode 100755 index 0000000..8574afd --- /dev/null +++ b/cancer-zodiac/index.html @@ -0,0 +1,169 @@ + + + + + + + + Weird Pusheen's Cancer Zodiak + + + + +
+ +
+ + + + + + + + + + +
+
+
+
+

Cancer,

+

+ +

+

+ +

+
+
+

Crabs: Your Spiky Space Friends

+

+ There is astrological reason to believe crabs are actually superintelligent spiky space friends from space! +

+ +
+
+
+
+ +
+
+
+

Mercury

+

+ Mercury is the first planet from our star, Sol! It is almost as small as Earth's moon. It is largely made of iron, and is pocked with craters. +

+
+ +
+
+
+

Venus

+

+ Venus is the second planet from Sol. It is very hot - massive clouds of carbon dioxide (the same greenhouse gas fueling Earth's global warming) and sulfuric acid blanket the surface. + Highs are in the low 450s celcius! The acid rain will burn and even melt your skin, so make sure to bring an umbrella. +

+
+ +
+
+ + +
+

Earth

+

+ Earth is the third planet from Sol and the only planet known to host life in our solar system! It's where spiky space friends live. +

+
+
+
+ +
+

Mars

+

+ Mars is the fourth planet from Sol. It's very cold, despite the carbon dioxide atmosphere (which is some 100 times thinner than that of Earth), because it is very far from the sun. +

+
+
+
+ +
+

Jupiter

+

+ Jupiter is the fifth planet from Sol. It is the largest planet in the solar system; more than twice as massive as all the other planets combined. Jupiter has 95 moons! +

+
+
+
+ +
+

Saturn

+

+ Saturn is the 6th planet from Sol. It is famous for its large and prevalent rings, which are mostly made of ice and dust. +

+
+
+
+ +
+

Uranus

+

+ Uranus is the 7th planet from Sol. It is mostly made of water, methane, and ammonia, and has a small rocky core. Uranus gets very hot towards the center. +

+
+
+
+ +
+

Neptune

+

+ Neptune is the final planet in the solar system. It is large and windy, and orbits every 165 years. It is not visible from Earth, as it is over 30 times further from the sun than our home planet. +

+
+
+
+
+
+

+ (distances are not to scale)
+ The solar system is big. Really big. And the rest of space is even bigger.
+ You scrolled at an average of pixels per second down this page, or kilometers per hour through the + solar system tour. At that speed, you would reach Beta Cancri (the primary star of the Cancer constellation) in years.

+ At the fastest I can scroll, the entire human species could evolve again in the time it takes to scroll to the Cancer constellation. Maybe we'll get there - but it won't be soon.

+

+
+
+
+
+
+

+ Web design by Tyler Clarke (weird_pusheen). Headings use the "My Earth Regular" font.

+ This is an entry into the Purpose42 art expo for July, themed around zodiac signs. It is not meant to be taken as a serious source of information. Crabs + are not, in fact, superintelligent spiky space friends from space.

+ This is FOSS and protected by GNU GPLv3. You are free to use any element of it in your own projects, so long as they also are FOSS and provide credit to me. +

+ All rights preserved. Trespassers will be violated.

+ +

+
+
+ + + + diff --git a/cancer-zodiac/main.css b/cancer-zodiac/main.css new file mode 100755 index 0000000..2177c92 --- /dev/null +++ b/cancer-zodiac/main.css @@ -0,0 +1,221 @@ +@font-face { + font-family: "My Earth Regular"; + src: url("res/MyEarthRegular.otf"); +} + +body { + margin: 0px; + padding: 0px; + font-family: sans-serif; +} + +@keyframes shimmer { + 0% { + transform: scale(0.1); + } + 100% { + transform: scale(0.2); + } +} + +#starfield { + background-color: rgb(7, 0, 31); + position: fixed; + top: 0px; + left: 0px; + width: 100vw; + height: 100vh; + overflow: hidden; + z-index: -1; +} + +.shiny-star { + background-image: url("res/shiny.svg"); + background-size: cover; + width: 65px; + height: 100px; + position: absolute; + animation-name: shimmer; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; + transition: opacity 2s; + opacity: 100%; +} + +.star { + width: 2px; + height: 2px; + border-radius: 100px; + background-color: white; + position: absolute; +} + +#cancer-sprite { + position: absolute; + right: 20vw; + top: 15vh; +} + +#cancer-sprite > * { + position: absolute; + top: 0px; + left: 0px; +} + +#c2-lines { + --linespoint: 0px; + filter: drop-shadow(0px 0px 10px white); +} + +#c2-lines path { + stroke-dasharray: var(--linespoint) 1000000px !important; +} + +#c3-crab { + --crab-visibility: 0%; + opacity: var(--crab-visibility); + transform: translate(-20px, -20px); + transition: transform 1s; +} + +#c3-crab.dropped { + transform: translate(-20px, 200px); + z-index: 1000; +} + +#c3-crab.scootleft { + transform: translate(-70vw, 200px); + transition: transform 2s; +} + +#c3-crab.scootaway { + transform: translate(-130vw, 200px); + transition: transform 2s; +} + +h1, h2 { + color: blue; + font-family: "My Earth Regular"; +} + +h1 { + font-size: 5em; +} + +h2 { + font-size: 4em; +} + +p, ul { + font-size: 1.5em; + color: white; +} + +.content-simple-left { + background-color: rgba(255, 255, 255, 0.15); + padding-left: 20vw; + padding-right: 40vw; + padding-top: 20vh; + padding-bottom: 20vh; +} + +.content-simple-right { + padding-left: 50vw; + padding-right: 10vw; + padding-top: 20vh; + padding-bottom: 20vh; +} + +#bottom { + background-color: black; + text-align: center; + padding-left: 20vw; + padding-right: 20vw; + padding: 10px; + color: white; + font-size: 0.8em; +} + +a { + text-decoration: none; + color: inherit; + text-shadow: 0px 0px 3px blue; +} + +.shiny-star.disjoint { + position: fixed; + opacity: 0%; +} + +#planets { + height: calc(4200px); + width: 100vw; + overflow: clip; +} + +#planets > div > div { + --transform-offset: 0px; + --scroll-point: inherit; + transform: translateZ(calc(var(--scroll-point) * -3px - 200vh + var(--transform-offset))); + position: absolute; +} + +#planets > div { + perspective: 100px; + transform-style: preserve-3d; + height: 100vh; + width: 100vw; + position: sticky; + top: 0px; + left: 0px; +} + +.planetinfo { + background-color: rgba(255, 255, 255, 0.15); + padding: 50px; + position: absolute; + top: 100%; + width: 50vw; +} + +@keyframes moonspin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +} + +.moon { + position: absolute; + top: 0px; + left: 0px; + animation-name: moonspin; + animation-duration: 2s; /* 30rpm */ + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +#tobetacanceri { + background-color: black; + padding: 100px; + padding-top: 40vh; + color: white; + font-family: monospace; + min-height: 100vh; +} + +#tobetacanceri > * { + opacity: calc(100% - 5 * var(--scroll-point)); +} + +#thebridge { + width: 100vw; + height: 100vh; + position: sticky; + top: 0px; + padding: 200px; + box-sizing: border-box; +} \ No newline at end of file diff --git a/cancer-zodiac/main.js b/cancer-zodiac/main.js new file mode 100755 index 0000000..195a639 --- /dev/null +++ b/cancer-zodiac/main.js @@ -0,0 +1,161 @@ +const c2lines = document.getElementById("c2-lines"); +const c3crab = document.getElementById("c3-crab"); +const spikyspacefriends = document.getElementById("spiky-space-friends"); +const doc = document.documentElement; +const astroevent = document.getElementById("astroevent"); +const astroconclusion = document.getElementById("astroconclusion"); +const planets = document.getElementById("planets"); +const planet_divs = Array.from(document.querySelectorAll("#planets > div > div")); +const tobetacanceri = document.getElementById("tobetacanceri"); +const thebridge = document.getElementById("thebridge"); +const c3crab_animation = [ + "res/cancer-crab.svg", + "res/cancer-crabwalk.svg" +]; +var c3crab_frame = 0; + +var scrollDelta = 0; // total pixels scrolled +var scrollDt = 0; // total time spent scrolling + +var lastScPos = 0; +var lTime = window.performance.now(); + +window.onscroll = () => { + c2lines.style.setProperty("--linespoint", doc.scrollTop * 0.05 + "px"); + c3crab.style.setProperty("--crab-visibility", (doc.scrollTop - 600) * 0.1 + "%"); // this means that we need 1600 pixels of scroll to complete the animation + // 600 + 100% / 0.1% = 1600 + if (doc.scrollTop >= 1600) { + c3crab.classList.add("dropped"); + } + else { + c3crab.classList.remove("dropped"); + } + + var spikyrect = spikyspacefriends.getBoundingClientRect(); + if (spikyrect.top < window.innerHeight * 0.6) { + c3crab.classList.add("scootleft"); + } + else { + c3crab.classList.remove("scootleft"); + } + + if (spikyrect.bottom < 0) { + c3crab.classList.add("scootaway"); + c3crab.classList.remove("scootleft"); + c3crab.classList.remove("dropped"); + } + else { + c3crab.classList.remove("scootaway"); + } + + document.body.style.setProperty("--scroll-point", doc.scrollTop); + var rect = planets.getBoundingClientRect(); + planets.style.setProperty("--scroll-point", rect.top); + + var considering = true; + for (x in planet_divs) { + var planet = planet_divs[x]; + var hider = planet.getElementsByClassName("planetinfo"); + if (hider.length) { + hider = hider[0]; + } + else { + continue; + } + hider.style.display = "none"; + if (considering) { + var z = rect.top * -3 - 2 * window.innerHeight + parseInt(planet.style.getPropertyValue("--transform-offset")); + if (z < 0) { + planet.getElementsByClassName("planetinfo")[0].style.display = ""; + considering = false; + } + } + } + tobetacanceri.style.setProperty("--scroll-point", 100 * tobetacanceri.getBoundingClientRect().top / window.innerHeight + "%"); + + var cTime = window.performance.now() + scrollDelta += Math.abs(lastScPos - doc.scrollTop); + scrollDt += cTime - lTime; + + lTime = cTime; + lastScPos = doc.scrollTop; + + var pixPSec = scrollDelta / scrollDt * 1000; + var kmPHr = ((pixPSec / 3000) // solar system fields from earth to neptune per second + / 3600) // per hour + * 4_500_000_000; // the solar system field from earth to neptune is 4.5 billion kilometers + + var hrtoBC = 2.746e15 / kmPHr; + var ytoBC = hrtoBC / 8760; + + document.getElementById("rawscroll").innerText = Math.round(pixPSec); + document.getElementById("scrollkph").innerText = Math.round(kmPHr); + document.getElementById("yearstobetacanceri").innerText = Math.round(ytoBC); + + var thebridge_scrollup = thebridge.parentNode.getBoundingClientRect().top * -1; + if (thebridge_scrollup < 0) { + thebridge_scrollup = 0; + } + thebridge.parentNode.style.backgroundColor = "rgba(0, 0, 0, " + (1 - thebridge_scrollup / window.innerHeight) + ")"; + thebridge.style.opacity = thebridge_scrollup / window.innerHeight * 100 + "%"; +} + +var c3crab_interval = -1; + +c3crab.addEventListener("transitionrun", () => { + if (c3crab_interval == -1) { + c3crab_interval = setInterval(() => { + c3crab_frame++; + c3crab.src = c3crab_animation[c3crab_frame % c3crab_animation.length]; + }, 100); + } +}); + +c3crab.addEventListener("transitionend", () => { + clearInterval(c3crab_interval); + c3crab_frame = 0; + c3crab.src = c3crab_animation[0]; + c3crab_interval = -1; +}); + + +let astrothings = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto", "The Moon", "Capricorn", "Aquarius", + "Pisces", "Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Ophiuchus", "Saggitarius" +]; + +const events = ["rising in", "waning in", "waxing in", "converging with"]; + +function arpick(array) { + let index = Math.floor(Math.random() * array.length); + return array.splice(index, 1)[0]; +} + +const things = [ + "you must tread carefully today.", + "you will find a pleasant surprise!", + "you will meet a ten-thousand-pound rhino named Desmond today.", + "great opportunities are hiding around every corner.", + "you must not be afraid to take a leap of faith." +]; + +astroevent.innerHTML = "Because " + arpick(astrothings) + " is " + arpick(events) + " " + arpick(astrothings) + ","; +astroconclusion.innerHTML = arpick(things); + +Array.from(document.getElementsByTagName("p")).forEach(a => { + a.addEventListener("mouseover", (evt) => { + //if (Math.random() < 0.15) { + var shiny = document.createElement("div"); + shiny.classList.add("shiny-star"); + requestAnimationFrame(() => { + shiny.classList.add("disjoint"); + }); + document.body.appendChild(shiny); + shiny.style.left = evt.clientX + 20 * Math.random() - 30 + "px"; + shiny.style.top = evt.clientY + 20 * Math.random() - 50 + "px"; + shiny.style.animationDelay = -Math.random() * 2 + "s"; + setTimeout(() => { + document.body.removeChild(shiny); + }, 2000); + //} + }); +}); \ No newline at end of file diff --git a/cancer-zodiac/res/MyEarthRegular-9YBpL.ttf b/cancer-zodiac/res/MyEarthRegular-9YBpL.ttf new file mode 100755 index 0000000..583732b Binary files /dev/null and b/cancer-zodiac/res/MyEarthRegular-9YBpL.ttf differ diff --git a/cancer-zodiac/res/MyEarthRegular.otf b/cancer-zodiac/res/MyEarthRegular.otf new file mode 100755 index 0000000..91095ed Binary files /dev/null and b/cancer-zodiac/res/MyEarthRegular.otf differ diff --git a/cancer-zodiac/res/cancer-crab.svg b/cancer-zodiac/res/cancer-crab.svg new file mode 100755 index 0000000..7626410 --- /dev/null +++ b/cancer-zodiac/res/cancer-crab.svg @@ -0,0 +1,338 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/cancer-crabwalk.svg b/cancer-zodiac/res/cancer-crabwalk.svg new file mode 100755 index 0000000..8d87e13 --- /dev/null +++ b/cancer-zodiac/res/cancer-crabwalk.svg @@ -0,0 +1,335 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/cancer-lines.svg b/cancer-zodiac/res/cancer-lines.svg new file mode 100755 index 0000000..1d1b19d --- /dev/null +++ b/cancer-zodiac/res/cancer-lines.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + diff --git a/cancer-zodiac/res/cancer-stars.svg b/cancer-zodiac/res/cancer-stars.svg new file mode 100755 index 0000000..21cc868 --- /dev/null +++ b/cancer-zodiac/res/cancer-stars.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/earth.svg b/cancer-zodiac/res/earth.svg new file mode 100755 index 0000000..6f6c128 --- /dev/null +++ b/cancer-zodiac/res/earth.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/earth_moon.svg b/cancer-zodiac/res/earth_moon.svg new file mode 100755 index 0000000..8ed710b --- /dev/null +++ b/cancer-zodiac/res/earth_moon.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/info.txt b/cancer-zodiac/res/info.txt new file mode 100755 index 0000000..99300b4 --- /dev/null +++ b/cancer-zodiac/res/info.txt @@ -0,0 +1,2 @@ +license: Freeware, Non-Commercial +link: https://www.fontspace.com/my-earth-font-f49502 \ No newline at end of file diff --git a/cancer-zodiac/res/jupiter.svg b/cancer-zodiac/res/jupiter.svg new file mode 100755 index 0000000..b2ec7c5 --- /dev/null +++ b/cancer-zodiac/res/jupiter.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/mars.svg b/cancer-zodiac/res/mars.svg new file mode 100755 index 0000000..6ea88df --- /dev/null +++ b/cancer-zodiac/res/mars.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/mercury.svg b/cancer-zodiac/res/mercury.svg new file mode 100755 index 0000000..39da9b3 --- /dev/null +++ b/cancer-zodiac/res/mercury.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/neptune.svg b/cancer-zodiac/res/neptune.svg new file mode 100755 index 0000000..be4ef04 --- /dev/null +++ b/cancer-zodiac/res/neptune.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/saturn.svg b/cancer-zodiac/res/saturn.svg new file mode 100755 index 0000000..0f19fb5 --- /dev/null +++ b/cancer-zodiac/res/saturn.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/shiny.svg b/cancer-zodiac/res/shiny.svg new file mode 100755 index 0000000..3bf0b85 --- /dev/null +++ b/cancer-zodiac/res/shiny.svg @@ -0,0 +1,48 @@ + + + + + + + + + + diff --git a/cancer-zodiac/res/sun.svg b/cancer-zodiac/res/sun.svg new file mode 100755 index 0000000..ff4daa3 --- /dev/null +++ b/cancer-zodiac/res/sun.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/uranus.svg b/cancer-zodiac/res/uranus.svg new file mode 100755 index 0000000..85358d3 --- /dev/null +++ b/cancer-zodiac/res/uranus.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + diff --git a/cancer-zodiac/res/venus.svg b/cancer-zodiac/res/venus.svg new file mode 100755 index 0000000..e0c5b54 --- /dev/null +++ b/cancer-zodiac/res/venus.svg @@ -0,0 +1,195 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cancer-zodiac/starfield.js b/cancer-zodiac/starfield.js new file mode 100755 index 0000000..80ac685 --- /dev/null +++ b/cancer-zodiac/starfield.js @@ -0,0 +1,23 @@ +// randomly generate a star field on page load +// it maintains an average of 1 shiny star per 10 square dekapixels and 1 regular star per 2 square dekapixels +// a square dekapixel is 10,000 pixels, 100 to a side + +const WINDOW_DEKAPIXELS = window.innerWidth * window.innerHeight / 10_000; +const starfield = document.getElementById("starfield"); + +for (var x = 0; x < WINDOW_DEKAPIXELS / 10; x++) { // 1 shiny star per 10 dekapixels + var shiny = document.createElement("div"); + shiny.classList.add("shiny-star"); + starfield.appendChild(shiny); + shiny.style.left = window.innerWidth * Math.random() + "px"; + shiny.style.top = window.innerHeight * Math.random() + "px"; + shiny.style.animationDelay = -Math.random() * 2 + "s"; +} + +for (var x = 0; x < WINDOW_DEKAPIXELS / 2; x++) { + var star = document.createElement("div"); + star.classList.add("star"); + starfield.append(star); + star.style.left = window.innerWidth * Math.random() + "px"; + star.style.top = window.innerHeight * Math.random() + "px"; +} \ No newline at end of file diff --git a/site/index.html b/site/index.html index 751bfb8..18bf6c7 100644 --- a/site/index.html +++ b/site/index.html @@ -3,7 +3,7 @@ [=cards-] [=+-]

- Hiya there! My name is Tyler Clarke, but I also go by weird_pusheen online. I'm a physics student at the Georgia Institute of Technology in Atlanta. I'm also a mostly self-taught software engineer + Hiya there! My name is Tyler Clarke, but I also go by weird_pusheen online. I'm a mostly self-taught software engineer and an OSS maintainer. This is my website!