Frage zum Wiki-Artikel „Math-Funktionen“

[Das Camel-Case]

atan2() … atan2() hat zwei Vorteile. …

Ich korrigiere: es sind (mindestens) 3!

Warum? Nun, vorneweg eine eigentlich einfache Aufgabe (ähnlich dem gerne gezeigten Würfel in 3D): es sei das jeweilige Browser-Fenster sozusagen der (weggelassene) Deckel einer Schachtel. Darzustellen sind die perspektivisch korrekten Wände und der Boden. Damit der alte Trick mit der Fluchtpunkt-Konstruktion ausscheidet: wir beschriften die Innenseiten mit ein paar Zeichen, etwas Text, die bitte auch schön in die Tiefe wandern.

Das Ganze alleine mit etwas HTML und CSS.

Gefragt sind also v.a. die 3d-Transformationen. Die möchten fürs Rotieren aber gerne einen Winkel sehen. Es ist hier aber kein Winkel sondern die Höhe (sagen wir mal einfach: 100vw) der Perspektive gegeben.

Ergo: atan2 ist da die einzige (mir?) bekannte Möglichkeit, aus einem Längenverhältnis (das nur als Längenangaben ermittelt werden kann in eine Länge umgerechnet wird), in einen Winkel umzuwandeln. — jedenfalls so lange, wie calc-size() mehr Traum als Werkzeug ist.

---

Nebenbei habe ich beim Experimentieren damit noch eine … Anomalie? … gefunden, weiß aber nicht, wie „lokal“ die ist (mein Browser, dein Broser, … ein Standar…d o der t?).

Jedenfalls wollte ich die Betrachtungshöhe nicht nur von einer Viewport-Größe, Höhe oder Breite, abhängig machen. Und das Ergebnis? Versucht man, perspective(…) mit z.B. hypot(100vw, 100vh) als Höhe zu füttern, ist’s vorbei mit dem „Gemälde“.

---

Etwas Code, keine Schachtel sondern nur eine Art Sallontüre (mit Inhaltsverzeichnis), aber animiert:

.toc {
	--opi: 15%;
	--hHeight: 100vb;
	/* 😡 --hHeight: hypot(100vh, 100vw); --hHeight: hypot(100vb, 100vi); … */
	display: block;
	z-index: 100;
	position: fixed;
	inset-inline-end: -16px; /* wg. Scrollbalken */
	width: clamp(min-content, fit-content, 75vi);
	height: clamp(min-content, fit-content, 80vb);
	overflow: hidden auto;
	> * { opacity: var(--opi); }
	perspective-origin: right top;
	transform-origin: center right; /* center inline-end??? */
	transform-box: border-box;
	transform-style: preserve-3d;
	transform:
		translateX(-32px)
		perspective(var(--hHeight))
		rotate3d(0, 1, 0, calc(-90deg + atan2(3ch, var(--hHeight))));
	transition: all 2s ease-in-out;
	&:hover {
		transform: rotate3d(0, 1, 0, 0deg);
		& > * { opacity: 1; }
		background-image: none;
		background-color: ButtonFace;
		border-color: gold;
		outline-color: color-mix(in oklch, ButtonFace, transparent 25%);
	}
	background-image: linear-gradient(
		to left,
		ButtonFace 0%,
		color-mix(in oklch, ButtonFace, transparent 75%),
		transparent 100%
	);
	background-blend-mode: overlay;
}

[Gunnar Bittersmann]

@@Das Camel-Case

Etwas Code

Muss man dir das immer und immer wieder sagen, dass deine Codeschnipsel ohne zugehörigen Kontext nichts bringen? Erstelle komplette Onlinebeispiele, wo man sich das ansehen kann, oder lass es ganz.

Zu deinem Code lässt sich nur soviel sagen: Er ist unslesbar.

