顯示具有 Week03 標籤的文章。 顯示所有文章
顯示具有 Week03 標籤的文章。 顯示所有文章

2021年10月21日 星期四

week03

1 用網址抓取圖片

2 改由將讀入圖檔,圖檔存於程式目錄Data資料夾

3 加入一圖案,可由滑鼠xy軸拖動
4 滑鼠拖動圖案丟入power point等程式去背

5 更改滑鼠拖曳範圍,圖案可拖到畫面界外

6 圖片模式更改,變為置中,拖曳圖案出現重疊
7 背景及拖曳圖案模式均改為置中
8 添加背景音,以及滑鼠點擊聲音
9 新增陣列,並按音階排列,寫出簡單鋼琴
10 新增按鍵顏色變化,按下數字鍵後,琴鍵顏色會更換


2021年10月19日 星期二

岩壁悲歌 Week03

 2021/10/18 week06

---------------------------------------------------------------------------------------

圖片

PImage img;

void setup(){

  size(500,500);

  img=loadImage("bob.jpg");

}

void draw(){

  image(img,0,0);

}

---------------------------------------------------------------

2021年10月18日 星期一

鴨力山大week03

今天要來學讀圖片跟聲音

先來寫可以塗圖片的程式


PImage img;
void setup(){
  size(500,500);
  img=loadImage("https://upload.wikimedia.org/wikipedia/zh/thumb/7/76/Dune_%282021_film%29_poster.jpg/220px-Dune_%282021_film%29_poster.jpg"); 紅色的部分是圖片的網址位子
}
void draw(){
  image(img,0,0);
}

另一種方式是先儲存圖片在桌面,再將圖片拉到程式裡
然後稍微修改程式碼,執行後也可以跑出來

PImage img;
void setup(){
  size(500,500);
  img=loadImage("123.jpg");
}
void draw(){
  image(img,0,0);
}

PImage img;
void setup(){
  size(500,500);
  img=loadImage("asas.jpg");
}
void draw(){
  image(img,0,0,400,400);
}


寫一個可以讀兩張圖的程式
設定其中一張可以跟著滑鼠移動的圖片(img2)
PImage img1,img2;
void setup(){
  size(960,640);
  img1=loadImage("222.jpg");
  img2=loadImage("asas.jpg");
}
void draw(){
  image(img1,0,0,960,640);
  image(img2,mouseX,mouseY,100,100);
}

將可以跟著滑鼠移動的圖片去背,可以使用ppt


試著去設定把滑鼠的座標跟圖片重疊


PImage img1,img2;
void setup(){
  size(960,640);
  img1=loadImage("222.jpg");
  img2=loadImage("p1.png");
}
void draw(){
  image(img1,0,0,960,640);
  image(img2,mouseX-100,mouseY-100,200,200);
}


PImage img1,img2;
void setup(){
  size(960,640);
  img1=loadImage("222.jpg");
  img2=loadImage("p1.png");
}
void draw(){
  imageMode(CORNER);
  image(img1,0,0,960,640);
  imageMode(CENTER);
  image(img2,mouseX,mouseY,200,200);
}

下載這些東西



寫程式播出音樂


import ddf.minim.*;
Minim minim;
AudioPlayer player;
void setup()
{
  size(500,500);
  minim = new Minim(this);
  player=minim.loadFile("groove.mp3");
  player.play();
}
void draw(){

}

\

import ddf.minim.*;
Minim minim;
AudioPlayer player,player2;
void setup()
{
  size(500,500);
  minim = new Minim(this);
  player=minim.loadFile("groove.mp3");
  
  player2=minim.loadFile("music.mp3");
  player2.play();
}
void draw(){

}
void mousePressed(){
  player.play();
}





import ddf.minim.*;
Minim minim;
AudioPlayer doo,re,mi,fa,so;
void setup()
{
  size(500,100);
  minim = new Minim(this);
  doo=minim.loadFile("do.wav");
  re=minim.loadFile("re.wav");
  mi=minim.loadFile("mi.wav");
  fa=minim.loadFile("fa.wav");
  so=minim.loadFile("so.wav");
 
}
void keyPressed(){
  if(key=='1'){doo.rewind();doo.play();}
  if(key=='2'){re.rewind();re.play();}
  if(key=='3'){mi.rewind();mi.play();}
  if(key=='4'){fa.rewind();fa.play();}
  if(key=='5'){so.rewind();so.play();}
}
void draw(){
  
}




