Kei kitamura (talk | contribs) No edit summary |
Kei kitamura (talk | contribs) |
||
| (23 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 command which defines the direction of turtle walk.<br> | 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> | ||
| Line 32: | Line 36: | ||
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;"> | <br style="clear:both;"> | ||
2. [https://codepen.io/kayk5654/pen/ObgBda L-system]<br> | 2. [https://codepen.io/kayk5654/pen/ObgBda L-system]<br> | ||
[[Image:KK_fractal2.png|thumb|left| | [[Image:KK_fractal2.png|thumb|left|200px]] <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | <br> | ||
| Line 42: | Line 46: | ||
== Week 06 == | == Week 06 == | ||
[https://codepen.io/kayk5654/pen/wgaYjW breitenberg vehicle]<br> | |||
[[Image:KK_breitenberg_vehicle1.png|thumb|left| | 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 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;"> | <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> | |||
== 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> | |||
Latest revision as of 08:11, 14 March 2017
Week 01
Representation of the curve drawing instruction
The drawing instruction is File:Drawaline.pdf
Week 03
1. random distribution function
2. curve controlled by randomness
Week 04
1. turtle walk
The curve shows the turning point of the turtle.
2. turtle walk with data
The selected background image is converted to the command which defines the direction of turtle walk.
Each pixels of the image are sampled, and the strongest one of the R, G or B is assigned as a command.
Thus, the direction of the curve reflects the dominant color factor
To test locally, you can download this project;
Media:Turtle_homework_02_modified.zip
Week 05
2. L-system
Week 06
breitenberg vehicle
Each vehicles prefer either of red, green or blue lights.
You can drag the lights by keep pressing the central point of the light.
Week 07
breitenberg vehicle with custom environment
Vehicles draw streaks with brushes.
Each vehicles prefers either of dark area or bright area of their environment.
My original sketch uses external .png file as brushes.
You can download .zip and test it with your own brush image on your local editor.
Media:Breitenberg_vehicle_homework_1.zip
Week 10
magnetic matrix
Needles moves continuously by the influence of the noise field.
When you drag on the needles, they create circular pattern around the mouse pointer.
Week 11/12
soundfun
This sketch has 4 visualization functions.
"drawLevel" shows the loudness of the sound.
"drawWaveform" and "drawFFT" shows waveform and the result of FFT analysis.
"drawOsci" shows waveforms of audio input from the mic of your computer
Also, there are different functional sounds assigned 1 - 6 keys on your keyboard.
Semester project
I have tried to generate curves on the surface of 3d model, so that the curvy patterns of mesh forms 3d object.
The idea comes from Japanese traditional patterns of water flow ,
and I'd like to get smilar result by adjusting parameters of noise.
Work in progress:
File:curve generation test 02.zip
File:curve generation test 04.zip
File:curve generation test 05.zip
Reference:
three.js
THREE.Meshline