The Fancy N

commit ba54156da923c1e2e29f6f91d84303bc334e1b54 Author: Greenscreener Date: Fri Jun 21 17:28:55 2019 +0200 Initial commit Grnscrnr's live version diff --git a/controller/controller.html b/controller/controller.html new file mode 100644 index 0000000..0a23da8 --- /dev/null +++ b/controller/controller.html @@ -0,0 +1,22 @@ + + + + + The Fancy N + + + + + + + +

+n +

+ + diff --git a/controller/controller.js b/controller/controller.js new file mode 100644 index 0000000..fb48f28 --- /dev/null +++ b/controller/controller.js @@ -0,0 +1,50 @@ +let mouseDown = false; +let mouseDownEver = false; +document.onmousedown = function(e) { + if (e.button === 0) { + mouseDown = true; + mouseDownEver = true; + } +}; +document.onmouseup = function(e) { + if (e.button === 0) { + mouseDown = false; + document.getElementById("slingshot").classList.add("ungrabbed"); + } +}; +document.ontouchend = function(e) { + document.getElementById("slingshot").classList.add("ungrabbed"); +}; +document.ontouchstart = function(e) { + e.preventDefault(); + e.stopPropagation(); +}; +function distance(p1, p2) { + return Math.sqrt((p1.x-p2.x)**2 + (p1.y-p2.y)**2); +} + +document.addEventListener("mousemove", (e) => { + if (mouseDown) { + document.getElementById("slingshot").classList.remove("ungrabbed"); + cursorX = e.pageX; + cursorY = window.innerHeight - e.pageY; + const slingshot = document.getElementById("slingshot"); + slingshot.style.width = distance({x: cursorX, y: cursorY}, { + x: window.innerWidth / 2, + y: window.innerHeight / 2 + }) + "px"; + const angle = cursorX >= window.innerWidth / 2 ? -Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) : (-Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) - Math.PI); + slingshot.style.transform = "rotate(" + angle + "rad)"; + } +}); + + +document.addEventListener("touchmove", (e) => { + document.getElementById("slingshot").classList.remove("ungrabbed"); + cursorX = e.touches[0].clientX; + cursorY = window.innerHeight - e.touches[0].clientY; + const slingshot = document.getElementById("slingshot"); + slingshot.style.width = distance({x: cursorX, y: cursorY}, {x: window.innerWidth/2, y: window.innerHeight/2}) + "px"; + const angle = cursorX >= window.innerWidth/2 ? -Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) : (-Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) - Math.PI); + slingshot.style.transform = "rotate(" + angle + "rad)"; +}); \ No newline at end of file diff --git a/controller/main.css b/controller/main.css new file mode 100644 index 0000000..3a7d257 --- /dev/null +++ b/controller/main.css @@ -0,0 +1,52 @@ +.anN { + font-family: 'Roboto Slab', serif; + font-size: xx-large; + margin: 0; + padding: 0; + position: fixed; } + +#slingshot { + position: fixed; + height: 20px; + left: 50%; + top: calc(50% - 10px); + width: 50px; + border: saddlebrown solid 5px; + border-right: chocolate solid 15px; + border-left: #3e1f12 solid 5px; + text-align: right; + font-family: 'Roboto Slab', serif; + font-size: 23px; + line-height: 0px; + writing-mode: vertical-rl; + transform: rotate(90deg); + transform-origin: left center; + -webkit-touch-callout: none; + /* iOS Safari */ + -webkit-user-select: none; + /* Safari */ + -khtml-user-select: none; + /* Konqueror HTML */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* Internet Explorer/Edge */ + user-select: none; + /* Non-prefixed version, currently supported by Chrome and Opera */ } + #slingshot.ungrabbed { + width: 0 !important; + transition: width 0.1s cubic-bezier(0.02, 0.9, 0.64, 0.98); } + #slingshot.ungrabbed > .n { + animation: n-fling .2s ease-out .1s; } +@keyframes n-fling { + 0% { + right: 0; } + 50% { + right: 100px; } + 100% { + right: 0; } } + #slingshot .n { + position: relative; + right: 0px; } + +/*# sourceMappingURL=main.css.map */ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4937473 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + The Fancy N + + + + + + +