import ddf.minim.*;
Minim minim;
AudioPlayer doo,re,mi,fa,so;
void setup()
{
  size(500,100);
  minim = new Minim(this);
  doo=minim.loadFile("do.wav");
  re=minim.loadFile("re.wav");
  mi=minim.loadFile("mi.wav");
  fa=minim.loadFile("fa.wav");
  so=minim.loadFile("so.wav");
 
}
void keyPressed(){
  if(key=='1'){doo.rewind();doo.play();down[0]=1;}
  if(key=='2'){re.rewind();re.play();down[1]=1;}
  if(key=='3'){mi.rewind();mi.play();down[2]=1;}
  if(key=='4'){fa.rewind();fa.play();down[3]=1;}
  if(key=='5'){so.rewind();so.play();down[4]=1;}
}
void keyReleased(){
  if(key=='1')down[0]=0;
  if(key=='2')down[1]=0;
  if(key=='3')down[2]=0;
  if(key=='4')down[3]=0;
  if(key=='5')down[4]=0;
}
int [] down = {0,0,0,0,0};
void draw(){
  background(255);
  for(int i=0;i<5;i++){
    if(down[i]==0) fill(255);
    else fill(255,0,0);
    rect(i*100,0,100,100);
  }
}
  


嗨壓阿 Week03

 Week03

1.用網址開圖片

PImage img;
void setup(){
  size(800,550);
  img=loadImage("https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2016/02/25/20160225-033457_U3927_M131923_2073.png?itok=fOdkVYDV");
}
void draw(){
  image(img,0,0);
}

2.滑鼠=圖片


PImage img,img1;
void setup(){
  size(800,550);
  img=loadImage("pig.jpg");
  img1=loadImage("ww.png");
}
void draw(){
  image(img1,0,0,800,550);
  image(img,mouseX,mouseY,100,100);
}

3.圖片置中

PImage img,img1;
void setup(){
  size(800,550);
  img=loadImage("pig.png");
  img1=loadImage("ww.png");
}
void draw(){
  imageMode(CORNER);
  image(img1,0,0,800,550);
  imageMode(CENTER);
  image(img,mouseX,mouseY,100,100);
}

4.聲音

import ddf.minim.*;
Minim minim;
AudioPlayer player;
void setup(){
  size(500,500,P3D);
  minim=new Minim(this);
  player=minim.loadFile("groove.mp3");
  player.play();
}

5.聲音*2

import ddf.minim.*;
Minim minim;
AudioPlayer player,player2;
void setup(){
  size(500,500,P3D);
  minim=new Minim(this);
  player=minim.loadFile("groove.mp3");
  player.play();
  player2=minim.loadFile("mu.mp3");
  player2.play();
}
void draw(){
}
void mousePressed(){
  player.play();
}

6.鋼琴音

import ddf.minim.*;
Minim minim;
AudioPlayer doo,re,mi,fa,so;
void setup(){
  size(500,100);
  minim=new Minim(this);
  doo=minim.loadFile("do.wav");
  re=minim.loadFile("re.wav");
  mi=minim.loadFile("mi.wav");
  fa=minim.loadFile("fa.wav");
  so=minim.loadFile("so.wav");
}
void keyPressed(){
  if(key=='1'){doo.rewind(); doo.play();}
  if(key=='2'){re.rewind(); re.play();}
  if(key=='3'){mi.rewind(); mi.play();}
  if(key=='4'){fa.rewind(); fa.play();}
  if(key=='5'){so.rewind(); so.play();}
}
void draw(){
}












Week03課程

 1.讀入圖檔

PImage img;
//圖片,聲音
void setup()
{
  size(600,800);
  img=loadImage("girl.jpg");
}///img = loadImage("網址.jpg")
///可將圖檔直接拉入程式中!
void draw()
{
  image(img,0,0,600,800);
}///    圖 ,x,y,寬 ,高

