図形を描いて動かしてみよう
デフォルト
code:A01.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
円を描く
code:A02.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
circle(100,100,100);
}
円に色を塗る
code:A03.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill(255,100,100);
circle(100,100,100);
}
円の線の色を変える
code:A04.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill(255,100,100);
stroke(100,100,255);
strokeWeight(10)
circle(100,100,100);
}
円の中心をキャンバスの中心にする
code:A05.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill(255,100,100);
stroke(100,100,255);
strokeWeight(10);
circle(width/2,height/2,100);
}
マウスで円を動かす
code: A06.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill(255,100,100);
stroke(100,100,255);
strokeWeight(10);
circle(mouseX,mouseY,100);
}
マウスで円の大きさを変える
code:A07.js
function setup() {
createCanvas(400, 400);
}
function draw() {
let r;
if(mouseX>=200){
r = 400-mouseX;
}else if(mouseX<200){
r = mouseX;
}
background(220);
fill(255,100,100);
stroke(100,100,255);
strokeWeight(10);
circle(mouseX,mouseY,r*2);
}
マウスで線の太さを変える
code: A08.js
function setup() {
createCanvas(400, 400);
}
function draw() {
let r;
if(mouseX>=200){
r = 400-mouseX;
}else if(mouseX<200){
r = mouseX;
}
let w;
if(mouseY>=200){
w = 400-mouseY;
}else if(mouseY<200){
w = mouseY;
}
background(220);
fill(255,100,100);
stroke(100,100,255);
strokeWeight(w);
circle(mouseX,mouseY,r*2);
}
気に入った画像を保存する (Preview上で右クリックして現れるメニューで「画像を保存」を選択しても良い)
code:A09.js
function setup() {
createCanvas(400, 400);
}
function draw() {
let r;
if(mouseX>=200){
r = 400-mouseX;
}else if(mouseX<200){
r = mouseX;
}
let w;
if(mouseY>=200){
w = 400-mouseY;
}else if(mouseY<200){
w = mouseY;
}
background(220);
fill(255,100,100);
stroke(100,100,255);
strokeWeight(w);
circle(mouseX,mouseY,r*2);
}
function keyPressed(){
if (key == 's') {
saveCanvas('isd_practiceA', 'png'); //Previewの上にポインタを置いて「s」キーを押す
}
}
https://gyazo.com/657fd55efe3e18ee3a7dad932d7590b8
#p5.js