クリエイティブコーデイング日記 2023.09

「はじめてのプログラミング」を模写してみた

processing編　

「はじめてのプログラミング」で図形のコードを模写

すごくわかりやすい

まさにこれからクリエイティブコーディングをはじめてみたい人にもおすすめ！

小学生はもちろん、初心者アラフィフにもわかりやすい内容だと思う

字も大きくて、小さな字が読みにくい世代の自分にも読みやすく、模写もしやすかった

ただ、SNSのクリエイティブコーディングの作品を見ると、、、

こんなすごい事できるんだなあ

なんか、自分の出来た満足が一瞬で飛び去ってしまう衝撃

なんてちっぽけなんだ．．．

模写で本と同じようにできただけでうれしくなっていた自分が、、、

まぁそんな気にするな

色をかえたり、少し動きに変化をつけたりできたじゃないか！

比べても仕方ない！！

楽しくまったりと続けていこう

間違い探しゲームにフレームカウント機能を入れてみた

本に載っている「間違い探しゲーム」のコードにフレームカウントを入れてみたら、ゲームが少し違った感じで遊べそう

frameCountの動画を入れようとするとうまく表示できない

0秒でカウント終了してしまう

何故？？

わからないことだらけです(@_@)

ぼちぼちやっていこう！！

「間違い探しゲーム」にカウントダウン機能を加えてみた

「はじめてのプログラミング」にある、間違い探しゲームを模写してみる。一つだけ色の薄い正方形をランダムに表示するようにしてあり、その正方形をマウスでクリックすると次の画面に切り替わる仕組みになっている。そこにカウントダウン機能を付けて一定の期間になったらタイムオーバーになるようにしてみました。

sketch_230928b_game_timeover

正解を円にしてframecountを設定してみた

sketch_230929a

framecountを使った場合に録画するとなんかうまくいかない

ブログ上で実行するにはどうすればいいんだろう？

P5jsに変更してURLを埋め込む？

とりあえずメモとしてコードをそのまま貼り付けておこう

「はじめてのプログラミング」の間違い探しゲームのコードを元にして作成してます。

float r, g, b;
float a;
int seikai;
int score;
float frameRate=0.01;

void setup() {
size(600, 400);
shuffle();
}
void draw() {
background(255);
rectMode(CENTER);
noStroke();
int loopCount=25;
for (int i=0; i<loopCount; i++) {
int x=140+80(i%5); int y=80+60(i/5);
if (i==seikai) {
fill(r, g, b, a);

  ellipse(x, y, frameCount, frameCount);
  if (frameCount>50) {
    frameCount=0;
  }
} else {
  fill(r, g, b, 255);
  rect(x, y, 50, 50);
}

}
fill(0);
textSize(32);
textAlign(CENTER);
text(score, width/2, 32);

saveFrame(“frames/####.png”);
}

void mousePressed() {
int seikai_x=140+80(seikai%5); int seikai_y=80+60(seikai/5);
if (mouseX>seikai_x-25&&mouseXseikai_y-25&&mouseY<seikai_y+25) {
score+=1;
shuffle();
}
}
}

void shuffle() {
r=random(255);
g=random(255);
b=random(255);
a=random(100, 200);
seikai=(int)random(0, 25);
}