Mobirise-Tutorials.com

Hallo an alle!

Finde gerade nix inspirierendes.
Hat jemand eine Idee?
Also schon was abgefahrenes, nix standard

Moin,

mit diesem Thema habe ich mich bisher noch nie wirklich auseinandergesetzt.

Daher bleibt wohl nichts anderes übrig, als nach weiteren Informationen zu suchen und ein paar Anregungen zu finden.

https://www.m-medientechnik.de/

Ja sicher, habe etwa 50 Seiten angeschaut.
Aber so der Knaller war nicht dabei.
Dachte, Du kennst da zufällig was richtig Gutes.

Na, da haben wir doch was...
https://comperi.de/de

Und die Sache mit dem "Q" - auffällig ohne zu stören. Nur wie gemacht?

Moin,

das ist mit HTML Canvas gemacht.

https://www.w3schools.com/html/html5_canvas.asp

Glaube so etwas hatte ich mal vor 10 Jahren in NOF probiert.

http://www.tommyherrmanndesign.com/nof/ ... piele.html

… finde das persönlich nun aber nicht so den Kracher. Kannst ja mal die KI "ChatGPT" befragen

Mir ist aufgefallen, dass die meisten Mediatechnik Seiten ziemlich seriös und konventionell wirken - vielleicht hat das ja auch einen Grund.

Jetzt sehe ich gerade nicht, was dieses sich auflösende Q mit dem Canvas zu tun hat.
Die Seite an sich finde ich aber schon sehr seriös - also für mich seriös genug

Aber es ist wie immer: ich finde eine Seite ganz toll, versuche mich daran und es kommt was ganz anderes raus.

So, nun muss ich Ölwechsel am Volvo machen. Ist seit 10000 km überfällig

... na hier:

Dieses Skript macht die <canvas> Grafik:

https://comperi.de/build/theme/pointcloud.740ee454.js

Guckst Du:

https://point.cloud/

Das Script habe ich auch gesehen.
Als Grundlage dafür dient ein einfaches PNG.
Aber durchschaut habe ich das ganze nicht wirklich.
Und die Preise dafür habe ich auch nicht gefunden.

Du, keine Ahnung - ich habe das bis heute auch noch nie gesehen oder mich damit beschäftigt.

https://de.wikipedia.org/wiki/Punktwolke

Ich glaube man findet da Software, mit der man so etwas erstellen kann, die aber als Jahreslizenz so zwischen 500,00 und 5.000,00 Euro kostet, wenn ich das richtig gesehen habe.

Lassen wir das mal sacken....
neue Idee muss her, irgendwas Animiertes sollte aber rein - halt so in meinem Kopf

Ich habe dazu auch bisher keine passende Software oder JavaScripts finden können. Denke auch, dass ist nicht wirklich geeignet.

Falls jemand mal dazu noch etwas findet, wäre ein Hinweis sehr schön.

Frag doch mal Chat GPT

Die Animation auf der Webseite comperi.de zeigt eine Bewegung, bei der Punkte in einer definierten Form kontinuierlich animiert werden. Die Punkte bewegen sich leicht und scheinen zu "atmen" oder dynamisch zu fließen, wodurch ein organischer Effekt entsteht.

Um ein ähnliches animiertes "V" als Punktwolke zu erstellen, können wir Canvas verwenden, um die Punkte in Bewegung zu bringen. Hier ist ein Beispielcode, der das Konzept nachahmt:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buchstabe V als animierte Punktwolke</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <canvas id="vCanvas"></canvas>

    <script>
        const canvas = document.getElementById('vCanvas');
        const ctx = canvas.getContext('2d');

        // Canvas-Einstellungen
        canvas.width = 500;
        canvas.height = 500;

        // Punktwolke-Parameter
        const points = [];
        const totalPoints = 100; // Anzahl der Punkte
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 4;
        const amplitude = 5; // Bewegungsspielraum der Punkte
        const speed = 0.05; // Animationsgeschwindigkeit

        // Initialisiere die Punkte für das "V"
        for (let i = 0; i < totalPoints / 2; i++) {
            const t = i / (totalPoints / 2); // Normalisierter Wert von 0 bis 1
            points.push({
                x: centerX - t * 125, // Linker Schenkel des "V"
                y: centerY + t * 250,
                offsetX: Math.random() * 100, // Zufällige Bewegungsoffset
                offsetY: Math.random() * 100,
            });
        }

        for (let i = 0; i < totalPoints / 2; i++) {
            const t = i / (totalPoints / 2); // Normalisierter Wert von 0 bis 1
            points.push({
                x: centerX + t * 125, // Rechter Schenkel des "V"
                y: centerY + t * 250,
                offsetX: Math.random() * 100, // Zufällige Bewegungsoffset
                offsetY: Math.random() * 100,
            });
        }

        // Animationsfunktion
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Canvas leeren
            ctx.fillStyle = "black";

            points.forEach(point => {
                // Dynamische Bewegung der Punkte
                const dx = Math.sin((Date.now() + point.offsetX) * speed) * amplitude;
                const dy = Math.cos((Date.now() + point.offsetY) * speed) * amplitude;

                // Punkt zeichnen
                ctx.beginPath();
                ctx.arc(point.x + dx, point.y + dy, 3, 0, Math.PI * 2); // Radius 3 für Punkte
                ctx.fill();
            });

            requestAnimationFrame(animate); // Wiederhole Animation
        }

        animate(); // Starte die Animation
    </script>
</body>
</html>

Moin,

na ja - zumindest ein Anfang

Glaube das dann auch räumlich zu bekommen ist vielleicht etwas zu viel verlangt von ChatGPT.

Wenn man da lange genug GPT löchert, wird es bestimmt irgendwann passen

https://fotoschulungen.com/test1.htm

Meine Punkte sind für heute verballert

Oh ja, das ist wirklich faszinierend geworden

Da hast du sicherlich ein paar Flaschen Champagner aufgemacht, denn ich weiß, wie viel Arbeit es erfordert, der KI etwas so zu vermitteln, dass am Ende ein tolles Ergebnis dabei herauskommt – großartig!

ChatGPT hat außerdem die typischen Kommentare hinzugefügt, die immer sehr hilfreich sind.

P.S.:

Du solltest noch die HTML-Datei im UTF-8-Format speichern, damit die Umlaute im Quelltext korrekt angezeigt werden.

Wobei die JavaScript Datei tree.js wohl der springende Punkt bleibt:

https://threejs.org/examples/

Mobirise-Tutorials.com

Medientechnik soll es werden

Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden

Re: Medientechnik soll es werden