我正在使用p5.js和Marine Weather JSON文件创建一个画布。 我正在设置循环以循环访问JSON文件中的值数组（例如，对于循环的长度，根据每个索引的值更改颜色）。 for循环似乎只显示最后一个索引中的值。
我有6件事用于循环：
此刻，当我使用变量和for循环进行测试时，所有内容似乎都冻结在最后一个索引值上。如果我注释掉for循环并为索引指定一个固定值而不是变量，则正弦波会设置动画（仍然仅保留最后一个索引值）。 如果我将所有与循环相关的部分都注释掉，则圆圈是随机形成的，但是它们消失了并且很快地变形了。
我将在CSS部分添加JSON。
let weather;
let xspacing = 15; // Distance between each horizontal location
let waveWidth; // Width of entire wave
let theta = 0.0; // Start angle at 0
let amplitude = 25; // Height of wave
let period = 1000.0; // How many pixels before the wave repeats
let dx; // Value for incrementing x
let yvalues; // Using an array to store height values for the wave
function setup() {
//set up a canvas that's size depends on the browser size
createCanvas(windowWidth, windowHeight);
colorMode(HSB);
waveWidth = width + 16;
dx = (TWO_PI / period) * xspacing;
yvalues = new Array(floor(waveWidth / xspacing));
}
function draw() {
let warmth = color(50, 100, 100); //rgb 255, 215, 0
let upper = color(0, 100, 65); //rgb 165, 0, 0
let lower = color(234, 100, 31); //rgb 0, 8, 80
let start = color(50, 2, 100); //rgb 255, 254, 249
let mid = color(50, 100, 100); //rgb 255, 212, 0
let end = color(49, 100, 13); //rbg 33, 27, 0
let mixer = [];
mixer[0] = start;
mixer[1] = lerpColor(start, mid, 0.099);
mixer[2] = lerpColor(start, mid, 0.198);
mixer[3] = lerpColor(start, mid, 0.297);
mixer[4] = lerpColor(start, mid, 0.396);
mixer[5] = lerpColor(start, mid, 0.495);
mixer[6] = lerpColor(start, mid, 0.594);
mixer[7] = lerpColor(start, mid, 0.693);
mixer[8] = lerpColor(start, mid, 0.792);
mixer[9] = lerpColor(start, mid, 0.891);
mixer[10] = lerpColor(start, mid, 0.99);
mixer[11] = mid;
mixer[12] = lerpColor(mid, end, 0.099);
mixer[13] = lerpColor(mid, end, 0.198);
mixer[14] = lerpColor(mid, end, 0.297);
mixer[15] = lerpColor(mid, end, 0.396);
mixer[16] = lerpColor(mid, end, 0.495);
mixer[17] = lerpColor(mid, end, 0.594);
mixer[18] = lerpColor(mid, end, 0.693);
mixer[19] = lerpColor(mid, end, 0.792);
mixer[20] = lerpColor(mid, end, 0.891);
mixer[21] = lerpColor(mid, end, 0.99);
mixer[23] = end;
//background colour of canvas
background(0, 28, 122);
fill(0, 100, 65);
noStroke();
rect(0, 0, windowWidth, windowHeight / 2);
//upper half of canvas representing air temperature
for (let a = 0; a < weather.hours.length; a++) {
fill(47, 100, 100, (weather.hours[a].airTemperature - 27) / 10);
noStroke();
rect(0, 0, windowWidth, windowHeight / 2);
}
//lower half of canvas representing water temperature
fill(234, 100, 31);
noStroke();
rect(0, windowHeight / 2, windowWidth, windowHeight / 2);
for (let w = 0; w < weather.hours.length; w++) {
fill(47, 100, 100, (weather.hours[w].waterTemperature - 28) / 20);
noStroke();
rect(0, windowHeight / 2, windowWidth, windowHeight / 2);
}
//translucent circles with random sizes to form on random locations
for (let h = 0; h > weather.hours.length; h++) {
let humidityCircle = weather.hours[h].humidity;
for (let hc = 0; hc > humidityCircle; hc++) {
fill(255, 255, 255, 127.5);
noStroke();
circle(random(windowWidth), random(windowHeight / 2), random((windowWidth / 18) + 15));
}
}
calcWindWave();
renderWindWave();
calcWaveWave();
renderWaveWave();
//middle large circle
for (let t = 0; t < weather.hours.length; t++) {
fill(mixer[weather.hours[t].time]);
noStroke();
circle(windowWidth / 2, windowHeight / 2, windowHeight / 3.5);
}
}
function calcWindWave() {
//change amplitude using windSpeed
//Increment theta (try different values for 'angular velocity' here)
theta += 0.02;
//For every x value, calculate a y value with sine function
let x = theta;
let wsAmplitude;
for (let ws = 0; ws < weather.hours.length; ws++) {
wsAmplitude = weather.hours[ws].windSpeed * amplitude;
for (i = 0; i < yvalues.length; i++) {
yvalues[i] = sin(x) * wsAmplitude;
x += dx;
}
}
}
function calcWaveWave() {
//change amplitude using waveHeight
//Increment theta (try different values for 'angular velocity' here)
theta += 0.05;
// For every x value, calculate a y value with sine function
let x = theta;
let whAmplitude;
for (let wh = 0; wh < weather.hours.length; wh++) {
whAmplitude = weather.hours[wh].waveHeight * amplitude;
for (let i = 0; i < yvalues.length; i++) {
yvalues[i] = sin(x) * whAmplitude;
x += dx;
}
}
}
function renderWindWave() {
noStroke();
fill(255);
//A simple way to draw the wave with an ellipse at each location
for (let x = 0; x < yvalues.length; x++) {
ellipse(x * xspacing, height / 2 + yvalues[x], 3, 3);
}
}
function renderWaveWave() {
noStroke();
fill(255);
//A simple way to draw the wave with an ellipse at each location
for (let x = 0; x < yvalues.length; x++) {
ellipse(x * xspacing, height / 2 - yvalues[x], 3, 3);
print(yvalues.x);
}
}
function preload() {
weather = {
"hours": [{
"airTemperature": 27.65,
"humidity": 70.8,
"time": 0,
"waterTemperature": 29.28,
"waveHeight": 1.62,
"windSpeed": 3.26
},
{
"airTemperature": 27.67,
"humidity": 70.9,
"time": 1,
"waterTemperature": 29.35,
"waveHeight": 1.7,
"windSpeed": 3.1
},
{
"airTemperature": 27.7,
"humidity": 71,
"time": 2,
"waterTemperature": 29.31,
"waveHeight": 1.78,
"windSpeed": 2.94
},
{
"airTemperature": 27.72,
"humidity": 71.1,
"time": 3,
"waterTemperature": 29.14,
"waveHeight": 1.86,
"windSpeed": 2.78
},
{
"airTemperature": 27.67,
"humidity": 71.8,
"time": 4,
"waterTemperature": 28.93,
"waveHeight": 1.86,
"windSpeed": 2.65
},
{
"airTemperature": 27.62,
"humidity": 72.5,
"time": 5,
"waterTemperature": 28.8,
"waveHeight": 1.86,
"windSpeed": 2.53
},
{
"airTemperature": 27.57,
"humidity": 73.2,
"time": 6,
"waterTemperature": 28.7,
"waveHeight": 1.86,
"windSpeed": 2.4
},
{
"airTemperature": 27.47,
"humidity": 73.51,
"time": 7,
"waterTemperature": 28.63,
"waveHeight": 1.85,
"windSpeed": 2.24
},
{
"airTemperature": 27.38,
"humidity": 73.82,
"time": 8,
"waterTemperature": 28.58,
"waveHeight": 1.83,
"windSpeed": 2.09
},
{
"airTemperature": 27.28,
"humidity": 74.13,
"time": 9,
"waterTemperature": 28.54,
"waveHeight": 1.82,
"windSpeed": 1.93
},
{
"airTemperature": 27.19,
"humidity": 74.1,
"time": 10,
"waterTemperature": 28.51,
"waveHeight": 1.8,
"windSpeed": 1.83
},
{
"airTemperature": 27.11,
"humidity": 74.06,
"time": 11,
"waterTemperature": 28.48,
"waveHeight": 1.78,
"windSpeed": 1.74
},
{
"airTemperature": 27.02,
"humidity": 74.03,
"time": 12,
"waterTemperature": 28.46,
"waveHeight": 1.76,
"windSpeed": 1.64
},
{
"airTemperature": 27.02,
"humidity": 73.98,
"time": 13,
"waterTemperature": 28.45,
"waveHeight": 1.74,
"windSpeed": 1.69
},
{
"airTemperature": 27.02,
"humidity": 73.94,
"time": 14,
"waterTemperature": 28.43,
"waveHeight": 1.72,
"windSpeed": 1.74
},
{
"airTemperature": 27.02,
"humidity": 73.89,
"time": 15,
"waterTemperature": 28.42,
"waveHeight": 1.7,
"windSpeed": 1.79
},
{
"airTemperature": 27.02,
"humidity": 73.01,
"time": 16,
"waterTemperature": 28.42,
"waveHeight": 1.69,
"windSpeed": 1.92
},
{
"airTemperature": 27.03,
"humidity": 72.13,
"time": 17,
"waterTemperature": 28.42,
"waveHeight": 1.67,
"windSpeed": 2.04
},
{
"airTemperature": 27.04,
"humidity": 71.25,
"time": 18,
"waterTemperature": 28.54,
"waveHeight": 1.66,
"windSpeed": 2.17
},
{
"airTemperature": 27.09,
"humidity": 70.52,
"time": 19,
"waterTemperature": 28.74,
"waveHeight": 1.65,
"windSpeed": 2.35
},
{
"airTemperature": 27.15,
"humidity": 69.8,
"time": 20,
"waterTemperature": 29.04,
"waveHeight": 1.65,
"windSpeed": 2.53
},
{
"airTemperature": 27.21,
"humidity": 69.08,
"time": 21,
"waterTemperature": 29.39,
"waveHeight": 1.64,
"windSpeed": 2.71
},
{
"airTemperature": 27.32,
"humidity": 71.12,
"time": 22,
"waterTemperature": 29.72,
"waveHeight": 1.63,
"windSpeed": 3.23
},
{
"airTemperature": 27.44,
"humidity": 73.16,
"time": 23,
"waterTemperature": 30,
"waveHeight": 1.63,
"windSpeed": 3.74
}
],
"meta": {
"cost": 1,
"dailyQuota": 50,
"end": "2018-07-01 23:59",
"lat": 9.933917,
"lng": -132.038444,
"params": [
"airTemperature",
"humidity",
"waterTemperature",
"waveHeight",
"windSpeed"
],
"requestCount": 3,
"source": "sg",
"start": "2018-07-01 00:00"
}
};
}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
<script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
<script language="javascript" type="text/javascript" src="p5js-temp-Restless_Sea9110872967160478905.js"></script>
<!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
<!-- This line removes any default padding and style.
You might only need one of these values set. -->
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
答案 0 :(得分：0)
您（和许多其他人一样）已经错过了p5库的结构概念。在其他结构函数中， draw（）会永远循环（除非您停止它），因此您不想在其中创建自己的循环。 尽管我不知道应该取得理想的结果，但我会向您介绍一些准则：
let clicked=false; //this is for start/stop animation
let weather;
let xspacing = 15; // Distance between each horizontal location
let waveWidth; // Width of entire wave
let theta = 0.0; // Start angle at 0
let amplitude = 25; // Height of wave
let period = 1000.0; // How many pixels before the wave repeats
let dx; // Value for incrementing x
let yvalues; // Using an array to store height values for the wave
/* counters from inner loops */
let t = w = h = a = 0;
/* all the looping variables */
let warmth,
upper,
lower,
start,
mid,
end;
/* array */
let mixer = [];
/*******************************************************************
* P5 preload
*
* Load images, data etc. Waits for any async is ended.
********************************************************************/
function preload() {
weather = {
"hours": [{
"airTemperature": 27.65,
"humidity": 70.8,
"time": 0,
"waterTemperature": 29.28,
"waveHeight": 1.62,
"windSpeed": 3.26
},
{
"airTemperature": 27.67,
"humidity": 70.9,
"time": 1,
"waterTemperature": 29.35,
"waveHeight": 1.7,
"windSpeed": 3.1
},
{
"airTemperature": 27.7,
"humidity": 71,
"time": 2,
"waterTemperature": 29.31,
"waveHeight": 1.78,
"windSpeed": 2.94
},
{
"airTemperature": 27.72,
"humidity": 71.1,
"time": 3,
"waterTemperature": 29.14,
"waveHeight": 1.86,
"windSpeed": 2.78
},
{
"airTemperature": 27.67,
"humidity": 71.8,
"time": 4,
"waterTemperature": 28.93,
"waveHeight": 1.86,
"windSpeed": 2.65
},
{
"airTemperature": 27.62,
"humidity": 72.5,
"time": 5,
"waterTemperature": 28.8,
"waveHeight": 1.86,
"windSpeed": 2.53
},
{
"airTemperature": 27.57,
"humidity": 73.2,
"time": 6,
"waterTemperature": 28.7,
"waveHeight": 1.86,
"windSpeed": 2.4
},
{
"airTemperature": 27.47,
"humidity": 73.51,
"time": 7,
"waterTemperature": 28.63,
"waveHeight": 1.85,
"windSpeed": 2.24
},
{
"airTemperature": 27.38,
"humidity": 73.82,
"time": 8,
"waterTemperature": 28.58,
"waveHeight": 1.83,
"windSpeed": 2.09
},
{
"airTemperature": 27.28,
"humidity": 74.13,
"time": 9,
"waterTemperature": 28.54,
"waveHeight": 1.82,
"windSpeed": 1.93
},
{
"airTemperature": 27.19,
"humidity": 74.1,
"time": 10,
"waterTemperature": 28.51,
"waveHeight": 1.8,
"windSpeed": 1.83
},
{
"airTemperature": 27.11,
"humidity": 74.06,
"time": 11,
"waterTemperature": 28.48,
"waveHeight": 1.78,
"windSpeed": 1.74
},
{
"airTemperature": 27.02,
"humidity": 74.03,
"time": 12,
"waterTemperature": 28.46,
"waveHeight": 1.76,
"windSpeed": 1.64
},
{
"airTemperature": 27.02,
"humidity": 73.98,
"time": 13,
"waterTemperature": 28.45,
"waveHeight": 1.74,
"windSpeed": 1.69
},
{
"airTemperature": 27.02,
"humidity": 73.94,
"time": 14,
"waterTemperature": 28.43,
"waveHeight": 1.72,
"windSpeed": 1.74
},
{
"airTemperature": 27.02,
"humidity": 73.89,
"time": 15,
"waterTemperature": 28.42,
"waveHeight": 1.7,
"windSpeed": 1.79
},
{
"airTemperature": 27.02,
"humidity": 73.01,
"time": 16,
"waterTemperature": 28.42,
"waveHeight": 1.69,
"windSpeed": 1.92
},
{
"airTemperature": 27.03,
"humidity": 72.13,
"time": 17,
"waterTemperature": 28.42,
"waveHeight": 1.67,
"windSpeed": 2.04
},
{
"airTemperature": 27.04,
"humidity": 71.25,
"time": 18,
"waterTemperature": 28.54,
"waveHeight": 1.66,
"windSpeed": 2.17
},
{
"airTemperature": 27.09,
"humidity": 70.52,
"time": 19,
"waterTemperature": 28.74,
"waveHeight": 1.65,
"windSpeed": 2.35
},
{
"airTemperature": 27.15,
"humidity": 69.8,
"time": 20,
"waterTemperature": 29.04,
"waveHeight": 1.65,
"windSpeed": 2.53
},
{
"airTemperature": 27.21,
"humidity": 69.08,
"time": 21,
"waterTemperature": 29.39,
"waveHeight": 1.64,
"windSpeed": 2.71
},
{
"airTemperature": 27.32,
"humidity": 71.12,
"time": 22,
"waterTemperature": 29.72,
"waveHeight": 1.63,
"windSpeed": 3.23
},
{
"airTemperature": 27.44,
"humidity": 73.16,
"time": 23,
"waterTemperature": 30,
"waveHeight": 1.63,
"windSpeed": 3.74
}
],
"meta": {
"cost": 1,
"dailyQuota": 50,
"end": "2018-07-01 23:59",
"lat": 9.933917,
"lng": -132.038444,
"params": [
"airTemperature",
"humidity",
"waterTemperature",
"waveHeight",
"windSpeed"
],
"requestCount": 3,
"source": "sg",
"start": "2018-07-01 00:00"
}
}
}
/*******************************************************************
* P5 setup
* run once, use for initialisation.
*
* Create a canvas, show pictures, initialize arrays etc.
********************************************************************/
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB);
waveWidth = width + 16;
dx = (TWO_PI / period) * xspacing;
yvalues = new Array(floor(waveWidth / xspacing));
/*
* all the colors and mixer[] array should be
* initialized here as their values are not changed
*/
warmth = color(50, 100, 100); //rgb 255, 215, 0
upper = color(0, 100, 65); //rgb 165, 0, 0
lower = color(234, 100, 31); //rgb 0, 8, 80
start = color(50, 2, 100); //rgb 255, 254, 249
mid = color(50, 100, 100); //rgb 255, 212, 0
end = color(49, 100, 13); //rbg 33, 27, 0
mixer[0] = start;
mixer[1] = lerpColor(start, mid, 0.099);
mixer[2] = lerpColor(start, mid, 0.198);
mixer[3] = lerpColor(start, mid, 0.297);
mixer[4] = lerpColor(start, mid, 0.396);
mixer[5] = lerpColor(start, mid, 0.495);
mixer[6] = lerpColor(start, mid, 0.594);
mixer[7] = lerpColor(start, mid, 0.693);
mixer[8] = lerpColor(start, mid, 0.792);
mixer[9] = lerpColor(start, mid, 0.891);
mixer[10] = lerpColor(start, mid, 0.99);
mixer[11] = mid;
mixer[12] = lerpColor(mid, end, 0.099);
mixer[13] = lerpColor(mid, end, 0.198);
mixer[14] = lerpColor(mid, end, 0.297);
mixer[15] = lerpColor(mid, end, 0.396);
mixer[16] = lerpColor(mid, end, 0.495);
mixer[17] = lerpColor(mid, end, 0.594);
mixer[18] = lerpColor(mid, end, 0.693);
mixer[19] = lerpColor(mid, end, 0.792);
mixer[20] = lerpColor(mid, end, 0.891);
mixer[21] = lerpColor(mid, end, 0.95);
mixer[22] = lerpColor(mid, end, 0.99);
mixer[23] = end;
/* here you can change the speed of the animation */
frameRate(3);
}
/*******************************************************************
* P5 draw
* endless loop.
*
* Do something visual with collected data.
* NB! This is already endless loop, do not create loops into it
********************************************************************/
function draw() {
//background colour of canvas
background(0, 28, 122);
fill(0, 100, 65);
noStroke();
rect(0, 0, windowWidth, windowHeight / 2);
/* we are looping already, so you use variable a ... */
// for (let a = 0; a < weather.hours.length; a++) {
fill(47, 100, 100, (weather.hours[a].airTemperature - 27) / 10);
noStroke();
rect(0, 0, windowWidth, windowHeight / 2);
/* ... and increase its value for the next loop */
a++;
// }
fill(234, 100, 31);
noStroke();
rect(0, windowHeight / 2, windowWidth, windowHeight / 2);
// for (let w = 0; w < weather.hours.length; w++) {
fill(47, 100, 100, (weather.hours[w].waterTemperature - 28) / 20);
noStroke();
rect(0, windowHeight / 2, windowWidth, windowHeight / 2);
w++;
// }
//translucent circles with random sizes to form on random locations
// for (let h = 0; h > weather.hours.length; h++) {
let humidityCircle = weather.hours[h].humidity;
for (let hc = 0; hc < humidityCircle; hc++) {
fill(255, 255, 255, 127.5);
noStroke();
ellipse(random(windowWidth), random(windowHeight / 2), random((windowWidth / 18) + 15));
}
h++;
// }
calcWindWave();
renderWindWave();
calcWaveWave();
renderWaveWave();
//middle large circle
// for (let t = 0; t < weather.hours.length; t++) {
fill(mixer[weather.hours[t].time]);
noStroke();
ellipse(windowWidth / 2, windowHeight / 2, windowHeight / 3.5);
t++;
// }
/* Also we have to check/change our counters
* At this case all the counters will be initialized under same condition
*/
if(t>23)
a = w = t = h = 0;
}
function calcWindWave() {
//change amplitude using windSpeed
//Increment theta (try different values for 'angular velocity' here)
theta += 0.02;
//For every x value, calculate a y value with sine function
let x = theta;
let wsAmplitude;
for (let ws = 0; ws < weather.hours.length; ws++) {
wsAmplitude = weather.hours[ws].windSpeed * amplitude;
for (i = 0; i < yvalues.length; i++) {
yvalues[i] = sin(x) * wsAmplitude;
x += dx;
}
}
}
function calcWaveWave() {
//change amplitude using waveHeight
//Increment theta (try different values for 'angular velocity' here)
theta += 0.05;
// For every x value, calculate a y value with sine function
let x = theta;
let whAmplitude;
for (let wh = 0; wh < weather.hours.length; wh++) {
whAmplitude = weather.hours[wh].waveHeight * amplitude;
for (let i = 0; i < yvalues.length; i++) {
yvalues[i] = sin(x) * whAmplitude;
x += dx;
}
}
}
function renderWindWave() {
noStroke();
fill(255);
//A simple way to draw the wave with an ellipse at each location
for (let x = 0; x < yvalues.length; x++) {
ellipse(x * xspacing, height / 2 + yvalues[x], 3, 3);
}
}
function renderWaveWave() {
noStroke();
fill(255);
//A simple way to draw the wave with an ellipse at each location
for (let x = 0; x < yvalues.length; x++) {
ellipse(x * xspacing, height / 2 - yvalues[x], 3, 3);
// print(yvalues.x);
}
}
/*******************************************************************
* P5 mouseClicked
*
* P5 event. I use it to start/stop the animation
********************************************************************/
mouseClicked = function() {
if (mouseButton === LEFT) {
clicked = !clicked;
if(clicked){
noLoop();
}else{
loop();
}
}
};<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>