+ + diff --git a/main.css b/main.css new file mode 100644 index 0000000..3a7d257 --- /dev/null +++ b/main.css @@ -0,0 +1,52 @@ +.anN { + font-family: 'Roboto Slab', serif; + font-size: xx-large; + margin: 0; + padding: 0; + position: fixed; } + +#slingshot { + position: fixed; + height: 20px; + left: 50%; + top: calc(50% - 10px); + width: 50px; + border: saddlebrown solid 5px; + border-right: chocolate solid 15px; + border-left: #3e1f12 solid 5px; + text-align: right; + font-family: 'Roboto Slab', serif; + font-size: 23px; + line-height: 0px; + writing-mode: vertical-rl; + transform: rotate(90deg); + transform-origin: left center; + -webkit-touch-callout: none; + /* iOS Safari */ + -webkit-user-select: none; + /* Safari */ + -khtml-user-select: none; + /* Konqueror HTML */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* Internet Explorer/Edge */ + user-select: none; + /* Non-prefixed version, currently supported by Chrome and Opera */ } + #slingshot.ungrabbed { + width: 0 !important; + transition: width 0.1s cubic-bezier(0.02, 0.9, 0.64, 0.98); } + #slingshot.ungrabbed > .n { + animation: n-fling .2s ease-out .1s; } +@keyframes n-fling { + 0% { + right: 0; } + 50% { + right: 100px; } + 100% { + right: 0; } } + #slingshot .n { + position: relative; + right: 0px; } + +/*# sourceMappingURL=main.css.map */ diff --git a/main.js b/main.js new file mode 100644 index 0000000..c5bd0ef --- /dev/null +++ b/main.js @@ -0,0 +1,132 @@ +function distance(p1, p2) { + return Math.sqrt((p1.x-p2.x)**2 + (p1.y-p2.y)**2); +} +function directionalScale(p1, value) { + if (Math.abs(p1.x) >= Math.abs(p1.y)) { + const k = Math.abs(p1.x)/Math.abs(p1.y); + const output = {}; + output.x = Math.sign(p1.x)*value; + output.y = Math.sign(p1.y)*value*k; + return output; + } else { + const k = Math.abs(p1.y)/Math.abs(p1.x); + const output = {}; + output.y = Math.sign(p1.y)*value; + output.x = Math.sign(p1.x)*value*k; + return output; + } +} +class N { + constructor(world, mass=1, x=0, y=window.innerHeight - 43, bounce=0.7) { + this.pos = {}; + this.vel = {}; + world.addObject(this); + this.world = world; + this.mass = mass || 1; + this.pos.x = x || 0; + this.pos.y = y || window.innerHeight - 43; + this.vel.x = 0; + this.vel.y = 0; + this.bounce = bounce; + this.element = document.createElement("div"); + this.element.classList.add("anN"); + this.element.innerText = "n"; + document.body.appendChild(this.element); + + } + draw() { + this.vel.y -= this.world.gravity; + this.vel.x -= this.vel.x < 0 ? -this.world.airResistance * this.vel.x**2 : this.world.airResistance * this.vel.x**2; + this.vel.y -= this.vel.y < 0 ? -this.world.airResistance * this.vel.y**2 : this.world.airResistance * this.vel.y**2; + this.pos.x += this.vel.x; + this.pos.y += this.vel.y; + if (this.pos.x < 0 || this.pos.x > (window.innerWidth - 20)) { + this.vel.x = -this.vel.x*this.bounce; + this.vel.y = this.vel.y*this.bounce; + if (this.pos.x < 0) { + this.pos.x = 0; + } else { + this.pos.x = window.innerWidth - 20; + } + } + if (this.pos.y < -9 || this.pos.y > (window.innerHeight - 25)) { + this.vel.y = -this.vel.y*this.bounce; + this.vel.x = this.vel.x*this.bounce; + if (this.pos.y < -9) { + this.pos.y = -9; + } else { + this.pos.y = window.innerHeight - 25; + } + } + /*if (mouseDown) { + if (distance(this.pos, {x: cursorX, y: cursorY}) > 5) { + const force = directionalScale({ + x: cursorX - this.pos.x, + y: cursorY - this.pos.y + }, distance(this.pos, {x: cursorX, y: cursorY}) ** -1); + this.vel.x += force.x * 1; + document.getElementById("xForce").value = force.x+1; + this.vel.y += force.y * 1; + document.getElementById("yForce").value = force.y+1; + } else { + this.vel.x = 0; + this.vel.y = 0; + } + }*/ + if (mouseDown) { + this.nudge((cursorX - this.pos.x)/50, (cursorY - this.pos.y)/50); + } + this.element.style.left = this.pos.x + "px"; + this.element.style.bottom = this.pos.y + "px"; + } + nudge(x=0,y=0) { + this.vel.x += x; + this.vel.y += y; + } + +} +class World { + draw() { + this.objects.forEach(e => e.draw()); + } + addObject(object) { + this.objects.push(object); + } + constructor(gravity=1, airResistance) { + this.gravity = gravity; + this.airResistance = airResistance || 0.001; + this.objects = []; + } +} +let world; +let n; +let cursorX; +let cursorY; +let mouseDown = false; +let mouseDownEver = false; +document.onmousedown = function(e) { + if (e.button === 0) { + mouseDown = true; + mouseDownEver = true; + document.getElementById("hint").innerText = ""; + } +}; +document.onmouseup = function(e) { + if (e.button === 0) { + mouseDown = false; + } +}; +document.addEventListener("DOMContentLoaded", () => { + world = new World(); + n = new N(world); + setInterval(() => {world.draw()}, 10); + setTimeout(() => { + if (!mouseDownEver) { + document.getElementById("hint").innerText = "This works best on a PC. Try clicking/holding your mouse. ;)" + } + }, 3000) +}); +document.addEventListener("mousemove", (e) => { + cursorX = e.pageX; + cursorY = window.innerHeight - e.pageY; +}); \ No newline at end of file