processing 基本繪圖 part5

我已經不想再去思考這課程安排的邏輯了...

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; } }