p5js网站无限页面

Question

您好，我有一个无法回答的问题，需要它来完成甚至启动我的网站。

我可以用 p5js 用 css 创建一个画布，然后用 html.index 加载一个网站..

我想知道如何创建一个无穷无尽的页面，例如，如果我向右滚动 5 分钟，它会向上滚动，反之亦然......

这里很像这个网站...

// 使用闪光灯///

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

我基本上想创建一个类似于上述链接甚至类似于谷歌地图的世界或大页面.....

可以使用 html、p5js、js 或任何可能的方式在各个方向无限滚动的页面。

我之前问过某人，他们可能会使用这个想法

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

也许使用document.body.scrollTop？

我遇到的问题是我用 p5js 创建画布，我可以定位画布，但我不知道如何将页面定位到画布所在的画布下方？

希望通过查看上面的网站，您可能会明白我想要什么。

到目前为止我在我的代码中发现的一个问题是我总是到达页面的左上角我想这是 x,y 0,0 可能的..但是我希望我的画布出现在页面中间所以当我到达时网站我无论如何都可以向左向右滚动但目前如果我刷新网站并到达页面我只能向右或向下滚动我无法滚动所有方向因为我已经在 x,y 的位置 0,0 从什么我相信...

如果有人能得到想法，我会喜欢一些帮助，因为这是我唯一需要继续建设我的网站的事情......

我真正想要的和上面发布的网站完全一样，我想在各个方向滚动或拖动很长一段距离，就像在平台游戏中我一直朝一个方向走一样？

提前感谢这里的第一篇文章和几个月以来的新编码......

享受

Answer 1

这是一个宏大的抱负，所以我不会提供一个完整的解决方案，而是提供一些想法来帮助您入门。

首先使用Window.innerWidth 获取窗口大小并将画布设置为大。现在，您有了一个全屏画布。要检测用户何时滚动使用mouseWheel()。这应该是您通过 p5.js 创建假的“无尽滚动”所需的一切。

现在使用translate() 将项目移动到您想要的位置，确保通过您收集的mouseWheel() 输入偏移它们的位置。这应该会产生无限滚动的错觉。

Answer 2

你真的有两个问题：

问题一：如何绘制无限页面？

有很多方法可以做到这一点。您可以使用程序生成，或不断加载新数据，或者您可以在项目离开顶部时将它们“传送”到底部，或者您可能并不是真的意味着无限，您可以只绘制离开屏幕的东西。

你还没有真正说出你是如何做到这一点的，但我认为你主要是在问第二个问题：

问题二：如何改变我对无限页面的看法？

还有很多方法可以做到这一点。考虑这一点的最简单方法之一是只绘制场景（如果一开始大部分场景都从屏幕上绘制出来也没关系），但每个坐标都有一个 offset更改以更改“相机”的位置。像这样的：

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);  
    }
}

可运行代码的链接：here。

您也可以使用类似translate() 的函数来移动相机，而不是使用偏移量。