255
edits
GMU:Meandering through Space/Kei Kitamura (view source)
Revision as of 08:11, 14 March 2017
, 14 March 2017→Semester project
Kei kitamura (talk | contribs) |
Kei kitamura (talk | contribs) |
||
| (26 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
[http://codepen.io/kayk5654/pen/LbjJmo Representation of the curve drawing instruction]<br> | [http://codepen.io/kayk5654/pen/LbjJmo Representation of the curve drawing instruction]<br> | ||
The drawing instruction is [[File:Drawaline.pdf|here]] | The drawing instruction is [[File:Drawaline.pdf|here]] | ||
[[Image:KK_firstcurve.png|thumb|left| | [[Image:KK_firstcurve.png|thumb|left|200px]] <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | <br> | ||
| Line 11: | Line 11: | ||
1. [https://codepen.io/kayk5654/pen/eBpKyY random distribution function] <br> | 1. [https://codepen.io/kayk5654/pen/eBpKyY random distribution function] <br> | ||
[[Image:KK_randomness.png|thumb|left| | [[Image:KK_randomness.png|thumb|left|200px]] <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
2. [https://codepen.io/kayk5654/pen/ZBbRXz curve controlled by randomness] <br> | 2. [https://codepen.io/kayk5654/pen/ZBbRXz curve controlled by randomness] <br> | ||
[[Image:KK_randomwalk.png|thumb|left| | [[Image:KK_randomwalk.png|thumb|left|200px]] <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | <br> | ||
| Line 20: | Line 20: | ||
1. [https://codepen.io/kayk5654/pen/woMQZv turtle walk]<br> | 1. [https://codepen.io/kayk5654/pen/woMQZv turtle walk]<br> | ||
[[Image:KK_turtle01.png|thumb|left| | The curve shows the turning point of the turtle.<br> | ||
[[Image:KK_turtle01.png|thumb|left|200px]] <br> | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
2. [https://codepen.io/kayk5654/pen/mOVQgo turtle walk with data]<br> | 2. [https://codepen.io/kayk5654/pen/mOVQgo turtle walk with data]<br> | ||
The selected background image is converted to | The selected background image is converted to the command which defines the direction of turtle walk.<br> | ||
Each pixels of the image are sampled, and the strongest one of the R, G or B is assigned as a command.<br> | |||
[[Image:KK_turtle02.png|thumb|left| | Thus, the direction of the curve reflects the dominant color factor<br> | ||
To test locally, you can download this project;<br> | |||
[[Media:Turtle_homework_02_modified.zip]]<br> | |||
[[Image:KK_turtle02.png|thumb|left|200px]] <br> | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | <br> | ||
== Week 05 == | == Week 05 == | ||
1. [https://codepen.io/kayk5654/pen/VmWEgy recursive curve]<br> | 1. [https://codepen.io/kayk5654/pen/VmWEgy recursive curve]<br> | ||
[[Image:KK_fractal01.png|thumb|left| | [[Image:KK_fractal01.png|thumb|left|200px]] <br> | ||
<br style="clear:both;"> | |||
2. [https://codepen.io/kayk5654/pen/ObgBda L-system]<br> | |||
[[Image:KK_fractal2.png|thumb|left|200px]] <br> | |||
<br style="clear:both;"> | |||
<br> | |||
== Week 06 == | |||
[https://codepen.io/kayk5654/pen/wgaYjW breitenberg vehicle]<br> | |||
Each vehicles prefer either of red, green or blue lights.<br> | |||
You can drag the lights by keep pressing the central point of the light.<br> | |||
[[Image:KK_breitenberg_vehicle1.png|thumb|left|200px]] <br> | |||
<br style="clear:both;"> | |||
<br> | |||
== Week 07 == | |||
[https://codepen.io/kayk5654/pen/ygQGBP breitenberg vehicle with custom environment]<br> | |||
Vehicles draw streaks with brushes.<br> | |||
Each vehicles prefers either of dark area or bright area of their environment.<br> | |||
<br> | |||
[https://codepen.io/kayk5654/pen/ZLqPKX My original sketch] uses external .png file as brushes. <br> | |||
You can download .zip and test it with your own brush image on your local editor.<br> | |||
[[Media:Breitenberg_vehicle_homework_1.zip]]<br> | |||
[[Image:KK_breitenberg_vehicle2.png|thumb|left|200px]] <br> | |||
<br> | |||
<br style="clear:both;"> | |||
== Week 10 == | |||
[https://codepen.io/kayk5654/pen/vggavj magnetic matrix]<br> | |||
Needles moves continuously by the influence of the noise field.<br> | |||
When you drag on the needles, they create circular pattern around the mouse pointer.<br> | |||
[[Image:KK_magnetrix.png|thumb|left|200px]] <br> | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | |||
== Week 11/12 == | |||
[https://codepen.io/kayk5654/pen/oBBMOp soundfun]<br> | |||
This sketch has 4 visualization functions.<br> | |||
"drawLevel" shows the loudness of the sound.<br> | |||
"drawWaveform" and "drawFFT" shows waveform and the result of FFT analysis.<br> | |||
"drawOsci" shows waveforms of audio input from the mic of your computer<br> | |||
Also, there are different functional sounds assigned 1 - 6 keys on your keyboard.<br> | |||
[[Image:KK_soundfun.png|thumb|left|200px]]<br> | |||
<br style="clear:both;"> | |||
<br> | |||
== Semester project == | |||
<br> | |||
I have tried to generate curves on the surface of 3d model, so that the curvy patterns of mesh forms 3d object.<br> | |||
The idea comes from Japanese traditional patterns of [http://bit.ly/2llmlqD water flow] ,<br> | |||
and I'd like to get smilar result by adjusting parameters of noise.<br> | |||
<br> | |||
Work in progress:<br> | |||
<br style="clear:both;"> | |||
<br> | |||
[[:File:curve generation test 02.zip]]<br> | |||
[[File:KK_meandering_wip1.png|200px|thumb|left]]<br> | |||
<br style="clear:both;"> | |||
<br> | |||
[[:File:curve generation test 04.zip]]<br> | |||
[[File:KK_meandering_wip2.png|200px|thumb|left]]<br> | |||
[[File:KK_meandering_wip3.png|200px|thumb|left]]<br> | |||
<br style="clear:both;"> | |||
<br> | |||
[[:File:curve generation test 05.zip]]<br> | |||
[[File:KK_meandering_wip4.png|200px|thumb|left]]<br> | |||
[[File:KK_meandering_wip5.png|200px|thumb|left]]<br> | |||
<br style="clear:both;"> | |||
<br> | |||
Reference:<br> | |||
[https://threejs.org/ three.js]<br> | |||
[https://github.com/spite/THREE.MeshLine THREE.Meshline]<br> | |||