我正在嘗試將影像轉換為在 p5.js 中只有一定數量顏色的圖片。我通過選擇num隨機顏色來做到這一點。然后，我將遍歷影像中的每個像素loadPixels()并為其打分。該分數取決于顏色與其中一種隨機顏色的接近程度。我通過分別添加 rgb 值的差異然后選擇最低分數來做到這一點。例如，如果我有num = [color(100, 100, 100), color(200, 200, 200)]并且我正在查看一個像素，color(100, 150, 110)那么分數將不是 240（影像像素和 200 顏色之間的差異）而是 60。這一切都很好。接下來，我要做的是確保每個像素的分數都低于scoreBoundary. 原來這個變數設定為0。如果一個像素的score大于scoreBoundary，我更改最接近的隨機顏色以使像素的得分低于scoreBoundary。這一切都應該正常作業。經過幾個回圈（我還沒有決定多少，也許它與平均像素分數有關），如果仍然有一個像素超過scoreBoundary，我增加scoreBoundary。最終，我應該擁有我能擁有的最好的num彩色照片。（如果你想知道，我正在嘗試制作一種十字繡克隆。）
現在解決我的問題。我想做一個臨時的進度條，因為這個方法很慢。最初，我嘗試輸入說pixelNum " out of " pixels.length. 但是，由于此程序處于 for 回圈中，因此沒有出現。所以，我試著把這個程序放在繪圖回圈中。現在文本出現了，但速度慢得令人難以忍受。大約一分鐘后，我可能完成了第一個回圈的 1%（記住，會有數千個回圈），因為它每幀只執行一次計算。現在我問你兩件事，任何一種解決方案都有幫助。
一，有沒有一種方法可以讓行程盡可能快地遠離繪圖回圈？例如，我可以讓這個程序每幀運行多次（不只是添加i < previousBoundary * howMuchFasterIWantItToBe），同時仍然鏈接到進度條的繪圖嗎？
二，有沒有其他方法可以解決這個問題？另一個將影像中顏色數量減少到的庫或方法num？
uj5u.com熱心網友回復：
您并沒有真正顯示任何可重現的代碼來解釋您遇到的問題。
無論如何，您正在尋找的（對于您的第一個問題）是一個異步函式。
光敏性的 SEIZURE WARNING 警告 說真的，這個示例草圖會毀了你的眼睛，但是由于異步功能，你可以看到兩個橢圓在不同的時間表上作業
重要的是，我必須為編輯器附加草圖的開頭/*jshint esversion: 9 */以允許使用異步：
/*jshint esversion: 9 */
let thing = 10;
let thing2 = 10;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
drawOther();
for(let i = 0; i < 1000; i ){
if(thing <= 400){
thing = 2;
}else{
thing = 10;
}
fill(255)
stroke(0);
ellipse(width, height, thing, thing);
}
}
const drawOther = async () => {
for(let i = 0; i < 100; i ){
if(thing2 <= 400){
thing2 = 2;
}else{
thing2 = 10;
}
fill(0);
stroke(255)
ellipse(0, 0, thing2, thing2);
}
}
您可以在此處閱讀有關異步函式的更多資訊，但基本上，它可以滿足您的需求 - 啟動一個不會阻塞主回圈的單獨活動執行緒。如果您想從異步函式回傳任何內容，您還需要閱讀await和promises。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/459265.html
標籤：javascript 表现 颜色 p5.js
上一篇：合并來自不同陣列的物件
下一篇：DjangoORM查詢太慢