目次
🗓️学習日
2026年3月11日
名前
河西結吾
■作った物のコードと画像
✅ 練習問題3-5-2
📚️問題内容
四角が7個のコンピューターアートを描がく。
条件：線の間隔は20px
✏️コード
function setup() {
createCanvas(300, 300);
background(216, 230, 243);
stroke(177, 208, 231);
strokeWeight(2);
noFill();
for (let d = 20; d < 160; d += 20) {
rect(d, d, 300 - d * 2, 300 - d * 2);
}
}
📷 実行結果
✅ 練習問題3-5-3
📚️問題内容
三角が縦と横で３つずつ並んでいるコンピューターアートを描がく。
条件：三角形の短辺の長さは100pt
✏️コード
function setup() {
createCanvas(300, 300);
background(255);
fill(235, 210, 120);
noStroke();
let size = 100;
for (let i = 0; i < 300; i += 100) {
for (let j = 0; j < 300; j += 100) {
triangle(i, j, i + 100, j, i + 0, j + 100);
}
}
}📷 実行結果
✅ 練習問題3-5-4
📚️問題内容
円が縦と横で4つずつ並んでいるコンピューターアートを描がく。
✏️コード
function setup() {
createCanvas(320, 320);
background(223, 103, 86);
fill(239, 209, 119);
noStroke();
for (let i = 0; i < 320; i += 80) {
for (let j = 0; j < 320; j += 80) {
ellipse(i+40, j+40, 80, 80);
}
}
}📷 実行結果
✅ 練習問題3-5-7
📚️問題内容
例題3-5-6のチェッカーボード模様の黒と白を反転させる。
✏️コード
function setup() {
createCanvas(260, 180);
background(236, 230, 226);
stroke(68, 55, 78);
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 4; j++) {
if ((i + j) % 2 == 1) {
fill(147, 135, 155); // 塗りつぶす
}
else {
noFill(); // 塗りつぶさない
}
rect(10 + i * 40, 10 + j * 40, 40, 40);
}
}
}📷 実行結果
✅ 練習問題3-5-8
📚️問題内容
格子状に四角形と円を交互に配置する模様を描く。
条件：図形は内側に上下それぞれ10pxずらして描く。
✏️コード
function setup() {
createCanvas(260, 180);
background(223, 103, 86);
fill(239, 209, 119);
noStroke();
for (let j = 0; j < 4; j++) {
for (let i = 0; i < 6; i++) {
if ( ( i + j ) % 2 == 0)
rect(10 + i * 40, 10 + j * 40, 40, 40);
else
circle(30 + i * 40, 30 + j * 40, 40);
}
}
}
📷 実行結果
✅ 練習問題3-5-9
📚️問題内容
for文を使って、自分だけのオリジナルデザインを作成する。色や形を自由に組み合わせて、美しい模様を作ってみよう。
✏️コード
function setup() {
createCanvas(300, 300);
background(65, 155, 208);
noStroke();
for (let i = 0; i < 320; i += 80) {
fill(255 , 234 , 81)
rect(0 , i + 10 , 300 , 40)
}
for (let j = 0; j < 7; j++) {
for (let i = 0; i < 7; i++) {
if ( ( i + j ) % 3 == 0)
{
fill(0, 62, 142);
rect(10 + i * 40, 10 + j * 40, 40, 40);
}
else
{
fill( 0 , 133 , 148 );
circle(30 + i * 40, 30 + j * 40, 40);
}
}
}
}📷 実行結果
📒メモ：カッコなどを確認してきれいにコードを書くことで間違いやエラーが少なくなる
まとめ・感想
for文などを組み合わせたりすることで短い文できれいな模様を描くことができたのでよかった。また、for文では2重にしてループさせていることもあるけどどっちがなんのループをしているかなどごっちゃになってしまったときもあったけど確認したりしてできたのでよかった。
コードを書くときに{}などまとまりを確認するとエラーや間違いがすくなくなるのでこれから気をつけて作っていきたいと思いました。