我已經不想再去思考這課程安排的邏輯了...
class 1
使用鍵盤、滑鼠移動目標時產生殘影
就如同上一篇滑鼠移動的部份再增加鍵盤移動
//class 1
//宣告圖片
PImage img;
//圖片的座標
int imgX = 100;
int imgY = 100;
//一次所移動的量
int imgMove = 10;
//背景顏色設定
int bgColor = 255;
void setup(){
//設定視窗大小
size(600, 400);
//取消外框線
noStroke();
//設定圖片是讀取哪一張
img = loadImage("apple.png");
}
void draw(){
//畫一個與視窗大小相同的正方形，透明度設定為40
fill(bgColor, 40);
rect(0, 0, width, height);
//畫出圖片
image(img, imgX, imgY);
//當鍵盤按下w、s、d、a畫面中圖片移動
if(keyPressed == true && key == 'w' || keyPressed == true && key == 'W'){
imgY -= imgMove;
}
if(keyPressed == true && key == 's' || keyPressed == true && key == 'S'){
imgY += imgMove;
}
if(keyPressed == true && key == 'd' || keyPressed == true && key == 'D'){
imgX += imgMove;
}
if(keyPressed == true && key == 'a' || keyPressed == true && key == 'A'){
imgX -= imgMove;
}
//設定圖片可移動範圍
//左邊界
if(imgX < 0){
imgX = 0;
//右邊界
}else if(imgX > width - img.width){
imgX = width - img.width;
//上邊界
}else if(imgY < 0){
imgY = 0;
//下邊界
}else if(imgY > height - img.height){
imgY = height - img.height;
}
}
滑鼠按下後移動執行
void mouseDragged(){
//圖片的X座標相當於圖片中間
imgX = mouseX - img.width/2;
imgY = mouseY - img.height/2;
}
class 2
使用範例keyboard
如果直接開啟processing可從 open>Basics>Input>keyBoard
// Keyboard.
//
// Click on the image to give it focus and press the letter keys
// to create forms in time and space. Each key has a unique identifying
// number called it's ASCII value. These numbers can be used to position
// shapes in space.
int numChars = 26;
color[] colors = new color[numChars];
int keyIndex;
float keyScale;
int rectWidth;
void setup()
{
size(200, 200);
noStroke();
background(0);
keyScale = 200/numChars-1.0;
rectWidth = width/4;
}
void draw()
{
if(keyPressed) {
if(key >= 'A' && key <= 'z') {
if(key <= 'Z') {
keyIndex = key-'A';
} else {
keyIndex = key-'a';
}
//真正有修改就這邊，將原本的單色改為RGB三色
fill(millis()%255, millis()%300, millis()%400);
println(millis()%255);
float beginRect = rectWidth/2 + keyIndex*keyScale-rectWidth/2;
rect(beginRect, 0.0, rectWidth, height);
}
}
}
class 3
使用Button範例
或由processing直接開啟 open>Topic>GUI>button
//class 3
// Button.
//
// Click on one of the colored squares in the
// center of the image to change the color of
// the background.
int rectX, rectY; // Position of square button
int circleX, circleY; // Position of circle button
int rectSize = 50; // Diameter of rect
int circleSize = 53; // Diameter of circle
color rectColor, circleColor, baseColor;
color rectHighlight, circleHighlight;
color currentColor;
boolean rectOver = false;
boolean circleOver = false;
void setup()
{
size(200, 200);
smooth();
rectColor = color(0, 200, 0);
rectHighlight = color(51);
circleColor = color(0, 0, 255);
circleHighlight = color(204);
baseColor = color(102, 0, 0);
currentColor = baseColor;
circleX = width/2+circleSize/2+10;
circleY = height/2;
rectX = width/2-rectSize-10;
rectY = height/2-rectSize/2;
ellipseMode(CENTER);
}
void draw()
{
update(mouseX, mouseY);
background(currentColor);
if(rectOver) {
fill(rectHighlight, 0, 200);
} else {
fill(rectColor, 0, 0);
}
stroke(255);
rect(rectX, rectY, rectSize, rectSize);
if(circleOver) {
fill(circleHighlight, 100, 0);
} else {
fill(circleColor, 300, 100);
}
stroke(0);
ellipse(circleX, circleY, circleSize, circleSize);
}
void update(int x, int y)
{
if( overCircle(circleX, circleY, circleSize) ) {
circleOver = true;
rectOver = false;
} else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
rectOver = true;
circleOver = false;
} else {
circleOver = rectOver = false;
}
}
void mousePressed()
{
if(circleOver) {
currentColor = circleColor;
}
if(rectOver) {
currentColor = rectColor;
}
}
boolean overRect(int x, int y, int width, int height)
{
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
boolean overCircle(int x, int y, int diameter)
{
float disX = x - mouseX;
float disY = y - mouseY;
if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
processing 基本繪圖 part5
Processing 基本繪圖 part4
老實講...我自己也搞不太懂這些順序編排的方式
感覺上有點類似想到什麼就寫啥
畫面的色彩變化遠大於畫面美感
未必是會變越多顏色就越厲害
這是資工？設計？還是藝術？
class1
畫出三個圖形
當滑鼠移動時將改變顏色
可參考官方color函式、mouseMoved函式
//class 1
//定義一個值
int nowColor = 100;
void setup(){
//設定畫面大小
size(400, 300);
//不要有邊框
noStroke();
}
void draw(){
//填入顏色(R, G, B)
fill(nowColor, nowColor/2, 0);
//畫出方形
rect(0, 0, 100, height);
//填入顏色(R, G, B)
fill(nowColor/4, 0, nowColor);
//畫圓
ellipse(200, 100, 50, 50);
//填入顏色(R, G, B)
fill(0, nowColor/3, 0);
//畫出三角形
triangle(230, 175, 380, 290, 286, 275);
}
//當滑鼠移動時執行其內容
void mouseMoved(){
//開始時定義的職增加
nowColor += 5;
//當值大於255(上限值)改變為於100
if(nowColor > 255){
nowColor = 100;
}
}
class2
改變視窗大小
//class 2
//定義增加的大小
int myX = 0;
int myY = 0;
void setup(){
//設定視窗大小
size(300, 300);
//取消邊框
noStroke();
}
void draw(){
//當滑鼠移動到靠近視窗的10%範圍時邊框擴大
if(mouseX > width*0.9){
myX += 10;
setMyStage(width + myX, height);
}
//當滑鼠移動到靠近視窗的10%範圍時邊框擴大
if(mouseY > height*0.9){
myY += 10;
setMyStage(width, height + myY);
}
//當視窗大於設定大小 改變為原來大小
if(width > 600){
setMyStage(300, height);
myX = 0;
}
//當視窗大於設定大小 改變為原來大小
if(height > 600){
setMyStage(width, 300);
myY = 0;
}
}
//自行定義一個函式
void setMyStage(int X,int Y){
//設定視窗大小
frame.setSize(X, Y);
size(X, Y);
}
class3
測試滑鼠左右鍵
可參考官方函式mouseButton、mousePressed、mouseReleased
//class 3
void setup(){
//設定視窗大小
size(250, 250);
//背景色為白色
background(255);
}
void draw(){
//當按下滑鼠左鍵
if(mousePressed == true && mouseButton == LEFT){
//背景色改為深灰色
background(50);
//列印出"LEFT"
println("LEFT");
}
//當按下滑鼠右鍵
if(mousePressed == true && mouseButton == RIGHT){
//背景色改為淺灰
background(150);
//列印出"RIGHT"
println("RIGHT");
}
}
//當滑鼠放開
void mouseReleased(){
//背景色改為白色
background(255);
}
class4
PImage a,b,c;
//class 4
void setup(){
size(600, 400);
a = loadImage("a.jpg");
b = loadImage("b.png");
c = loadImage("c.png");
background(255);
}
void draw(){
if( key == 'a' || key == 'A'){
image(a, 0, 0);
}
if( key == 'b' || key == 'B'){
image(b, 0, 0);
}
if( key == 'c' || key == 'C'){
image(c, 0, 0);
}
}
void keyReleased() {
background(255);
}
資料來源
processing官方網站
更多Processing教學
Processing 基本繪圖 part3
經過兩星期的課程想必有在收看本blog的人對於processing有點了初步的了解
本週的不負責任教學又來啦！
使用beginShape來完成想要的圖形
//Class 1
void setup(){
//設定視窗大小
size(100, 100);
//背景設定為白色
background(255);
//使線段平滑點
smooth();
}
void draw(){
//開始畫圖
beginShape(TRIANGLE_STRIP);
//在這先解釋一下為何這樣下顏色指令會每個三角形都不同顏色
//三角形顧名思義三個點(廢話)
//由於beginShape在endShape出現前會將所有出現過的點連結在一起
//從第四個點開始可以共用前面倒數兩個點來連接為三角形
//所以後面這部份每隔一個vertex(點)就可以再未下一個三角形上色
fill(255, 0, 0);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
fill(0, 200, 0);
vertex(60, 20);
fill(50, 10, 100);
vertex(70, 75);
fill(0, 200, 200);
vertex(80, 20);
fill(100, 150, 0);
vertex(90, 75);
endShape();
}
使用beginShape繪製不規則形
配合curveVertex來做出曲線
當然要製作出曲線亦可選擇使用bezierVertex
因為懶所以就直接寫....懶得加上setup、deaw...
//class 2
//內部不填入顏色
noFill();
//開始畫圖
beginShape();
//剛剛使用vertex(點)所以兩點間直接連接為直線
//現在所使用的curveVertex就是繪製曲線，詳細使用方式請參考上方連結
curveVertex(90, 50);
curveVertex(50, 90);
curveVertex(70, 50);
curveVertex(80, 17);
curveVertex(50, 20);
curveVertex(50, 50);
endShape();
for loop練習
其實內容與學程式基礎的用*來排圖案一樣
只不過換成畫方塊
//class 3
void setup(){
//設定視窗大小
size(200, 200);
//定義小方塊的大小
int RS = 10;
//for(定義 i 小於畫面的高; i 大於 0; i 每次減去小方塊大小 再多5);
//會再多5 是為了方塊與方塊間的空細
for(int i = height; i > 0; i -= RS+5){
//for(定義 j 等於 0; j 小於 i ; j 每次加上小方塊大小 再多5);
for(int j = 0; j < i; j += RS+5){
//繪製小方塊
rect(i, j, RS, RS);
}
}
}
將外部圖片讀取進processing
請參考PImage
外部讀取檔案prcessing會預設在相同資料夾內的Data
如下圖
這邊要注意的是當要將圖片設定為背景時
視窗大小必須與圖片大小一致
為何會使用這張圖咧....
沒辦法我愛阿~ 邵庭 >//////<
//class 4
//定義要弄一張圖名稱為bg
PImage bg;
//bg就是要讀取"nikki.png"這張圖
bg = loadImage("nikki.png");
//視窗大小設定為(需配合圖片大小)
size(372, 556);
//設定背景為 bg 這張圖
background(bg);
讓圖形在視窗中反彈亂跑
可參考Learn內的Bounce
或直接在processing內開啟 "open > Topics > Motion > Bounce"會有相同的結果
只是他在裡面是用圓形
在這更改為圖形
下面這部份就只註解有修改範例的部份
//class 5
float xpos, ypos; // Starting position of shape
float xspeed = 2.8; // Speed of the shape
float yspeed = 2.2; // Speed of the shape
int xdirection = 1; // Left or Right
int ydirection = 1; // Top to Bottom
//設定圖形為" img "
PImage img;
void setup() {
//設定視窗大小
size(640, 640);
noStroke();
frameRate(30);
smooth();
//img 為 "1.jpg"這張圖
img = loadImage("1.jpg");
// Set the starting position of the shape
//因為圖片太大...原本的設定會太超過
xpos = width/9;
ypos = height/3;
}
void draw() {
background(255);
xpos = xpos + ( xspeed * xdirection );
ypos = ypos + ( yspeed * ydirection );
//當( 座標x + 圖片的寬 > 視窗的寬 || 座標x < 0 )
if (xpos+480 > width || xpos < 0) {
//改變方向
xdirection *= -1;
}
//當( 座標y + 圖片的高 > 視窗的高 || 座標y < 0 )
if (ypos+321 >= height || ypos < 0) {
//改變方向
ydirection *= -1;
}
//繪製出圖片
image(img, xpos, ypos);
}
拖曳圖形並使其產生殘影
其實原理就是利用processing內void draw(){ }會不斷的重新繪製內部的程式
所以在每次重新畫時多覆蓋一個與背景顏色相同並具透明度的矩形
這樣就會產生殘影效果
//class 6
//定義圖片為"img"
PImage img;
//定義 x、y 為滑鼠的座標
int x = mouseX;
int y = mouseY;
void setup(){
//定義視窗大小
size(600, 600);
//img為 "1.jpg"
img = loadImage("1.jpg");
//背景設定為白色
background(255);
//不要有邊框產生
noStroke();
//圖片預設位置
image(img, x, y);
}
void draw(){
}
void mouseDragged(){
//設定x、y位置為圖形的中央
x = mouseX-240;
y = mouseY-160;
//填入色彩為白色，透明度為40
fill(255, 40);
//半透明方形大小為整個畫面
rect(0, 0, width, height);
//畫出圖片
image(img, x, y);
}
//當滑鼠放開
void mouseReleased(){
//背景從新刷為白色
background(255);
//因為圖片也被背景蓋過，所以再重繪圖形
image(img, x, y);
}
若只是要使用殘影效果亦可考慮使用tint函數
本週不負責任教學到此結束
相關連結
Processing官方網站
Processing 基本繪圖 part2 by Isken
Processing 基本繪圖 by Isken
Processing 基本繪圖 part2
前面的廢話部份就省略
數學計算函式
來源http://processing.org/reference/index_ext.html
搜尋"Calculation"
//class 1
//先隨便定義兩個數
float x = 12.3;
float y = 30.72;
//ceil 無條件進位
println("ceil(x) = " + ceil(x));
//random(最小值, 最大值) 隨機亂數
println("random(x) = " + random(x, y));
//round 四捨五入
println("round(x) = " + round(x));
//floor 無條件捨去
println("floor(x) = " + floor(x));
//max 找出其中最大值 不限定兩個數，亦可輸入一個數列
println("max(x) = " + max(x, y));
//min 找出其最小值 其內容與max相同
println("min(x) = " + min(x, y));
if 判斷式
//class 2
//隨機一個數
int isken = round(random(0, 100));
//印出"isken"大小
println(isken);
//if(判斷條件) { 如果成立後作哪些事}
if(isken >= 60){
//畫方型
rect(width*0.1, height*0.4, isken, isken);
}
if(isken < 60){
//畫方形
rect(width*0.5, height*0.7, isken, isken);
}
if(isken >= 70){
//畫圓形
ellipse(width*0.2, height*0.4, isken, isken);
}else{
//畫圓形
ellipse(width*0.4, height*0.8, isken, isken);
}
if判斷式練習
弄一顆球在畫面上左右彈，並且顏色變換
//class 3
int iskenMove = 0;
int iskenY = 0;
int iskenBall = 100;
boolean iskenDis = true;
void setup(){
//設定畫面大小
size(600, 400);
}
void draw(){
//背景顏色設定為白色
background(255);
//取消球外框
noStroke();
//使曲線平滑
smooth();
//填入求的顏色 fill(R, G, B);
fill(iskenMove, iskenY/3, iskenMove/2);
//畫出球來 ellipse(X, Y, 球寬, 球高);
ellipse(iskenMove, iskenY+iskenBall/2, iskenBall, iskenBall);
//如果球超過畫面高度時回到畫面最上端
if(iskenY > height - iskenBall){
iskenY = 0;
}
//如果球超過畫面寬時改變方向
if(iskenMove > width){
iskenDis = false;
iskenY += iskenBall;
}
if(iskenMove < 0){
iskenDis = true;
iskenY += iskenBall;
}
//設定球跑的方向，數字越大跑越快，加號往右，減號往左
if(iskenDis == true){
iskenMove += 5;
}
if(iskenDis == false){
iskenMove -= 5;
}
}
for loop練習
使用方式請參閱官方說明
再畫面中畫出三個圈
//class 4
void setup(){
//設定畫面大小
size(400, 300);
//圓內部不填滿顏色
noFill();
}
void draw(){
//設定背景為白色
background(255);
//定義圈的大小
int iskenBall = 100;
//畫出三個圈
for(int i = 0; i < 3; i++){
ellipse( 100 + i * iskenBall, 100, iskenBall, iskenBall);
}
}
試著使用for loop畫出同心圓
//class 5
void setup(){
//設定畫面大小
size(400, 400);
}
void draw(){
//設定背景為白色
background(255);
//畫出同心圓
for(int i = 10; i < width/2; i += 10){
//圓內部不填顏色
noFill();
//外框線顏色設定 stroke(R, G, B);
stroke(i*1.5, i*2, i*1.2);
//外框線寬設定
strokeWeight(1.2);
//畫圓
ellipse( width*3/4, height/2, i, i);
}
//以下為再畫一個
for(int i = 10; i < width/2; i += 10){
noFill();
stroke(i*2, i*3, i);
strokeWeight(2);
ellipse( width/4, height/2, i, i);
}
}
雙層for迴圈
//class 6
void setup(){
//設定畫面大小
size(600, 400);
//設定背景為白色
background(255);
//外框線設定為黑色
stroke(0);
}
void draw(){
//定義圓大小
int isken = 100;
//第一層迴圈 畫直的
for(int i = 0; i < 3; i++){
//第二層迴圈 畫橫的
for(int j = 0; j < 2; j++){
ellipse(100 + j*isken, 100+ i*isken, isken, isken);
}
}
}
前面畫圓、畫方也畫夠多了
現在來畫一下三角形
函式使用方式
beginShape();
vertex();
endShape();
//class 7
void setup(){
//開始繪製圖形
beginShape();
//定義座標 vertex(X, Y);
vertex(width/2, height/6);
vertex(width*0.9, height/4);
vertex(width/5, height*0.9);
//結束繪製圖形
endShape(CLOSE);
}
相關連結
Processing 官方網站
Processing 函式查詢頁面
Processing 基本繪圖
之前本來想過要寫關於processing的教學
一方面懶...另一方面也想不到該怎樣寫
就這樣...時間過去了
這學期修了一堂王照明老師開的課 - 網路程式設計
其內容就是教processing
想利用這課程規劃+作業順便來這邊紀錄一下(擺明自己懶得想課程...)
廢話完開始正題
第一堂課內容究竟是教些啥呢？
很簡單...教你畫圓、填色、圓跟著滑鼠移動
//class 1
int ballSize = 10;
void setup(){
//設定顯示出來視窗大小
size(600, 400);
//不要有外框線
noStroke();
//使鋸齒狀減少(如同向量檔一般)
smooth();
}
void draw(){
//背景顏色定義，此處設定為白色
background(255);
//填入顏色 三個數字分別為(R, G, B)
fill(255, 255, mouseX/2);
//processing內建畫圓的函數
//使用方式為 ellipse( 座標x, 座標y, 圓的寬, 圓的高);
ellipse(mouseX + ballSize*2, mouseY + ballSize*2, ballSize, ballSize);
fill(255, mouseY/2, 255);
ellipse(mouseX - ballSize*2, mouseY - ballSize*2, ballSize, ballSize);
fill(mouseX/2, 255, 255);
ellipse(mouseX, mouseY, ballSize, ballSize);
}
如果還想要知道更詳細的函數如何使用還是請去Processing官方Reference
接下來的範例主要是介紹Processing內常用的變數類型
//class 2
void setup(){
// int 只會有整數
int testInt = 123456789;
// float 允許有小數點
float testFloat = 123.456789;
// boolean 布林運算 只會有真(true)/假(false)
boolean testBoolean = true;
println(testInt+" "+testFloat+" "+testBoolean);
}
這次上課最後一個範例為畫線
也就是使用line函數
line函數使用方式也是相當簡單
line( x1, y1, x2, y2);
翻譯口語化一點 line( 第一點座標X, 第一點座標Y, 第二點座標X, 第二點座標Y);
//class 3
void setup(){
//設定視窗大小
size(300, 600);
//背景設定為白色
background(255);
//定義線的數量
int lineQuantity = 25;
//for loop
for(int i = 0; i < lineQuantity; i++){
//外框線的顏色(線段顏色)
stroke(255 - i*10, i * 10, 255 - i*20);
//外框線粗細(線段粗細)
strokeWeight(i);
//劃線
line(10, 10+i*lineQuantity, width-10, 10+i*lineQuantity);
}
}
課堂到這...也下課了
不過老師有出回家作業
利用基本圖形隨變化一張圖
想來想去還是畫南方公園的kenny啦
//定義背景星星數量
int starQuantity = 500;
float starX, starY, starSize;
int floorColor = 255;
//定義kenny位置X
int kennyX = 150;
//定義kenny位置Y
int kennyY = 180;
定義kenny大小
int kennySize = 100;
int kennyBodyX = kennyX;
int kennyBodyY = kennyY+kennySize/2;
void setup(){
size(400, 300);
}
void draw(){
background(0);
for(int i = 0; i < starQuantity; i++){
starX = random(width);
starY = random(height);
stroke(255);
starSize = random(2);
strokeWeight(starSize);
point(starX, starY);
//println(starX+" "+starY);
}
for(int i = height*3/4; i <= height; i++){
stroke(floorColor,floorColor,floorColor);
line(0, i, width, i);
floorColor--;
if(floorColor < 200){
floorColor = 250;
}
}
//kenny
//ellipse(x, y, width, height);
//arc(x, y, width, height, start, stop);
//quad(x1, y1, x2, y2, x3, y3, x4, y4);
//body
fill(242, 98, 1);
stroke(242, 98, 1);
strokeWeight(1);
strokeJoin(ROUND);
arc( kennyBodyX+kennySize/2, kennyBodyY, kennySize, kennySize*0.8, PI, TWO_PI);
quad(kennyBodyX+kennySize*0.15, kennyBodyY-kennySize*0.2, kennyBodyX+kennySize*0.85, kennyBodyY-kennySize*0.2, kennyBodyX+kennySize*0.95, kennyBodyY+kennySize*0.15, kennyBodyX+kennySize*0.05, kennyBodyY+kennySize*0.15);
rect(kennyBodyX+kennySize*0.1, kennyBodyY, kennySize*0.8, kennySize*0.3);
//Body line
stroke(50);
strokeWeight(1.5);
line(kennyBodyX+kennySize*0.05, kennyBodyY+kennySize*0.1, kennyBodyX+kennySize*0.1, kennyBodyY-kennySize*0.1);
line(kennyBodyX+kennySize*0.95, kennyBodyY+kennySize*0.1, kennyBodyX+kennySize*0.9, kennyBodyY-kennySize*0.1);
line(kennyBodyX+kennySize*0.5, kennyBodyY-kennySize*0.35, kennyBodyX+kennySize*0.5, kennyBodyY+kennySize*0.2);
//foot
fill(90);
stroke(90);
strokeWeight(1);
rect(kennyBodyX+kennySize*0.06, kennyBodyY+kennySize*0.3, kennySize*0.88, kennySize*0.04);
//Hand
fill(132, 83, 50);
stroke(50);
//strokeWeight(1);
ellipse( kennyBodyX, kennyBodyY+kennySize*0.05, kennySize*0.15, kennySize*0.15);
ellipse( kennyBodyX+kennySize, kennyBodyY+kennySize*0.05, kennySize*0.15, kennySize*0.15);
//Head
fill(242, 98, 1);
stroke(90);
strokeWeight(0.5);
ellipse( kennyX+kennySize*0.5, kennyY-kennySize*0.1, kennySize, kennySize);
//fill(242, 98, 1);
//stroke(50);
strokeWeight(2);
ellipse( kennyX+kennySize*0.5, kennyY-kennySize*0.05, kennySize*0.8, kennySize*0.7);
fill(253, 225, 178);
stroke(253, 225, 178);
strokeWeight(1);
ellipse( kennyX+kennySize*0.5, kennyY-kennySize*0.1, kennySize*0.6, kennySize*0.6);
fill(250);
stroke(0);
strokeWeight(1);
ellipse( kennyX+kennySize*0.63, kennyY-kennySize*0.1, kennySize*0.25, kennySize*0.3);
ellipse( kennyX+kennySize*0.38, kennyY-kennySize*0.1, kennySize*0.25, kennySize*0.3);
fill(0);
stroke(0);
strokeWeight(1);
ellipse( kennyX+kennySize*0.42, kennyY-kennySize*0.1, kennySize*0.05, kennySize*0.05);
ellipse( kennyX+kennySize*0.58, kennyY-kennySize*0.1, kennySize*0.05, kennySize*0.05);
fill(111, 62, 30);
stroke(132, 83, 50);
strokeWeight(1);
beginShape();
vertex(kennyX+kennySize*0.5, kennyY-kennySize*0.4);
bezierVertex(kennyX+kennySize*0.9, kennyY-kennySize*0.45, kennyX+kennySize*1, kennyY+kennySize*0.2, kennyX+kennySize*0.5, kennyY+kennySize*0.2);
bezierVertex(kennyX+kennySize*0.8, kennyY-kennySize*0.0, kennyX+kennySize*0.8, kennyY-kennySize*0.2, kennyX+kennySize*0.5, kennyY-kennySize*0.4);
endShape();
beginShape();
vertex(kennyX+kennySize*0.5, kennyY-kennySize*0.4);
bezierVertex(kennyX+kennySize*0.1, kennyY-kennySize*0.45, kennyX+kennySize*0.0, kennyY+kennySize*0.2, kennyX+kennySize*0.5, kennyY+kennySize*0.2);
bezierVertex(kennyX+kennySize*0.2, kennyY-kennySize*0.0, kennyX+kennySize*0.2, kennyY-kennySize*0.2, kennyX+kennySize*0.5, kennyY-kennySize*0.4);
endShape();
}
雖然說沒畫的很細
不過至少還看的出來啦...|||
不會說看到指著說是stan
Processing Library - BlobDetection
BlobDetection是用來偵測"塊狀"圖像
也是這次做multi-touch使用的library
當然 現在做這技術的多的要命...也未必要使用這library
如tbeta
tbeta preview from ~ on Vimeo.
其中也具有相當完整的功能，包括手勢
以及在processing官方看到的Roots
看起來也是相當的強勁
不過multi-touch的應用目前大多都只是取代滑鼠
但總是覺得少了點什麼，應該還可以有更多的應用
忽然有感覺
這篇好像來湊文章數...囧
Processing Library - ESS
這樣說感覺很怪...
距離上次接觸到processing真的拿來寫東西好像是0135版
沒想到這次workshop已經看到他脫離beta轉為正式版 囧
以前在做跟聲音有相關的東西都是用sonia
但是現在去官方看他已經灰掉了(對於新版不支援)
在一番測試後決定使用ESS這library
從測試到開使用其實時間很短暫
不過就那幾行code...非常容易上手
在聲音的input、output支援上算相當好用
聲音大小、左右聲道控制、從A撥到B段設定、循環播放、暫停、mic支援
基本用的東西都有了
不過這library也有個大問題
就是會狂吃記憶體...用預設記憶體大小常常會出現下圖
究竟 這時候該 怎麼辦？
我們看下去
點選左上角蘋果旁邊的processing並點選偏好設定
把選項中諦一個打勾，並在後面輸入要開放多大記憶體
反正ram很便宜...不小心就開1G給他跑
這樣基本上就不太會出現這問題
但是要跑得順...就是另一回事了
Processing - capture
在去年由張登文老師跟我推薦後開始接觸
剛開始是看到ibar及本系研究生的作品開始感生興趣
自己也研究一陣子
那時官方對於capture的支援很少
在windows下還需要先將環境做出來
也就是WinVDIG、QuickTime6.5.2 pro前的版本先行安裝
還有些webcam會挑(不過我自己是沒遇上過...但官方網站上確實看到不少這問題)
improt processing.video速度上真的很慢
不知道是現在硬體都更快還是演算法有改變
感覺上速度是快了不少
那時如果要快速的擷取就必須靠Myron WebcamXtra
但大小似乎只能320*240
再大會發生像當機那種狀態
不過現在改了...
windows下不需要再安裝quicktime(但WinVDIG仍然需要)
Mac下直接執行即可
看了現在官方capture的library...發現到那些在我剛接觸時好像都有寫過
不過沒被當時還沒加入library...囧
阿影片咧？
稍等...正在錄...
processing教學-簡介
processing是一套相當適合設計師來使用的程式
在語法上並沒有太多拘束，屬於JAVA語系的
正確來說他就是把JAVA較圖像化的部分使用簡單的程式碼(指令)
在官方下載的同時會出現四個選項
Linux、MAC OS、Windows、Windows(without JAVA)
前兩項不用多說就是選擇OS
但為何在windows這會有兩項？
這就關係到JDK的問題，如果有安裝好JDK那選擇without JAVA即可
當然要抓windows這版本也沒問題，不過檔案大小上有點差距
在下載完後解壓縮點選exe即可開始撰寫
介面很簡單，也有圖像化的小按鈕
由左到右分別是" Run、Stup、Open、Save、Export "
前四個應該是正常人都看的懂得單字，並且一看就知道功能
第五個是匯出，會自動幫忙匯出成網頁檔並且是他預設好的樣子
會出完後檔案會如同上面那樣，不過還有用到圖片之類的就還會把圖片一起匯出
點下index.html後會開啟網頁，並看到你最後呈現的東西
先去睡了....我懶-.-
有空再補XD
發表文章
