p5js网站无限页面

Question

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

我可以使用pss创建一个p5js样式的画布，然后使用html.index加载一个网站..

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

很像这个网站......

//使用flash ///

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 0的位置，y从什么我相信......

如果有人可以得到想法，请帮助我，这是我唯一需要继续构建我的网站......

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

先感谢此前的第一篇文章以及几个月以来的新编码......

享受

Answer 1

你真的有两个问题：

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

有很多方法可以做到这一点。你可以使用程序生成，或不断加载新数据，或者你可以传送＆＃34;当它们离开顶部时底部的项目，或者你可能并不真正意味着无限，你可以只是画出屏幕上的东西。

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

问题二：如何更改无限页面的视图？

还有很多方法可以做到这一点。考虑这个问题最简单的方法之一就是画出你的场景（如果很多场景在开始时从屏幕上绘制出来就没问题），但每个坐标都有一个偏移量你改变，以改变＆＃34;相机＆＃34;是。像这样：

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()这样的功能移动相机而不是使用偏移。

Answer 2

这是一个很大的抱负，所以我不会提供一个完整的解决方案，而是一些让你入门的想法。

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

现在使用translate()移动您想要的项目，确保通过您收集的mouseWheel()输入来抵消其位置。这应该创造无限滚动的幻觉。