.toc {
	--opi: 15%;
	--hHeight: 100vb;

Warum Opi und nicht Omi? Wenn du opacity meinst, dann benenne die custom property auch so.

Wofür steht das kleine h in hHeight? Don’t make me think!

🖖 Live long and prosper

[Das Camel-Case]

Das Beispiel ist Teil eines Theme-Versuchs für SnippetsLab.

Aber: ist das für diese von mir behauptete Sonderstellung von atan2 von Belang?

[Felix Riesterer]

Liebes Groß-/Kleinschreibkamel,

Etwas Code,

der nützt mir nix, weil das zugehörige DOM fehlt. @Gunnar Bittersmann hat Dich zurecht darauf hingewiesen, dass es echte online-Beispiele braucht, damit man Dein Ansinnen nachvollziehen kann. So wirkt es auf mich eher nach Gedankenabsondern. Und das führt dazu, dass man Dich nicht mehr ernst nehmen möchte.

Liebe Grüße

Felix Riesterer

[Das Camel-Case]

Dann eben als einfache Frage: welche Möglichkeit gibt es bislang (und sonst noch), aus zwei gegebenen Längen (Seiten eines Dreiecks oder ähnliche Dinge), die vorgegeben sind (nicht: werden), einen Winkel zu errechnen?

Wie also bestimmt man beispielsweise für ein

--c: calc(sqrt(100vw * 100vw + 100vh * 100vh));
--angle: ⁈?⁉︎;

body {
	background-image: radial-gradient( var(--angle) …);
}

den Winkel, der dafür sorgt, daß der Verlauf sich diagonal über das Fenster zieht. Und das eben alleine mit CSS, ohne JS.

[Gunnar Bittersmann]

@@Das Camel-Case

Du verrennst dich sinnnlos in irgendwas Kompliziertes.

--c: calc(sqrt(100vw * 100vw + 100vh * 100vh));

Von hypot() hast du noch nichts gehört?

Wie also bestimmt man […] den Winkel, der dafür sorgt, daß der Verlauf sich diagonal über das Fenster zieht. Und das eben alleine mit CSS, ohne JS.

Den Winkel bestimmt man gar nicht. Wozu auch? ☞ diagonaler Verlauf

🖖 Live long and prosper

[Das Camel-Case]

calc(sqrt…) und hypot() liefern aber nicht irgendwie seltsame Winkel zurück⁉︎

[Gunnar Bittersmann]

@@Das Camel-Case

calc(sqrt…) und hypot() liefern aber nicht irgendwie seltsame Winkel zurück⁉︎

Nein. Das hat auch niemand behauptet.

🖖 Live long and prosper

[Das Camel-Case]

Stimmt ja, ’tschuldigung.

Aber die Frage ist ja dennoch: wie erhalte ich eine Zahl wenn ich als Berechnungsgrundlage Längen (oder irgend etwas anderes „mit Einheiten dran“) habe.

[Rolf B]

Hallo camelCase,

welche Möglichkeit gibt es bislang (und sonst noch), aus zwei gegebenen Längen (Seiten eines Dreiecks oder ähnliche Dinge), die vorgegeben sind (nicht: werden), einen Winkel zu errechnen

atan2(y,x). Dass man damit problemlos Steigungswinkel bestimmen kann, führen wir im Wiki-Artikel als einen der zwei Vorteile gegenüber atan() auf. Deswegen verstehe ich nicht, weshalb Du die Möglichkeit der Winkelberechnung als dritten Vorteil darstellen willst.

Ohne atan2 müsstest Du das Vorzeichen von x testen. Ist es negativ, müsste man den Winkel um 180° erhöhen oder vermindern. Ist es 0, muss man aus dem Vorzeichen von y auf 90° oder 270° schließen. Dafür braucht man sign(), und eigentlich auch eine Form von if() - aber if() ist noch experimentell und die benötigte Form unterstützt es nicht so recht, wenn ich das richtig sehe.

Ohne all das brauchst Du JavaScript.

Für eine Diagonale durch's Bild allerdings - siehe Gunnar. Und:

background-image: radial-gradient( var(--angle) …);

Du meinst sicher einen linear-gradient. Der braucht einen Winkel, oder auch nicht, wenn man orthogonal auf eine Seite oder in eine Ecke zielt. Ein Lineargradient hat allerdings eigene Probleme: einheitliche Breite und harte Übergänge.

linear-gradient(to top right, transparent 49.9%, red 0, 50.1%, transparent 0);

zeigt beide Probleme. Für einheitliche Breite unabhängig von der Größe des Elements muss man die Übergänge mit calc aus 50% und 1px berechnen, und Antialiasing bekommt man nur, wenn man den Übergang bewusst „verschmiert“:

linear-gradient(to tatan2(100cqh, 100cqw), transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px));

Der Gradient hat übrigens auch den Vorteil, dass Du die Länge der Diagonalen nicht brauchst.

Rolf

[Das Camel-Case]

Der dritte Vorteil ist, daß man beim Rechnen damit die Einheiten los wird! Also nicht, wie sonst mit calc z.B. 1em als Ergebnis von 1em/1em erhölt. Was das Ergebnis(?) für weitere Berechnungen meist unbrauchbar macht.

Und calc-sum steht ja wohl noch eine Weile in den Entwürfen …

[Gunnar Bittersmann]

@@Das Camel-Case

Du erzählst Unsinn.

Der dritte Vorteil ist, daß man beim Rechnen damit die Einheiten los wird! Also nicht, wie sonst mit calc z.B. 1em als Ergebnis von 1em/1em erhölt.

calc(1em/1em) liefert in Safari und Chromia 1 – ohne Einheit.

Firefox kann das auch in der Version 157.0b2 noch nicht. Der berechnet da gar nichts, jedenfalls nicht 1em.

Und calc-sum steht ja wohl noch eine Weile in den Entwürfen …

Hast du dir überhaupt angesehen, was du da verlinkt hast? Und verstanden?

Vermutlich meintest du calc-size().

🖖 Live long and prosper

[Das Camel-Case]

Richtig, da hab’ ich mich „verlaufen“.

Aber irgendwie ist es witzig! Daß diese Funktion jetzt calc-*size* genannt wurde. Wo da ja gerade “size” aus den Zahlen entfernt wird.

Und calc hat, teilweise und mittlerweile, gelernt, daß „x/x = 1“ ist? Und ich sitze hier vorwiegend im Panda fest, so daß das an mir vorbeigeschlichen ist?

Was der da als Ergebnis zurückliefert ist ja nur zu vermuten. Denn das, was „im Stylesheet“ angewendet wird, bekommt man ja nicht zu sehen. Mein Eindruck war da aber doch, daß eine der Einheiten des Ausdrucks beibehalten wird. Zumindest ließ sich das da, wo ich eigentlich nur eine Zahl haben wollte, als Längenangabe verwenden (oder eben nicht).