commit ac1761b2150594e36d050a60480c497e8e5cda40 Author: Benjamin Kraft Date: Sun Mar 19 10:39:27 2023 +0100 Init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c6ef218 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea + diff --git a/project.json b/project.json new file mode 100644 index 0000000..c533ec5 --- /dev/null +++ b/project.json @@ -0,0 +1,6 @@ +{ + "display_name": "Doppler effect", + "info_text": "Graphical demonstration of the Doppler effect.", + "visible": false, + "tags": ["Simulation", "Maths"] +} \ No newline at end of file diff --git a/public/data/images/favicon.ico b/public/data/images/favicon.ico new file mode 100644 index 0000000..3172667 Binary files /dev/null and b/public/data/images/favicon.ico differ diff --git a/public/data/scripts/doppler.js b/public/data/scripts/doppler.js new file mode 100644 index 0000000..c3a9d8f --- /dev/null +++ b/public/data/scripts/doppler.js @@ -0,0 +1,154 @@ +class Doppler{ + + constructor(){ + this.waves = []; + this.source = new Source(this.waves); + this.vel = 1; + } + + update(){ + let wavesToRemove = [] + this.waves.forEach(w => w.update(this.vel, wavesToRemove)); + wavesToRemove.forEach((w, i) => this.waves.splice(i, 1)); + this.source.update(this.vel); + } + + updateMode(){ + let mode = $('#mode_holder input[name=mode]:checked').val(); + console.log('New mode: ' + mode); + this.source.mode = mode; + this.source.reset(); + } + + display(){ + this.waves.forEach(w => w.display()); + this.source.display(); + } + +} + +class Source{ + + constructor(waves){ + this.waves = waves; + this.radius = 20; + this.pos = createVector(width / 4, height / 2); + this.vel = createVector(10, 0); + this.angle = 0; + } + + reset(){ + this.pos = createVector(width / 4, height / 2); + this.vel = createVector(10, 0); + this.angle = 0; + } + + update(vel){ + this.angle += 0.03 * vel; + this.move(vel); + + if (mouseIsPressed) + this.trySendWave(vel); + } + + move(vel){ + let x, y, size; + + switch (this.mode){ + case MODE.FREE: + x = mouseX; + y = mouseY; + break; + case MODE.STRAIGHT_LEFT: + x = this.pos.x - this.vel.x * vel; + y = height / 2; + if (x < 0) + x = width; + break; + case MODE.STRAIGHT_RIGHT: + x = this.pos.x + this.vel.x * vel; + y = height / 2; + if (x > width) + x = 0; + break; + case MODE.STRAIGHT_BOTH: + x = this.pos.x + this.vel.x * vel; + y = height / 2; + if (x < 0 || x > width) + this.vel.x *= -1; + break; + case MODE.SMOOTH_HORIZONTAL: + size = Math.min(width, height) * 0.8; + x = width / 2 + sin(this.angle) * size / 2; + y = height / 2; + break; + case MODE.SMOOTH_VERTICAL: + size = Math.min(width, height) * 0.8; + x = width / 2; + y = height / 2 + cos(this.angle) * size / 2; + break; + case MODE.CIRCLE: + size = Math.min(width, height) * 0.8; + x = width / 2 + sin(this.angle) * size / 2; + y = height / 2 + cos(this.angle) * size / 2; + break; + } + this.pos.x = x; + this.pos.y = y; + } + + trySendWave(vel){ + if (frameCount % int(2 / vel) === 0){ + this.waves.push(new Wave(this.pos.x, this.pos.y, this.radius)); + } + } + + display(){ + fill(255, 0, 0); + stroke(255, 0, 0); + strokeWeight(1); + ellipse(this.pos.x, this.pos.y, this.radius, this.radius); + } + +} + +class Wave{ + + constructor(x, y, r){ + this.pos = createVector(x, y); + this.radius = r; + this.vel = 35; + } + + get isRemoveable(){ + return this.radius > width * 2.1; + } + + update(vel, removeables){ + this.grow(vel); + if (this.isRemoveable) + removeables.push(this); + } + + grow(vel){ + this.radius += this.vel * vel; + } + + display(){ + noFill(); + stroke(255); + strokeWeight(1); + ellipse(this.pos.x, this.pos.y, this.radius, this.radius); + } + +} + +let MODE = { + FREE: 'free', + STRAIGHT_LEFT: 'straight_left', + STRAIGHT_RIGHT: 'straight_right', + STRAIGHT_BOTH: 'straight_both', + SMOOTH_HORIZONTAL: 'smooth_horizontal', + SMOOTH_VERTICAL: 'smooth_vertical', + CIRCLE: 'circle' +} \ No newline at end of file diff --git a/public/data/scripts/events.js b/public/data/scripts/events.js new file mode 100644 index 0000000..e9919a2 --- /dev/null +++ b/public/data/scripts/events.js @@ -0,0 +1,25 @@ +'use strict'; + +function keyPressed(){ + +} + +function keyReleased(){ + +} + +function mouseMoved(){ + +} + +function mouseDragged(){ + +} + +function mousePressed(){ + +} + +function mouseReleased(){ + +} \ No newline at end of file diff --git a/public/data/scripts/init.js b/public/data/scripts/init.js new file mode 100644 index 0000000..fc39be4 --- /dev/null +++ b/public/data/scripts/init.js @@ -0,0 +1,81 @@ +'use strict'; + +let debug = false, + font, + localSettings, + loader; + +//Only for online games +let socket; + +let antiCacheQuery = '?_=' + new Date().getTime(); + + +let doppler; + + +function preload(){ + localSettings = loadJSON('data/settings/settings.json' + antiCacheQuery, json => { + console.log('Local settings loaded: ', json); + }, error => { + console.log('Local settings failed: ', error); + }); + + font = loadFont('data/styles/fonts/Tajawal/Tajawal-Regular.ttf' + antiCacheQuery, json => { + console.log('Local font loaded: ', json); + }, error => { + console.log('Local font failed: ', error); + }); + + loadJSON('data/settings/libraries.json', json => { + loadScripts(json); + console.log('BenjoCraeft library scripts loaded: ', json); + }); +} + +function setup(){ + canvasSetup(); + interfaceSetup(); + doppler = new Doppler(); + doppler.updateMode(); +} + +function draw(){ + background(30); + + if (doppler){ + doppler.update(); + doppler.display(); + } + + if (loader){ + loader.update(); + loader.display(); + } + + if (debug) debugInformation(); +} + +function canvasSetup(){ + setFrameRate(60); + let w = $('#canvas-holder').width(), + h = $('#canvas-holder').height(); + let canvas = createCanvas(w, h); + canvas.parent('canvas-holder'); + textFont(font); +} + +function interfaceSetup(){ + +} + +function loadScripts(libs){ + for (let script in libs){ + if (libs[script]){ + let url = '/lib/benjocraeft/' + script + '.js' + $.getScript(url, () => { + console.log('Successfully loaded script: ', url) + }); + } + } +} \ No newline at end of file diff --git a/public/data/scripts/online.js b/public/data/scripts/online.js new file mode 100644 index 0000000..13d3176 --- /dev/null +++ b/public/data/scripts/online.js @@ -0,0 +1,10 @@ +'use strict'; + +function socketConnect(project, name = "noone"){ + let urlQueries = '?game=' + project.name + '&name=' + name; + let port = 3000; + let url = location.hostname + ":" + port + urlQueries; + + socket = io.connect(url); + socket.on('connect', () => console.log('Connected to ', url)); +} \ No newline at end of file diff --git a/public/data/settings/libraries.json b/public/data/settings/libraries.json new file mode 100644 index 0000000..b5aa485 --- /dev/null +++ b/public/data/settings/libraries.json @@ -0,0 +1,8 @@ +{ + "collision": false, + "colorPicker": false, + "cookie": false, + "loader": false, + "prototypes": false, + "technical": false +} \ No newline at end of file diff --git a/public/data/settings/settings.json b/public/data/settings/settings.json new file mode 100644 index 0000000..01dad8a --- /dev/null +++ b/public/data/settings/settings.json @@ -0,0 +1,23 @@ +{ + "project": { + "name": "project_pattern", + "author": "BenjoCraeft", + "version": "0.0.0", + "playerCounts": [], + "online": { + "iceServers": [ + {"urls": "stun:stun.l.google.com:19302"}, + { + "urls": "turn:numb.viagenie.ca", + "credential": "muazkh", + "username": "webrtc@live.com" + } + ] + } + }, + "frameWork": { + "frameRate": 60, + "width": null, + "height": null + } +} \ No newline at end of file diff --git a/public/data/styles/color_picker.css b/public/data/styles/color_picker.css new file mode 100644 index 0000000..a5b510e --- /dev/null +++ b/public/data/styles/color_picker.css @@ -0,0 +1,88 @@ +#color_picker{ + width: 300px; + height: 25%; + margin: 20px; + margin-top: 50px; + border: 5px solid #000; + background-color: #000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: relative; +} +#color_picker_numeric{ + width: 80%; + padding: 5%; + margin: 5%; + background-color: #888; + border-radius: 10px; + overflow: hidden; +} +.color_picker_rgb{ + float: left; + width: 22%; + height: 35px; + font-size: 25px; + color: #000; +} +.color_picker_rgb:nth-child(1){ + margin-right: 10%; + margin-left: 3%; + background-color: #F00; + +} +.color_picker_rgb:nth-child(2){ + background-color: #0F0; +} +.color_picker_rgb:nth-child(3){ + margin-left: 10%; + background-color: #00F; + color: #FFF; +} +#color_picker_hex{ + width: 50%; + height: 30px; + font-size: 25px; + margin: 10% 25% 0 25%; +} +#saturation{ + position: relative; + width: calc(100% - 33px); + height: 100%; + background: linear-gradient(to right, #FFF 0%, #F00 100%); + float: left; + margin-right: 6px; +} +#value { + width: 100%; + height: 100%; + background: linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%); +} +#sb_picker{ + border: 2px solid; + border-color: #FFF; + position: absolute; + width: 14px; + height: 14px; + border-radius: 10px; + bottom: 50px; + left: 50px; + box-sizing: border-box; + z-index: 10; +} +#hue { + width: 27px; + height: 100%; + position: relative; + float: left; + background: linear-gradient(to bottom, #F00 0%, #F0F 17%, #00F 34%, #0FF 50%, #0F0 67%, #FF0 84%, #F00 100%); +} +#hue_picker { + position: absolute; + background: #000; + border-bottom: 1px solid #000; + top: 0; + width: 27px; + height: 2px; +} \ No newline at end of file diff --git a/public/data/styles/font.ttf b/public/data/styles/font.ttf new file mode 100644 index 0000000..199cf40 Binary files /dev/null and b/public/data/styles/font.ttf differ diff --git a/public/data/styles/fonts/Tajawal/OFL.txt b/public/data/styles/fonts/Tajawal/OFL.txt new file mode 100644 index 0000000..b389da1 --- /dev/null +++ b/public/data/styles/fonts/Tajawal/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2018 Boutros International. (https://www.boutrosfonts.com) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/public/data/styles/fonts/Tajawal/Tajawal-Black.ttf b/public/data/styles/fonts/Tajawal/Tajawal-Black.ttf new file mode 100644 index 0000000..19d52ed Binary files /dev/null and b/public/data/styles/fonts/Tajawal/Tajawal-Black.ttf differ diff --git a/public/data/styles/fonts/Tajawal/Tajawal-Bold.ttf b/public/data/styles/fonts/Tajawal/Tajawal-Bold.ttf new file mode 100644 index 0000000..159a3b5 Binary files /dev/null and b/public/data/styles/fonts/Tajawal/Tajawal-Bold.ttf differ diff --git a/public/data/styles/fonts/Tajawal/Tajawal-ExtraBold.ttf b/public/data/styles/fonts/Tajawal/Tajawal-ExtraBold.ttf new file mode 100644 index 0000000..c44b766 Binary files /dev/null and b/public/data/styles/fonts/Tajawal/Tajawal-ExtraBold.ttf differ diff --git a/public/data/styles/fonts/Tajawal/Tajawal-ExtraLight.ttf b/public/data/styles/fonts/Tajawal/Tajawal-ExtraLight.ttf new file mode 100644 index 0000000..5956e03 Binary files /dev/null and b/public/data/styles/fonts/Tajawal/Tajawal-ExtraLight.ttf differ diff --git a/public/data/styles/fonts/Tajawal/Tajawal-Light.ttf b/public/data/styles/fonts/Tajawal/Tajawal-Light.ttf new file mode 100644 index 0000000..95493f5 Binary files /dev/null and b/public/data/styles/fonts/Tajawal/Tajawal-Light.ttf differ diff --git a/public/data/styles/fonts/Tajawal/Tajawal-Medium.ttf b/public/data/styles/fonts/Tajawal/Tajawal-Medium.ttf new file mode 100644 index 0000000..5b7ec2b Binary files /dev/null and b/public/data/styles/fonts/Tajawal/Tajawal-Medium.ttf differ diff --git a/public/data/styles/fonts/Tajawal/Tajawal-Regular.ttf b/public/data/styles/fonts/Tajawal/Tajawal-Regular.ttf new file mode 100644 index 0000000..14394f9 Binary files /dev/null and b/public/data/styles/fonts/Tajawal/Tajawal-Regular.ttf differ diff --git a/public/data/styles/range_input.css b/public/data/styles/range_input.css new file mode 100644 index 0000000..1d7369c --- /dev/null +++ b/public/data/styles/range_input.css @@ -0,0 +1,88 @@ +input[type=range] { + -webkit-appearance: none; + margin: 18px 0; + width: 100%; +} +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + animate: 0.2s; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; +} +input[type=range]::-webkit-slider-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 36px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; + -webkit-appearance: none; + margin-top: -14px; +} +input[type=range]:focus::-webkit-slider-runnable-track { + background: #367ebd; +} +input[type=range]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + animate: 0.2s; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; +} +input[type=range]::-moz-range-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 36px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; +} +input[type=range]::-ms-track { + width: 100%; + height: 8.4px; + cursor: pointer; + animate: 0.2s; + background: transparent; + border-color: transparent; + border-width: 16px 0; + color: transparent; +} +input[type=range]::-ms-fill-lower { + background: #2a6495; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]::-ms-fill-upper { + background: #3071a9; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]::-ms-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 36px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; +} +input[type=range]:focus::-ms-fill-lower { + background: #3071a9; +} +input[type=range]:focus::-ms-fill-upper { + background: #367ebd; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..04f63c7 --- /dev/null +++ b/public/index.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + Doppler Effect + + +
+
+
+

