2020年10月5日星期一

Σ(ﾟдﾟ) weeeeeeeeeek 04

置入圖片

PImage img;----------------------------------------宣告圖片

size(700,466);--------------------------------------畫布大小

img = loadImage("image.jpg");------------------讀取圖片

image(img,0,0);------------------------------------圖片位置

置入2張圖片

PImage img;

PImage img2;

size(700,466);

img = loadImage("image.jpg");

img2 = loadImage("image2.png");

image(img,0,0);

image(img2,0,-25,150,100);---------------------後面2數為圖片大小

大圖不動小圖動

PImage img;
PImage img2;
void setup()
{
size(700,466);
img = loadImage("image.jpg");
img2 = loadImage("image2.png");
}
void draw()
{
image(img,0,0);
image(img2,mouseX,mouseY-25,150,100);---------讓圖片跟著滑鼠走
}

腳色向右走背景隨之移動

腳色向右走

背景圖隨之滾動

PImage img;

PImage img2;

void setup()

{

size(700,150);

img = loadImage("123.jpg");

img2 = loadImage("456.png");

}

int x=0;

void draw()

{

if(mouseX>500)x--;---------------------------------------當腳色超出這個範圍背景開始移動

image(img,x,0,1200,150);

image(img2,mouseX-25,mouseY-25,50,50);

}

彈力球

float x=250, y=250;
float vx=1.0, vy=2.5;
void setup()
{
size(500,400);
}
void draw()
{
ellipse(x,y,10,10);
x+=vx;
y+=vy;
if(x>500 || x<0)vx = -vx;--------------------當碰到邊界就反彈
if(y>400 || y<0)vy = -vy;
}

控制發射方向

float x=250, y=250;

float vx=0, vy=0;

void setup()

{

size(500,400);

}

void draw()

{

background(255);

if(mousePressed) line(mouseX,mouseY,x,y);-----------------按下滑鼠瞄準發射方向

ellipse(x,y,10,10);

ellipse(mouseX,mouseY,10,10);

x+=vx;

y+=vy;

if(x>500 || x<0)vx = -vx;

if(y>400 || y<0)vy = -vy;

}

void mouseReleased()----------------------------------------------放開滑鼠發射

{

vx = x-mouseX;

vy = y-mouseY;

}

加上重力

float x=250, y=250;

float vx=1.3, vy=-14;

void setup()

{

size(500,400);

}

void draw()

{

ellipse(x,y,10,10);

x+=vx;

y+=vy;

vy+=0.98;

if(x>500 || x<0)vx = -vx*0.85;

if(y>400 || y<0)vy = -vy*0.85;

}

week4

week04

匯入照片

顯示圖片

PImage img;

size(730,730);

img=loadImage("image.png");

image(img,0,0);

顯示兩張圖片

PImage img;

PImage img2;

size(730,730);

img=loadImage("image.png");

img2=loadImage("images.png");

image(img,0,0);

image(img2,500,400,224,224);

移動第二張照片

PImage img;

PImage img2;

void setup(){

size(730,730);

img=loadImage("image.png");

img2=loadImage("images.png");

}

void draw(){

image(img,0,0);

image(img2,mouseX-224/2,mouseY-224/2,224,224);

}

背景圖移動

PImage img;

PImage img2;

void setup(){

size(600,518);

img=loadImage("xxx.png");

img2=loadImage("zzz.png");

}

int x=0;

void draw(){

if(mouseX>300) x--;

image(img,x,0);

image(img2,mouseX-224/2,mouseY-224/2,224,224);

}

float x=250, y=200;

float vx=0, vy=0;

void setup(){

size(500,400);

}

void draw(){

if(mousePressed) line(mouseX,mouseY,x,y);

ellipse(x,y,10,10);

ellipse(mouseX,mouseY,10,10);

x+=vx; y+=vy;

if(x>500 || x<0) vx = -vx;

if(y>400 || y<0) vy = -vy;

}

