p5.js 配列
配列の意味
code: non_array.js
let x1 = -5;
let x2 = 15;
let x3 = 30;
let x4 = 0;
let x5 = 40;
function setup() {
createCanvas(400, 400);
noStroke();
fill(200,200,100);
}
function draw() {
background(0);
x1 += 0.5;
x2 += 0.6;
x3 += 0.7;
x4 += 0.8;
x5 += 0.4;
arc(x1, 100, 30, 30, 0.52, 5.76);
arc(x2, 150, 30, 30, 0.52, 5.76);
arc(x3, 200, 30, 30, 0.52, 5.76);
arc(x4, 250, 30, 30, 0.52, 5.76);
arc(x5, 300, 30, 30, 0.52, 5.76);
}
code:array.js
const x = [];
function setup() {
createCanvas(400, 400);
noStroke();
fill(200,200,100);
for(let i = 0; i< width; i++){
xi = random(-500, 200);
}
}
function draw() {
background(0);
for (let i = 0; i < height; i++){
xi += 0.5;
let y = i;
arc(xi, y, 12, 12, 0.52, 5.76);
}
}
配列の応用
code: array_draw.js
let num = 60;
const x = num;
const y = num;
function setup() {
createCanvas(400, 400);
noStroke();
}
function draw() {
background(240);
for (let i = num - 1; i > 0; i--){
xi = xi-1;
yi = yi-1;
}
x0 = mouseX;
y0 = mouseY;
for (let i = 0; i < num; i++){
fill (i*4);
ellipse(xi, yi, 30, 30);
}
}
参考文献
p5.js Reference
https://p5js.org/reference
「Processingをはじめよう 第2版」
https://www.oreilly.co.jp/books/9784873117737/
#coding #design #p5.js
https://gyazo.com/74c45920464b21ed641ca6d84a44bb01