Doppler Effect

+
+ Mode + + +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+ + \ No newline at end of file diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..956a1ca --- /dev/null +++ b/public/styles.css @@ -0,0 +1,70 @@ +a:link, a:hover, a:active, a:visited{color: #000;} + +html, body{margin: 0; padding: 0; height: 100%; width: 100%;} + +canvas{margin: 0; padding: 0; border: none; display: block;} + +button:hover{cursor: pointer;} + +@font-face{ + font-family: "Tajawal"; + src: url("data/styles/fonts/Tajawal/Tajawal-Regular.ttf"); +} + +:root{ + --if-width: 300px; + --if-b-width: 10px; + --c-width: calc(100vw - var(--if-width) - var(--if-b-width)); + --c-height: 100vh; +} + +/** + * Standard styles + */ + +#canvas-holder{ + position: absolute; + left: calc(var(--if-width) + var(--if-b-width)); + width: var(--c-width); + height: var(--c-height); +} +#canvas-holder canvas{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: inherit; +} +#p5_loading{ + display: none; +} + + +#interface{ + position: absolute; + left: 0; + top: 0; + width: 300px; + height: 100%; + border: 1px solid #000; + border-width: 0 var(--if-b-width) 0 0; + background-color: rgb(70, 70, 70); + + font-family: "Tajawal"; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +h1{ + font-size: 30px; + text-decoration: underline; +} + +#mode_holder{ + border: 5px solid #000; + font-size: 25px; +} \ No newline at end of file diff --git a/public/thumbnail.png b/public/thumbnail.png new file mode 100644 index 0000000..0ef9ba2 Binary files /dev/null and b/public/thumbnail.png differ