u/giogio_rick

basically, i’m making an svg, and i now need to find some coordinates for things rotated 45 degress, so i instantly tought that that point is sitting in the midway point on a circle of the 2 equivalents from other polygons, so basically i need the formula for getting the x,y coordinates on a plane of a point midway between 2 other x,y coordinates on a circle in order to finish my svg

edit: to clarify, i need to find the midway point on a circle centered on 32,32 on a 64x64 plane that has 0,0 in the top-left corner between 2 points that lie on that circle while only knowing the x,y coordinates of the points that lie on the circle and not the midway point between then on said circle with the midway point being the one on the shortest path between the 2 points

i am trying to make a small animation for opening the settings menu of a small site i’m making but it’s either the classList.add and .remove aren’t put in correctly or i’m just doing something wrong.

edit: forgot to say that what should happen is:

opening: menu turns from nothing to a line in the middle, then expands while the background fades id from the start of the second part of the menu animation

closing: menu shrinks to a line then to non existance while the background fades away in the 1st part of the menu animation

edit2: updated code to current, animations don’t play at all

edit3: the animations now work (i readded the classes for controlling animation name and duration using classList.add to get them added) and it runs more than once, problem is that now it opens once and closes once just fine, but every time i try to open it again it plays the opening animation then cuts back to the unopened state like the js didn’t add the open class, updating the css and js and removing the html

js:

// variables that are needed to find the menu

const settingsMenu = document.getElementById("settings_menu_id");
const settingsBg = document.getElementById("settings_bg_id");

//opening functions

function settingsOpening() {
  settingsMenu.classList.add("settings_menu_opening");
  settingsMenu.addEventListener("animationend", settingsMenuOpeningEnd);
  setTimeout(function() {
    settingsBg.classList.add("settings_bg_opening");
    settingsBg.addEventListener("animationend", settingsBgOpeningEnd);
  }, 500);
}

function settingsMenuOpeningEnd() {
  settingsMenu.classList.remove("settings_menu_opening");
  settingsMenu.classList.add("settings_menu_open");
}

function settingsBgOpeningEnd() {
  settingsBg.classList.remove("settings_bg_opening");
  settingsBg.classList.add("settings_bg_open");
}

//closing functions

function settingsClosing() {
  settingsMenu.classList.add("settings_menu_closing");
  settingsBg.classList.add("settings_bg_closing");
  settingsMenu.addEventListener("animationend", settingsMenuClosingEnd);
  settingsBg.addEventListener("animationend", settingsBgClosingEnd);
}

function settingsMenuClosingEnd() {
  settingsMenu.classList.remove("settings_menu_closing");
  settingsMenu.classList.remove("settings_menu_open");
}

function settingsBgClosingEnd() {
  settingsBg.classList.remove("settings_bg_closing");
  settingsBg.classList.remove("settings_bg_open");
}

css:

.settings_menu {
  width: 0px;
  height: 0px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  overflow: hidden;
  border-radius: 0px;
  border: 2px solid black;
  border-left: none;
  border-right: none;
  background-color: lightgray;
  padding: 0px;
  opacity: 0;
  pointer-events: none;
}

.settings_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
}

.settings_menu_opening {
  animation-name: settingsMenuOpening;
  animation-duration: 1s;
}

.settings_menu_closing {
  animation-name: settingsMenuClosing;
  animation-duration: 1s;
}

.settings_bg_opening {
  animation-name: settingsBgOpening;
  animation-duration: 0.5s;
}

.settings_bg_closing {
  animation-name: settingsBgClosing;
  animation-duration: 0.5s;
}

.settings_menu_open {
  width: min(90% , 400px);
  height: 140px;
  border-radius: 25px;
  border-left: 2px solid black;
  border-right: 2px solid black;
  padding: 10px;
  opacity: 1;
  pointer-events: auto;
}

.settings_bg_open {
  opacity: 1;
  pointer-events: auto;
}

@keyframes settingsMenuOpening {
  0% {
    width: 0px;
    height: 0px;
    border: 2px solid black;
    border-left: none;
    border-right: none;
    border-radius: 0px;
    padding: 0px;
    opacity: 1;
  }
  45% {
    width: min(90% , 400px);
    height: 0px;
    border: 2px solid black;
    border-radius: 0px;
    padding: 0px;
    opacity: 1;
  }
  55% {
    width: min(90% , 400px);
    height: 0px;
    border: 2px solid black;
    border-radius: 25px;
    padding: 0px;
    opacity: 1;
  }
  100% {
    width: min(90% , 400px);
    height: 140px;
    border: 2px solid black;
    border-radius: 25px;
    padding: 10px;
    opacity: 1;
  }
}

@keyframes settingsMenuClosing {
  0% {
    width: min(90% , 400px);
    height: 140px;
    border: 2px solid black;
    border-radius: 25px;
    padding: 10px;
    opacity: 1;
  }
  45% {
    width: min(90% , 400px);
    height: 0px;
    border: 2px solid black;
    border-radius: 25px;
    padding: 0px;
    opacity: 1;
  }
  55% {
    width: min(90% , 400px);
    height: 0px;
    border: 2px solid black;
    border-radius: 0px;
    padding: 0px;
    opacity: 1;
  }
  100% {
    width: 0px;
    height: 0px;
    border: 2px solid black;
    border-left: none;
    border-right: none;
    border-radius: 0px;
    padding: 0px;
    opacity: 1;
  }
}

@keyframes settingsBgOpening {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes settingsBgClosing {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

what berries for the longest lasting donut possible? and if you want what mega is recommended for the 2 phases? i am rebeatibg za and don't remember wtf i used the first time

basically, i'm in a 1.21.1 fabric server, and i wanna make a casino, i wanted to put a coinflip machine like in the main casino of the server (that uses a cobblemon display case to show the color, being red or green) but the design there uses 1 single dropper and has a whole visual part that is too big to fit where i need it, so i would love if someone was able to make a coinflip machine like that one but that uses 4 droppers at the start to give more randomness and less predictability (was thinking 4 droppers into 2 into 1 into the display case).

attached are images of the coinflip machine in the mentioned casino and where the one in my casino will be with how much avaiable space

p.s: not required but i would love if a little jingle played to drown the sound of the redstone components a bit :)

p.s. 2: the server is called cobblemon islands, only mod that adds any block is cobblemon, so the only stuff that can be used is anything in vanilla 1.21.1 with the cobblemon mod

the coinflip machine at the casino

the space with the part you can see of the coinflip machine of my casino

the avaiable space in that area

for now only 1 half and stone is temporary

front focus

back focus

side focus

for now it's just a mockup that i'll build into something (hopefully) good later on, just need advice on anything that could be improved

https://preview.redd.it/02rjzerwgeyg1.png?width=936&format=png&auto=webp&s=e443d5b462d5e210c979682487a4e314bf4a80c1

https://preview.redd.it/m3suz8fxgeyg1.png?width=667&format=png&auto=webp&s=cd389c5b47f41a854451518696dfc9c0619d775f

https://preview.redd.it/47st0n6ygeyg1.png?width=1138&format=png&auto=webp&s=d6eb489e66b66229851ed4d1769d1e0ef52029c1

side note: do you think it could fly with create aeronautics and a dream?