week12 網路協定
1.先開啟網路
2.再設寫Server端的程式碼
```c
import processing.net.*;
Server myServer;
void setup(){
size(200,200);
myServer = new Server(this,5204);
}
void draw(){
myServer.write("HI");
}
void mouseDragged(){
myServer.write("Hello");
}
```
接著設定Client端的程式碼
```c
import processing.net.*;
Client myClient;
void setup(){
size(200,200);
myClient = new Client(this,"127.0.0.1",5204);
}
void draw(){
background(#FFFFF2);
if(myClient.available()>0){
String line = myClient.readString();
fill(0);
text(line,100,100);
}
}
```
滑鼠移動時會顯示出Hello，待機狀態時只顯示HI
3.修改Sever、Client端程式碼，使其可以進行畫圖
Server端
```
import processing.net.*;
Server myServer;
void setup(){
size(200,200);
myServer = new Server(this,5204);
}
void draw(){
//myServer.write("HI");
}
void mouseDragged(){
myServer.write(mouseX);
myServer.write(mouseY);
}
```c
Client端
```
import processing.net.*;
Client myClient;
void setup(){
size(200,200);
myClient = new Client(this,"127.0.0.1",5204);
background(#FFFFF2);
}
void draw(){ //每秒60次
while(myClient.available()>0){
int x = myClient.read();
int y = myClient.read();
ellipse(x,y,3,3);
}
}
```c
在Sever端按住滑鼠拖移即可在Client端畫線
期中作業 今日進度
```
PImage imgBig; //印出圖片
PImage [][]imgSmall; //代表會有幾乘幾的拼圖框架出現
PVector [][]coord; //拼圖的座標，用來移動拼圖
void setup(){
size(800,600);
readFile("1.jpg");
}
void readFile(String filename){
imgBig = loadImage(filename);
imgSmall = new PImage[5][8]; //因為圖片太大，所以陣列內數字增加
coord = new PVector[5][8];
for(int i=0;i<5;i++){
for(int j=0;j<8;j++){
imgSmall[i][j] =imgBig.get(80*j,80*i,80,80); //前者兩個數字疑似圖片的位置，後兩者則是顯示視角距離圖片的遠近(實測後這兩個數字最剛好)
coord[i][j]=new PVector(100*j,100*i); //這兩個數字代表拼圖間的間隔，數字越大間距越大，數字越小間距越小
}
}
for(int k=0;k<0;k++){ //此迴圈能隨機改變拼圖位置，而k所寫的數字代表拼圖交換幾次
int i1=int(random(5)),i2=int(random(5));
int j1=int(random(8)),j2=int(random(8));
PVector temp =new PVector(coord[i1][j1].x,coord[i2][j2].y);
coord[i1][j1]=coord[i2][j2];
coord[i2][j2]=temp;
}
}
void draw(){
background(0); //背景顏色改黑，否則要是背景為白的情況下，移動會出現殘影
for(int i=0;i<5;i++){
for(int j=0;j<8;j++){
image(imgSmall[i][j],coord[i][j].x,coord[i][j].y,80,80); //此數字代表拼圖框框的大小，寫80的緣故是為了容易分辨
noFill(); //保證每個位置都有圖片
//rect(j*100,i*100,80,80);
}
}
}
int selectedI=-1,selectedJ=-1;
void mousePressed(){ //點擊
int selectI=-1,selectJ=-1;
for(int i=0;i<5;i++){
for(int j=0;j<8;j++){
if(coord[i][j].x<mouseX && mouseX<coord[i][j].x+80 && coord[i][j].y<mouseY && mouseY<coord[i][j].y+80){ //不太理解，只知道x、x+80是指拼圖在該圖片的位置
selectI =i; selectJ=j;
}
}
}
if(selectI!=-1){
selectedI=selectI;
selectedJ=selectJ;
}
}
void mouseDragged(){ //拖曳
if(selectedI!=-1){
coord[selectedI][selectedJ].add(new PVector(mouseX-pmouseX,mouseY-pmouseY));
}
}
void mouseReleased(){
selectedI=-1;
selectedJ=-1;
}
void keyPressed(){
if(key=='2') readFile("2.jpg");
if(key=='3') readFile("3.jpg");
}
```c
沒有留言:
張貼留言