p5js website unendliche seite

Question

hallo ich habe eine frage, die ich nicht beantworten kann und brauche es zu beenden oder sogar meine website zu starten.

ich in der Lage bin eine Leinwand mit p5js Stil es mit CSS zu erstellen und dann eine Website mit html.index laden ..

Ich mag würde wissen, wie eine Seite zu erstellen, das endlos ist, zum Beispiel, wenn i rechts 5mins bewegen sie scrollt und umgekehrt links oben nach unten ....

viel wie diese Website hier ...

// nutzt Flash ///

http://www.bio-bak.nl/

Ich möchte im Grunde eine Welt oder große Seite ähnlich wie oben Link oder sogar ähnlich wie Google Maps erstellen .....

eine Seite, die endlos in alle Richtungen scrollen kann mit HTML, P5js, Js oder was auch immer.

ich fragte jemand vor und sie können mit dieser Idee

if Pos > height - ~10% height =height + 100px//do same for right,left,up,down. 

vielleicht document.body.scrollTop mit?

die Probleme, die ich gestoßen bin, ich erstelle Leinwand mit p5js und ich kann die Leinwand positionieren, aber ich weiß nicht, wie Seite unterhalb der Leinwand positionieren, dass die Leinwand auf liegt?

hoffentlich durch den Blick auf die Website oben können Sie vielleicht verstehen, was ich will.

ein problem das ich bisher in meinem code gefunden habe ist ich komme immer oben links auf der seite stelle ich mir vor das ist x, y 0,0 möglich..aber ich möchte meine leinwand mitte der seite erscheinen wenn ich komme auf der Website kann ich sowieso nach links rechts scrollen, aber im Moment, wenn ich die Webseite aktualisiere und auf der Seite eintreffe, kann ich nur nach rechts oder unten scrollen, ich kann nicht alle Richtungen scrollen, da ich schon bei 0,0 von x, y aus bin was ich glaube ...

bitte wenn jemand bekam Ideen etwas Hilfe als das einzige, was liebe würde ich den Bau von meiner Website fortsetzen müssen ...

wirklich das, was ich will, ist genau wie Website oben gepostet Ich möchte scrollen oder einen langen Weg hinein ziehen alle Richtungen die gleiche wie in einem Plattformspiel ich laufe kontinuierlich in eine Richtung?

Dank im Voraus ersten Beitrag überhaupt hier und neu seit einigen Monaten Codierung ...

genießen

Answer 1

Sie haben wirklich zwei Fragen:

Frage eins: Wie zeichne ich ein unendliche Seite?

Es gibt eine Menge Möglichkeiten, dies zu tun. Du könntest prozedurale Generierung verwenden oder ständig neue Daten laden, oder du könntest Gegenstände nach unten "teleportieren", wenn sie von oben verschwinden, oder vielleicht bedeutest du nicht wirklich unendlich und du kannst einfach Dinge zeichnen, die vom Bildschirm verschwinden.

Sie haben nicht wirklich gesagt, wie Sie dies tun, aber ich denke, dass Sie vor allem über die zweite Frage:

Frage zwei: Wie kann ich meine Ansicht einer unendlichen Seite ändern?

Es gibt auch eine Menge Möglichkeiten, dies zu tun. Eine der einfachsten Möglichkeiten, darüber nachzudenken, besteht darin, nur Ihre Szene zu zeichnen (es ist in Ordnung, wenn am Anfang viel vom Bildschirm abgezogen wird), aber für jede Koordinate muss ein Offset, den Sie ändern, geändert werden wo die "Kamera" ist. Etwas wie folgt aus:

var offsetX = 0; 

function setup() { 
    createCanvas(400, 400); 
} 

function mouseDragged(){ 
    offsetX += (mouseX - pmouseX)/2; 
} 

function draw() { 
    background(220); 
    for(var i = 0; i < 1000; i++){ 
     ellipse(-10000 + i*100 + offsetX, height/2, 100, 100); 
    } 
} 

Link zu runnable Code: here.

Sie könnten auch etwas wie die translate() Funktion verwenden, um die Kamera zu verschieben, anstatt einen Offset zu verwenden.

Answer 2

Das ist ein großer Ehrgeiz, also werde ich keine Gesamtlösung anbieten, sondern einige Ideen für den Anfang.

Zuerst verwenden Sie Window.innerWidth, um die Größe des Fensters zu erhalten und Ihre Leinwand so groß zu setzen. Jetzt haben Sie eine Vollbildansicht. Um festzustellen, wann der Benutzer scrollt, verwenden Sie mouseWheel(). Dies sollte alles sein, was Sie brauchen, um eine gefälschte "endlose Schriftrolle" durch p5.js zu erstellen.

Verwenden Sie jetzt translate(), um Elemente an die gewünschte Position zu verschieben. Stellen Sie dabei sicher, dass ihre Position durch den eingegebenen mouseWheel()-Eingang versetzt wird. Dies sollte die Illusion von endlosem Scrollen erzeugen.