星空繪畫系統

chrome瀏覽器、window 10、vs code

h5 canvas、jquery框架

碼繪和手繪是不同的藝術形式。如今，和計算機的互動方式越來越多元化，除了滑鼠鍵盤操作以外，數字板、leap motion動作捕捉裝置、vr頭盔等等新型互動裝置也逐漸興起。在追求傳統繪畫的同時，也需要順應技術發展，將傳統的繪畫加工後以更加新穎的方式呈現。

實現了繪畫系統中的常見操作，增加了幾種筆刷。

筆刷一：實現了基本的鉛筆操作

function draw_pencil() 
};canvas.onmouseup = (e) => ;};}

筆刷二：實現了同心圓操作（起點和滑動點距離為半徑，起點為圓心）

function draw_cicle1() 
};canvas.onmouseup = (e) => ;};}

筆刷三：實現了擴散圓操作（起點和滑動點距離為半徑，滑動點為圓心）

function draw_cicle2() 
};canvas.onmouseup = (e) => ;};}

筆刷四：實現了時間圓操作（圓的半徑隨時間增大而增大）

function draw_cicle3() , 1);
ctx.beginpath();
ctx.fillstyle = color.value;
ctx.arc(ele.x, ele.y, time / 100, 0, math.pi * 2);
ctx.stroke();}};
canvas.onmouseup = (e) => ;};}

筆刷五：實現了三角圓操作（圓的半徑和位置有關r=sin(x*x+y*y)）

function draw_cicle4() 
};canvas.onmouseup = (e) => ;};}

筆刷六：實現了擴散線的操作

function draw_line1() 
};canvas.onmouseup = (e) => };}

筆刷七：實現了不確定線操作

function draw_line2()  else 
}, 100);
if (isallowdraw) 
};canvas.onmouseup = (e) => };}

以上就是所有筆刷操作。都有乙個共同點：重複。

靈感**於「重複」。計算機與人類相比，其最大的優勢在於可以毫不懈怠的重複一項簡單的工作——計算，所有簡單而重複的工作幾乎都能利用計算機代替完成。手繪也是如此，重複使用大量線條刻畫乙個形體，或者乙個場景其實也是乙個重複的過程，即使線條之間的關係有區別，但仍舊可以找到相似的規律。例如，速寫畫的軌跡會比較不確定，線條之間的疏鬆感較強，則可以根據這一特點刻畫「不確定線」。人物形體可以抽象為乙個個圓柱體形，進一步抽象到曲面，可以看作乙個個不同半徑的小圓組成，由此可以用「時間圓」刻畫體型。

以上是一張宇宙星空圖。使用了乙個筆刷「同心圓筆刷」。對比手繪星空圖，碼繪的星空圖，星球會比較分散，但是呈現出一定的規律，以中心為圓心，向周圍輻射的同心圓，而事實上這張星空圖也正是這樣畫出的。而手繪呈現更多的無規律性。如下圖：

1.圖元模型：

2.什麼是繪畫？——以抽象思維理解繪畫

星空繪畫系統

簡易繪畫系統開發

WPF星空效果

WPF星空效果

星空繪畫系統

簡易繪畫系統開發

WPF星空效果

WPF星空效果

相關推薦