void mouseReleased(){

vx=x-mouseX; vy=y-mouseY;

}

float x=250, y=200;

float vx=1.3, vy=14;

void setup(){

size(500,400);

}

void draw(){

ellipse(x,y,10,10);

x+=vx; y+=vy;

vy+=0.98;

if(x>500 || x<0) vx = -vx*0.85;

if(y>400 || y<0) vy = -vy*0.85;

}

Lin_Week-04

第一節課

讀圖檔、圖檔2跟著滑鼠移動

--------------------------------------------------------分隔線-----------------------------------------------------------

第二堂課

將圖改成馬力歐，長背景可以一直移動

--------------------------------------------------------分隔線-----------------------------------------------------------

第三堂課

利用畫圖呈現簡易反彈

球球自然掉落

weeeek04

Test 1

PImage img;

size(640,433);

img = loadImage("image.png");

image(img,0,0)

下載完圖檔後，直接放入Processing

進階

在圖片上再加圖片

PImage img;

PImage img2;

size(640,433);

img = loadImage("image.png");

img2 = loadImage("img2.jpg");

image(img,0,0);

image(img2,50,50,200,150); ////從座標(50,50)開始畫大小為200x150

Test2

PImage img;
PImage img2;

void setup()
{
size(640,223);
img = loadImage("map.png");
img2 = loadImage("pic1.png");
}

int x=0;
void draw()
{
if(mouseX>320) x--; ///當鼠標超過，圖片往右移動
image(img,x,0);
image(img2,mouseX-50/2,mouseY-50/2,54,49);

}

Test3

float x=250,y=200;

float vx=1.0,vy=2.5;

void setup()

{

size(500,400);

}

void draw()

{

ellipse(x,y,10,10);

x+=vx;

y+=vy;

if(x>500 || x<0) vx = -vx; ////碰到邊界折返

if(y>400 || y<0) vy = -vy; ////碰到邊界折返

}

Test4

float x=250,y=200;

float vx=0,vy=0;

void setup()

{

size(500,400);

}

void draw()

{

background(255);

if(mousePressed) line(mouseX,mouseY,x,y);

ellipse(x,y,10,10);

ellipse(mouseX,mouseY,10,10);

x+=vx;

y+=vy;

if(x>500 || x<0) vx = -vx;

if(y>400 || y<0) vy = -vy;

}

void mouseReleased()

{

vx = x-mouseX;

vy = y-mouseY;

}

Week04 顯示圖片+點的運動

PImage img;

size(1000,560);

img = loadImage("image.jpg");

image(img,0,0);

PImage img;

PImage imgg;

void setup(){

size(1000,560);

img = loadImage("image.jpg");

imgg = loadImage("image1.jpeg");

}

void draw(){

image(img,0,0);

image(imgg,mouseX-50,mouseY-50,100,100);

}

卷軸移動

PImage img;

PImage imgg;

void setup(){

size(800,800);

img = loadImage("pic2.png");

imgg = loadImage("pic1.png");

}

int x=0;

void draw(){

if(mouseX>400)x--;

image(img,x,0);

image(imgg,mouseX-50,mouseY-50,100,100);

}

直線反彈運動

float x=250,y=200;

float vx=1.0,vy=2.5;

void setup(){

size(500,400);

}

void draw(){

ellipse(x,y,10,10);

x+=vx;

y+=vy;

if(x>500 || x<0)vx=-vx;

if(y>400 || y<0)vy=-vy;

}

加上牛二

float x=250,y=200;

float vx=1.3,vy=-14;

void setup(){

size(500,400);

}

void draw(){

background(255);

if(mousePressed)line(mouseX,mouseY,x,y);

ellipse(x,y,10,10);

ellipse(mouseX,mouseY,10,10);

x+=vx;

y+=vy;

vy+=0.98;

if(x>500 || x<0)vx=-vx*0.85;

if(y>400 || y<0)vy=-vy*0.85;

}