2.多張圖片

void draw()
{
  imageMode(CORNER);
  image(img1,0,0,600,800);
  imageMode(CENTER);
  image(img2,mouseX,mouseY,200,200);
}///    圖 ,x,y,寬 ,高


3.讀入音檔

★先載入minim或sound函式庫
//聲音Sound
import ddf.minim.*;
Minim minim;
AudioPlayer player;
void setup()
{
  size(500,500);
  minim = new Minim(this);
  player = minim.loadFile("dinter.mp3");
  player.play();
}




▲多個音檔讀入(1個背景音樂,1個點擊播放)
void setup()
{
  size(500,500);
  minim = new Minim(this);
  player = minim.loadFile("dinter.mp3");
  player2 = minim.loadFile("aimer.mp3");
  player2.play();
}
void draw()
{

}
void mousePressed()
{
  player.play();
}





08160741_week03_圖片

1.圖片



PImage img;

void setup()
{
  size(500,500);
  img = loadImage("d76.jpg");
}

void draw()
{
  image(img,0,0,500,500);
}

2.兩張圖片(一張背景 一張去被圖)




PImage img1,img2;

void setup()
{
  size(1280,720);
  img1 = loadImage("1.png");
  img2 = loadImage("2.jpg");
}

void draw()
{
  imageMode(CORNER);
  image(img2,0,0,1280,720);
  imageMode(CENTER);
  image(img1,mouseX,mouseY,200,200);
}

3.音樂



import ddf.minim.*;
Minim minim;
AudioPlayer player;
void setup()
{
  size(500,500);
  minim = new Minim(this);
  player = minim.loadFile("groove.mp3");
  player.play();
}

void draw()
{
  
}

4.兩個音樂




 import ddf.minim.*;

Minim minim;
AudioPlayer player1,player2;
void setup()
{
  size(500,500);
  minim = new Minim(this);
  player1 = minim.loadFile("groove.mp3");
  player2 = minim.loadFile("12.mp3");
  player1.play();
}

void draw()
{
  
}

void mousePressed()
{
  player2.play();
}

5.按鍵發聲

import ddf.minim.*;
Minim minim;
AudioPlayer doo,re,mi,fa,so;
void setup()
{
  size(500,500);
  minim = new Minim(this);
  doo = minim.loadFile("do.wav");
  re = minim.loadFile("re.wav");
  mi = minim.loadFile("mi.wav");
  fa = minim.loadFile("fa.wav");
  so = minim.loadFile("so.wav");
  
}

void draw()
{
  
}

void keyPressed()
{
  if(key == '1') {doo.rewind(); doo.play();}
  if(key == '2') {re.rewind(); re.play();}
  if(key == '3') {mi.rewind(); mi.play();}
  if(key == '4') {fa.rewind(); fa.play();}
  if(key == '5') {so.rewind(); so.play();}
}

畫面很亂主辦單位要不要管一下week03

 PImage img;

void setup(){

  size(500,500);

  img=loadImage("網址");

}

void draw(){

  image(img,0,0);

}









也可將網址的部分改成檔名

並將檔案拖入










圖的解析度可以在小畫家上做調整

可以在image(img,0,0);

這行後面加上座標就可以將圖片填滿


原本設定是一個img

多設定幾個就可以同時出現多張圖片

PImage img1,img2;

void setup(){

  size(500,500);

  img1=loadImage("1.png");

  img2=loadImage("2.png");

}

void draw(){

  image(img1,0,0,500,500);

  image(img2,mouseX,mouseY,100,100);

}













用ppt可將圖片去背

現在滑鼠所在的位置是在圖片左上角

若要滑鼠在圖片正中間的話

 image(img2,mouseX,mouseY,100,100);

這個程式就將後面數字的一辦減去前面的mouse

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

這樣一來滑鼠就會在圖片正中心


第二種方法

可以改imageMode()

將imageMode改成center就會在正中心

但背景部分也會所以要將背景改成corner

PImage img1,img2;

void setup(){

  size(500,500);

  img1=loadImage("1.png");

  img2=loadImage("2.png");

}

