從處理移動到p5.js

Question

我正在做一些簡單的處理庫實驗，並希望將這些草圖中的一個移植到P5.js，以便它可以放置在網絡上。下面是在處理（JAVA）的代碼：

float t; 

void setup() { 
    background(20); 
    size(500, 500); 
} 

void draw(){ 
    stroke(random(0,255), random(0,255), random(0,255)); 

    translate(width/2, height/2); 
    rotate(radians(45)); 
    line(x(t), y(t), y(t), x(t)); 
    println(x(t)); 
    println(y(t)); 
    t++; 


} 

float x(float t) { 
    return cos(t/10) * 200; 
} 

float y(float t) { 
    return sin(t/100) * 200; 
} 

我打印X（t）和y（t）的值作爲參考，並且它們出現在處理控制檯細。我試圖改寫這個由P5.js（JavaScript）的被接受：

var t; 

function setup() { 
    background(20); 
    createCanvas(500, 500); 
} 

function draw(){ 
    stroke(random(0,255), random(0,255), random(0,255)); 

    translate(width/2, height/2); 
    rotate(radians(45)); 
    line(x(t), y(t), y(t), x(t)); 
    print(x(t)); 
    print(y(t)); 
    t++; 
} 

function x(t) { 
    return cos(t/10) * 200; 
} 

function y(t) { 
    return sin(t/100) * 200; 
} 

當我在P5.js開發環境中運行這個，控制檯的每個值返回null，並沒有什麼屏幕上繪製。希望有人能幫忙，謝謝！

Answer 1

在處理中（它建立在Java上），您的t變量獲取0.0的默認值float的值。

在P5.js（基於JavaScript）中，您的t變量的默認值爲undefined。然後，您嘗試在其他操作中使用該值，這就是爲什麼它們都不符合您的期望。

簡單解決您的問題是隻需手動將缺省值設置爲0。在頂部var t = 0;代替：

Answer 2

試着說var t;