//void mouseReleased()

//{

// vx = x-mouseX;

//vy = y-mouseY;

//}

喵~圖片應用

匯入圖片

讀進一張圖檔

找一張圖，然後拉入專案裡，直接拉進即可

程式碼:

PImage img;
size(1049,585);///圖片大小

img = loadImage("gods.jpg");
image(img,0,0);

讀進多張圖檔

程式碼:

PImage img;
PImage img2;
size(1049,585);
img = loadImage("gods.jpg");
img2 = loadImage("logo.jpg");
image(img,0,0);
image(img2,100,100);

太大了!!

image(img2,100,100,92,52);

讓圖動起來~

隨鼠標移動
程式碼:

PImage img;
PImage img2;
void setup(){///只做一次
size(1049,585);
img = loadImage("gods.jpg");
img2 = loadImage("logo.jpg");
}
void draw(){
image(img,0,0);
image(img2,mouseX,mouseY,92,52);
}

讓鼠標在圖中心

image(img2,mouseX-92/2,mouseY-52/2,92,52);

卷軸動起來

PImage img;
PImage img2;
void setup(){
size(275,275);
img = loadImage("long.jpg");
img2 = loadImage("image.png");
}
int x=0;
void draw(){
if(mouseX>200) x--;
image(img,x,0);
image(img2,mouseX-22/2,mouseY-22/2,22,22);
}

牛頓定律(物理定律)

程式碼

float x=250,y=200;
float vx=1.0,vy=2.5;
void setup(){
size(500,400);
}
void draw(){
ellipse(x,y,10,10);
x+=vx;
y+=vy;
if(x>500 || x<0) vx=-vx;
if(y>400 || y<0) vy=-vy;
}

彈跳球~(牛頓第一運動定律)

float x=250,y=200;
float vx=0,vy=0;
void setup(){
size(500,400);
}
void draw(){
background(255);
if(mousePressed) line(mouseX,mouseY,x,y);
ellipse(mouseX,mouseY,10,10);
ellipse(x,y,10,10);
x+=vx;
y+=vy;
if(x>500 || x<0) vx=-vx;
if(y>400 || y<0) vy=-vy;
}
void mouseReleased(){///滑鼠放開~
vx=x-mouseX; vy=y-mouseY;
}

牛頓第二運動定律

float x=250,y=200;
float vx=1.3,vy=-15;
void setup(){
size(500,400);
}
void draw(){
background(255);
ellipse(x,y,10,10);
x+=vx;
y+=vy;
vy+=0.98;
if(x>500 || x<0) vx=-vx*0.85;
if(y>400 || y<0) vy=-vy*0.85;
}

Week04 加入圖片、移動、卷軸向右、邊界

宣告變數PImage讓圖片可以放進去

我們宣告完後，要將圖片丟入程式碼裡面

圖片儲存(一、載下圖片二、將圖片拉到程式白色區域三、檢查是否成功丟入Ctrl+K或Sketch->Show....folder)

第二章圖片可以跟著滑鼠座標移動

再利用座標減半的辦法讓鼠標中心都在圖片正中間

當滑鼠超過if的判斷值後畫面x--

牛頓定律

彈跳高度逐漸變低

訂閱：文章 (Atom)

2020互動技術

2020年10月5日星期一

Σ(ﾟдﾟ) weeeeeeeeeek 04

置入圖片

置入2張圖片

大圖不動小圖動

腳色向右走背景隨之移動

彈力球

控制發射方向

加上重力

week4

week04

Lin_Week-04

weeeek04

Week04 顯示圖片+點的運動

喵~圖片應用

Week04 加入圖片、移動、卷軸向右、邊界

檢舉濫用情形

2020年10月5日 星期一

置入圖片

置入2張圖片

大圖不動小圖動

腳色向右走背景隨之移動

彈力球

控制發射方向

加上重力

week04

2020年10月5日星期一