void draw(){

imageMode(CORNER);

  image(img1,0,0,500,500);

imageMode(CENTER);

  image(img2,mouseX,mouseY,100,100);

}


接下來要處理聲音








先安裝










import ddf.minim.*;

Minim minim;

AudioPlayer player;

void setup(){

  size(500,500);

  minim = new Minim(this);

  player = minim.loadFile("groove.mp3");

  player.play();

}

void draw(){

}

宣告多一個音檔

    新增

void mousePressed(){

    player.play();

}









import ddf.minim.*;

Minim minim;

AudioPlayer doo,re,mi,fa,so;

void setup(){

  size(500,100);

  minim = new Minim(this);

  doo =minim.loadFile("do.wav");

  re =minim.loadFile("re.wav");

  mi =minim.loadFile("mi.wav");

  fa =minim.loadFile("fa.wav");

  so =minim.loadFile("so.wav");

}

void keyPressed(){

  if(key=='1') {doo.rewind(); doo.play();}

  if(key=='2') {re.rewind(); re.play();}

  if(key=='3') {mi.rewind(); mi.play();}

  if(key=='4') {fa.rewind(); fa.play();}

  if(key=='5') {so.rewind(); so.play();}

}

void draw(){


}


week03

今天我們回歸全實體上課

第一堂課是補課

一開始老師教我們用圖片網址來讀圖檔


使用img=loadImage("圖片網址")
就可以讓程式讀出這張圖片

PImage img;//圖片,聲音
void setup(){
  size(500,500);
  img=loadImage("https://upload.wikimedia.org/wikipedia/zh/c/c8/Doraemon_volume_1_cover.jpg");
}
void draw(){
  image(img,0,0);
}

如果圖片讀不出來,可以先下載下來,然後直接把圖片拉到程式裡
再把圖片網址改成圖片的檔名就可以了

之後如果想要縮放圖片的大小
只要在最下面那一行程式的括號裡面多加上自己想要的圖片大小就好了
再來可以讓系統讀兩張圖片
一張當作背景,另一張可以跟著滑鼠跑

PImage img1,img2;//圖片,聲音
void setup(){
  size(500,500);
  img1=loadImage("dora.jpg");
  img2=loadImage("doge.jpg");
}
void draw(){
  image(img1,0,0,500,500);
  image(img2,mouseX,mouseY,100,100);
}

再來我們可以用powerpoint把圖片去背

這樣就可以讓圖片的背景消失


然後把mouseX跟mouseY改一下就可以讓滑鼠保持在圖片的中間

以下是另一種寫法



PImage img1,img2;//圖片,聲音
void setup(){
  size(500,500);
  img1=loadImage("dora.jpg");
  img2=loadImage("doge.png");
}
void draw(){
  imageMode(CORNER);
  image(img1,0,0,500,500);
  imageMode(CENTER);
  image(img2,mouseX,mouseY,200,200);
}


之後我們學怎麼放出音樂

只要隨便點一下就可以放音樂
再來是可以先讓他自動放背景音樂
然後點一下滑鼠就可以再播放另一個音樂

import ddf.minim.*;
Minim minim;
AudioPlayer player,player2;
void setup()
{
  size(500,500);
  minim = new Minim(this);
  player=minim.loadFile("groove.mp3"); 
  player2=minim.loadFile("bg.mp3");
  player.play();
}
void draw(){
}
void mousePressed(){
  player.play();
}

再進階就可以按鍵盤播出doremifaso
import ddf.minim.*;
Minim minim;
AudioPlayer doo,re,mi,fa,so;
void setup()
{
  size(500,100);
  minim = new Minim(this);
  doo=minim.loadFile("do.wav");
  re=minim.loadFile("re.wav");
  mi=minim.loadFile("mi.wav");
  fa=minim.loadFile("fa.wav");
  so=minim.loadFile("so.wav");
}
void mousePressed(){
  if(key=='1'){doo.rewind();doo.play();}
  if(key=='2'){re.rewind();re.play();}
  if(key=='3'){mi.rewind();mi.play();}
  if(key=='4'){fa.rewind();fa.play();}
  if(key=='5'){so.rewind();so.play();}
}
void draw(){
  
}