ドローツールを作ってみよう
マウスで絵を描く
code:D01.js
function setup() {
createCanvas(400, 400);
background(220);
stroke(100);
strokeWeight(3);
}
function draw() {
if(mouseIsPressed){
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
function keyPressed(){
if (key == 's') {
saveCanvas('isd_practiceD', 'png');
}
}
乱数で線の太さを切り替える
code:D02.js
let v = 0;
let inc = 0.2;
function setup() {
createCanvas(400, 400);
background(220);
stroke(100);
}
function draw() {
if(mouseIsPressed){
let n = noise(v) * 30;
strokeWeight(n);
line(mouseX, mouseY, pmouseX, pmouseY);
v = v + inc;
}
}
function keyPressed(){
if (key == 's') {
saveCanvas('isd_practiceD', 'png');
}
}
キーボードで機能を切り替える
code:D03.js
let v = 0;
let inc = 0.2;
function setup() {
createCanvas(400, 400);
background(220);
stroke(100);
}
function draw() {
if(mouseIsPressed){
let n = noise(v) * 30;
strokeWeight(n);
line(mouseX, mouseY, pmouseX, pmouseY);
v = v + inc;
}
}
function keyPressed(){
if (key == 'r') {
stroke(200,0,0);
}
if (key == 'b') {
stroke(100);
}
if (key == 'e') {
background(220);
}
if (key == 's') {
saveCanvas('isd_practiceD', 'png');
}
}
繰り返しを使って、背景にも模様を描く
code:D04.js
let v = 0;
let inc = 0.2;
function setup() {
createCanvas(400, 400);
pattern();
stroke(20,80,160)
}
function draw() {
if(mouseIsPressed){
let n = noise(v) * 30;
strokeWeight(n);
line(mouseX, mouseY, pmouseX, pmouseY);
v = v + inc;
}
}
function keyPressed(){
if (key == 'r') {
stroke(200,0,0);
}
if (key == 'b') {
stroke(20,80,160);
}
if (key == 'e') {
pattern();
}
if (key == 's') {
saveCanvas('isd_practiceD', 'png');
}
}
function pattern(){
noStroke();
let c = 0;
for (let y = 0; y < height; y = y + 20 ){
for (let x = 0; x < width; x = x + 20 ){
if(c%2 == 0){
fill(235);
}else{
fill(245);
}
rect(x, y, 20, 20);
c = c + 1;
}
c = c + 1;
}
}
#p5.js
https://gyazo.com/2dab0b976ed5da6ba5cd06e75a584b13