コンクール表彰式に参加してきました
大学祭であった第12回メディア表現コンクール。その表彰式に参加してきました。
残念ながら賞は頂けませんでしたが作品の講評を聞いてるのは楽しかったです。
展示した｢夢の本棚｣がこちら。
いくつかの本以外はすべて文字を入れました。小学校から大学2回までの夢と他のみんなの夢、夢を通して考えたこと、夢に関連する図書を制作しました。
正直制作段階で｢これは見返せないものになるな（支離滅裂、黒歴史）｣と思ってたのでまた時間をおいて見た時、どう思うか気になります。
見ていただいた方のコメントも頂きました。
制作時間は15時間はかかった気がします。豆本作るのにすごい手こずりました。本の内容考えて、小学生の漢字いつ習ったか分からなくて検索したり、フォント探したり。印刷して切って豆本に苦戦したり。
本来は小説などの文章のテーマで出す予定でしたが分量が足りず、立体部門で参加することにしました。何人かの友人に折ったり切ったりするのを手伝ってもらったり、将来の夢がどんなものだったか聞いたりしました。協力してくれた友人に感謝。
よく頭がおかしいとか発想がおかしいとか言われる私で良かったと思います。書いてくださった方ありがとうございました！全部見ようと思ってくださった方もいらっしゃったようで嬉しかったです。また来年も参加予定です。
参加賞でもらったスケッチブックでこれからも頑張っていきたい。
回転
function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100); } function draw() { background(220); push(); translate(width/2,height/2); fill((frameCount+180)%360,100,100,random(100)); rotate(radians(-(frameCount+random(50))%360)); rectMode(CENTER); rect(0,0,50,50); pop(); push(); translate(width/2,height/2); rotate(radians(0 + frameCount)); fill(frameCount % 360, 100, 100,random(100)); triangle(50,50, -width / 2, -height / 2, -width / 2, height / 2); pop(); }
rotateってどこで回転してるの？というもねの疑問に答えながら自分で整理したやつがeditorの方に残ってたのを発見したのでここにも残しておく。
rotateによって回転するのは原点が中心になる。
中心を変えようとしたらpush/translate/popによって原点を変更。
そこを中心に回転することを考えつつ図形を作る。
6回目のp5.js
!!!ちょっとちかちかします!!!
let r; function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100); } function draw() { background(0); fill(random(360),100,100,random(10));//これがないとdrawで戻ってきた「A」がfillになってしまう rect(0,0,width,height); for(let i=0; i<50;i=i+1){ r=random(50); fill(random(360),100,100,random(100));//A ellipse(random(width),random(height),r,r); } }
思ってたのと違い、背景までちかちかしてたのでなんでだろうと思ったらdrawで戻ってきたときのfillが背景のrectに入ってたせいだと気が付きました。
function setup() { createCanvas(400, 400); background(0,0,0); colorMode(HSB,360,100,100,100); for (let i = 0; i < 100; i = i + 1) { if (i % 3 == 0) { print(i); fill(random(0,90),100,100,random(100)); text(i,i*3.9,i*4); } } }
let akihaba; let haba; function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100, 100); background(0, 0, 100); } function draw() { haba = random(10, 30); akihaba = haba - random(2, 10); // for (let x = 0; x < width; x = x + akihaba) { // fill(x % 360, 100, 100, random(100)); // rect(x, 0, haba, haba); // } // for (let y = 0; y < height; y = y + akihaba) { // fill(y % 360, 100, 100, random(100)); // rect(0, y, haba, haba); // } for (let y = 0; y < height; y = y + akihaba) { for (let x = 0; x < width; x = x + akihaba) { if (random(100) > 50) { noStroke(); rectMode(CENTER); fill((x + y) % 360, 100, 100, random(50, 100)); rect(x, y, haba, haba); } else { noStroke(); fill((x + y) % 360, 100, 100, random(50, 100)); ellipse(x, y, haba, haba); } } fill(random(360), 100, 100); stroke(0, 0, 100); strokeWeight(5); textAlign(CENTER); text("RAINBOW", width / 2, height / 2); } }
解像度がどんどん変わるようで面白かった。
function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100); background(250, 100, 80); } function draw() { noStroke(); fill(250, 100, 80); rectMode(CORNER); rect(0, 0, width, height / 4 * 3 - 20); for (let hosi = 0; hosi < 50; hosi = hosi + 1) { let x = random(width); let y = random(height / 4 * 3 - 20); textSize(30); fill((x + y) % 360, 100, 100); text("☆", x, y); } stroke(0, 0, 0); fill(0, 80, 80); rectMode(CENTER); for (i = 0; i < 9; i = i + 1) { rect(15 + i * 30 + width / 6.2, height / 2 - 13, 30, 30); } noStroke(); textSize(30); textAlign(CENTER); fill(0, 0, 100); text("プログラミングの森", width / 2, height / 2); push(); translate(width / 5, height / 2 - height / 10); textSize(12); rotate(radians(-30)); stroke(0, 0, 0); text("締め切りだよ！", 0, 0); pop(); if (mouseIsPressed) { textSize(15); text("こんにちは、作りに来たんですね？(なにかキーを押す)", width / 2, height / 4 * 3); } if (keyIsPressed) { rectMode(CORNER); fill(250, 100, 80); rect(0, height / 4 * 3 + 3, width, height); fill(0, 0, 100); textSize(15); text("▼はい", width / 2, height / 4 * 3 + 40); text("▽いいえ", width / 2, height / 4 * 3 + 60); textSize(10); text("締め切りは今週末なんだも...", width / 2 + 100, height / 4 * 3 + 40); } }
大学祭に来てくれた先輩にfabMakerだねって言われ、おいでよfabMakerの森って話になって盛り上がったのでそれを基にしました。タヌキチに（借金の代わりに）締切なんだも…っていうゲームになりそうで、それはそれで追いつめられるゲームになりそう。
最近のp5.jsブログあげるのさぼってたので更新しました。これで今のところ全部上げてます。
5回目のp5.js
let x; //宣言 let y; let r; let add; function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100, 100); x = 200; //代入 y = 0; r = 100; } function draw() { add = random(140, 150); background(0, 0, 100); noStroke(); fill(0, 100, 100); ellipse(x, y, r, r); ellipse(x - add, y, r, r); ellipse(x + add, y, r, r); y=y+add%10; y=y%(height+r); }
let num = 150; function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100, 100); print(num == 100);//Q.numは100より大きいか？ //A.下に書いたやで } function draw() { // background(220); if (mouseIsPressed) { fill(random(180, 250), 100, 100); noStroke(); ellipse(mouseX, mouseY, random(100), random(100)); } else { stroke(0,0,50,50); fill(random(-50,100),100,100,30); rectMode(CENTER); rect(random(width), random(height), random(100), random(100)); } }
let x; let y; let r; let sx; let sy; let count; let countw; let counth; let c; let wins; let winh; let rr; function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100, 100); x = width / 2; y = height / 2; r = random(5, 50); sx = random(-5, 5); sy = random(-5, 5); smooth(); count = 0; countw = 0; counth = 0; c = 0; winw = 0; winh = 0; rr = random(0, 1); } function draw() { //boll fill(c % 360, 100, 100); noStroke(); ellipse(x, y, r, r); fill((c + 30) % 360, 50, 100, 10); rect(0, 0, width, height); //speed x = x + sx * 2; y = y + sy * 2; //bownd if (x + r / 2 > width || x - r / 2 < 0) { sx = sx * -1; count = count + 1; countw = countw + 1; c = c + 1; } if (y + r / 2 > width || y - r / 2 < 0) { sy = sy * -1; count = count + 1; counth = counth + 1; c = c + 1; } //moji push(); translate(width / 2, height / 2); fill(0, 0, 100, 50); rectMode(CENTER); rect(0, 0, width, 100); fill(0, 0, 0); text(count, 0, 0); text(countw, 0 - 50, 0 + 30); text(counth, 0 + 50, 0 + 30); if (countw >= 30) { countw = 0; winw = winw + 1; } if (counth >= 30) { counth = 0; winh = winh + 1; } text("WINNING COUNT", 80, 0); text("WINNING COUNT", -180, 0); text(winw, -130, 20); text(winh, 130, 20); fill(0, 0, 0); text("総合計", 0 - 13, 0 - 15); text("左右", 0 - 50 - 7, 0 + 30 - 15); text("上下", 0 + 50 - 7, 0 + 30 - 15); pop(); }
割と長く書いててびっくりしてる。宣言と代入を別々にしてるからってのもあるからかもだけど。一番最後は先に勝った方が更新しない限り、勝ち続けるという単調なものになりました。
4回目のp5.js
function setup() { createCanvas(400, 400); // colorMode(HSB,360,100,100,100); } function draw() { background(220,20); fill(0,0,mouseY%255,random(100)); stroke(255,0,255,random(100)); strokeWeight(random(50)); ellipse(200,200,mouseX+random(10),mouseX+random(10)); }
RGBとHSBのカラーモードの差のプログラム
function setup() { createCanvas(400, 400); } function draw() { // background(220); //print(random(255)); noStroke(); fill(random(255),random(255),random(255),random(50)); ellipse(mouseX,mouseY,50,50); }
function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100); } function draw() { background(0,0,frameCount*0.1%100,50); strokeWeight(random(10)); stroke(0,0,100,random(10)); fill((frameCount%360),100,100); ellipse(200,200,200,200); quad(width/2,0,width/4,height/4,width/2,height/2,width*3/4,height/4); //sita push(); translate(0,height/2); fill(((frameCount%360)+180)%360,100,100); quad(width/2,0,width/4,height/4,width/2,height/2,width*3/4,height/4); pop(); //migi push(); translate(width/4,height/4); fill(((frameCount%360)+90)%360,100,100); quad(width/2,0,width/4,height/4,width/2,height/2,width*3/4,height/4); pop(); //hidari push(); translate(-width/4,height/4); fill(((frameCount%360)-90)%360,100,100); quad(width/2,0,width/4,height/4,width/2,height/2,width*3/4,height/4); pop(); }
色がくるくる循環するものを作りたくて作りました。
3回目のp5.js
a=2; function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100) } function draw() { fill(0,0,100); rect(0,0,width,height); fill(mouseY%360,100,100,50); rect(0,0,width,height); fill(mouseX%360,100,100,50); quad(width/a,0,0,height/a,width/a,height,width,height/a); textSize(random(10,50)); fill(mouseX%360,100,100); text(mouseX%360,mouseX,mouseY); fill(mouseY%360,100,100); text(mouseY%360,mouseX,mouseY+50); }
mouseX,mouseYに対応して色が変わり、その数値が可視化できる。
quad初めて使ったのですがこれrect回転させたほうが早かった。
忘れそうなのでメモ↓
/* 長くコメントアウトする用 */
大学祭終了
昨日と今日の2日間、甲南女子大学で展示を行いました。全体の感想は
疲れた。
これに限ります。
辺境地で展示をしてたのでまずスルーする人が多かった。もっと人通りのある場所が良かったと思います。
見てくださった方の多くが3Dプリンタに興味持ってくださって嬉しかったです。ちびっこちゃん3名が3Dプリンタすくいをしてくれたんですが、全部すくったり丸く並べたり、アルファベットが分からないこともあり、裏返して並べたりと、こちらの想定外の行動をして面白かったです。
まさか文字を立てるとは思わないよなぁ↓
次は実際にその場で出力してとかやってみたいです。あとその場でプログラミングやったり。ひたすらに待つのは辛い（外に宣伝に行くのは苦手、人が足りない）
あと設置と撤収が時間かかりました。設置6時間くらいかかりました。設置だけでは無かったんですが色々準備して大変でした。次からは気をつけなければ。
あとLIVEにも行きました。
前半はゾンババの心地いい曲。ちゃんと聞こえてるのにハッと気がついたら寝てたみたいな感じでした。ちょっと不思議な感じだった。普通に寝不足なのもあるかも。
後半はの山形さんのビジュアル付き音楽…（？）何見てるか全然わからないし不協和音だし恐怖心を煽られて正直？しか浮かんでなかった。でも解説聞くと、全然わからないけどなんか理解しようとして製作者の意図してない二つを意味で紐付けようとしたり、カーソルは人が動かしたから動くのだ・デスクトップは沢山ファイルやアプリがあるものなのだという先入観があったりなどの無意識の処理に基づくものであったと思います。
直接見るのと何かを通して見ることの違いもそのうちにあると思います。コンサートや舞台を直接見るのとDVD版を買うのとでは感じ方は違います。4月くらいに劇団四季を見に行った時、目の前に演者さんがいて目を合わせたりすることはDVDでは感じられないだろうし、あんなにドキドキすることもないと思います。また、私がよく聴く動画に打ち込み動画（譜面に従った曲を出力するアプリによる動画）と実際に人が演奏を撮影したものがありますが、その感動値は直接聞くのと比べるとパソコンと人の演奏なのに似てると思います。それほどまでにメディアを通したものより直接性を重んじるのかと考えました。だからこそ、すべてパソコンで制御しているとしても｢今人間の手でやっている｣と見せかける必要性があるように感じました。
生演奏、生中継、生放送。どれもLIVEと表示されることがある。（例として）テレビを介しているにも関わらず、どれも直接あなたに届けているように見せかけ、価値を高めている。ちょっと違うかもしれないけれど、そんなことも考えました。
今日はたくさん疲れたのでもうゆっくり寝ようと思います。睡眠大事、お疲れ様でした。
また2、3月にあるギャラリー展示のために頑張りたいと思います。
