2020互動技術: 07160361

顯示具有 07160361_曾云 標籤的文章。顯示所有文章

2020年12月21日星期一

Sherry: PVector 實作(angry bird)

2020/12/14

(一) PVector 解釋

1. 以前: float 宣告物件 x,y

2. 現在: 用PVector 把x,y 涵蓋進去

(一) PVector 實作 (angry bird)

1.做出線和點

PVector user,arrow;

void setup(){

size(600,400);

user = new PVector(100,300);

arrow = new PVector(100,300);

}

void draw(){

background(255);

stroke(#FFB366);

line(user.x,user.y,arrow.x,arrow.y);

textSize(40);

fill(255,0,0);

text("Y",arrow.x,arrow.y);

fill(#3CB371);

ellipse(user.x,user.y,20,20);

}

void mouseDragged(){

user.x=mouseX;

user.y=mouseY;

}

2.球反彈彈走

PVector user,arrow;

PVector fly=null;

void setup(){

size(600,400);

user = new PVector(100,300);

arrow = new PVector(100,300);

}

void draw(){

background(255);

stroke(#FFB366);

line(user.x,user.y,arrow.x,arrow.y);

textSize(40);

fill(255,0,0);

text("Y",arrow.x,arrow.y);

fill(#3CB371);

ellipse(user.x,user.y,20,20);

if(fly!=null) user.add(fly);

}

void mouseDragged(){

user.x=mouseX;

user.y=mouseY;

}

void mouseReleased(){

PVector diff= PVector.sub(arrow,user);

fly = diff.div(10);

}

3.會往下墜

PVector user,arrow;

PVector fly=null;

void setup(){

size(600,400);

user = new PVector(100,300);

arrow = new PVector(100,300);

}

void draw(){

background(255);

stroke(#FFB366);

if(mousePressed)

line(user.x,user.y,arrow.x,arrow.y);

textSize(40);

fill(255,0,0);

text("Y",arrow.x,arrow.y);

fill(#3CB371);

ellipse(user.x,user.y,20,20);

if(fly!=null) {

fly.y+=0.98;

user.add(fly);

}

void mouseDragged(){

user.x=mouseX;

user.y=mouseY;

}

void mouseReleased(){

PVector diff= PVector.sub(arrow,user);

fly = diff.div(4);

}

(一) MakerUno

for arduino:

void setup() {

pinMode(2,INPUT_PULLUP);

Serial.begin(9600);

}

void loop() {

int x = analogRead(A0);

int y = analogRead(A1);

int sw = digitalRead(2);

Serial.write(x);

Serial.write('+');

Serial.write(y);

Serial.write('+');

Serial.write(sw);

Serial.write(' ');*/

Serial.write(x/4);

Serial.write(y/4);

Serial.write(sw);

delay(20);

}

for processing:

import processing.serial.*;

Serial myPort;

void setup(){

size(256,256);

myPort = new Serial(this,"COM6",9600);

}

int ballx=0,bally=0;

void draw(){

background(255);

if(myPort.available()>3){

int x = myPort.read();

int y = myPort.read();

int sw= myPort.read();

ballx = x;

bally = y;

}

fill(0);

ellipse(ballx,bally,15,15);

}

2020年12月14日星期一

sherry: MakerUno 板子搭配搖桿發光數量

2020/12/14

(一)MakerUno、搖桿、麵包板

1. https://makeruno.com.my/getting-started/ 下載 CH341 Driver for Windows here

2. 接線

3. arduino

void setup(){

for(int i=2;i<=13;i++){

pinMode(i,OUTPUT);

}

void loop(){

int now=analogRead(A0);

int level = now/(512/13);

for(int i=2;i<=13;i++){

if(i<level) digitalWrite(i,HIGH);

else digitalWrite(i,LOW);

}

4. arduino_2

void setup(){

for(int i=2;i<=13;i++){

pinMode(i,OUTPUT);

}

Serial.begin(9600);

}

void loop(){

int now=analogRead(A0);

int level = now/(1024/13);

for(int i=2;i<=14;i++){

if(i<level) digitalWrite(i,HIGH);

else digitalWrite(i,LOW);

}

Serial.write(('A'+level));

delay(100);

}

5.processing_2

import processing.serial.*;

Serial myPort;

void setup(){

size(700,100);

myPort = new Serial (this,"com6",9600);

}

int level=0;

void draw(){

background(0);

fill(255,0,0);

rect(0,0,level*50,100);

if(myPort.available()>0){

int now=myPort.read();

if(now=='A') level=0;

if(now=='B') level=1;

if(now=='C') level=2;

if(now=='D') level=3;

if(now=='E') level=4;

if(now=='F') level=5;

if(now=='G') level=6;

if(now=='H') level=7;

if(now=='I') level=8;

if(now=='J') level=9;

if(now=='K') level=10;

if(now=='L') level=11;

if(now=='M') level=12;

if(now=='N') level=13;

}

6.arduino_3

void setup(){

for(int i=2;i<=13;i++){

pinMode(i,OUTPUT);

}

Serial.begin(9600);

}

void loop(){

int now=analogRead(A0);

int level = now/4;

for(int i=2;i<=13;i++){

if(i<level/20) digitalWrite(i,HIGH);

else digitalWrite(i,LOW);

}

Serial.write(level);

delay(20);

}

7.processing_3

import processing.serial.*;

Serial myPort;

void setup(){

size(765,100);

myPort = new Serial (this,"com6",9600);

}

int level=0;

void draw(){

background(255);

fill(255,0,0);

rect(0,0,level*3,100);

if(myPort.available()>0){

int now=myPort.read();

level = now;

}

2020年12月7日星期一

Sherry:MakerUno、搖桿、麵包板

2020/12/07

(一)MakerUno、搖桿、麵包板

1. https://makeruno.com.my/getting-started/ 下載 CH341 Driver for Windows here

2. 接線

3. Arduino

void setup() {

// put your setup code here, to run once:

Serial.begin(9600);

pinMode(2,INPUT_PULLUP);

pinMode(8,OUTPUT);

}

int state=0;

void loop() {

// put your main code here, to run repeatedly:

if(digitalRead(2)==LOW&&state==0){

state=1;

Serial.write("1");

}

if(digitalRead(2)==HIGH&&state==1){

state=0;

Serial.write("0");

}

delay(100);

}

4. Processing (注意port 的部分)

import processing.serial.*;

Serial myPort;

void setup(){

size(300,200);

myPort=new Serial(this,"COM7",9600);

}

int button=0;

void draw(){

if(myPort.available()>0){

int now=myPort.read();

println("u are reading:" +now);

if(now=='1')button=1;

else button=0;

}

if(button==1) background(255,0,0);

else background(255);

}

5. Processing (try_2) (記得要開)

import hypermedia.net.*;

UDP udp;

void setup(){

size(300,200);

udp=new UDP(this,6000);

udp.send("hola","120.125.70.53",6100);

}

int button=0;

void draw(){

}

void mousePressed(){

udp.send("mousePressed","120.125.70.53",6100);

}

2020年11月30日星期一

Sherry: arduino音樂按鍵

TRY_1:

#define Do 523

#define Mi 659

#define So 784

void setup() {

// put your setup code here, to run once:

pinMode(8,OUTPUT);//不給長度，一直發音

tone(8,Do);

delay(1000);

tone(8,Mi);

delay(1000);

tone(8,So);

delay(1000);

noTone(8);//靜音

}

void loop() {

// put your main code here, to run repeatedly:

}

TRY_2:

pinMode(2,INPUT_PULLUP);

pinMode(8,OUTPUT);

void loop() {

// put your main code here, to run repeatedly:

if(digitalRead(2)==LOW) tone(8,Mi,100);

}

TRY_3:

(processing)

import processing.serial.*;

Serial myPort;

void setup(){

size(200,200);

myPort=new Serial(this,"COM6",9600);

}

void draw(){

}

void mousePressed(){

myPort.write("1");

}

(arduino)

#define Do 523

#define Mi 659

#define So 784

void setup() {

Serial.begin(9600);

// put your setup code here, to run once:

pinMode(2,INPUT_PULLUP);

pinMode(8,OUTPUT);//不給長度，一直發音

tone(8,Do);

delay(1000);

tone(8,Mi);

delay(1000);

tone(8,So);

delay(1000);

noTone(8);//靜音

}

void loop() {

//if(digitalRead(2)==LOW) tone(8,Mi,100);

while(Serial.available()>0){

Serial.read();

tone(8,So,100);

}

TRY_4:

(processing)

import processing.serial.*;

Serial myPort;

void setup(){

size(200,200);

myPort=new Serial(this,"COM6",9600);

}

void draw(){

}

void keyPressed(){

if(key=='1') myPort.write("1");

if(key=='2') myPort.write("2");

if(key=='3') myPort.write("3");

if(key=='4') myPort.write("4");

if(key=='5') myPort.write("5");

if(key=='6') myPort.write("6");

if(key=='7') myPort.write("7");

}

void keyReleased(){

myPort.write("0");

}

void mousePressed(){

myPort.write("1");

}

(arduino)

#define Do 523

#define Re 587

#define Mi 659

#define Fa 698

#define So 784

#define La 880

#define Ti 988

void setup() {

Serial.begin(9600);

// put your setup code here, to run once:

pinMode(2,INPUT_PULLUP);

pinMode(8,OUTPUT);//不給長度，一直發音

tone(8,Do);

delay(1000);

tone(8,Mi);

delay(1000);

tone(8,So);

delay(1000);

noTone(8);//靜音

}

void loop() {

//if(digitalRead(2)==LOW) tone(8,Mi,100);

while(Serial.available()>0){

int now=Serial.read();

if(now=='1')tone(8,Do);

if(now=='2')tone(8,Re);

if(now=='3')tone(8,Mi);

if(now=='4')tone(8,Fa);

if(now=='5')tone(8,So);

if(now=='6')tone(8,La);

if(now=='7')tone(8,Ti);

if(now=='0')noTone(8);

}

參考網站:

https://github.com/CytronTechnologies/MakerUno_Examples/blob/master/MakerUno_DefaultSketch/MakerUno_DefaultSketch.ino

下次上課帶:

剪線鉗杜邦線麵包板 makeruno (joystick)

2020年10月26日星期一

Sherry:頂點製圖、挑戰

2020/10/19

(一)頂點製圖

找規則，將程式碼用for寫出來

size(500,500);

for(int angle=0;angle<360; angle+=30){

float angle2=radians(angle);

float x=100+cos(angle2)*50;

float y=100+sin(angle2)*50;

ellipse(x,y,2,2);

}

size(500,500);

beginShape();

for(int angle=0;angle<360; angle+=120){

float angle2=radians(angle);

float x=100+cos(angle2)*50;

float y=100+sin(angle2)*50;

vertex(x,y);//ellipse(x,y,2,2);

}

endShape(CLOSE);

endShape();

void setup(){

size(500,500);

}

void draw(){

beginShape();

for(int angle=0;angle<360; angle+=120){

float angle2=radians(angle+mouseX);

float x=100+cos(angle2)*50;

float y=100+sin(angle2)*50;

vertex(x,y);//ellipse(x,y,2,2);

}

endShape(CLOSE);

}

把100+改成mouseX和mouseY

fill(100,200,50);

float angle2=radians(angle+frameCount);

(二)挑戰

10*10的不同旋轉值的三角

2020年10月19日星期一

Sherry:字型大小、方框的位置、字型、二維陣列、範例參考

2020/10/19

(一)字型大小、方框的位置

利用費式曲線抓取，fill()用來填充色彩，不是用stroke，stroke只有外框

void setup(){

size(500,500);

rect(100,100,200,100);

fill(255,0,0)//fill()用來填充色彩

textSize(40);

textAlign(LEFT,TOP);

text(" Hello",100,100);

}

(二)字型

利用費式曲線抓取，fill()用來填充色彩，不是用stroke，stroke只有外框

void setup(){

size(800,300);

fill(255,0,0);

PFont font1=createFont("Times New Roman",30);

textFont(font1);

text("中文 v.s English",30,30);

PFont font2=createFont("標楷體",30);

textFont(font2);

text("中文 v.s English",30,130);

}

(三)二維陣列-1

C: int [2][3]={{10,20,30},{11,12,13}}

JAVA: int [][]A={{10,20,30},{11,12,13}}

int [][]A={{1,1,1},{0,1,0},{0,1,1},{1,1,1}};

size(300,400);

for(int i=0;i<4;i++){

for(int j=0;j<3;j++){

if(A[i][j]==0) fill(0);

else fill(255);

rect(j*100,i*100,100,100);

}

(三)二維陣列-2

C: int [2][3]={{10,20,30},{11,12,13}}

JAVA: int [][]A={{10,20,30},{11,12,13}}

//0=black 1:bird 2:pig

int [][]A={{2,2,2,2},{0,1,1,1},{0,1,1,1},{2,2,2,2}};

PImage bird,pig;

void setup(){

size(400,400);

bird=loadImage("1.jpg");

pig=loadImage("2.jpg");

}

void draw(){

background(0);

for(int i=0;i<4;i++){

for(int j=0;j<4;j++){

if(A[i][j]==1) image(bird,j*100,i*100,100,100);//red

if(A[i][j]==2) image(pig,j*100,i*100,100,100);//green

}

(三)二維陣列-3

顯示出Mouse的XY，點擊圖片消失。

//0=black 1:bird 2:pig

int [][]A={{2,2,2,2},{0,1,1,1},{0,1,1,1},{2,2,2,2}};

PImage bird,pig;

void mousePressed(){

int i=int (mouseY/100);

int j=int (mouseX/100);

A[i][j]=0;

}

void setup(){

size(400,400);

bird=loadImage("1.jpg");

pig=loadImage("2.jpg");

}

void draw(){

background(0);

for(int i=0;i<4;i++){

for(int j=0;j<4;j++){

if(A[i][j]==1) image(bird,j*100,i*100,100,100);//red

if(A[i][j]==2) image(pig,j*100,i*100,100,100);//green

}

ellipse(mouseX,mouseY,25,25);

text("mouseX:"+mouseX+" mouseY:"+mouseY,100,100);

}

(四)範例參考

可以做

賽車太鼓達人

(不要接金幣、不要咻咻咻射擊、不要爛程式)

2020年10月12日星期一

Sherry:fruit_cut、

2020/10/12

(一)fruit_cut

運用PImage和位置概念，仿作切水果遊戲

ppt去背: https://officeguide.cc/powerpoint-image-remove-background-tutorial/

//fruit_cut

PImage img;

float x=100,y=500,vx=3,vy=-30;

void setup(){

size(500,500);

img=loadImage("banana.png");

}

void draw(){

image(img,x,y,100,100);

x+=vx;

y+=vy;

vy+=0.98;

if(y>500){

if(frameCount%2==0){

x=random(250);y=500;vx=random(2,3);vy=-random(28,32);

}

else{

x=random(250,500);y=500;vx=-random(2,3);vy=-random(28,32);

}

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

//fruit_cut

import processing.sound.*;

SoundFile file;

PImage img;

float x=100,y=500,vx=3,vy=-30;

int fruitDie=0;

void setup(){

size(500,500);

img=loadImage("banana.png");

//file = new SoundFile(this, "damage6.mp3");

//file.play();

}

void draw(){

background(255);

image(img,x,y,100,100);

x+=vx;

y+=vy;

vy+=0.98;

if(y>500) fruitDie=1;

if(x<mouseX&&mouseX<x+100&&y<mouseY&&mouseY<y+100) fruitDie=1;

stroke(255);line(mouseX,mouseY,pmouseX,pmouseY);

if(fruitDie==1){

file = new SoundFile(this, "damage6.mp3");

file.play();

if(frameCount%2==0){

x=random(250);y=500;vx=random(2,3);vy=-random(28,32);

}

else{

x=random(250,500);y=500;vx=-random(2,3);vy=-random(28,32);

}

fruitDie=0;

}

2020年10月5日星期一

Sherry:PImage

2020/10/05

(一)讀圖、秀圖、滾軸背景

1.讀圖+秀圖

PImage img;

img=loadImage(" ");

image(img,0,0);

1.滾軸背景

if(mouseX>450) x--;

image(img1,x,0);

//image

PImage bg,img1,img2,img3;

int x=475;

void setup(){

size(475,250);

bg=loadImage("bg.png");

img1=loadImage("img1.jpg");

img2=loadImage("img2.jpg");

}

void draw(){

image(bg,0,0);

if(mouseX>450) x--;

image(img1,x,0);

image(img2,mouseX-70/2,mouseY-50/2,70,50);

}

2020年9月21日星期一

Sherry:color,size,mouse,and if.

2020/09/21

(二)色彩(筆刷、填充、背景)、畫布大小，變出小畫家(滑鼠事件和if判斷)。

my project:

void setup(){

size(500,500);

background(200,191,231);

rect(100,100,300,300);

}

void draw(){ //60 per frame

stroke(#FF0000);

if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);

}

int i;

float r,g,b;

void setup(){

size(500,500);

background(200,191,231);

rect(50,100,300,300);

fill(#ff0000);

rect(400,0,100,100);

fill(255,127,0);

rect(400,100,100,100);

fill(255,242,0);

rect(400,200,100,100);

fill(34,177,76);

rect(400,300,100,100);

fill(0,162,232);

rect(400,400,100,100);

strokeWeight(3);

}

void draw(){//60 per frame

if(mousePressed&&mouseX>400){

if(mouseY<100) stroke(255,0,0);

else if(mouseY>100&&mouseY<200) stroke(255,127,0);

else if(mouseY>200&&mouseY<300) stroke(255,242,0);

else if(mouseY>300&&mouseY<400) stroke(34,177,76);

else if(mouseY>400&&mouseY<500) stroke(0,162,232);

//line(mouseX,mouseY,pmouseX,pmouseY);

}

if(mousePressed&&mouseX>50&&mouseX<350&&mouseY>100&&mouseY<400){

line(mouseX,mouseY,pmouseX,pmouseY);

}

2020年9月14日星期一

Sherry:line,rect,color and penguin!

2020/09/14

(一)畫線、畫圓、畫方，利用函式及座標畫出想要的形狀

1.畫線 line(x1,y1,x2,y2); //點到點畫線

2.畫圓 ellipse(x1,y1,width,height); //左上角的點(x1,y1)畫width,height的圓

3.畫方

法一:

rect(x1,y1,width,height); // processing預設的

法二:

rectMode(CORNERS);

rect(x1,y1,x2,y2);

rectMode(RADIUS);

4.color: 屬於Hexadecimal notation的部分

RGB:

colorMode(RGB);

fill(R,G,B);

HSB:

colorMode(HSB);

fill(H,S,B);

//fill(#FF0000,alpha)

//可以有alpha值

my penguin project:

int y=125,x=235;

void setup(){

background(0);

size(400,400);

colorMode(RGB);

fill(180,125,155);

stroke(255);

rect(50,50,300,300,10);//big rect

colorMode(RGB);

fill(#FFFF00,100);

stroke(255);

rect(100,100,200,200,15);//small rect

//eyebrown

fill(255);

rect(120,130,50,20);

rect(230,130,50,20);

fill(155);

stroke(255);

ellipse(250,200,50,50);//right eye

ellipse(150,200,50,50);//left eye

fill(0);

ellipse(250,200,30,30);//right eye

ellipse(150,200,30,30);//left eye

fill(#FF0000);

ellipse(200,250,60,30);//mouth

}

void draw(){

//eyebrown

stroke(0);

for(int i=x;i<280;i+=5){

line(i,130,i,150);

}

for(int m=y;m<170;m+=5){

line(m,130,m,150);

}

訂閱：文章 (Atom)

2020年12月21日 星期一

2020年12月14日 星期一

2020年12月7日 星期一

2020年11月30日 星期一

2020年10月26日 星期一

2020年10月19日 星期一

2020年10月12日 星期一

2020年10月5日 星期一

2020年9月21日 星期一

2020年9月14日 星期一

2020年12月21日星期一

2020年12月14日星期一

2020年12月7日星期一

2020年11月30日星期一

2020年10月26日星期一

2020年10月19日星期一

2020年10月12日星期一

2020年10月5日星期一

2020年9月21日星期一

2020年9月14日星期一