generative_art

動きのデザイン ver.1.0

どうも、クリエイターのやまかずです。

動きのデザインについて、なぜ必要なのか、そしてどうやるのかについて話します。この記事は初の随時更新システムにしたいと思います。これからも更新してくので、よろしくお願いします。

動きのデザインの大切さ

技術ではなく、コンセプトが重要。

まず前提としてこれを話します。コンピューターメディアが登場して何年も経ちますが、紙と同様に扱われてないと思います。紙とい

もっとみる

とりあえず100 #7

float ang = 0;float angStep = 0.01;float n_Period = 400;//カーブの周期数float n_Rot = 12;float startCol = random(100);//カーブの最初の色float endCol = random(100);//カーブの最後の色void setup() { println(startCol, endCol);

もっとみる

勉強中

やっとこさ楽しくなってきました(๑′ᴗ‵๑)
p5.js/org
注意:スマホや携帯じゃ出来ないので、パソコンからみてくださいね。

暑い日が続きますね(-。-; 熱中症にお気をつけください❣️
2

JavaScriptを使ってGenerative Artを作成:03

こんにちはKAORIですꉂ(ˊᗜˋ*)
ものすごく久しぶりになってしまいました汗
すみません!
書かなくちゃと思ってから勉強会行って1ヶ月くらい経ってる。。。

最終的にこんなアートを作成しました。

<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>最終目的の表示</title></

もっとみる

JavaScriptとp5.jsを使って Generative Artとカウントダウン

こんにちはKAORIです。
今回は、自己流で勉強しているp5.jsと、先日の勉強会で出たJavaScriptの課題をコラボして学校の1周年記念パーティーまでのカウントダウンページを作成し、初deployまでしました✨✨✨

これを表示させています。
まずは、index.htmlにhtmlとJavaScriptでカウントダウンページを作成します。

<body> <div class="mai

もっとみる

JavaScriptを使ってGenerative Artを作成:02

こんにちはKAORIです。
generativeアート作成の続きを書いていきたいと思います。
その後、いろいろと調べたり復習したり写経なども続けています。

今回は、前回の続きで次々に表示させていきながら教わったコードなどをお話させていきたいと思います。

次に表示したのはこの画像になります。
どんな風に色を出すのか、どんな数字を出すとどの色になるのかの確認紹介になります。

<!DOCTYPE

もっとみる

JavaScriptを使ってGenerative Artを作成:01

こんにちは、KAORIです。

先日、モニターで参加した勉強会で作成した作品について書いてみます。
東京で行われた勉強会で、今回はzoomを使ってライブ配信しながらJavaScriptで作成していくといった内容でした。
現地でも参加者が数人いて説明を聞きながら実際にコードを書いていくといった流れです。

私は、ほぼ初心者でしたので少しでも当日により理解が出来るようにと思いLINKなどを見て勉強会に

もっとみる
暑い日が続きますね(-。-; 熱中症にお気をつけください❣️
3

とりあえず100 #5

int n_Vert = 3; //描く多角形の頂点数int n_Loop = 8; //ループ回数float radScaleFac = 0.5;//ループの際スケールに掛け算する値void setup() {size(800, 800); background(0);noFill();stroke(255, 100);translate(width/2, height/1.7);rotate(

もっとみる

とりあえず100 #4

float ang = 0;float n_Rot = 400;//カーブの周期数float startCol = random(100);//カーブの最初の色float endCol = random(100);//カーブの最後の色void setup(){ println(startCol, endCol); size(800, 800); blendMode(SCREEN); colorMo

もっとみる

とりあえず100 #3

float ang = 0;float n_Rot = 400;//サインカーブの周期数float startCol = random(100);//カーブの最初の色float endCol = random(100);//カーブの最後の色void setup(){ println(startCol, endCol); size(800, 800); blendMode(SCREEN); colo

もっとみる