Kei kitamura (talk | contribs) |
Kei kitamura (talk | contribs) |
||
| (16 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 21: | Line 21: | ||
1. [https://codepen.io/kayk5654/pen/woMQZv turtle walk]<br> | 1. [https://codepen.io/kayk5654/pen/woMQZv turtle walk]<br> | ||
The curve shows the turning point of the turtle.<br> | The curve shows the turning point of the turtle.<br> | ||
[[Image:KK_turtle01.png|thumb|left| | [[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> | |||
Thus, the direction of the curve reflects the dominant color factor<br> | |||
To test locally, you can download this project;<br> | To test locally, you can download this project;<br> | ||
[[Media:Turtle_homework_02_modified.zip]]<br> | [[Media:Turtle_homework_02_modified.zip]]<br> | ||
[[Image:KK_turtle02.png|thumb|left| | [[Image:KK_turtle02.png|thumb|left|200px]] <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | <br> | ||
| Line 35: | 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 46: | Line 47: | ||
[https://codepen.io/kayk5654/pen/wgaYjW breitenberg vehicle]<br> | [https://codepen.io/kayk5654/pen/wgaYjW breitenberg vehicle]<br> | ||
Each vehicles prefer either of red, green blue lights.<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> | You can drag the lights by keep pressing the central point of the light.<br> | ||
[[Image:KK_breitenberg_vehicle1.png|thumb|left| | [[Image:KK_breitenberg_vehicle1.png|thumb|left|200px]] <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | <br> | ||
| Line 58: | Line 59: | ||
Each vehicles prefers either of dark area or bright area of their environment.<br> | Each vehicles prefers either of dark area or bright area of their environment.<br> | ||
<br> | <br> | ||
My original sketch uses external .png file as brushes. <br> | [https://codepen.io/kayk5654/pen/ZLqPKX My original sketch] uses external .png file as brushes. <br> | ||
You can download .zip and test on your editor | You can download .zip and test it with your own brush image on your local editor.<br> | ||
[[Media:Breitenberg_vehicle_homework_1.zip]]<br> | [[Media:Breitenberg_vehicle_homework_1.zip]]<br> | ||
[[Image:KK_breitenberg_vehicle2.png|thumb|left| | [[Image:KK_breitenberg_vehicle2.png|thumb|left|200px]] <br> | ||
<br> | <br> | ||
| Line 71: | Line 72: | ||
Needles moves continuously by the influence of the noise field.<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> | When you drag on the needles, they create circular pattern around the mouse pointer.<br> | ||
[[Image:KK_magnetrix.png|thumb|left| | [[Image:KK_magnetrix.png|thumb|left|200px]] <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | <br> | ||
| Line 83: | Line 84: | ||
"drawOsci" shows waveforms of audio input from the mic of your computer<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> | Also, there are different functional sounds assigned 1 - 6 keys on your keyboard.<br> | ||
[[Image:KK_soundfun.png|thumb|left| | [[Image:KK_soundfun.png|thumb|left|200px]]<br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
<br> | <br> | ||
| Line 89: | Line 90: | ||
== Semester project == | == 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> | Reference:<br> | ||
[https://threejs.org/ three.js]<br> | [https://threejs.org/ three.js]<br> | ||
[https://github.com/spite/THREE.MeshLine THREE.Meshline]<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