P5.JS & HTML - 如何使用 HTML 中的 p5 滑块来布局它们

Question

为了展示我的想法，这是我的程序的图片。

在右侧，您可以看到两列有多行滑块。由于我是 p5 的新手，我很不幸地通过（createSlider、createCheckbox 等）在 p5 中创建了它们。我的目标是简单地将它们写成多行 html 代码以便于定位。最后，我想要一个可以根据屏幕高度缩放的容器。

我想知道是否可以在 html.

中引用我的 js 变量

以下是我的错误代码的简要概述：

  checkStroke = createCheckbox('Enable Stroke', true)
  checkStroke.position(sliderSecondCol,sliderFirstRow+120)
  sliderStrokeAmount = createSlider(0,0.5,0.04,0.0001)
  sliderStrokeAmount.position(sliderFirstCol,sliderFirstRow+140)
  sliderStrokeHue = createSlider(0,360,200);
  sliderStrokeHue.position(sliderFirstCol,sliderFirstRow+160);
  sliderStrokeSat = createSlider(0,100,30);
  sliderStrokeSat.position(sliderFirstCol,sliderFirstRow+180);
  sliderStrokeBri = createSlider(0,100,100);
  sliderStrokeBri.position(sliderFirstCol,sliderFirstRow+200);
  sliderStrokeAlpha = createSlider(0,1,1,0.0001);
  sliderStrokeAlpha.position(sliderFirstCol,sliderFirstRow+220);

我希望我的观点足够清楚，真的希望能得到一些帮助。大学项目，第一次做这么“大”的编程

谢谢马克斯

Answer 1

您的问题“是否有一个选项可以在 html 中引用我的 js 变量”，简而言之，答案是否定的。为了使用 JavaScript 变量的值自动更新 HTML 元素，您需要使用像 ReactJS 或 Angular 这样的前端框架，这将通过模板和数据绑定来促进这一点，或者您需要自定义 JavaScript 来更新 HMTL 元素。

鉴于您对您想要的内容的描述：将您的 HTML 元素声明为 HTML 而不是通过 p5.js 函数创建它们；以及您需要从 JavaScript 访问和更新这些内容的隐含要求；我建议您查看 p5.js 中的 select() function。这将允许您根据 id 属性（通过 select('#your-slider-id')）获得对每个 HTML 元素的 p5.Element 引用，此时您的其余代码，即使用这些输入的值或订阅更改事件，可以保持不变。

示例：

let slider1;
let slider2;

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  slider1 = select('#slider1');
  slider2 = select('#slider2');
}

function draw() {
  background(220);
  translate(width / 4, height / 2);
  ellipse(0, 0, slider1.value(), slider2.value());
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#controls {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 20px;
  border: 2px solid gray;
  border-radius: 4px;
  display: grid;
  grid-template-columns: [sliders] auto 20px [labels] auto;
}

#controls input {
  grid-column: sliders;
}

#controls label {
  grid-column: labels;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<div id="controls">
  <input id="slider1" type="range" min="1" max="100" value="50" />
  <label for="slider1">Slider #1</label>
  <input id="slider2" type="range" min="1" max="100" value="50" />
  <label for="slider2">Slider Two</label>
</div>

Answer 2

解决方案是使用 HTML 个滑块，然后将它们连接到 JavaScript。

HTML 容器中最小输入 1、最大输入 100 和起始值 50 的滑块：

<div id="sliderContainer" >
  <input type="range" min="1" max="100" value="50" id="slider">
</div>

然后在脚本标签中添加JavaScript：

<script>
let slider = document.getElementById("slider");
let header = document.getElementById("demo");

slider.oninput = function() {
  header.innerHTML = slider.value;
}
</script>

放在一起：

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">50</h1>

<div id="sliderContainer" >
  <input type="range" min="1" max="100" value="50" id="slider">
</div>

<script>
let slider = document.getElementById("slider");
let header = document.getElementById("demo");

slider.oninput = function() {
  header.innerHTML = slider.value;
}
</script>

</body>
</html>

如果您对如何向其中添加 p5.js 有任何疑问，请告诉我，我将创建一个示例项目供您下载和试用。不要害怕问！ :)

来源： W3Schools HTML Sliders

P5.JS & HTML - 如何使用 HTML 中的 p5 滑块来布局它们

P5.JS & HTML - How to use p5 sliders in HTML to layout them

javascript

html

slider

p5.js