├── .gitignore ├── .idea ├── markdown-navigator.xml ├── markdown-navigator │ └── profiles_settings.xml ├── modules.xml ├── preferred-vcs.xml ├── vcs.xml ├── workshop.iml └── workspace.xml ├── README.md ├── exercices ├── corrections │ ├── Delaunator.js │ ├── assetsLoader.js │ ├── base.js │ ├── exercice_1_1.html │ ├── exercice_1_2.html │ ├── exercice_1_3.html │ ├── exercice_2_1.html │ ├── exercice_2_2.html │ ├── exercice_3_1.html │ ├── exercice_3_2.html │ ├── exercice_3_3.html │ ├── exercice_3_4.html │ ├── quadratic.js │ └── tronche.jpg └── references │ ├── assets │ ├── DNJO9JgWsAE6a3n.mp4 │ ├── DOAg2ozUEAAvBYw.mp4 │ ├── DOop5pGXcAATOFn.mp4 │ ├── anders_hoff.jpg │ ├── generateme.jpg │ ├── johnathan_puckey.jpg │ ├── kinect-depth-testm4v.mp4 │ ├── new-york-city-24h-time-lapse.mp4 │ ├── tumblr_nclm7s0qB91tb0c1mo1_1280.jpg │ ├── tumblr_nct6wilTD91tb0c1mo1_1280.jpg │ ├── tumblr_nnh1ngiqMB1tb0c1mo1_1280.jpg │ └── tylerhobbs.png │ └── index.html ├── index.html ├── revisions ├── 0_dom │ ├── 0_hello_world.html │ └── 1_hello_world.html ├── 1_drawing │ ├── 0_point_rectangle.html │ ├── 1_ligne.html │ └── 2_polygones.html ├── 2_cercle │ ├── 0_arc.html │ ├── 1_trigo.html │ └── 2_angle_distance.html ├── 3_lerp_norm_map │ ├── 0_lerp.html │ ├── 1_norm.html │ └── 2_map.html ├── 4_data │ ├── 0_variable.html │ └── 1_variable_N_dimensions.html ├── 5_curves │ ├── 0_quadratic.html │ └── 1_cubic.html ├── 6_transforms │ ├── 0_transform.html │ └── 1_transform_operations.html ├── 7_images │ ├── 0_image.html │ ├── 1_patterns.html │ ├── 2_alpha_blending.html │ └── image.jpg ├── 8_effets │ ├── 0_glow.html │ ├── 1_filters.html │ └── image.jpg ├── 9_extras │ ├── 0_sample.html │ ├── 1_exercice.html │ ├── CSVLoader.js │ ├── TXTLoader.js │ ├── lorem_ipsum.txt │ ├── plotters │ │ ├── plotArcs.js │ │ ├── plotCompareHistogram.js │ │ ├── plotHull.js │ │ ├── plotKmeans.js │ │ ├── plotPolar.js │ │ ├── plotQuadraticCompare.js │ │ ├── plotSimpleGraph.js │ │ └── plotTime.js │ ├── synop.2015102115.csv │ └── utils │ │ ├── cardinal.js │ │ ├── catmullrom.js │ │ ├── circle.js │ │ ├── convexhull.js │ │ ├── kmeans.js │ │ ├── metrics.js │ │ ├── paletteGenerator.js │ │ ├── polygon.js │ │ ├── quadratic.js │ │ └── simplify.js ├── agent_iteration_feedback │ ├── 0_random_walk.html │ ├── 1_trail.js │ ├── 1_trails.html │ ├── 2_history.html │ ├── 2_history.js │ ├── 3_reacher.html │ ├── 3_reacher.js │ └── catmullrom.js ├── appendix │ ├── _color_ - CSS _ MDN.html │ ├── _color_ - CSS _ MDN_files │ │ ├── ae5b9bd466dae65a6be4e9ff223d2b2a │ │ ├── d0d90148e08e3b64ccf75c46f31442c5 │ │ ├── f383cd79ac30207f746361c2b124db98 │ │ ├── f71f6ff4b1cb760a924097f5f7e7d423 │ │ ├── main-min.js │ │ ├── mdn-min.css │ │ ├── syntax-prism-min.js │ │ ├── wiki-min.css │ │ └── wiki-min.js │ ├── flash_transform_matrix.html │ └── flash_transform_matrix_files │ │ ├── e_rotate.gif │ │ ├── e_scale.gif │ │ ├── e_tile.jpg │ │ ├── e_translatetocenter.gif │ │ ├── e_translatetorot.gif │ │ ├── feed.png │ │ ├── m_column_elements.gif │ │ ├── m_column_multiply.gif │ │ ├── m_element_meanings.gif │ │ ├── m_elements.gif │ │ ├── m_elements_base.gif │ │ ├── m_examples.gif │ │ ├── m_identity.gif │ │ ├── m_inverse_calc.gif │ │ ├── m_multiply.gif │ │ ├── m_multiply_calc.gif │ │ ├── m_multiply_outline.gif │ │ ├── m_multiply_reduced.gif │ │ ├── m_rotate.gif │ │ ├── m_rotate_30.gif │ │ ├── m_row.gif │ │ ├── m_row_calc.gif │ │ ├── m_row_multiply.gif │ │ ├── m_row_multiply_outline.gif │ │ ├── m_row_reduced.gif │ │ ├── m_scale.gif │ │ ├── m_scale_skew.gif │ │ ├── m_scale_skew_calc.gif │ │ ├── m_scale_skew_result.gif │ │ ├── m_skew.gif │ │ ├── m_skew_scale.gif │ │ ├── m_skew_scale_calc.gif │ │ ├── m_skew_scale_result.gif │ │ ├── m_skew_translate.gif │ │ ├── pin.gif │ │ ├── skew_center.swf │ │ ├── skew_shift.swf │ │ ├── standard.css │ │ ├── t_affine.jpg │ │ ├── t_double_width.jpg │ │ ├── t_info_panel.jpg │ │ ├── t_mc_transforms.jpg │ │ ├── t_rotate45_scale.jpg │ │ ├── t_rotate_point.gif │ │ ├── t_single_skew.jpg │ │ ├── t_transform_center.jpg │ │ ├── t_x_scale.jpg │ │ ├── t_x_skew.jpg │ │ ├── t_x_skew_scale.jpg │ │ ├── t_x_translate.jpg │ │ ├── t_x_y_skew.jpg │ │ ├── t_y_scale.jpg │ │ ├── t_y_skew.jpg │ │ ├── t_y_translate.jpg │ │ ├── transform_grabber.swf │ │ ├── transform_methods.swf │ │ ├── transform_steppers.swf │ │ └── tutorial.css ├── attraction_repulsion │ ├── 0_principle.html │ ├── 0_principle.js │ ├── 1_hexagons.html │ ├── 1_hexagons.js │ ├── 2_happy_place.html │ └── 2_happy_place.js ├── base.js ├── cycloids │ ├── 0_example.html │ ├── cardioid.html │ ├── cardioid.js │ ├── cycloid.html │ ├── cycloid.js │ ├── guilloche.html │ ├── lissajous.html │ ├── nestedcycloid.html │ └── nestedcycloid.js ├── differential_growth │ ├── 0_principle.html │ ├── 0_principle.js │ ├── 1_recursive_subdiv.html │ └── 2_recursive_subdiv_tri.html ├── distribution │ ├── grid.html │ ├── grid.js │ ├── hexagonal.html │ ├── hexagonal.js │ ├── poisson.html │ ├── poisson.js │ ├── polar.html │ ├── polar.js │ ├── scale.html │ ├── scale.js │ ├── triangular.html │ └── triangular.js ├── easing │ ├── 0_easing.html │ ├── 1_easing.html │ ├── 2_shaping.html │ ├── 3_shaping.html │ ├── easing.js │ └── shaping.js ├── emergence │ ├── flocking.html │ ├── flocking.js │ ├── pseudo_rotation.html │ └── pseudo_rotation.js ├── feedback │ ├── 0_feedback.html │ └── 0_feedback.js ├── field │ ├── 0_principle.html │ ├── 0_principle.js │ ├── 1_agents.html │ └── 1_agents.js ├── geom.js ├── graphics.js ├── l_system │ ├── Lsystem.js │ ├── index.html │ └── main.js ├── random │ ├── 0_random.html │ ├── 0_random.js │ ├── 1_pseudorandom.html │ ├── 1_pseudorandom.js │ ├── 2_noise.html │ ├── 2_noise.js │ ├── 3_fbm.html │ ├── 3_fbm.js │ ├── 4_curl_noise.html │ ├── 4_curl_noise.js │ └── PRNG.js ├── recursion │ ├── sierpinski.html │ ├── sierpinski.js │ ├── tree.html │ └── tree.js ├── splines │ ├── cardinal.js │ ├── catmullrom.js │ ├── quadratic.js │ ├── simplify.js │ ├── splines.html │ ├── splines.js │ ├── splines_wall.html │ └── splines_wall.js ├── transform │ ├── kaleidoscope.html │ ├── kaleidoscope.js │ ├── pavage.html │ ├── pavage.js │ ├── project.html │ ├── project.js │ ├── reflect.html │ ├── reflect.js │ ├── rotation.html │ ├── rotation.js │ ├── translate.js │ └── translation.html └── utils │ ├── 3D.js │ ├── Delaunator.js │ ├── Graphics.js │ ├── bounce.html │ ├── bounce.js │ ├── circle.html │ ├── circle.js │ ├── earcut.js │ ├── geomUtils.js │ ├── hull.js │ ├── noise.js │ ├── oscillation.html │ ├── oscillation.js │ ├── random_rays.html │ ├── random_rays.js │ ├── rayhits.html │ ├── rayhits.js │ ├── recursive_rays.html │ ├── recursive_rays.js │ └── voronoi.js └── slides ├── css ├── print │ ├── paper.css │ └── pdf.css ├── reveal.css ├── reveal.scss └── theme │ ├── README.md │ ├── beige.css │ ├── black.css │ ├── blood.css │ ├── league.css │ ├── moon.css │ ├── night.css │ ├── serif.css │ ├── simple.css │ ├── sky.css │ ├── solarized.css │ ├── source │ ├── beige.scss │ ├── black.scss │ ├── blood.scss │ ├── league.scss │ ├── moon.scss │ ├── night.scss │ ├── serif.scss │ ├── simple.scss │ ├── sky.scss │ ├── solarized.scss │ └── white.scss │ ├── template │ ├── mixins.scss │ ├── settings.scss │ └── theme.scss │ └── white.css ├── img ├── data │ └── float.png ├── examples │ ├── nervous.png │ ├── nomansky.png │ └── uss.png ├── extra │ ├── ant │ │ ├── 3D.jpg │ │ ├── step0.png │ │ ├── step1.png │ │ ├── step2.png │ │ ├── step3.png │ │ └── step4.png │ ├── emergence_flocking.png │ ├── emergence_polar.png │ ├── noise.png │ ├── prng.png │ ├── tools │ │ ├── blender.jpg │ │ ├── houdini.jpg │ │ ├── magicavoxel_closeup.png │ │ ├── magicavoxel_shader.png │ │ ├── magicavoxel_sphere.png │ │ ├── meshlab.png │ │ ├── openframeworks.png │ │ ├── processing.png │ │ ├── shadertoy.png │ │ └── structure_synth │ │ │ ├── structure_synth0.png │ │ │ ├── structure_synth1.png │ │ │ ├── structure_synth2.png │ │ │ └── structure_synth3.png │ └── trails.png ├── process │ ├── circular.png │ ├── formal_grammar.ai │ ├── formal_grammar.png │ ├── formal_grammar_test.png │ ├── grid.png │ ├── iteration.png │ ├── mst.png │ ├── point_symmetry.png │ ├── projection.png │ ├── reflection.png │ ├── sierpinski.png │ ├── tree.png │ ├── triangular.png │ └── vector_field.png └── space │ ├── 0_cartesian.png │ ├── 1_polar.png │ ├── 2_cylindrical.png │ ├── 3D_printing.png │ ├── 3_spherical.png │ ├── 4_3Dcartesian.jpg │ ├── 4_3Dcartesian.png │ ├── 5_4Dcartesian.png │ ├── 6_4Dpoint.png │ ├── 7_4Dline.png │ ├── HSL.png │ ├── HSL_sphere.png │ ├── Ndimensional.ai │ ├── RGB.png │ ├── RGBA.png │ ├── TSNE.png │ ├── depthbuffer.jpg │ ├── hsl_palette.jpg │ ├── hyperbolic_knit.jpg │ ├── hypercube.png │ ├── moebius.png │ ├── notesonblindness.jpg │ ├── soundwave.png │ ├── stereo.png │ ├── surround-sound.png │ └── wavetypes.png ├── index.html ├── js ├── head.min.js └── reveal.js ├── lib └── font │ ├── league-gothic │ ├── LICENSE │ ├── league-gothic.css │ ├── league-gothic.eot │ ├── league-gothic.ttf │ └── league-gothic.woff │ └── source-sans-pro │ ├── LICENSE │ ├── source-sans-pro-italic.eot │ ├── source-sans-pro-italic.ttf │ ├── source-sans-pro-italic.woff │ ├── source-sans-pro-regular.eot │ ├── source-sans-pro-regular.ttf │ ├── source-sans-pro-regular.woff │ ├── source-sans-pro-semibold.eot │ ├── source-sans-pro-semibold.ttf │ ├── source-sans-pro-semibold.woff │ ├── source-sans-pro-semibolditalic.eot │ ├── source-sans-pro-semibolditalic.ttf │ ├── source-sans-pro-semibolditalic.woff │ └── source-sans-pro.css └── tmp.txt /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | /ecal2017/ 3 | /backup/ 4 | /exercices/references/assets/NYC/ 5 | /exercices/corrections/nyc/ 6 | /exercices/references/assets/DEPTH/ 7 | /exercices/corrections/depth/ 8 | -------------------------------------------------------------------------------- /.idea/markdown-navigator/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/preferred-vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ApexVCS 5 | 6 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/workshop.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GROW_workshop 2 | contents of my GROW Paris workshop 3 | -------------------------------------------------------------------------------- /exercices/corrections/assetsLoader.js: -------------------------------------------------------------------------------- 1 | var assetsLoader = function(exports ){ 2 | 3 | var xhr, img, jl, queue, callback; 4 | var i = 0; 5 | exports.IMG = i++; 6 | exports.TXT = i++; 7 | exports.load = function( list, cb ){ 8 | 9 | queue = list; 10 | callback = cb; 11 | 12 | xhr = new XMLHttpRequest(); 13 | xhr.onload = onLoad; 14 | 15 | loadNext(); 16 | 17 | }; 18 | 19 | function loadNext(){ 20 | 21 | if( queue.length === 0 ){ 22 | if( callback )callback(); 23 | return; 24 | } 25 | 26 | if( queue[0].type === assetsLoader.IMG ){ 27 | var img = new Image(); 28 | img.onload = onLoad; 29 | img.src = queue[0].url; 30 | } 31 | 32 | if( queue[0].type === assetsLoader.TXT 33 | || queue[0].type === assetsLoader.CHK ){ 34 | xhr.open( "GET", queue[0].url ); 35 | xhr.send(); 36 | } 37 | 38 | } 39 | 40 | function onError( e ){ 41 | console.log( e ); 42 | } 43 | function onProgress( e ){ 44 | console.log( e ); 45 | } 46 | function onLoad( e ){ 47 | 48 | if( queue[0].type === assetsLoader.IMG ){ 49 | exports[ queue[0].name ] = e.target; 50 | } 51 | if( queue[0].type === assetsLoader.TXT ){ 52 | exports[ queue[0].name ] = e.target.responseText; 53 | } 54 | if( queue[0].onLoad !== undefined ){ 55 | queue[0].onLoad( exports[ queue[0].name ] ); 56 | } 57 | queue.shift(); 58 | loadNext(); 59 | 60 | } 61 | 62 | return exports; 63 | 64 | }({}); -------------------------------------------------------------------------------- /exercices/corrections/base.js: -------------------------------------------------------------------------------- 1 | 2 | var canvas = document.createElement( 'canvas' ); 3 | document.body.appendChild( canvas ); 4 | var w = canvas.width = window.innerWidth; 5 | var h = canvas.height = window.innerHeight; 6 | var ctx = canvas.getContext("2d"); 7 | 8 | var PI = Math.PI; 9 | var RAD = PI / 180; 10 | 11 | function lerp ( t, a, b ){ return a * (1-t) + b * t; } 12 | function norm( t, a, b ){return ( t - a ) / ( b - a );} 13 | function map( t, a0, b0, a1, b1 ){ return lerp( norm( t, a0, b0 ), a1, b1 );} 14 | 15 | var Point = function(x,y){ 16 | this.x = x; 17 | this.y = y; 18 | }; 19 | function distance( a,b ){ 20 | var dx = a.x - b.x; 21 | var dy = a.y - b.y; 22 | return Math.sqrt( dx*dx+dy*dy ); 23 | } 24 | function angle( a,b ){ 25 | var dx = a.x - b.x; 26 | var dy = a.y - b.y; 27 | return Math.atan2( dy,dx ); 28 | } -------------------------------------------------------------------------------- /exercices/corrections/exercice_1_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | exercice 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /exercices/corrections/exercice_1_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | exercice 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /exercices/corrections/exercice_1_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | exercice 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /exercices/corrections/exercice_3_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | video 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /exercices/corrections/tronche.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/corrections/tronche.jpg -------------------------------------------------------------------------------- /exercices/references/assets/DNJO9JgWsAE6a3n.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/DNJO9JgWsAE6a3n.mp4 -------------------------------------------------------------------------------- /exercices/references/assets/DOAg2ozUEAAvBYw.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/DOAg2ozUEAAvBYw.mp4 -------------------------------------------------------------------------------- /exercices/references/assets/DOop5pGXcAATOFn.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/DOop5pGXcAATOFn.mp4 -------------------------------------------------------------------------------- /exercices/references/assets/anders_hoff.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/anders_hoff.jpg -------------------------------------------------------------------------------- /exercices/references/assets/generateme.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/generateme.jpg -------------------------------------------------------------------------------- /exercices/references/assets/johnathan_puckey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/johnathan_puckey.jpg -------------------------------------------------------------------------------- /exercices/references/assets/kinect-depth-testm4v.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/kinect-depth-testm4v.mp4 -------------------------------------------------------------------------------- /exercices/references/assets/new-york-city-24h-time-lapse.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/new-york-city-24h-time-lapse.mp4 -------------------------------------------------------------------------------- /exercices/references/assets/tumblr_nclm7s0qB91tb0c1mo1_1280.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/tumblr_nclm7s0qB91tb0c1mo1_1280.jpg -------------------------------------------------------------------------------- /exercices/references/assets/tumblr_nct6wilTD91tb0c1mo1_1280.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/tumblr_nct6wilTD91tb0c1mo1_1280.jpg -------------------------------------------------------------------------------- /exercices/references/assets/tumblr_nnh1ngiqMB1tb0c1mo1_1280.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/tumblr_nnh1ngiqMB1tb0c1mo1_1280.jpg -------------------------------------------------------------------------------- /exercices/references/assets/tylerhobbs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/exercices/references/assets/tylerhobbs.png -------------------------------------------------------------------------------- /revisions/0_dom/0_hello_world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 56 | 57 | -------------------------------------------------------------------------------- /revisions/4_data/1_variable_N_dimensions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /revisions/7_images/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/7_images/image.jpg -------------------------------------------------------------------------------- /revisions/8_effets/0_glow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | glow 6 | 7 | 8 | 9 | 10 | 11 | 12 | 39 | 40 | -------------------------------------------------------------------------------- /revisions/8_effets/1_filters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | glow 6 | 7 | 8 | 9 | 10 | 11 | 12 | 55 | 56 | -------------------------------------------------------------------------------- /revisions/8_effets/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/8_effets/image.jpg -------------------------------------------------------------------------------- /revisions/9_extras/CSVLoader.js: -------------------------------------------------------------------------------- 1 | var CSVLoader = function(){ 2 | 3 | function CSVLoader() 4 | { 5 | 6 | this.req = new XMLHttpRequest(); 7 | var scope = this; 8 | this.req.onload = function( e ) 9 | { 10 | //un tableau d'objets 11 | var data = []; 12 | 13 | //on isole chaque ligne du fichier reçu 14 | 15 | data = e.target.responseText.split( "\n") 16 | 17 | //on enlève les entrées vides 18 | 19 | .filter( function( str ) 20 | { 21 | return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '').length != 0; 22 | }) 23 | 24 | //convertit chaque entrée en tableau de valeurs 25 | 26 | .map( function( str ) 27 | { 28 | return str.split( scope.separator ) 29 | //caste les valeurs numériques en chiffres 30 | .map( function( s ) 31 | { 32 | if( !isNaN( parseFloat( s ) ) )return parseFloat( s ); 33 | return s; 34 | }); 35 | }) 36 | 37 | //convertit chaque entrée en objet pour pouvoir accéder plus facilement aux informations 38 | 39 | .map( function( input, i, arr ) 40 | { 41 | //on crée un objet pour stocker les infos 42 | 43 | var obj = {}; 44 | 45 | //on se sert des clés de la première entrée 46 | 47 | var keys = arr[ 0 ]; 48 | keys.forEach( function( key, id ) 49 | { 50 | obj[ key ] = input[ id ]; 51 | }); 52 | 53 | return obj; 54 | }); 55 | 56 | 57 | //on supprime la première entrée (le descriptif des champs ) 58 | data.shift(); 59 | 60 | //appelle la méthode de rappel en lui passant le tableau d'objets 61 | scope.callback( data ); 62 | 63 | }; 64 | } 65 | 66 | 67 | function load( url, callback, separator ) 68 | { 69 | this.callback = callback; 70 | this.separator = separator || ";"; 71 | 72 | this.req.open( "GET", url ); 73 | this.req.send(); 74 | 75 | } 76 | 77 | var _p = CSVLoader.prototype; 78 | _p.constructor = CSVLoader; 79 | _p.load = load; 80 | return CSVLoader; 81 | 82 | }(); -------------------------------------------------------------------------------- /revisions/9_extras/TXTLoader.js: -------------------------------------------------------------------------------- 1 | var TXTLoader = function(){ 2 | 3 | function TXTLoader() 4 | { 5 | 6 | this.req = new XMLHttpRequest(); 7 | var scope = this; 8 | this.req.onload = function( e ) 9 | { 10 | //un tableau d'objets 11 | var data = []; 12 | 13 | //on isole chaque ligne du fichier reçu 14 | 15 | data = e.target.responseText.split( "\n") 16 | 17 | //on enlève les entrées vides 18 | 19 | .filter( function( str ) 20 | { 21 | return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '').length != 0; 22 | }) 23 | 24 | //convertit chaque entrée en tableau de valeurs 25 | 26 | .map( function( str ) 27 | { 28 | //enlève la ponctuation 29 | 30 | var value = str.replace(/[^\w\s]/gi, ''); 31 | 32 | return value.split( scope.separator ) 33 | 34 | //enlève les blocs vides 35 | 36 | .filter( function( str ) 37 | { 38 | return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '').length != 0; 39 | }); 40 | }); 41 | 42 | //appelle la méthode de rappel en lui passant le tableau de mots 43 | scope.callback( data ); 44 | 45 | }; 46 | } 47 | 48 | 49 | function load( url, callback, separator ) 50 | { 51 | this.callback = callback; 52 | this.separator = separator || " "; 53 | 54 | this.req.open( "GET", url ); 55 | this.req.send(); 56 | 57 | } 58 | 59 | var _p = TXTLoader.prototype; 60 | _p.constructor = TXTLoader; 61 | _p.load = load; 62 | return TXTLoader; 63 | 64 | }(); -------------------------------------------------------------------------------- /revisions/9_extras/plotters/plotArcs.js: -------------------------------------------------------------------------------- 1 | //dessine un graphe polaire des valeurs 2 | function plotArcs(ctx, data ) 3 | { 4 | //assigne le contexte à l'utilitaire de dessin 5 | G.ctx = ctx; 6 | ctx.lineWidth = .25; 7 | 8 | var Y = height / 3 * 2; 9 | data.forEach( function( obj, i ) 10 | { 11 | var r = map( obj.t, t_min, t_max, 0, width / 2 ); 12 | ctx.strokeStyle = "#09C"; 13 | G.arc( width / 2 - r / 2, Y, r / 2, -PI, 0 ); 14 | 15 | r = map( obj.ff, ff_min, ff_max, 0, width / 2 ); 16 | ctx.strokeStyle = "#F00"; 17 | G.arc( width / 2 + r / 2, Y, r / 2, -PI, 0 ); 18 | }); 19 | 20 | ctx.strokeStyle = "#999"; 21 | G.graduation( 1, Y, width-1, Y, 100, 5 ); 22 | G.graduation( 1, Y, width-1, Y, 50, 10 ); 23 | G.graduation( 1, Y, width-1, Y, 10, 15 ); 24 | 25 | } -------------------------------------------------------------------------------- /revisions/9_extras/plotters/plotCompareHistogram.js: -------------------------------------------------------------------------------- 1 | //trace la différence entre vent et température 2 | function compareHistogram( ctx, values0, values1 ){ 3 | 4 | //assigne le contexte à l'utilistaire de dessin 5 | G.ctx = ctx; 6 | 7 | values0.forEach(function( v0,i ){ 8 | 9 | //récupère la valeur de values1 à cet index 10 | var v1 = values1[ i ]; 11 | 12 | //si la valeur 0 est plus grande que la valeur 1 13 | var h = v1.y - v0.y; 14 | if( h < 0 ) { 15 | //dessine un bloc jaune 16 | ctx.fillStyle = "#FC0"; 17 | }else{ 18 | //sinon dessine un bloc bleu 19 | ctx.fillStyle = "#09C"; 20 | } 21 | ctx.fillRect( v0.x, v0.y, width / data.length, h ); 22 | 23 | } ); 24 | } -------------------------------------------------------------------------------- /revisions/9_extras/plotters/plotHull.js: -------------------------------------------------------------------------------- 1 | //dessine le "polygone convexe englobant" d'un set de points 2 | //(convex hull) 3 | function plotHull( ctx, data ) 4 | { 5 | 6 | //assigne le contexte à l'utilitaire de dessin 7 | G.ctx = ctx; 8 | 9 | //dessine un graphe des valeurs polarisées 10 | var polar = []; 11 | ctx.strokeStyle = "#CCC"; 12 | G.graduation( 0,height/2, width, height/2, 40, 5 ); 13 | G.graduation( width/2,0, width/2, height, 30, 5 ); 14 | 15 | data.forEach( function( obj, i ) 16 | { 17 | var a = i / data.length * PI2;//angle 18 | 19 | var r = map( obj.t, t_min, t_max, height/8, height / 2 );//rayon 20 | var p = new Point( width / 2 + Math.cos( a ) * r, 21 | height / 2 + Math.sin( a ) * r ); 22 | polar.push( p ); 23 | 24 | G.disc( p, 2 ); 25 | 26 | } ); 27 | G.polyline( polar, true ); 28 | polar.forEach( function(p){ G.disc( p, true ); } ); 29 | 30 | //dessine le convex hull en rouge 31 | ctx.strokeStyle = "#f00"; 32 | G.polyline( convexhull.compute( polar ), true ); 33 | 34 | } -------------------------------------------------------------------------------- /revisions/9_extras/plotters/plotKmeans.js: -------------------------------------------------------------------------------- 1 | //stocke les K-moyens de l'ensemble de points 2 | var Kmeans; 3 | //dessine les K-moyens 4 | function plotKmeans( ctx, values0, values1 ){ 5 | 6 | //assigne le contexte à l'utilitaire de dessin 7 | G.ctx = ctx; 8 | 9 | //arrière plan en violet foncé 10 | ctx.fillStyle = "#260A30"; 11 | ctx.fillRect( 0,0,width, height); 12 | 13 | //crée une palette de couleurs 14 | var colors = [ "#583354", "#EF8166", "#FEC091", "#FDEFBE" ]; 15 | 16 | //concatène les valeurs des 2 tablkeaux 17 | var values = values0.concat( values1 ); 18 | 19 | //calcule et stocke les K-moyens une fois pour toutes 20 | //(un peu lourd à calculer) 21 | if( Kmeans == null ) 22 | { 23 | Kmeans = kmeans.compute( values, colors.length, 100 ); 24 | } 25 | 26 | var centroids = Kmeans.centroids; 27 | var points = Kmeans.points; 28 | //dessine les clusters reliés à leur centroids 29 | points.forEach(function( p ){ 30 | ctx.fillStyle = ctx.strokeStyle = colors[ p.centroid ]; 31 | G.disc(p.x, p.y,2 ); 32 | G.line( p, centroids[ p.centroid ] ) 33 | } ); 34 | 35 | //dessine les centroids 36 | centroids.forEach(function( p, i ) 37 | { 38 | ctx.fillStyle = ctx.strokeStyle = colors[i]; 39 | G.disc(p.x, p.y, p.items / 2 ); 40 | } ); 41 | } -------------------------------------------------------------------------------- /revisions/9_extras/plotters/plotPolar.js: -------------------------------------------------------------------------------- 1 | //dessine un graphe polaire des valeurs 2 | function plotPolar(ctx, inRadius, outRadius, data ) 3 | { 4 | 5 | //assigne le contexte à l'utilitaire de dessin 6 | G.ctx = ctx; 7 | 8 | //dessine des portions d'anneau en gris 9 | ctx.strokeStyle = "#ddd"; 10 | data.forEach( function( obj, i ) { 11 | var a = i / data.length * PI2; 12 | var span = a + PI2 / data.length; 13 | G.strokeRing(width / 2, height / 2, inRadius, outRadius, a, span); 14 | }); 15 | 16 | //dessine des portions d'anneau en bleu 17 | ctx.strokeStyle = ctx.fillStyle = "#09C"; 18 | data.forEach( function( obj, i ){ 19 | var a = i / data.length * PI2; 20 | var span = a + PI2 / data.length; 21 | var r = map( obj.t, t_min, t_max, inRadius, outRadius ); 22 | G.fillRing( width/2, height/2, inRadius,r, a, span ); 23 | G.strokeRing( width/2, height/2, inRadius,r, a, span ); 24 | }); 25 | 26 | //dessine des portions d'anneau en jaune 27 | ctx.strokeStyle = ctx.fillStyle = "#FC0"; 28 | data.forEach( function( obj, i ) { 29 | var a = i / data.length * PI2; 30 | var span = a + PI2 / data.length; 31 | var r = map(obj.ff, ff_min, ff_max, inRadius, outRadius); 32 | G.fillRing(width / 2, height / 2, inRadius, r, a, span); 33 | G.strokeRing(width / 2, height / 2, inRadius, r, a, span); 34 | }); 35 | } -------------------------------------------------------------------------------- /revisions/9_extras/plotters/plotQuadraticCompare.js: -------------------------------------------------------------------------------- 1 | //dessine les connexions entre deux séries réorganisées 2 | function plotQuadraticCompare( ctx, data, values0, values1 ) 3 | { 4 | //assigne le contexte à l'utilistaire de dessin 5 | G.ctx = ctx; 6 | 7 | //positionne et écrit les titres des colonnes 8 | var left = 50, right = width - 50; 9 | G.text( 'T', 16, left + 10, 20 ); 10 | G.text( 'FF', 16, right - 16, 20 ); 11 | 12 | //tableaux temporaires pour stocker les valeurs sous forme d'objets 13 | var ts = [], ffs = []; 14 | data.forEach( function(item, i ){ 15 | ts.push( { id : i, val : item.t, x: left + 10 } ); 16 | ffs.push( { id : i, val : item.ff, x:right - 10 } ); 17 | }); 18 | 19 | //classe et dessine les temperatures par ordre croissant 20 | ts.sort( function(a,b){ return a.val - b.val }); 21 | ts.forEach(function(o, i) { G.text(o.val, 5, o.x, 40 + i * 7 ); }); 22 | 23 | //classe et dessine les vitesses du vent par ordre croissant 24 | ffs.sort( function(a,b){ return a.val - b.val }); 25 | ffs.forEach(function(o, i){ G.text(o.val, 5, o.x, 40 + i * 7 ); }); 26 | 27 | //crée 4 variables pour dessiner les courbes (points de controle) 28 | var a = new Point(), b = new Point(), c = new Point(), d = new Point(); 29 | ts.forEach( function( o, i ){ 30 | 31 | a.x = o.x + 25; 32 | b.x = o.x + 25 + width / 2; 33 | a.y = b.y = 40 + i * 7; 34 | 35 | var ff = ffs[o.id ]; 36 | c.x = ff.x - 3 - width / 2; 37 | d.x = ff.x - 3; 38 | c.y = d.y = 40 + o.id * 7; 39 | 40 | //dessine en rouge ou en bleu si la température arrive avant ou 41 | //après le vent dans la liste réorganisée (on compare les Y, pas VAL ) 42 | if( a.y < c.y )ctx.strokeStyle = "rgba(255,0,0,.5)"; 43 | else ctx.strokeStyle = "rgba(0,153,204,.5)"; 44 | 45 | G.bezierCurve(a,b,c,d ); 46 | 47 | }); 48 | } 49 | -------------------------------------------------------------------------------- /revisions/9_extras/plotters/plotSimpleGraph.js: -------------------------------------------------------------------------------- 1 | //dessine les séries de valeurs sous forme de lignes 2 | function simpleGraph( ctx, values0, values1 ) 3 | { 4 | //assigne le contexte à l'utilistaire de dessin 5 | G.ctx = ctx; 6 | 7 | //trace le graphe des températures en rouge 8 | ctx.strokeStyle = "#F00"; 9 | G.polyline( values0 ); 10 | 11 | //scatterplot des vitesse du vent en bleu 12 | ctx.fillStyle = "#09C"; 13 | values1.forEach( function( p ){G.disc(p, 2);} ); 14 | } 15 | -------------------------------------------------------------------------------- /revisions/9_extras/plotters/plotTime.js: -------------------------------------------------------------------------------- 1 | //dessine une valeur normalisée T le long d'une série de segments 2 | function plotTime(ctx, values, t ) 3 | { 4 | //assigne le contexte à l'utilistaire de dessin 5 | G.ctx = ctx; 6 | 7 | //dessine une ligne graduée 8 | ctx.fillStyle = ctx.strokeStyle = "#EEE"; 9 | G.graduation( 0,height, width-1, height, data.length, -20 ); 10 | 11 | var id = ( Math.floor( ( values.length - 1 ) * t ) ); 12 | if( id < 0 ) id = 0; 13 | 14 | //dessine le rectangle où se trouve le point en gris 15 | ctx.fillRect( values[ id ].x, 0, width / data.length, height ); 16 | 17 | //trace la courbe des températures en noir 18 | ctx.strokeStyle = "#666"; 19 | G.polyline( values ); 20 | 21 | //dessine le point au temps T sur la courbe 22 | ctx.fillStyle = "#F00"; 23 | var p = getPositionAt( values, t ); 24 | G.disc( p, 2 ); 25 | 26 | //dessine en bleu les points de la courbe 27 | //entre lesquels se trouve le point p 28 | ctx.fillStyle = "#09C"; 29 | 30 | p = values[ id ]; 31 | G.disc(p, 2 ); 32 | 33 | p = values[ Math.min( id + 1, values.length - 1 ) ]; 34 | G.disc(p, 2 ); 35 | 36 | } 37 | -------------------------------------------------------------------------------- /revisions/9_extras/utils/cardinal.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by nico on 23/11/13. 3 | */ 4 | 5 | var Cardinal = function( exports ) 6 | { 7 | 8 | 9 | exports.compute = function( points, precision, tension, loop ) 10 | { 11 | 12 | precision = Math.max( .01, Math.min( 1, precision ||.1 ) ); 13 | tension = Math.max( -5, Math.min( 5, tension || 1 ) ); 14 | loop = Boolean( loop ); 15 | 16 | 17 | 18 | var tmp = [], 19 | p0, 20 | p1, 21 | p2, 22 | p3, 23 | i = 0, 24 | t = 0; 25 | 26 | for (i = 0; i < points.length - ( loop ? 0 : 1 ); i++) 27 | { 28 | 29 | p0 = (i < 1) ? points [points.length - 1] : points [i - 1]; 30 | p1 = points [i]; 31 | p2 = points [(i +1 + points.length) % points.length]; 32 | p3 = points [(i +2 + points.length) % points.length]; 33 | 34 | for ( t= 0; t < 1; t += precision ) 35 | { 36 | 37 | tmp.push( new Point( 38 | // x 39 | tension * ( -t * t * t + 2 * t * t - t) * p0.x + 40 | tension * ( -t * t * t + t * t) * p1.x + 41 | (2 * t * t * t - 3 * t * t + 1) * p1.x + 42 | tension * (t * t * t - 2 * t * t + t) * p2.x + 43 | ( -2 * t * t * t + 3 * t * t) * p2.x + 44 | tension * (t * t * t - t * t) * p3.x, 45 | 46 | // y 47 | tension * ( -t * t * t + 2 * t * t - t) * p0.y + 48 | tension * ( -t * t * t + t * t) * p1.y + 49 | (2 * t * t * t - 3 * t * t + 1) * p1.y + 50 | tension * (t * t * t - 2 * t * t + t) * p2.y + 51 | ( -2 * t * t * t + 3 * t * t) * p2.y + 52 | tension * (t * t * t - t * t) * p3.y 53 | 54 | ) ); 55 | } 56 | } 57 | if( loop && points.length > 0 )tmp.push( points[ 0 ]); 58 | return tmp; 59 | }; 60 | return exports; 61 | }({}); -------------------------------------------------------------------------------- /revisions/9_extras/utils/catmullrom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by nico on 23/11/13. 3 | */ 4 | var CatmullRom = function(exports) 5 | { 6 | 7 | exports.compute = function( points, precision, loop ) 8 | { 9 | 10 | precision = Math.max( .01, Math.min( 1, precision ||.1 ) ); 11 | loop = loop || false; 12 | 13 | var i = 0, 14 | t = 0, 15 | p0, 16 | p1, 17 | p2, 18 | p3; 19 | 20 | var tmp = []; 21 | 22 | for (i = 0; i < points.length - ( loop ? 0 : 1 ); i++) 23 | { 24 | p0 = points [(i -1 + points.length) % points.length]; 25 | p1 = points [i]; 26 | p2 = points [(i +1 + points.length) % points.length]; 27 | p3 = points [(i +2 + points.length) % points.length]; 28 | tmp.push( p1 ); 29 | 30 | for ( t = 0; t < 1; t+= precision ) 31 | { 32 | tmp.push( new Point( 0.5 * (( 2*p1.x) + 33 | t * (( -p0.x +p2.x) + 34 | t * ((2*p0.x -5*p1.x +4*p2.x -p3.x) + 35 | t * ( -p0.x +3 * p1.x -3 * p2.x +p3.x)))), 36 | 37 | 0.5 * (( 2*p1.y) + 38 | t * (( -p0.y +p2.y) + 39 | t * ((2*p0.y -5*p1.y +4*p2.y -p3.y) + 40 | t * ( -p0.y +3 * p1.y -3 * p2.y +p3.y)))) ) ); 41 | } 42 | } 43 | if( loop && points.length > 0 )tmp.push( points[ 0 ]); 44 | return tmp; 45 | 46 | }; 47 | 48 | return exports; 49 | 50 | }({}); -------------------------------------------------------------------------------- /revisions/9_extras/utils/convexhull.js: -------------------------------------------------------------------------------- 1 | var convexhull = function(exports) 2 | { 3 | exports.compute = function( points ) 4 | { 5 | 6 | if( points.length <= 3 ) return points; 7 | points.sort( function( a,b ){return a.x - b.x;} ); 8 | var angle = Math.PI / 2; 9 | var point = points[ 0 ]; 10 | var hull = []; 11 | var max = points.length * 2; 12 | while ( point != hull[ 0 ] && max > 0 ) 13 | { 14 | hull.push( point ); 15 | var bestAngle = Math.pow( 2, 53 ); 16 | var bestIndex = 0; 17 | for ( var i = 0; i < points.length; i++ ){ 18 | 19 | var testPoint = points[i]; 20 | if (testPoint == point)continue; 21 | 22 | var dx = testPoint.x - point.x; 23 | var dy = testPoint.y - point.y; 24 | var testAngle = Math.atan2(dy,dx) - angle; 25 | 26 | while (testAngle < 0) { 27 | testAngle += Math.PI * 2; 28 | } 29 | if ( testAngle < bestAngle ){ 30 | bestAngle = testAngle;bestIndex = i; 31 | } 32 | } 33 | point = points[bestIndex]; 34 | angle += bestAngle; 35 | max--; 36 | } 37 | return hull; 38 | 39 | }; 40 | 41 | return exports; 42 | 43 | }({}); -------------------------------------------------------------------------------- /revisions/9_extras/utils/metrics.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by nico on 22/10/2015. 3 | */ 4 | var metrics = function(exports) 5 | { 6 | /******************* 7 | * 8 | * stats 9 | * 10 | *******************/ 11 | 12 | exports.mean = function( values ) 13 | { 14 | var mean = 0; 15 | values.forEach( function( e, i, a ) 16 | { 17 | mean += e.value; 18 | } ); 19 | mean /= values.length; 20 | return mean; 21 | }; 22 | 23 | exports.variance = function( values ) 24 | { 25 | var result = 0; 26 | 27 | var mean_value = this.mean( values ); 28 | var count = values.length; 29 | 30 | values.forEach( function( e, i, a ) 31 | { 32 | result += Math.pow( ( e.value - mean_value ), 2 ); 33 | } ); 34 | return result / count; 35 | }; 36 | 37 | /** 38 | * méthode qui renvoie les bornes d'une clé sur l'objet data 39 | * @param data le set de données 40 | * @param key la clé dont on veut récupérer les minimums/maximum 41 | * @returns {*[]} un tableau contenant les bornes minimums/maximum de la clé 42 | */ 43 | exports.getBounds = function( data, key ) 44 | { 45 | var min = Math.pow( 2, 53 ); 46 | var max = -Math.pow( 2, 53 ); 47 | 48 | data.forEach(function(obj) { 49 | 50 | min = Math.min( min, obj[key] ); 51 | max = Math.max( max, obj[key] ); 52 | 53 | }); 54 | return [min, max]; 55 | }; 56 | 57 | /** 58 | * enlève les espaces de début et de fin de la chaîne de caractère 59 | */ 60 | exports.trim = function( string ) 61 | { 62 | return string.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 63 | }; 64 | 65 | /** 66 | * enlève les signes de ponctuation de la chaîne de caractère 67 | */ 68 | exports.removePunctuation = function( string ) 69 | { 70 | return string.replace(/[^\w\s]/gi, ''); 71 | }; 72 | 73 | return exports; 74 | 75 | }({}); -------------------------------------------------------------------------------- /revisions/9_extras/utils/paletteGenerator.js: -------------------------------------------------------------------------------- 1 | var paletteGenerator = (function(exports){ 2 | 3 | var RAD = ( Math.PI / 180 ); 4 | var DEG = ( 180 / Math.PI ); 5 | var GOLDEN_ANGLE = Math.PI * ( 3 - Math.sqrt( 5 ) ); 6 | 7 | exports.generate = function( count, steps ){ 8 | 9 | count = count || 10; 10 | 11 | var colors = []; 12 | var angle = ( Math.random() * Math.PI * 2 ); 13 | var delta = ( GOLDEN_ANGLE / ( Math.max( 1, steps || 25 ) ) ); 14 | var sat = "50%"; 15 | var lum = "50%"; 16 | 17 | while( count-- ) 18 | { 19 | angle += delta; 20 | var color = 'hsl( ' + angle * DEG +', '+ sat +', '+ lum +")"; 21 | colors.push( color ); 22 | } 23 | return colors; 24 | }; 25 | 26 | return exports; 27 | })({}); -------------------------------------------------------------------------------- /revisions/agent_iteration_feedback/0_random_walk.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 0_random_walk 6 | 7 | 8 | 9 | 10 | 11 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /revisions/agent_iteration_feedback/1_trail.js: -------------------------------------------------------------------------------- 1 | //radians 2 | var RAD = Math.PI / 180; 3 | function reset() { 4 | 5 | //stores some vairables 6 | points = []; 7 | angles = []; 8 | speeds = []; 9 | for (var i = 0; i < 100; i++) { 10 | //random point position on the screen 11 | points.push(new Point( Math.random() * w, Math.random() * h ) ); 12 | //starting angle 13 | angles.push(Math.random() * Math.PI * 2); 14 | //rotation speed 15 | speeds.push(5 + Math.random() * 25); 16 | } 17 | iterations = 0; 18 | } 19 | 20 | function update(){ 21 | 22 | requestAnimationFrame(update); 23 | 24 | ctx.clearRect(0,0,w/3,h); 25 | 26 | ctx.fillStyle = 'rgba(255,255,255,.05)'; 27 | ctx.fillRect(w/3,0,w/3,h); 28 | ctx.fillStyle = '#000'; 29 | 30 | ctx.lineWidth = 3; 31 | 32 | for( var i = 0; i < points.length; i++ ){ 33 | 34 | //draw a dot at the current position 35 | var p = points[i]; 36 | 37 | //bounds 38 | if( p.x < -5 )p.x += w + 5; 39 | if( p.y < -5 )p.y += h + 5; 40 | if( p.x > w + 5 )p.x = -5; 41 | if( p.y > h + 5 )p.y = -5; 42 | 43 | //move to current position 44 | ctx.beginPath(); 45 | ctx.moveTo( p.x, p.y ); 46 | 47 | //updates angle 48 | angles[i] += ( Math.random() - .5 ) * RAD * speeds[i]; 49 | 50 | //updates poistion width the angle 51 | p.x += Math.cos( angles[i] ) * 5; 52 | p.y += Math.sin( angles[i] ) * 5; 53 | 54 | ctx.lineTo( p.x, p.y ); 55 | ctx.stroke(); 56 | // circle( p.x, p.y, 2 ); 57 | 58 | } 59 | } 60 | 61 | var canvas, w, h, ctx, points, angles, speeds, iterations; 62 | window.onload = function(){ 63 | canvas = document.createElement( 'canvas' ); 64 | document.body.appendChild( canvas ); 65 | w = canvas.width = window.innerWidth ; 66 | h = canvas.height = window.innerHeight ; 67 | ctx = canvas.getContext("2d"); 68 | window.addEventListener("mousedown", reset, false); 69 | reset(); 70 | update(); 71 | 72 | }; 73 | 74 | var Point = function (x, y) { 75 | this.x = x || 0; 76 | this.y = y || 0; 77 | return this; 78 | }; 79 | 80 | function circle( x, y, r ){ 81 | ctx.beginPath(); 82 | ctx.arc( x,y,r, 0, Math.PI*2); 83 | ctx.fill(); 84 | } -------------------------------------------------------------------------------- /revisions/agent_iteration_feedback/1_trails.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | iteration 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/agent_iteration_feedback/2_history.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | history 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /revisions/agent_iteration_feedback/3_reacher.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | attraction_repulsion 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /revisions/agent_iteration_feedback/3_reacher.js: -------------------------------------------------------------------------------- 1 | function draw(){ 2 | 3 | requestAnimationFrame(draw); 4 | var damping = .01; 5 | var times = 10; 6 | while( times-- ){ 7 | 8 | var tmp = []; 9 | points.forEach(function( p ){ 10 | 11 | p.prev.copy( p ); 12 | 13 | p.x += ( p.next.x - p.x ) * damping; 14 | p.y += ( p.next.y - p.y ) * damping; 15 | 16 | ctx.strokeStyle = ctx.fillStyle = p.color; 17 | 18 | if( p.distance( p.next ) > 5 ){ 19 | 20 | // ctx.globalAlpha = p.alpha; 21 | ctx.beginPath(); 22 | 23 | for( var i = 0; i < 15; i++ ){ 24 | 25 | var v = p.pointAt( Math.random(), p.next ); 26 | ctx.moveTo(v.x, v.y); 27 | ctx.lineTo(v.x+1, v.y); 28 | 29 | } 30 | ctx.stroke(); 31 | tmp.push( p ); 32 | 33 | }else{ 34 | 35 | ctx.globalAlpha = 1; 36 | G.disc( p, 2 ); 37 | 38 | } 39 | 40 | }); 41 | 42 | points = tmp; 43 | points.forEach( function( p, i ){ 44 | p.next = points[ ( i + 1 ) % points.length ]; 45 | }); 46 | } 47 | 48 | 49 | } 50 | 51 | 52 | var points = []; 53 | var iteration = 0; 54 | function reset(){ 55 | 56 | ctx.restore(); 57 | ctx.clearRect( 0,0,w,h ); 58 | ctx.save(); 59 | ctx.translate(w/2,h/2); 60 | 61 | iteration = 0; 62 | var total = 100; 63 | var radius = h/3; 64 | points = []; 65 | for ( var i = 0; i < total; i++ ){ 66 | 67 | var p = Point.fromAngleDistance( i/total * PI2, radius * ( 1 + Math.random() - .5 ) ); 68 | var p = new Point( ( Math.random() - .5 ) * h * 2, ( Math.random() - .5 ) * h * 2 ); 69 | // var p = new Point( ( i/total) * w - w/2, ( Math.random() - .5 ) * h ); 70 | var v = ~~( Math.random() * 0xFF ); 71 | p.color = "rgb("+v+","+v+","+v+")"; 72 | p.next = null; 73 | p.prev = new Point(); 74 | points.push( p ); 75 | } 76 | 77 | //assigns target 78 | points.forEach( function( p, i ){ 79 | p.next = points[ ( i + 1 ) % points.length ]; 80 | }); 81 | draw(); 82 | 83 | } 84 | canvas.addEventListener('mousedown', reset, false); 85 | ctx.save(); 86 | var G = new Graphics(ctx); 87 | reset(); 88 | draw(); -------------------------------------------------------------------------------- /revisions/agent_iteration_feedback/catmullrom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by nico on 23/11/13. 3 | */ 4 | var catmullrom = function(exports) 5 | { 6 | 7 | exports.compute = function( points, precision, loop ) 8 | { 9 | 10 | precision = Math.max( .01, Math.min( 1, precision ||.1 ) ); 11 | loop = loop || false; 12 | 13 | var i = 0, 14 | t = 0, 15 | p0, 16 | p1, 17 | p2, 18 | p3; 19 | 20 | var tmp = []; 21 | 22 | for (i = 0; i < points.length - ( loop ? 0 : 1 ); i++) 23 | { 24 | p0 = points [(i -1 + points.length) % points.length]; 25 | p1 = points [i]; 26 | p2 = points [(i +1 + points.length) % points.length]; 27 | p3 = points [(i +2 + points.length) % points.length]; 28 | tmp.push( p1 ); 29 | 30 | for ( t = 0; t < 1; t+= precision ) 31 | { 32 | tmp.push( new Point( 0.5 * (( 2*p1.x) + 33 | t * (( -p0.x +p2.x) + 34 | t * ((2*p0.x -5*p1.x +4*p2.x -p3.x) + 35 | t * ( -p0.x +3 * p1.x -3 * p2.x +p3.x)))), 36 | 37 | 0.5 * (( 2*p1.y) + 38 | t * (( -p0.y +p2.y) + 39 | t * ((2*p0.y -5*p1.y +4*p2.y -p3.y) + 40 | t * ( -p0.y +3 * p1.y -3 * p2.y +p3.y)))) ) ); 41 | } 42 | } 43 | if( loop && points.length > 0 )tmp.push( points[ 0 ]); 44 | return tmp; 45 | 46 | }; 47 | 48 | return exports; 49 | 50 | }({}); -------------------------------------------------------------------------------- /revisions/appendix/_color_ - CSS _ MDN_files/ae5b9bd466dae65a6be4e9ff223d2b2a: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/_color_ - CSS _ MDN_files/ae5b9bd466dae65a6be4e9ff223d2b2a -------------------------------------------------------------------------------- /revisions/appendix/_color_ - CSS _ MDN_files/d0d90148e08e3b64ccf75c46f31442c5: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/_color_ - CSS _ MDN_files/d0d90148e08e3b64ccf75c46f31442c5 -------------------------------------------------------------------------------- /revisions/appendix/_color_ - CSS _ MDN_files/f383cd79ac30207f746361c2b124db98: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/_color_ - CSS _ MDN_files/f383cd79ac30207f746361c2b124db98 -------------------------------------------------------------------------------- /revisions/appendix/_color_ - CSS _ MDN_files/f71f6ff4b1cb760a924097f5f7e7d423: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/_color_ - CSS _ MDN_files/f71f6ff4b1cb760a924097f5f7e7d423 -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/e_rotate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/e_rotate.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/e_scale.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/e_scale.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/e_tile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/e_tile.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/e_translatetocenter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/e_translatetocenter.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/e_translatetorot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/e_translatetorot.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/feed.png -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_column_elements.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_column_elements.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_column_multiply.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_column_multiply.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_element_meanings.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_element_meanings.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_elements.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_elements.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_elements_base.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_elements_base.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_examples.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_examples.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_identity.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_identity.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_inverse_calc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_inverse_calc.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_multiply.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_multiply.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_multiply_calc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_multiply_calc.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_multiply_outline.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_multiply_outline.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_multiply_reduced.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_multiply_reduced.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_rotate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_rotate.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_rotate_30.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_rotate_30.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_row.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_row.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_row_calc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_row_calc.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_row_multiply.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_row_multiply.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_row_multiply_outline.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_row_multiply_outline.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_row_reduced.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_row_reduced.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_scale.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_scale.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_scale_skew.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_scale_skew.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_scale_skew_calc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_scale_skew_calc.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_scale_skew_result.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_scale_skew_result.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_skew.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_skew.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_skew_scale.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_skew_scale.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_skew_scale_calc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_skew_scale_calc.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_skew_scale_result.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_skew_scale_result.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/m_skew_translate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/m_skew_translate.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/pin.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/pin.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/skew_center.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/skew_center.swf -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/skew_shift.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/skew_shift.swf -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_affine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_affine.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_double_width.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_double_width.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_info_panel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_info_panel.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_mc_transforms.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_mc_transforms.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_rotate45_scale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_rotate45_scale.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_rotate_point.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_rotate_point.gif -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_single_skew.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_single_skew.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_transform_center.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_transform_center.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_x_scale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_x_scale.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_x_skew.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_x_skew.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_x_skew_scale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_x_skew_scale.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_x_translate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_x_translate.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_x_y_skew.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_x_y_skew.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_y_scale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_y_scale.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_y_skew.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_y_skew.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/t_y_translate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/t_y_translate.jpg -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/transform_grabber.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/transform_grabber.swf -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/transform_methods.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/transform_methods.swf -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/transform_steppers.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/revisions/appendix/flash_transform_matrix_files/transform_steppers.swf -------------------------------------------------------------------------------- /revisions/appendix/flash_transform_matrix_files/tutorial.css: -------------------------------------------------------------------------------- 1 | .tutorial { 2 | margin-right:50px; 3 | } 4 | object, embed { 5 | margin:0; 6 | padding:0; 7 | border-width:0; 8 | } 9 | .tutorial .flash { 10 | border:1px solid #822; 11 | padding:1em; 12 | } 13 | 14 | .tutorial h3 { 15 | color:#015; 16 | font-size:12pt; 17 | margin-top:2em; 18 | border-bottom:1px solid #DDD; 19 | } 20 | 21 | .tutorial .index { 22 | margin:.5em; 23 | padding:1em; 24 | border:1px solid #666; 25 | } 26 | .tutorial .index h4 { 27 | margin:0; 28 | border-bottom:1px solid #AAA; 29 | } 30 | .tutorial .term { 31 | font-style: italic; 32 | color: #CC3300; 33 | } 34 | .tutorial p.pagenumbers { 35 | font-size:.8em; 36 | } 37 | 38 | .tutorial p.image { 39 | width:675px; 40 | text-align:center; 41 | font-size:.8em; 42 | color:#333; 43 | margin-top:2em; 44 | margin-bottom:2em; 45 | } 46 | .tutorial p.image img { 47 | margin:1em; 48 | } 49 | .tutorial img.inline-left { 50 | float:left; 51 | margin: 0 1em .5em 0; 52 | } 53 | 54 | .tutorial div.note { 55 | width:650px; 56 | margin:2em 13px; 57 | border:1px solid #999; 58 | } 59 | .tutorial div.note h4, .tutorial div.note p { 60 | margin:0; 61 | padding:.5em; 62 | } 63 | .tutorial div.note h4 { 64 | font-size:1em; 65 | background:#FFE url(../images/icons/icon_notepin.gif) no-repeat 2px 4px; 66 | border-bottom:1px solid #999; 67 | padding-left:22px; 68 | } 69 | .tutorial div.note pre { 70 | width:600px; 71 | } 72 | .tutorial pre i { 73 | color:#999; 74 | } 75 | .tutorial pre.style { 76 | background-color: #F2E6EF; 77 | border: 1px solid #D2A4C1; 78 | } 79 | .tutorial pre.html { 80 | background-color: #E6EFF2; 81 | border: 1px solid #A4C1D2; 82 | } 83 | .tutorial .footnote { 84 | font-size:.8em; 85 | color:#666; 86 | } 87 | .tutorial .warning, .tutorial .alert { 88 | color:red; 89 | } 90 | 91 | table.table { 92 | border-collapse:collapse; 93 | } 94 | table.table th, table.table td { 95 | border:1px solid black; 96 | padding:3px; 97 | } 98 | table.table thead th { 99 | color:#333; 100 | background-color:#EEE; 101 | } 102 | table.table th { 103 | color:white; 104 | background-color:#666; 105 | } 106 | 107 | .new-content1 { 108 | padding-left:1em; 109 | border-left:3px solid #0A0; 110 | } 111 | .new-content2 { 112 | padding-left:1em; 113 | border-left:3px solid #8FEA8F; 114 | } 115 | .new-content3 { 116 | padding-left:1em; 117 | border-left:3px solid #D4FDD4; 118 | } 119 | .hidden { 120 | display:none; 121 | } -------------------------------------------------------------------------------- /revisions/attraction_repulsion/0_principle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | attraction_repulsion 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /revisions/attraction_repulsion/0_principle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @param p needs a 'r' radius parameter 4 | * @param others other points need a 'r' radius parameter 5 | * @param direction determines if we attract or repel the other points 6 | * @param damping how much force is applied 7 | * @returns {Point} force totale à appliquer sur le point 8 | */ 9 | 10 | function attractRepel( p, others, direction, damping ) { 11 | 12 | var acc = new Point(); 13 | 14 | others.forEach(function (o) { 15 | 16 | if (p === o) return; 17 | var d = p.distance(o); 18 | var minDist = p.r + o.r; 19 | var vector = p.direction(o).multiplyScalar( .5 ); 20 | if (d < minDist) { 21 | 22 | //attraction or repulsion vector 23 | vector.multiplyScalar( direction ); 24 | vector.multiplyScalar( damping ); 25 | 26 | acc.add(vector); 27 | 28 | o.sub(vector) 29 | } 30 | }); 31 | 32 | damping = damping || .1; 33 | 34 | acc.multiplyScalar( damping ); 35 | 36 | return acc; 37 | } 38 | 39 | 40 | function draw(){ 41 | requestAnimationFrame(draw); 42 | ctx.clearRect(0,0,w,h); 43 | 44 | ctx.globalAlpha = .2; 45 | G.circle( mouse, mouse.r ); 46 | 47 | ctx.globalAlpha = .2; 48 | points.forEach(function( p ){ 49 | G.disc( p, p.r ); 50 | G.disc( p, 2 ); 51 | }); 52 | 53 | attractRepel( mouse, points, direction, 5 ); 54 | 55 | return; 56 | 57 | points.forEach(function( p ){ 58 | 59 | attractRepel( p, points, direction, 2.5 ); 60 | 61 | } ); 62 | 63 | 64 | } 65 | 66 | var mouse = new Point(w/2, h/2); 67 | //repel radius 68 | mouse.r = 150; 69 | function updateMouse( e ){ 70 | mouse.x = e.clientX; 71 | mouse.y = e.clientY; 72 | } 73 | canvas.addEventListener('mousemove', updateMouse, false); 74 | var direction = -1; 75 | function changeDirection(){ 76 | direction *= -1; 77 | } 78 | canvas.addEventListener('mousedown', changeDirection, false); 79 | 80 | var points = []; 81 | for( var i = 0; i < 250; i++ ){ 82 | var p = new Point( Math.random() * w, Math.random() * h ); 83 | //repel radius 84 | p.r = 25; 85 | points.push( p ); 86 | } 87 | 88 | var G = new Graphics(ctx); 89 | draw(); -------------------------------------------------------------------------------- /revisions/attraction_repulsion/1_hexagons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | attraction_repulsion 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /revisions/attraction_repulsion/1_hexagons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @param p needs a 'r' radius parameter 4 | * @param others other points need a 'r' radius parameter 5 | * @param direction determines if we attract or repel the other points 6 | * @param damping how much force is applied 7 | * @returns {Point} force totale à appliquer sur le point 8 | */ 9 | 10 | function attractRepel( p, others, direction, damping ) { 11 | 12 | direction = direction || 1; 13 | 14 | damping = damping || .1; 15 | 16 | others.forEach(function (o) { 17 | 18 | if (p === o) return; 19 | 20 | var d = p.distance(o); 21 | var minDist = p.r + o.r; 22 | var vector = p.direction(o).multiplyScalar( .5 ); 23 | if ( d < minDist) { 24 | 25 | //attraction or repulsion 26 | vector.multiplyScalar( direction ); 27 | vector.multiplyScalar( damping ); 28 | p.acc.add(vector); 29 | o.acc.sub(vector) 30 | 31 | } 32 | }); 33 | } 34 | 35 | function draw(){ 36 | 37 | requestAnimationFrame(draw); 38 | ctx.clearRect(0,0,w,h); 39 | 40 | ctx.globalAlpha = 1; 41 | points.forEach(function( p ){ 42 | p.acc.set( 0,0,0 ); 43 | }); 44 | 45 | var t = Math.sin( Date.now() * 0.001 ) * .5 + .5; 46 | var damping = .15; 47 | points.forEach(function( p ){ 48 | 49 | p.r = 10 + t * 50; 50 | attractRepel( p, points, 1, damping ); 51 | attractRepel( p, points, -1, damping * 10 ); 52 | 53 | } ); 54 | points.forEach(function( p ){ 55 | 56 | p.add( p.acc ); 57 | 58 | ctx.globalAlpha = 1; 59 | G.disc( p, 2 ); 60 | 61 | ctx.globalAlpha = .2; 62 | G.disc( p, p.r ); 63 | 64 | }); 65 | 66 | } 67 | 68 | var points = []; 69 | function reset(){ 70 | 71 | var total = 300; 72 | points = []; 73 | for ( var i = 0; i < total; i++ ){ 74 | 75 | var p = new Point( Math.random() * w, Math.random() * h ); 76 | p.r = 10; 77 | p.acc = new Point(); 78 | points.push( p ); 79 | } 80 | } 81 | canvas.addEventListener('mousedown', reset, false); 82 | 83 | var G = new Graphics(ctx); 84 | reset(); 85 | draw(); 86 | draw(); -------------------------------------------------------------------------------- /revisions/attraction_repulsion/2_happy_place.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | attraction_repulsion 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /revisions/base.js: -------------------------------------------------------------------------------- 1 | 2 | //déclaration de 2 variables w et h pour stocker la taille de l'écran 3 | var w = window.innerWidth; 4 | var h = window.innerHeight; 5 | 6 | //méthode de création d'un contexte graphique 7 | function getContext(w,h) { 8 | 9 | var canvas = document.createElement( "canvas" ); 10 | canvas.width = w; 11 | canvas.height = h; 12 | return canvas.getContext( "2d" ); 13 | } 14 | 15 | //creation du contexte 2D 16 | var ctx = getContext( w, h ); 17 | var canvas = ctx.canvas; 18 | document.body.appendChild( canvas ); 19 | 20 | //remplis le fond en blanc 21 | ctx .fillStyle = "#FFF"; 22 | ctx.fillRect( 0,0,w,h ); 23 | ctx.fillStyle = "#000"; 24 | 25 | //étend le contexte sur toute la surface de la fenêtre et assigne les valeurs de w et h 26 | // function onResize(){ 27 | // 28 | // w = window.innerWidth; 29 | // h = window.innerHeight; 30 | // ctx.canvas.width = w; 31 | // ctx.canvas.height = h; 32 | // } 33 | // window.addEventListener( "resize", onResize, false ); 34 | 35 | 36 | 37 | //méthodes utiles 38 | function lerp ( t, a, b ){ return a * ( 1 - t ) + t * b; } 39 | function norm( t, a, b ){return ( t - a ) / ( b - a );} 40 | function map( t, a0, b0, a1, b1 ){ return lerp( norm( t, a0, b0 ), a1, b1 );} 41 | 42 | //constantes 43 | var PI = Math.PI; 44 | var PI2 = PI * 2; 45 | var RAD = PI / 180; 46 | 47 | //save file to disk 48 | var dl = document.createElement( 'a' ); 49 | function save( ctx, id, cb ){ 50 | 51 | ctx.canvas.toBlob(function(blob) { 52 | 53 | dl.href = URL.createObjectURL(blob); 54 | dl.download = ( id || Date.now() ) + ".png"; 55 | dl.click(); 56 | 57 | id++; 58 | if( cb )setTimeout( cb, 1, id ); 59 | }); 60 | 61 | } -------------------------------------------------------------------------------- /revisions/cycloids/cardioid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | epicycloid 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /revisions/cycloids/cardioid.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | function update() { 5 | 6 | requestAnimationFrame( update ); 7 | 8 | //centers the drawing context around 0,0 9 | ctx.restore(); 10 | ctx.clearRect(0,0,w,h); 11 | ctx.save(); 12 | ctx.translate( w/2, h/2 ); 13 | ctx.strokeStyle = "#000"; 14 | 15 | //principle: trace the rotation of a circle rotating around another circle 16 | var circ = new Point(0,0); 17 | circ.radius = h/6; 18 | circle(circ.x, circ.y, circ.radius); 19 | 20 | //rotation speed around the big circle 21 | var time = Date.now() * 0.001; 22 | 23 | //position around the big circle 24 | var cx = circ.x + Math.cos( time ) * ( circ.radius * 2 ); 25 | var cy = circ.y + Math.sin( time ) * ( circ.radius * 2 ); 26 | circle( cx, cy, circ.radius); 27 | 28 | 29 | var c = 2 * Math.cos( time ) - Math.cos( 2 * time ); 30 | var s = 2 * Math.sin( time ) - Math.sin( 2 * time ); 31 | var px = ( c * circ.radius ); 32 | var py = ( s * circ.radius ); 33 | circle( px, py, 3 ); 34 | 35 | //store the new position 36 | points.push( new Point( px, py ) ); 37 | 38 | //render the curve in red 39 | ctx.strokeStyle = "#F00"; 40 | ctx.beginPath(); 41 | points.forEach( function( p ){ 42 | ctx.lineTo( p.x, p.y ); 43 | }); 44 | ctx.stroke(); 45 | if( points.length > 360 )points.shift(); 46 | 47 | } 48 | 49 | //creates a 2D context, an array to store points 50 | var canvas, w, h, ctx, points = []; 51 | canvas = document.createElement( 'canvas' ); 52 | document.body.appendChild( canvas ); 53 | w = canvas.width = window.innerWidth ; 54 | h = canvas.height = window.innerHeight ; 55 | ctx = canvas.getContext("2d"); 56 | update(); 57 | 58 | function circle( x,y,r ){ 59 | ctx.beginPath(); 60 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 61 | ctx.stroke(); 62 | } 63 | -------------------------------------------------------------------------------- /revisions/cycloids/cycloid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | epicycloid 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/cycloids/lissajous.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | guilloché 6 | 7 | 8 | 9 | 10 | 68 | 69 | -------------------------------------------------------------------------------- /revisions/cycloids/nestedcycloid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nestedcycloid 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /revisions/differential_growth/0_principle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | differential growth principple 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /revisions/differential_growth/0_principle.js: -------------------------------------------------------------------------------- 1 | 2 | var G = new Graphics(ctx); 3 | var p0 = new Point( w/2 , h/2+30 ); 4 | var p1 = new Point( w/2 -30 , h/2-30 ); 5 | var p2 = new Point( w/2 +30 , h/2-30 ); 6 | 7 | var poly = [p0, p1, p2]; 8 | 9 | //adds a radius to all points 10 | var radius = 30; 11 | poly.forEach(function(p){ 12 | p.r = radius; 13 | p.acc = new Point(); 14 | }); 15 | G.polyline( poly, true ); 16 | 17 | 18 | function update(){ 19 | 20 | // ctx.clearRect(0,0,w,h); 21 | ctx.globalAlpha = .1; 22 | 23 | var tmp = []; 24 | for( var i = 0; i < poly.length; i++ ){ 25 | 26 | var current = poly[ i ]; 27 | 28 | var next = poly[ ( i + 1 ) % poly.length ]; 29 | 30 | tmp.push( current ); 31 | 32 | if( current.distance( next ) > radius ){ 33 | var midpoint = current.midpoint( next ); 34 | midpoint.r = radius; 35 | midpoint.acc = new Point(); 36 | tmp.push( midpoint ); 37 | } 38 | 39 | } 40 | poly = tmp; 41 | 42 | 43 | attractRepel( poly, poly ); 44 | G.polyline( poly, true ); 45 | 46 | if( poly.length > 1000 ){ 47 | // save( ctx, 'differential_growth'); 48 | return; 49 | } 50 | 51 | requestAnimationFrame(update); 52 | 53 | 54 | 55 | } 56 | update(); 57 | 58 | function attractRepel(a, b ) { 59 | 60 | var acc = 0; 61 | a.forEach(function (p){ 62 | p.acc.set(0,0,0); 63 | } ); 64 | 65 | a.forEach(function (p) { 66 | 67 | b.forEach(function (o) { 68 | 69 | if (p === o) return; 70 | 71 | 72 | var d = p.distance(o); 73 | var minDist = p.r + o.r; 74 | 75 | var dir = p.direction(o).multiplyScalar( .15 ); 76 | dir.z = 0; 77 | if (d < minDist) { 78 | p.acc.sub(dir); 79 | o.acc.add(dir); 80 | } 81 | }); 82 | 83 | }); 84 | a.forEach(function (p){p.add( p.acc );} ); 85 | return acc; 86 | } 87 | function disc( x,y,r ){ 88 | ctx.beginPath(); 89 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 90 | ctx.fill(); 91 | } 92 | -------------------------------------------------------------------------------- /revisions/distribution/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | grid distribution 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/distribution/grid.js: -------------------------------------------------------------------------------- 1 | function reset() { 2 | 3 | ctx.clearRect(0,0,w,h); 4 | 5 | //regular grid with 50px cells 6 | var cellSize = 50, i, j; 7 | 8 | //draws the grid 9 | ctx.globalAlpha = .25; 10 | ctx.beginPath(); 11 | for( i = 0; i <= w; i += cellSize ){ 12 | ctx.moveTo( i, 0 ); 13 | ctx.lineTo( i, h ); 14 | } 15 | for( j = 0; j <= h; j += cellSize ) { 16 | ctx.moveTo( 0, j ); 17 | ctx.lineTo( w, j ); 18 | } 19 | ctx.stroke(); 20 | 21 | ctx.globalAlpha = 1; 22 | for( i = 0; i <= w; i += cellSize ){ 23 | for( j = 0; j <= h; j += cellSize ){ 24 | 25 | //grid cell indices 26 | var cell_x = Math.round( i / cellSize ); 27 | var cell_y = Math.round( j / cellSize ); 28 | 29 | //grid 30 | circle( i, j, 1 ); 31 | 32 | //sub-grid 33 | if( ( cell_x >= 20 && cell_x <= 26 ) 34 | && ( cell_y >= 8 && cell_y <= 14 ) ){ 35 | circle( i, j, 5 ); 36 | } 37 | 38 | //frame 39 | //horizontal lines 40 | if( ( cell_x >= 16 && cell_x <= 30 ) 41 | && ( cell_y == 3 || cell_y == 12 ) ){ 42 | circle( i, j, 10 ); 43 | } 44 | 45 | //verical lines 46 | if( ( cell_x == 16 || cell_x == 30 ) 47 | && ( cell_y >= 3 && cell_y <= 12 ) ){ 48 | circle( i, j, 10 ); 49 | } 50 | } 51 | } 52 | } 53 | 54 | //creates a 2D context 55 | var canvas, w, h, ctx; 56 | window.onload = function(){ 57 | canvas = document.createElement( 'canvas' ); 58 | document.body.appendChild( canvas ); 59 | w = canvas.width = window.innerWidth ; 60 | h = canvas.height = window.innerHeight ; 61 | ctx = canvas.getContext("2d"); 62 | reset(); 63 | }; 64 | //draw a circle on the canvas at x/y with radius r 65 | function circle( x,y,r ){ 66 | ctx.beginPath(); 67 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 68 | ctx.stroke(); 69 | } -------------------------------------------------------------------------------- /revisions/distribution/hexagonal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | hexagonal distribution 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /revisions/distribution/hexagonal.js: -------------------------------------------------------------------------------- 1 | function draw(){ 2 | 3 | requestAnimationFrame(draw); 4 | ctx.clearRect(0,0,w,h); 5 | 6 | //measures of an equalateral triangle 7 | var sides = 6; 8 | var L = 2 * Math.sin( Math.PI / sides ); //side length 9 | var A = L / ( 2 * Math.tan( Math.PI / sides ) ); //apothem 10 | var H = ( 1 + A ); //radius + apothem 11 | 12 | ctx.globalAlpha = .5; 13 | 14 | var radius = 100; 15 | var countX = Math.round( w / ( radius*2 ) ) + 2; 16 | var countY = Math.round( h / ( radius*2 ) ) + 2; 17 | 18 | for( var i = 0; i < countX; i++ ){ 19 | 20 | for( var j = 0; j < countY; j++ ){ 21 | 22 | var x = ( i + ( j%2 === 1 ? .5 : 0 ) ) * radius * 2 * A; 23 | var y = j * ( radius * ( 1 + L * .5 ) ); 24 | 25 | G.disc( x,y, 2 ); 26 | 27 | drawHexagon( x, y, radius ); 28 | 29 | } 30 | } 31 | } 32 | function drawHexagon( x,y, radius ){ 33 | 34 | var step = PI / 3; // 60° 35 | var start = step / 2; // 30° 36 | 37 | ctx.beginPath(); 38 | for( var k = 0; k < 6; k++ ){ 39 | 40 | var p = Point.fromAngleDistance( start + k * step, radius );// cos/sin( angle ) * radius 41 | p.x += x; 42 | p.y += y; 43 | ctx.lineTo(p.x, p.y); 44 | 45 | } 46 | ctx.closePath(); 47 | ctx.stroke(); 48 | 49 | } 50 | 51 | var G = new Graphics(ctx); 52 | draw(); -------------------------------------------------------------------------------- /revisions/distribution/poisson.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | hexagonal distribution 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /revisions/distribution/polar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | polar distribution 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/distribution/polar.js: -------------------------------------------------------------------------------- 1 | function reset() { 2 | 3 | ctx.restore(); 4 | ctx.clearRect(0,0,w,h); 5 | ctx.save(); 6 | ctx.translate( w/2, h/2 ); 7 | 8 | //points count 9 | var count = 24; 10 | 11 | //angle step ( angle between 2 points on the circle ) 12 | var step = Math.PI * 2 / count; 13 | 14 | //circle radius 15 | var radius = h / 3; 16 | 17 | //circle distribution 18 | for( var angle = 0; angle < Math.PI * 2; angle += step ){ 19 | 20 | //computes the X / Y position 21 | var x = Math.cos( angle ) * radius; 22 | var y = Math.sin( angle ) * radius; 23 | 24 | //draw this point 25 | circle( x, y, 10 ); 26 | 27 | } 28 | 29 | //radial distribution 30 | var radialSegments = 15; 31 | for( angle = 0; angle < Math.PI * 2; angle += step * 2 ){ 32 | for( var i = 0; i < radialSegments; i++ ){ 33 | var r = i * ( radius / radialSegments); 34 | x = Math.cos( angle ) * r; 35 | y = Math.sin( angle ) * r; 36 | circle( x, y, 3 ); 37 | } 38 | } 39 | 40 | //spiral distribution 41 | var turns = 3; 42 | for( angle = 0; angle < Math.PI * 2 * turns; angle += step / 4 ){ 43 | r = radius * ( angle / ( Math.PI * 2 * turns ) ); 44 | console.log( i / ( Math.PI * 2 * turns ) ); 45 | x = Math.cos( angle ) * r; 46 | y = Math.sin( angle ) * r; 47 | circle( x, y, 1 ); 48 | } 49 | } 50 | 51 | //creates a 2D context 52 | var canvas, w, h, ctx; 53 | window.onload = function(){ 54 | canvas = document.createElement( 'canvas' ); 55 | document.body.appendChild( canvas ); 56 | w = canvas.width = window.innerWidth ; 57 | h = canvas.height = window.innerHeight ; 58 | ctx = canvas.getContext("2d"); 59 | reset(); 60 | }; 61 | //draw a circle on the canvas at x/y with radius r 62 | function circle( x,y,r ){ 63 | ctx.beginPath(); 64 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 65 | ctx.stroke(); 66 | } 67 | -------------------------------------------------------------------------------- /revisions/distribution/scale.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | polar distribution 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/distribution/scale.js: -------------------------------------------------------------------------------- 1 | function reset() { 2 | 3 | ctx.translate( w/2, h/2 ); 4 | 5 | //points count 6 | var count = 5; 7 | 8 | //angle step ( angle between 2 points on the circle ) 9 | var step = Math.PI * 2 / count; 10 | 11 | //5 points distributed around the center gives a regular polygon (pentagon) 12 | var polygon = []; 13 | for( var angle = 0; angle < Math.PI * 2; angle += step ){ 14 | 15 | //computes the X / Y position from the angle 16 | //the - Math.PI/2 is there to make the polygon point up 17 | 18 | var x = Math.cos( angle - Math.PI / 2 ); 19 | var y = Math.sin( angle - Math.PI / 2 ); 20 | 21 | //store the position 22 | polygon.push([ x, y ]); 23 | 24 | } 25 | 26 | //we can draw this polygon but it will be very tiny 27 | ctx.beginPath(); 28 | for( i = 0; i < count; i++ ){ 29 | ctx.lineTo( polygon[i][0], polygon[i][1] ); 30 | } 31 | ctx.closePath(); 32 | ctx.stroke(); 33 | 34 | // we will gradually upscale the polygon's coordinates 35 | // to draw a bigger and bigger polygon 36 | 37 | var maxScale = h/3; 38 | for( var scale = 1; scale < maxScale; scale += 10 ){ 39 | 40 | 41 | ctx.beginPath(); 42 | for( i = 0; i < count; i++ ){ 43 | ctx.lineTo( polygon[i][0] * scale, polygon[i][1] * scale ); 44 | } 45 | ctx.closePath(); 46 | ctx.stroke(); 47 | 48 | //we can also index the alpha value on the scale 49 | var alpha = scale/maxScale; 50 | ctx.globalAlpha = alpha; 51 | 52 | } 53 | 54 | } 55 | 56 | //creates a 2D context 57 | var canvas, w, h, ctx; 58 | window.onload = function(){ 59 | canvas = document.createElement( 'canvas' ); 60 | document.body.appendChild( canvas ); 61 | w = canvas.width = window.innerWidth ; 62 | h = canvas.height = window.innerHeight ; 63 | ctx = canvas.getContext("2d"); 64 | reset(); 65 | }; 66 | -------------------------------------------------------------------------------- /revisions/distribution/triangular.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | triangular distribution 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/distribution/triangular.js: -------------------------------------------------------------------------------- 1 | function reset(){ 2 | 3 | //measures of an equalateral triangle 4 | var sides = 3; 5 | var L = 2 * Math.sin( Math.PI / sides ); //side length 6 | var A = L / ( 2 * Math.tan( Math.PI / sides ) ); //apothem 7 | var H = ( 1 + A ); //radius + apothem 8 | var size = 50; 9 | L *= size; 10 | H *= size; 11 | 12 | var mx = 2 * Math.ceil( w / L ); 13 | var my = Math.ceil( h / H ); 14 | 15 | for( var i = 0; i < w * 1.2; i+= mx ){ 16 | 17 | for( var j = 0; j <= h; j+= my ) { 18 | 19 | 20 | //cell indices 21 | var cx = Math.round(i / mx); 22 | var cy = Math.round(j / my); 23 | 24 | //coordinates 25 | var x = ( cx ) * L / 2; 26 | var y = ( cy ) * H; 27 | 28 | //triangular pattern 29 | var mody = cy % 2; 30 | if(( cx % 2 == 1 && cy % 2 == 0 ) 31 | || ( cx % 2 == 0 && cy % 2 == 1 )){ 32 | circle(x, y, 5); 33 | } else { 34 | circle(x, y, 1); 35 | } 36 | 37 | //hexagonal pattern 38 | var modx = cx % 6; 39 | if(( mody == 0 && ( modx == 1 || modx == 3 ) ) 40 | || ( mody == 1 && ( modx == 0 || modx == 4 ) ) ){ 41 | circle( x, y, 10 ); 42 | } 43 | 44 | continue; 45 | 46 | ctx.globalAlpha = .05; 47 | ctx.strokeRect(x,y,L, H); 48 | ctx.globalAlpha = 1; 49 | 50 | } 51 | } 52 | } 53 | 54 | //creates a 2D context 55 | var canvas, w, h, ctx; 56 | window.onload = function(){ 57 | canvas = document.createElement( 'canvas' ); 58 | document.body.appendChild( canvas ); 59 | w = canvas.width = window.innerWidth ; 60 | h = canvas.height = window.innerHeight ; 61 | ctx = canvas.getContext("2d"); 62 | reset(); 63 | }; 64 | //draw a circle on the canvas at x/y with radius r 65 | function circle( x,y,r ){ 66 | ctx.beginPath(); 67 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 68 | ctx.stroke(); 69 | } -------------------------------------------------------------------------------- /revisions/easing/0_easing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 94 | 95 | -------------------------------------------------------------------------------- /revisions/easing/1_easing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 83 | 84 | -------------------------------------------------------------------------------- /revisions/easing/2_shaping.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 85 | 86 | -------------------------------------------------------------------------------- /revisions/easing/shaping.js: -------------------------------------------------------------------------------- 1 | var Shaping = {}; 2 | 3 | Shaping.square = function ( n ){ 4 | return Math.sin( n * PI2 ) > 0 ? 1 : .5; 5 | }; 6 | 7 | Shaping.sawtooth = function ( n ){ 8 | return ( n - Math.floor( n ) ); 9 | }; 10 | 11 | Shaping.triangle = function ( n ){ 12 | return ( .5 - Math.abs( n - Math.floor( n + .5 ) ) ); 13 | }; 14 | 15 | // Function from Iñigo Quiles 16 | // www.iquilezles.org/www/articles/functions/functions.htm 17 | 18 | Shaping.pcurve = function (x, a, b) { 19 | var k = Math.pow(a + b, a + b) / (Math.pow(a, a) * Math.pow(b, b)); 20 | return k * Math.pow(x, a) * Math.pow(1.0 - x, b); 21 | }; 22 | 23 | Shaping.impulse = function (k, x) { 24 | var h = k * x; 25 | return h * Math.exp(1.0 - h); 26 | }; 27 | 28 | Shaping.parabola = function (x, k) { 29 | return Math.pow(4.0 * x * (1.0 - x), k); 30 | }; 31 | 32 | Shaping.cubicPulse = function (c, w, x) { 33 | x = Math.abs(x - c); 34 | if (x > w) return 0.0; 35 | x /= w; 36 | return 1.0 - x * x * (3.0 - 2.0 * x); 37 | }; 38 | 39 | Shaping.gain = function (x, k) { 40 | var a = 0.5 * Math.pow(2.0 * ((x < 0.5) ? x : 1.0 - x), k); 41 | return (x < 0.5) ? a : 1.0 - a; 42 | }; 43 | 44 | Shaping.expStep = function (x, k, n) { 45 | return Math.exp(-k * Math.pow(x, n)); 46 | }; 47 | -------------------------------------------------------------------------------- /revisions/emergence/flocking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | emergence flocking 6 | 7 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /revisions/emergence/pseudo_rotation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | emergence pattern 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/emergence/pseudo_rotation.js: -------------------------------------------------------------------------------- 1 | function update() { 2 | 3 | requestAnimationFrame( update ); 4 | ctx.restore(); 5 | ctx.clearRect(0,0,w,h); 6 | ctx.save(); 7 | ctx.translate( w/2, h/2 ); 8 | 9 | var morph = Date.now() * 0.0005; 10 | var time = Date.now() * 0.001; 11 | 12 | //points count 13 | var total = 16; 14 | var count = Math.min( Math.max( 1, Math.round( ( .5 + Math.cos( morph ) ) * total ) ), total ); 15 | var step = Math.PI / total; 16 | 17 | //circle radius 18 | var radius = h / 3; 19 | ctx.globalAlpha = .25; 20 | circle( 0,0, radius ); 21 | 22 | //circle distribution 23 | for( var angle = 0; angle < count * step; angle += step ){ 24 | 25 | //computes the X / Y position 26 | //radius * ( Math.cos( angle + time )) creates the osccillation along the line 27 | var x = Math.cos( angle ) * radius * ( Math.cos( angle + time )); 28 | var y = Math.sin( angle ) * radius * ( Math.cos( angle + time )); 29 | 30 | //draw this point 31 | ctx.globalAlpha = 1; 32 | circle( x, y, 3 ); 33 | 34 | //draw the line 35 | ctx.globalAlpha = .25; 36 | line( Math.cos( angle ) * radius, Math.sin( angle ) * radius, 37 | Math.cos( angle ) * -radius, Math.sin( angle ) * -radius ); 38 | 39 | } 40 | } 41 | 42 | //creates a 2D context 43 | var canvas, w, h, ctx; 44 | 45 | window.onload = function(){ 46 | canvas = document.createElement( 'canvas' ); 47 | document.body.appendChild( canvas ); 48 | w = canvas.width = window.innerWidth ; 49 | h = canvas.height = window.innerHeight ; 50 | ctx = canvas.getContext("2d"); 51 | update(); 52 | }; 53 | 54 | function circle( x,y,r ){ 55 | ctx.beginPath(); 56 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 57 | ctx.stroke(); 58 | } 59 | function line( ax, ay, bx, by ){ 60 | ctx.beginPath(); 61 | ctx.moveTo( ax, ay ); 62 | ctx.lineTo( bx, by ); 63 | ctx.stroke(); 64 | } -------------------------------------------------------------------------------- /revisions/feedback/0_feedback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | feedback 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /revisions/feedback/0_feedback.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /revisions/field/0_principle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | field 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/field/0_principle.js: -------------------------------------------------------------------------------- 1 | 2 | var HPI = Math.PI / 2; 3 | function angle(a,b){ 4 | var dx = a[0] - b[0]; 5 | var dy = a[1] - b[1]; 6 | return Math.atan2( dy, dx ); 7 | } 8 | 9 | //method to draw an arrow 10 | function drawArrow( p0, p1, size ){ 11 | var a = angle( p0, p1 ); 12 | ctx.beginPath(); 13 | ctx.moveTo(p0[0], p0[1]); 14 | ctx.lineTo(p0[0] + Math.cos( a + HPI ) * size, p0[1] + Math.sin( a + HPI ) * size); 15 | ctx.lineTo(p1[0], p1[1]); 16 | ctx.lineTo(p0[0] + Math.cos( a - HPI ) * size, p0[1] + Math.sin( a - HPI ) * size); 17 | ctx.fill(); 18 | } 19 | //this is the value at a given X/Y location 20 | function getValue( x, y ){ 21 | return Math.cos( x ) * Math.sin( y ) + Date.now() * 0.001; 22 | } 23 | function update() { 24 | 25 | requestAnimationFrame(update); 26 | ctx.clearRect(0,0,w,h); 27 | 28 | //regular grid with 50px cells 29 | var cellSize = 50; 30 | var points = []; 31 | var values = []; 32 | 33 | //grid distribution 34 | for( var i = 0; i <= w; i += cellSize ){ 35 | for( var j = 0; j <= h; j += cellSize ){ 36 | points.push( [i,j] ); 37 | values.push( getValue( i, j ) ); 38 | } 39 | } 40 | //draws an arrow at each point (lattice) 41 | points.forEach( function( p, id ){ 42 | 43 | //direction 44 | var p1 = [ 45 | p[0] + Math.cos( values[id] ) * cellSize * .75, 46 | p[1] + Math.sin( values[id] ) * cellSize * .75 47 | ]; 48 | 49 | //draw arrow 50 | drawArrow( p, p1, cellSize * .2 ); 51 | 52 | }); 53 | 54 | } 55 | 56 | //creates a 2D context 57 | var canvas, w, h, ctx; 58 | window.onload = function(){ 59 | canvas = document.createElement( 'canvas' ); 60 | document.body.appendChild( canvas ); 61 | w = canvas.width = window.innerWidth ; 62 | h = canvas.height = window.innerHeight ; 63 | ctx = canvas.getContext("2d"); 64 | update(); 65 | }; 66 | -------------------------------------------------------------------------------- /revisions/field/1_agents.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | field 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /revisions/field/1_agents.js: -------------------------------------------------------------------------------- 1 | 2 | var HPI = Math.PI / 2; 3 | 4 | //method to draw an arrow 5 | function drawArrow( p0, p1, size ){ 6 | var a = getAngle( p0, p1 ); 7 | ctx.beginPath(); 8 | ctx.moveTo(p0.x, p0.y); 9 | ctx.lineTo(p0.x + Math.cos( a + HPI ) * size, p0.y + Math.sin( a + HPI ) * size); 10 | ctx.lineTo(p1.x, p1.y); 11 | ctx.lineTo(p0.x + Math.cos( a - HPI ) * size, p0.y + Math.sin( a - HPI ) * size); 12 | ctx.fill(); 13 | } 14 | //this is the value at a given X/Y location 15 | function getValue( x, y ){ 16 | return Math.cos( x ) * Math.sin( y ) + Date.now() * 0.0001; 17 | } 18 | 19 | function update() { 20 | 21 | requestAnimationFrame(update); 22 | ctx.clearRect(0,0,w,h); 23 | 24 | //draws an arrow at each point (lattice) 25 | ctx.globalAlpha = .2; 26 | cells.forEach( function( p, id ){ 27 | 28 | //direction 29 | var angle = getValue( p.x, p.y ); 30 | var p1 = new Point( 31 | p.x + Math.cos( angle ) * cellSize * .75, 32 | p.y + Math.sin( angle ) * cellSize * .75 33 | ); 34 | //draw arrow 35 | drawArrow( p, p1, cellSize * .2 ); 36 | 37 | }); 38 | 39 | //for each agent 40 | var margin = 20; 41 | ctx.globalAlpha = 1; 42 | agents.forEach( function( agent ){ 43 | 44 | //find in which cell the agent is 45 | var cell = new Point( ~~( ( agent.x ) / cellSize ) * cellSize, 46 | ~~( ( agent.y ) / cellSize ) * cellSize ); 47 | 48 | //evaluates the lattice's angle 49 | var angle = getValue( cell.x, cell.y ); 50 | 51 | agent.x += Math.cos( angle ) * agent.speed; 52 | agent.y += Math.sin( angle ) * agent.speed; 53 | 54 | //bounds 55 | if( agent.x < -margin )agent.x += w + margin; 56 | if( agent.y < -margin )agent.y += h + margin; 57 | if( agent.x > w + margin )agent.x = -margin; 58 | if( agent.y > h + margin )agent.y = -margin; 59 | 60 | 61 | G.disc( agent, 5 ); 62 | }) 63 | 64 | } 65 | var G = new Graphics(ctx); 66 | var total = 100; 67 | var agents = []; 68 | while( total-- ){ 69 | var agent = new Point( Math.random() * w, Math.random() * h ); 70 | agent.speed = 1 + Math.random() * 5; 71 | agents.push( agent ); 72 | } 73 | 74 | //regular grid with 50px cells 75 | var cellSize = 50; 76 | var cells = []; 77 | for( var i = 0; i <= w; i += cellSize ){ 78 | for( var j = 0; j <= h; j += cellSize ){ 79 | var cell = new Point(i,j); 80 | cell.angle = getValue( i, j ); 81 | cells.push( cell ); 82 | } 83 | } 84 | update(); 85 | -------------------------------------------------------------------------------- /revisions/l_system/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | l-system 6 | 7 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |

if you don't see anything
35 | drawn, reload this page

36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | 48 |
49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /revisions/l_system/main.js: -------------------------------------------------------------------------------- 1 | 2 | //creates a canvas 3 | var canvas = document.getElementById( 'canvas' ); 4 | // document.body.appendChild( canvas ); 5 | var w = canvas.width = window.innerWidth ; 6 | var h = canvas.height = window.innerHeight ; 7 | var ctx = canvas.getContext("2d"); 8 | 9 | //creates a system 10 | var system = new Lsystem(); 11 | // system.compute( 4 ); 12 | // system.render( ctx ); 13 | 14 | 15 | var params = document.getElementById( "params" ); 16 | params.addEventListener( "keyup", updateSettings ); 17 | params.addEventListener( "mouseup", updateSettings ); 18 | function updateSettings(){ 19 | 20 | 21 | system.length = document.getElementById( "length" ).value; 22 | system.angle = document.getElementById( "angle" ).value * ( Math.PI / 180 ); 23 | system.axiom = document.getElementById( "axiom" ).value; 24 | system.rule = document.getElementById( "rule" ).value; 25 | system.production = ""; 26 | 27 | ctx.clearRect( 0, 0, w,h ); 28 | 29 | var generations = document.getElementById( "generations" ).value; 30 | system.compute( generations ); 31 | system.render( ctx ); 32 | document.getElementById( "production" ).value = system.production; 33 | 34 | } 35 | 36 | window.addEventListener("message", receiveMessage, false); 37 | function receiveMessage(event){ 38 | if( event.data == "slide:start" ){ 39 | updateSettings(); 40 | } 41 | if( event.data == "slide:stop" ){ 42 | ctx.clearRect( 0, 0, w,h ); 43 | } 44 | } 45 | window.onload = function(){ 46 | updateSettings(); 47 | }; 48 | -------------------------------------------------------------------------------- /revisions/random/0_random.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | random vs pseudo random 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /revisions/random/0_random.js: -------------------------------------------------------------------------------- 1 | 2 | function reset() { 3 | 4 | ctx.clearRect(0,0,w,h); 5 | ctx.fillStyle = "#000"; 6 | 7 | var i, x, y; 8 | var count = 10000; 9 | 10 | var time = Date.now(); 11 | for ( i = 0; i < count; i++) { 12 | 13 | //normalize the i 14 | var t = i / count; 15 | 16 | //linear X value 17 | x = t * w; 18 | 19 | //start with a regular sinusoid 20 | var r = Math.sin( t * Math.PI * 2 ); 21 | 22 | //now to get a seemingly random value 23 | //augment the frequency. 24 | 25 | // r = Math.sin( t * time ); 26 | 27 | //some nice patterns emerge but they're very regular 28 | //we can shake it further by using the result as the seed for another sinusoid 29 | 30 | // r = Math.sin(Math.sin(t * time) * time); 31 | 32 | //better already but the values seem to 'stick' to the boundaries 33 | //we'd rather have uniformly distributed values 34 | 35 | // r = Math.abs(Math.sin(Math.sin(t * time) * time)); 36 | // r = ( Math.sqrt(1 - r) * 2 - 1 ); 37 | 38 | //plots it nicely centered 39 | y = h / 2 + r * h / 3; 40 | disc(x, y, 2); 41 | } 42 | 43 | return; 44 | //actual results from a Math.random() (ground truth) 45 | ctx.fillStyle = "#F00"; 46 | for ( i = 0; i < count; i++) { 47 | x = i / count * w; 48 | y = h/2 + ( Math.random() * 2 - 1 ) * h / 3; 49 | disc( x, y, 2 ); 50 | } 51 | 52 | } 53 | 54 | //creates a 2D context 55 | var canvas, w, h, ctx; 56 | canvas = document.createElement( 'canvas' ); 57 | document.body.appendChild( canvas ); 58 | w = canvas.width = window.innerWidth ; 59 | h = canvas.height = window.innerHeight ; 60 | ctx = canvas.getContext("2d"); 61 | var seed = 0; 62 | reset(); 63 | 64 | canvas.addEventListener( 'mousedown', reset ); 65 | 66 | function disc( x,y,r ){ 67 | ctx.beginPath(); 68 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 69 | ctx.fill(); 70 | } 71 | -------------------------------------------------------------------------------- /revisions/random/1_pseudorandom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | random vs pseudo random 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /revisions/random/1_pseudorandom.js: -------------------------------------------------------------------------------- 1 | 2 | function reset() { 3 | 4 | ctx.clearRect(0,0,w,h); 5 | var i, x, y, r = 2; 6 | var count = 1000; 7 | 8 | PRNG.setSeed( seed ); 9 | for ( i = 0; i < count; i++) { 10 | 11 | x = Math.random() * w / 2; 12 | y = Math.random() * h; 13 | disc(x, y, r); 14 | 15 | x = w / 2 + PRNG.random() * w / 2; 16 | y = PRNG.random() * h; 17 | disc(x, y, r); 18 | 19 | } 20 | 21 | PRNG.setSeed( seed ); 22 | r = 5; 23 | for ( i = 0; i < count; i++) { 24 | 25 | x = Math.random() * w / 2; 26 | y = Math.random() * h; 27 | circle(x, y, r); 28 | 29 | x = w / 2 + PRNG.random() * w / 2; 30 | y = PRNG.random() * h; 31 | circle(x, y, r); 32 | 33 | } 34 | 35 | seed++; 36 | 37 | ctx.beginPath(); 38 | ctx.moveTo(w/2, 0); 39 | ctx.lineTo(w/2, h); 40 | ctx.stroke(); 41 | } 42 | 43 | //creates a 2D context 44 | var canvas, w, h, ctx; 45 | canvas = document.createElement( 'canvas' ); 46 | document.body.appendChild( canvas ); 47 | w = canvas.width = window.innerWidth ; 48 | h = canvas.height = window.innerHeight ; 49 | ctx = canvas.getContext("2d"); 50 | var seed = 0; 51 | reset(); 52 | 53 | canvas.addEventListener( 'mousedown', reset ); 54 | 55 | function circle( x,y,r ){ 56 | ctx.beginPath(); 57 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 58 | ctx.stroke(); 59 | } 60 | function disc( x,y,r ){ 61 | ctx.beginPath(); 62 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 63 | ctx.fill(); 64 | } -------------------------------------------------------------------------------- /revisions/random/2_noise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | random vs noise 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /revisions/random/3_fbm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | random vs noise 6 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /revisions/random/4_curl_noise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | random vs noise 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /revisions/recursion/sierpinski.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sierpinski 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/recursion/sierpinski.js: -------------------------------------------------------------------------------- 1 | 2 | function draw(p0, p1, p2) { 3 | ctx.beginPath(); 4 | ctx.moveTo(p0[0], p0[1]); 5 | ctx.lineTo(p1[0], p1[1]); 6 | ctx.lineTo(p2[0], p2[1]); 7 | ctx.closePath(); 8 | ctx.stroke(); 9 | } 10 | 11 | function sierpinski(p0, p1, p2, count ) { 12 | //break condition 13 | if(count <= 0) { 14 | //render 15 | draw(p0, p1, p2); 16 | }else{ 17 | 18 | //decrease the counter 19 | count--; 20 | 21 | //find the edges' centers 22 | var a = [ ( p0[0] + p1[0] ) / 2, (p0[1] + p1[1]) / 2 ]; 23 | var b = [ ( p1[0] + p2[0] ) / 2, (p1[1] + p2[1]) / 2 ]; 24 | var c = [ ( p2[0] + p0[0] ) / 2, (p2[1] + p0[1]) / 2 ]; 25 | 26 | //calls the method on the new triangles 27 | sierpinski( p0, a, c, count ); 28 | sierpinski( p1, b, a, count ); 29 | sierpinski( p2, c, b, count ); 30 | } 31 | } 32 | 33 | //utils 34 | //creates a 2D context 35 | var canvas = document.createElement( 'canvas' ); 36 | document.body.appendChild( canvas ); 37 | var w = canvas.width = window.innerWidth ; 38 | var h = canvas.height = window.innerHeight ; 39 | var ctx = canvas.getContext("2d"); 40 | 41 | //creates 3 points 42 | var size = 400; 43 | var points = []; 44 | for(var i = 0; i < Math.PI * 2; i += Math.PI * 2 / 3 ) { 45 | points.push([ 46 | w/2 + Math.cos(i - Math.PI / 2) * size, 47 | h/2 + Math.sin(i - Math.PI / 2) * size 48 | ]); 49 | } 50 | sierpinski( points[0], points[1], points[2], 6 ); 51 | -------------------------------------------------------------------------------- /revisions/recursion/tree.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | recursive tree 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/recursion/tree.js: -------------------------------------------------------------------------------- 1 | 2 | function branch(length, angle) { 3 | 4 | line(0, 0, 0, -length); 5 | 6 | ctx.translate(0, -length); 7 | 8 | if (length > 2) { 9 | 10 | length *= 0.65; 11 | 12 | ctx.save(); 13 | ctx.rotate(angle); 14 | branch(length, angle); 15 | ctx.restore(); 16 | 17 | ctx.save(); 18 | ctx.rotate(-angle); 19 | branch(length, angle); 20 | ctx.restore(); 21 | } 22 | } 23 | 24 | function line(x0, y0, x1, y1) { 25 | ctx.beginPath(); 26 | ctx.moveTo(x0, y0); 27 | ctx.lineTo(x1, y1); 28 | ctx.stroke(); 29 | } 30 | 31 | //creates a 2D context 32 | var canvas = document.createElement( 'canvas' ); 33 | document.body.appendChild( canvas ); 34 | var w = canvas.width = window.innerWidth ; 35 | var h = canvas.height = window.innerHeight ; 36 | var ctx = canvas.getContext("2d"); 37 | ctx.translate(w/2,h/2 + 300); 38 | branch( 200, Math.PI / 180 * 30 ); 39 | -------------------------------------------------------------------------------- /revisions/splines/cardinal.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by nico on 23/11/13. 3 | */ 4 | 5 | var cardinal = function (exports) { 6 | 7 | 8 | exports.compute = function (points, precision, tension, loop) { 9 | 10 | precision = Math.max(.01, Math.min(1, precision || .1)); 11 | tension = Math.max(-5, Math.min(5, tension || 1)); 12 | loop = Boolean(loop); 13 | 14 | 15 | var tmp = [], 16 | p0, 17 | p1, 18 | p2, 19 | p3, 20 | i = 0, 21 | t = 0; 22 | 23 | for (i = 0; i < points.length - ( loop ? 0 : 1 ); i++) { 24 | 25 | p0 = (i < 1) ? points [points.length - 1] : points [i - 1]; 26 | p1 = points [i]; 27 | p2 = points [(i + 1 + points.length) % points.length]; 28 | p3 = points [(i + 2 + points.length) % points.length]; 29 | 30 | for (t = 0; t < 1; t += precision) { 31 | 32 | tmp.push(new Point( 33 | // x 34 | tension * ( -t * t * t + 2 * t * t - t) * p0.x + 35 | tension * ( -t * t * t + t * t) * p1.x + 36 | (2 * t * t * t - 3 * t * t + 1) * p1.x + 37 | tension * (t * t * t - 2 * t * t + t) * p2.x + 38 | ( -2 * t * t * t + 3 * t * t) * p2.x + 39 | tension * (t * t * t - t * t) * p3.x, 40 | 41 | // y 42 | tension * ( -t * t * t + 2 * t * t - t) * p0.y + 43 | tension * ( -t * t * t + t * t) * p1.y + 44 | (2 * t * t * t - 3 * t * t + 1) * p1.y + 45 | tension * (t * t * t - 2 * t * t + t) * p2.y + 46 | ( -2 * t * t * t + 3 * t * t) * p2.y + 47 | tension * (t * t * t - t * t) * p3.y 48 | )); 49 | } 50 | } 51 | if (loop && points.length > 0) tmp.push(points[0]); 52 | return tmp; 53 | }; 54 | return exports; 55 | }({}); -------------------------------------------------------------------------------- /revisions/splines/catmullrom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by nico on 23/11/13. 3 | */ 4 | var catmullrom = function(exports) 5 | { 6 | 7 | exports.compute = function( points, precision, loop ) 8 | { 9 | 10 | precision = Math.max( .01, Math.min( 1, precision ||.1 ) ); 11 | loop = loop || false; 12 | 13 | var i = 0, 14 | t = 0, 15 | p0, 16 | p1, 17 | p2, 18 | p3; 19 | 20 | var tmp = []; 21 | 22 | for (i = 0; i < points.length - ( loop ? 0 : 1 ); i++) 23 | { 24 | p0 = points [(i -1 + points.length) % points.length]; 25 | p1 = points [i]; 26 | p2 = points [(i +1 + points.length) % points.length]; 27 | p3 = points [(i +2 + points.length) % points.length]; 28 | tmp.push( p1 ); 29 | 30 | for ( t = 0; t < 1; t+= precision ) 31 | { 32 | tmp.push( new Point( 0.5 * (( 2*p1.x) + 33 | t * (( -p0.x +p2.x) + 34 | t * ((2*p0.x -5*p1.x +4*p2.x -p3.x) + 35 | t * ( -p0.x +3 * p1.x -3 * p2.x +p3.x)))), 36 | 37 | 0.5 * (( 2*p1.y) + 38 | t * (( -p0.y +p2.y) + 39 | t * ((2*p0.y -5*p1.y +4*p2.y -p3.y) + 40 | t * ( -p0.y +3 * p1.y -3 * p2.y +p3.y)))) ) ); 41 | } 42 | } 43 | if( loop && points.length > 0 )tmp.push( points[ 0 ]); 44 | return tmp; 45 | 46 | }; 47 | 48 | return exports; 49 | 50 | }({}); -------------------------------------------------------------------------------- /revisions/splines/splines.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | splines 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /revisions/splines/splines.js: -------------------------------------------------------------------------------- 1 | var G = new Graphics(ctx); 2 | 3 | function draw(){ 4 | 5 | ctx .fillStyle = "#FFF"; 6 | ctx.globalAlpha = 1; 7 | ctx.fillRect( 0,0,w,h ); 8 | ctx.fillStyle = "#000"; 9 | 10 | 11 | //creates a line at the top of the screen 12 | var points = []; 13 | for( var i = -50; i <= w + 50; i+=50 ){ 14 | points.push( new Point( i, h/2 + ( Math.random() - .5 ) * h/3 ) ); 15 | } 16 | ctx.save(); 17 | ctx.lineJoin = "round"; 18 | 19 | //cardinal curve 20 | ctx.lineWidth = 10; 21 | ctx.strokeStyle = "#06C"; 22 | var card = cardinal.compute( points, .05, 3, false ); 23 | G.polyline( card ); 24 | 25 | //catmull rom curve 26 | ctx.lineWidth = 6; 27 | ctx.strokeStyle = "#FC0"; 28 | var catmull = catmullrom.compute( points, .1, false ); 29 | G.polyline( catmull ); 30 | 31 | //quadratic curve 32 | ctx.lineWidth = 3; 33 | ctx.strokeStyle = "#E00"; 34 | var quad = quadratic.compute( points, .1, false ); 35 | G.polyline( quad ); 36 | 37 | ctx.restore(); 38 | ctx.lineWidth = 1.5; 39 | G.polyline( points ); 40 | 41 | } 42 | canvas.addEventListener('mousedown', draw); 43 | draw(); 44 | 45 | -------------------------------------------------------------------------------- /revisions/splines/splines_wall.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | splines 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /revisions/splines/splines_wall.js: -------------------------------------------------------------------------------- 1 | var G = new Graphics(ctx); 2 | 3 | var origins = []; 4 | var destinations = []; 5 | function reset(){ 6 | 7 | ctx .fillStyle = "#FFF"; 8 | ctx.globalAlpha = 1; 9 | ctx.fillRect( 0,0,w,h ); 10 | ctx.fillStyle = "#000"; 11 | 12 | origins = []; 13 | destinations = []; 14 | var step = 200; 15 | for( var i = -step; i <= w + step; i+=step ){ 16 | origins.push( new Point( i, h/2 + ( Math.random() - .5 ) * h/2 ) ); 17 | destinations.push( new Point( i + ( Math.random()-.5 ) * step, h/2 + ( Math.random() - .5 ) * h/2 ) ); 18 | } 19 | 20 | draw() 21 | } 22 | function draw(){ 23 | 24 | //computes 2 curves: 25 | 26 | var precision = .01; 27 | var c0 = cardinal.compute( origins, precision, 1, false ); 28 | var c1 = cardinal.compute( destinations, precision, 2, false ); 29 | 30 | // var c0 = quadratic.compute( origins, precision, false ); 31 | // var c1 = quadratic.compute( destinations, precision, false ); 32 | 33 | // var c0 = catmullrom.compute( origins, precision, false ); 34 | // var c1 = catmullrom.compute( destinations, precision, false ); 35 | 36 | ctx.lineJoin = "round"; 37 | ctx.lineWidth = 5; 38 | 39 | // interpolates between the 2 40 | 41 | for( var t = 0; t < 1; t += .005 ){ 42 | 43 | ctx.globalAlpha = Shaping.square( t * 4.5 ) * .25; 44 | 45 | var curve = []; 46 | for( var i = 0; i < c0.length; i++ ){ 47 | 48 | var p0 = c0[i]; 49 | var p1 = c1[i]; 50 | 51 | //gets a point at T between P0 & P1 52 | curve.push( p0.pointAt( t, p1 ) ) 53 | 54 | } 55 | G.polyline( curve ); 56 | 57 | } 58 | 59 | } 60 | canvas.addEventListener('mousedown', reset ); 61 | reset(); 62 | 63 | -------------------------------------------------------------------------------- /revisions/transform/kaleidoscope.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | rotation 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/transform/pavage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | rotation 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /revisions/transform/project.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | rotation 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/transform/reflect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | rotation 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/transform/rotation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | rotation 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/transform/rotation.js: -------------------------------------------------------------------------------- 1 | function rotate(p, lattice, angle) { 2 | 3 | var a = getAngle(lattice, p) + angle; 4 | var d = getDistance(lattice, p); 5 | 6 | var pp = new Point(); 7 | pp.x = lattice.x + Math.cos(a) * d; 8 | pp.y = lattice.y + Math.sin(a) * d; 9 | return pp; 10 | 11 | } 12 | var a = new Point(); 13 | var b = new Point(1,1); 14 | console.log( getAngle(a,b) * (180/Math.PI)) 15 | function reset() { 16 | 17 | ctx.restore(); 18 | ctx.clearRect(0, 0, w, h); 19 | ctx.save(); 20 | ctx.translate(w/2, h/2); 21 | 22 | //pseudoRandom walk: 23 | // make a point move randomly X times on X / Y 24 | // store each position in an array 25 | var count = 64; 26 | var steplength = 20; 27 | var p = new Point(); 28 | var points = []; 29 | for( var i = 0; i < count; i++ ){ 30 | 31 | p.x += steplength; 32 | p.y += ( Math.random() - .5 ) * steplength; 33 | 34 | //p.clone() return a copy of the point 35 | points.push( p.clone() ); 36 | 37 | } 38 | 39 | //performs a series of rotations around a point (center) 40 | var center = new Point(); 41 | 42 | var rotations = 64; 43 | var angleStep = Math.PI * 2 / rotations; 44 | var tmp = new Point(); 45 | for( i = 0; i < rotations; i++ ){ 46 | 47 | var rotated = []; 48 | points.forEach( function( p, id ){ 49 | if( i == 0 )circle(p.x,p.y, 2 ); 50 | tmp = rotate( p, center, angleStep * i ); 51 | rotated.push( tmp ); 52 | }); 53 | renderLine( rotated ); 54 | } 55 | } 56 | 57 | 58 | //creates a 2D context 59 | var canvas, w, h, ctx; 60 | window.onload = function () { 61 | canvas = document.createElement('canvas'); 62 | document.body.appendChild(canvas); 63 | w = canvas.width = window.innerWidth; 64 | h = canvas.height = window.innerHeight; 65 | ctx = canvas.getContext("2d"); 66 | reset(); 67 | }; 68 | window.addEventListener('mousedown', reset); 69 | function circle(x, y, r) { 70 | ctx.beginPath(); 71 | ctx.arc(x, y, r, 0, Math.PI * 2); 72 | ctx.stroke(); 73 | } 74 | 75 | function renderLine(points) { 76 | ctx.beginPath(); 77 | points.forEach(function( p ){ 78 | ctx.lineTo(p.x,p.y); 79 | }); 80 | ctx.stroke(); 81 | } -------------------------------------------------------------------------------- /revisions/transform/translate.js: -------------------------------------------------------------------------------- 1 | 2 | function lerp ( t, a, b ){ 3 | return a * (1-t) + b * t; 4 | } 5 | function norm( t, a, b ){ 6 | return ( t - a ) / ( b - a ); 7 | } 8 | function map( t, a0, b0, a1, b1 ){ 9 | return lerp( norm( t, a0, b0 ), a1, b1 ); 10 | } 11 | 12 | function reset(){ 13 | ctx.translate( w/2, h/2 ); 14 | var count = 1024; 15 | var golden_angle = Math.PI * 2 / ( ( 1 + Math.sqrt(5) ) / 2 ); 16 | for( var i = 0; i < count; i++ ) { 17 | var theta = i * golden_angle; 18 | var radius = Math.sqrt(i / count) * h / 3; 19 | circle(Math.cos(theta) * radius,Math.sin(theta) * radius, 5 ); 20 | 21 | var theta = lerp( norm( i, 0, count), 0, count * golden_angle ); 22 | var radius = Math.sqrt( norm( i, 0, count) ) * h / 3; 23 | circle(Math.cos(theta) * radius,Math.sin(theta) * radius, 1 ); 24 | 25 | } 26 | } 27 | 28 | 29 | //creates a 2D context 30 | var canvas, w, h, ctx; 31 | window.onload = function(){ 32 | canvas = document.createElement( 'canvas' ); 33 | document.body.appendChild( canvas ); 34 | w = canvas.width = window.innerWidth ; 35 | h = canvas.height = window.innerHeight ; 36 | ctx = canvas.getContext("2d"); 37 | reset(); 38 | }; 39 | function circle( x,y,r ){ 40 | ctx.beginPath(); 41 | ctx.arc( x, y, r, 0, Math.PI * 2 ); 42 | ctx.stroke(); 43 | } -------------------------------------------------------------------------------- /revisions/transform/translation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | translation 6 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/utils/3D.js: -------------------------------------------------------------------------------- 1 | 2 | function project(M) { 3 | // Distance between the camera and the plane 4 | var d = 200; 5 | var r = d / M.y; 6 | return [ r * M.x, r * M.z ]; 7 | } 8 | 9 | function render3DObject(objects, ctx, dx, dy) { 10 | // Clear the previous frame 11 | ctx.clearRect(0, 0, 2*dx, 2*dy); 12 | 13 | // For each object 14 | for (var i = 0, n_obj = objects.length; i < n_obj; ++i) { 15 | // For each face 16 | for (var j = 0, n_faces = objects[i].faces.length; j < n_faces; ++j) { 17 | // Current face 18 | var face = objects[i].faces[j]; 19 | 20 | // Draw the first vertex 21 | var P = project(face[0]); 22 | ctx.beginPath(); 23 | ctx.moveTo(P.x + dx, -P.y + dy); 24 | 25 | // Draw the other vertices 26 | for (var k = 1, n_vertices = face.length; k < n_vertices; ++k) { 27 | P = project(face[k]); 28 | ctx.lineTo(P.x + dx, -P.y + dy); 29 | } 30 | 31 | // Close the path and draw the face 32 | ctx.closePath(); 33 | ctx.stroke(); 34 | ctx.fill(); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /revisions/utils/bounce.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bounce 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /revisions/utils/circle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | circle 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /revisions/utils/oscillation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | oscillation 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /revisions/utils/oscillation.js: -------------------------------------------------------------------------------- 1 | 2 | //creates a 2D context 3 | var canvas, w, h, ctx; 4 | canvas = document.createElement( 'canvas' ); 5 | document.body.appendChild( canvas ); 6 | w = canvas.width = window.innerWidth ; 7 | h = canvas.height = window.innerHeight ; 8 | ctx = canvas.getContext("2d"); 9 | var HPI = Math.PI / 2; 10 | 11 | 12 | 13 | function update(){ 14 | 15 | requestAnimationFrame( update ); 16 | ctx.fillRect( 0,0,w,h ); 17 | 18 | var t = Date.now() * 0.001; 19 | var p = new Point(); 20 | var n = new Point(); 21 | var RAD = Math.PI / 180; 22 | 23 | ctx.lineWidth = 5; 24 | for( var i = 0; i < Math.PI * 2; i += RAD ){ 25 | p.x = c.x + Math.cos( i ) * c.radius; 26 | p.y = c.y + Math.sin( i ) * c.radius; 27 | 28 | var radius = c.radius * ( ( Math.sin( t + i * 3 )* Math.cos( t ) ) * .5 + .5 ) * 2 ; 29 | n.x = c.x + Math.cos( i + RAD * 30 ) * radius; 30 | n.y = c.y + Math.sin( i + RAD * 30 ) * radius; 31 | 32 | var grad = ctx.createRadialGradient( p.x,p.y, 0,p.x,p.y, Math.abs( radius ) ); 33 | grad.addColorStop( 0, "rgba(255, 255, 255, 1 )" ); 34 | grad.addColorStop( 1, "rgba(255, 255, 255, 0 )" ); 35 | ctx.strokeStyle = grad; 36 | 37 | G.line(p,n); 38 | 39 | } 40 | 41 | } 42 | 43 | 44 | var mouse = new Point(w/2, h/2); 45 | mouse.radius = 100; 46 | window.addEventListener( 'mousemove', function (e) { 47 | mouse.x = e.clientX; 48 | mouse.y = e.clientY; 49 | }); 50 | var c = new Point(w/2, h/2); 51 | c.radius = h / 4; 52 | var G = new Graphics( ctx ); 53 | update(); -------------------------------------------------------------------------------- /revisions/utils/random_rays.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | random rays 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /revisions/utils/random_rays.js: -------------------------------------------------------------------------------- 1 | 2 | //creates a 2D context 3 | var canvas, w, h, ctx; 4 | canvas = document.createElement( 'canvas' ); 5 | document.body.appendChild( canvas ); 6 | w = canvas.width = window.innerWidth ; 7 | h = canvas.height = window.innerHeight ; 8 | ctx = canvas.getContext("2d"); 9 | var HPI = Math.PI / 2; 10 | 11 | 12 | 13 | function update(){ 14 | 15 | requestAnimationFrame( update ); 16 | ctx.fillRect( 0,0,w,h ); 17 | 18 | ctx.strokeStyle = "#FFF"; 19 | ctx.fillStyle = "#FFF"; 20 | G.disc(mouse.x, mouse.y, mouse.radius); 21 | ctx.fillStyle = "#000"; 22 | ctx.strokeStyle = "#FFF"; 23 | 24 | lines.forEach(function( l ){ 25 | 26 | var bvs = geomUtils.circleBounceVectors( l[0], l[1], mouse ); 27 | if( bvs == null )return; 28 | 29 | bvs.forEach( function(bv, i) { 30 | 31 | if( bv == null )return; 32 | 33 | var p = bv[0]; 34 | var grad; 35 | var l = ( p.clone().sub(bv[1]).length() ) * .5; 36 | if( geomUtils.vectorsHaveSameDirection( mouse, p,p, bv[1] ) ){ 37 | 38 | grad = ctx.createRadialGradient( p.x,p.y, 0, p.x, p.y, l ); 39 | grad.addColorStop( 0, "#FFF" ); 40 | grad.addColorStop( 1, "rgba(255, 255, 255, 0 )" ); 41 | 42 | }else{ 43 | grad = ctx.createRadialGradient( p.x,p.y, 0, p.x, p.y, l * .5 ); 44 | grad.addColorStop( 0, "#000" ); 45 | grad.addColorStop( 1, "rgba(0, 0, 0, 0 )" ); 46 | } 47 | 48 | ctx.strokeStyle = grad; 49 | G.line( bv[0], bv[1]); 50 | 51 | }); 52 | 53 | }) 54 | 55 | } 56 | 57 | 58 | var lines = []; 59 | for( var i = 0; i < 1000; i++ ){ 60 | lines.push( [ 61 | new Point( Math.random() * w, Math.random() * h ), 62 | new Point( Math.random() * w, Math.random() * h ) 63 | ] 64 | ); 65 | } 66 | 67 | var mouse = new Point(w/2, h/2); 68 | mouse.radius = 100; 69 | window.addEventListener( 'mousemove', function (e) { 70 | mouse.x = e.clientX; 71 | mouse.y = e.clientY; 72 | }); 73 | var G = new Graphics( ctx ); 74 | update(); -------------------------------------------------------------------------------- /revisions/utils/rayhits.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | oscillation 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /revisions/utils/recursive_rays.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | recursive rays 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /slides/css/theme/README.md: -------------------------------------------------------------------------------- 1 | ## Dependencies 2 | 3 | Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup 4 | 5 | ## Creating a Theme 6 | 7 | To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `grunt css-themes`. 8 | 9 | Each theme file does four things in the following order: 10 | 11 | 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** 12 | Shared utility functions. 13 | 14 | 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** 15 | Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. 16 | 17 | 3. **Override** 18 | This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please. 19 | 20 | 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** 21 | The template theme file which will generate final CSS output based on the currently defined variables. 22 | -------------------------------------------------------------------------------- /slides/css/theme/source/beige.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Beige theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @import url(../../lib/font/league-gothic/league-gothic.css); 17 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainColor: #333; 22 | $headingColor: #333; 23 | $headingTextShadow: none; 24 | $backgroundColor: #f7f3de; 25 | $linkColor: #8b743d; 26 | $linkColorHover: lighten( $linkColor, 20% ); 27 | $selectionBackgroundColor: rgba(79, 64, 28, 0.99); 28 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 29 | 30 | // Background generator 31 | @mixin bodyBackground() { 32 | @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); 33 | } 34 | 35 | 36 | 37 | // Theme template ------------------------------ 38 | @import "../template/theme"; 39 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/black.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. This is the opposite of the 'white' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css); 16 | 17 | 18 | // Override theme settings (see ../template/settings.scss) 19 | $backgroundColor: #222; 20 | 21 | $mainColor: #fff; 22 | $headingColor: #fff; 23 | 24 | $mainFontSize: 42px; 25 | $mainFont: 'Source Sans Pro', Helvetica, sans-serif; 26 | $headingFont: 'Source Sans Pro', Helvetica, sans-serif; 27 | $headingTextShadow: none; 28 | $headingLetterSpacing: normal; 29 | $headingTextTransform: uppercase; 30 | $headingFontWeight: 600; 31 | $linkColor: #42affa; 32 | $linkColorHover: lighten( $linkColor, 15% ); 33 | $selectionBackgroundColor: lighten( $linkColor, 25% ); 34 | 35 | $heading1Size: 2.5em; 36 | $heading2Size: 1.6em; 37 | $heading3Size: 1.3em; 38 | $heading4Size: 1.0em; 39 | 40 | section.has-light-background { 41 | &, h1, h2, h3, h4, h5, h6 { 42 | color: #222; 43 | } 44 | } 45 | 46 | 47 | // Theme template ------------------------------ 48 | @import "../template/theme"; 49 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/blood.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Blood theme for reveal.js 3 | * Author: Walther http://github.com/Walther 4 | * 5 | * Designed to be used with highlight.js theme 6 | * "monokai_sublime.css" available from 7 | * https://github.com/isagalaev/highlight.js/ 8 | * 9 | * For other themes, change $codeBackground accordingly. 10 | * 11 | */ 12 | 13 | // Default mixins and settings ----------------- 14 | @import "../template/mixins"; 15 | @import "../template/settings"; 16 | // --------------------------------------------- 17 | 18 | // Include theme-specific fonts 19 | 20 | @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); 21 | 22 | // Colors used in the theme 23 | $blood: #a23; 24 | $coal: #222; 25 | $codeBackground: #23241f; 26 | 27 | $backgroundColor: $coal; 28 | 29 | // Main text 30 | $mainFont: Ubuntu, 'sans-serif'; 31 | $mainColor: #eee; 32 | 33 | // Headings 34 | $headingFont: Ubuntu, 'sans-serif'; 35 | $headingTextShadow: 2px 2px 2px $coal; 36 | 37 | // h1 shadow, borrowed humbly from 38 | // (c) Default theme by Hakim El Hattab 39 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 40 | 41 | // Links 42 | $linkColor: $blood; 43 | $linkColorHover: lighten( $linkColor, 20% ); 44 | 45 | // Text selection 46 | $selectionBackgroundColor: $blood; 47 | $selectionColor: #fff; 48 | 49 | 50 | // Theme template ------------------------------ 51 | @import "../template/theme"; 52 | // --------------------------------------------- 53 | 54 | // some overrides after theme template import 55 | 56 | .reveal p { 57 | font-weight: 300; 58 | text-shadow: 1px 1px $coal; 59 | } 60 | 61 | .reveal h1, 62 | .reveal h2, 63 | .reveal h3, 64 | .reveal h4, 65 | .reveal h5, 66 | .reveal h6 { 67 | font-weight: 700; 68 | } 69 | 70 | .reveal p code { 71 | background-color: $codeBackground; 72 | display: inline-block; 73 | border-radius: 7px; 74 | } 75 | 76 | .reveal small code { 77 | vertical-align: baseline; 78 | } -------------------------------------------------------------------------------- /slides/css/theme/source/league.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * League theme for reveal.js. 3 | * 4 | * This was the default theme pre-3.0.0. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(../../lib/font/league-gothic/league-gothic.css); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | // Override theme settings (see ../template/settings.scss) 22 | $headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); 23 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 24 | 25 | // Background generator 26 | @mixin bodyBackground() { 27 | @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); 28 | } 29 | 30 | 31 | 32 | // Theme template ------------------------------ 33 | @import "../template/theme"; 34 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/moon.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Dark theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/league-gothic/league-gothic.css); 16 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 17 | 18 | /** 19 | * Solarized colors by Ethan Schoonover 20 | */ 21 | html * { 22 | color-profile: sRGB; 23 | rendering-intent: auto; 24 | } 25 | 26 | // Solarized colors 27 | $base03: #002b36; 28 | $base02: #073642; 29 | $base01: #586e75; 30 | $base00: #657b83; 31 | $base0: #839496; 32 | $base1: #93a1a1; 33 | $base2: #eee8d5; 34 | $base3: #fdf6e3; 35 | $yellow: #b58900; 36 | $orange: #cb4b16; 37 | $red: #dc322f; 38 | $magenta: #d33682; 39 | $violet: #6c71c4; 40 | $blue: #268bd2; 41 | $cyan: #2aa198; 42 | $green: #859900; 43 | 44 | // Override theme settings (see ../template/settings.scss) 45 | $mainColor: $base1; 46 | $headingColor: $base2; 47 | $headingTextShadow: none; 48 | $backgroundColor: $base03; 49 | $linkColor: $blue; 50 | $linkColorHover: lighten( $linkColor, 20% ); 51 | $selectionBackgroundColor: $magenta; 52 | 53 | 54 | 55 | // Theme template ------------------------------ 56 | @import "../template/theme"; 57 | // --------------------------------------------- 58 | -------------------------------------------------------------------------------- /slides/css/theme/source/night.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 16 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 17 | 18 | 19 | // Override theme settings (see ../template/settings.scss) 20 | $backgroundColor: #111; 21 | 22 | $mainFont: 'Open Sans', sans-serif; 23 | $linkColor: #e7ad52; 24 | $linkColorHover: lighten( $linkColor, 20% ); 25 | $headingFont: 'Montserrat', Impact, sans-serif; 26 | $headingTextShadow: none; 27 | $headingLetterSpacing: -0.03em; 28 | $headingTextTransform: none; 29 | $selectionBackgroundColor: #e7ad52; 30 | 31 | 32 | // Theme template ------------------------------ 33 | @import "../template/theme"; 34 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/serif.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is brown. 4 | * 5 | * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. 6 | */ 7 | 8 | 9 | // Default mixins and settings ----------------- 10 | @import "../template/mixins"; 11 | @import "../template/settings"; 12 | // --------------------------------------------- 13 | 14 | 15 | 16 | // Override theme settings (see ../template/settings.scss) 17 | $mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 18 | $mainColor: #000; 19 | $headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 20 | $headingColor: #383D3D; 21 | $headingTextShadow: none; 22 | $headingTextTransform: none; 23 | $backgroundColor: #F0F1EB; 24 | $linkColor: #51483D; 25 | $linkColorHover: lighten( $linkColor, 20% ); 26 | $selectionBackgroundColor: #26351C; 27 | 28 | .reveal a { 29 | line-height: 1.3em; 30 | } 31 | 32 | 33 | // Theme template ------------------------------ 34 | @import "../template/theme"; 35 | // --------------------------------------------- 36 | -------------------------------------------------------------------------------- /slides/css/theme/source/simple.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | 22 | // Override theme settings (see ../template/settings.scss) 23 | $mainFont: 'Lato', sans-serif; 24 | $mainColor: #000; 25 | $headingFont: 'News Cycle', Impact, sans-serif; 26 | $headingColor: #000; 27 | $headingTextShadow: none; 28 | $headingTextTransform: none; 29 | $backgroundColor: #fff; 30 | $linkColor: #00008B; 31 | $linkColorHover: lighten( $linkColor, 20% ); 32 | $selectionBackgroundColor: rgba(0, 0, 0, 0.99); 33 | 34 | section.has-dark-background { 35 | &, h1, h2, h3, h4, h5, h6 { 36 | color: #fff; 37 | } 38 | } 39 | 40 | 41 | // Theme template ------------------------------ 42 | @import "../template/theme"; 43 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/sky.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Sky theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 17 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainFont: 'Open Sans', sans-serif; 22 | $mainColor: #333; 23 | $headingFont: 'Quicksand', sans-serif; 24 | $headingColor: #333; 25 | $headingLetterSpacing: -0.08em; 26 | $headingTextShadow: none; 27 | $backgroundColor: #f7fbfc; 28 | $linkColor: #3b759e; 29 | $linkColorHover: lighten( $linkColor, 20% ); 30 | $selectionBackgroundColor: #134674; 31 | 32 | // Fix links so they are not cut off 33 | .reveal a { 34 | line-height: 1.3em; 35 | } 36 | 37 | // Background generator 38 | @mixin bodyBackground() { 39 | @include radial-gradient( #add9e4, #f7fbfc ); 40 | } 41 | 42 | 43 | 44 | // Theme template ------------------------------ 45 | @import "../template/theme"; 46 | // --------------------------------------------- 47 | -------------------------------------------------------------------------------- /slides/css/theme/source/solarized.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Light theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/league-gothic/league-gothic.css); 16 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 17 | 18 | 19 | /** 20 | * Solarized colors by Ethan Schoonover 21 | */ 22 | html * { 23 | color-profile: sRGB; 24 | rendering-intent: auto; 25 | } 26 | 27 | // Solarized colors 28 | $base03: #002b36; 29 | $base02: #073642; 30 | $base01: #586e75; 31 | $base00: #657b83; 32 | $base0: #839496; 33 | $base1: #93a1a1; 34 | $base2: #eee8d5; 35 | $base3: #fdf6e3; 36 | $yellow: #b58900; 37 | $orange: #cb4b16; 38 | $red: #dc322f; 39 | $magenta: #d33682; 40 | $violet: #6c71c4; 41 | $blue: #268bd2; 42 | $cyan: #2aa198; 43 | $green: #859900; 44 | 45 | // Override theme settings (see ../template/settings.scss) 46 | $mainColor: $base00; 47 | $headingColor: $base01; 48 | $headingTextShadow: none; 49 | $backgroundColor: $base3; 50 | $linkColor: $blue; 51 | $linkColorHover: lighten( $linkColor, 20% ); 52 | $selectionBackgroundColor: $magenta; 53 | 54 | // Background generator 55 | // @mixin bodyBackground() { 56 | // @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); 57 | // } 58 | 59 | 60 | 61 | // Theme template ------------------------------ 62 | @import "../template/theme"; 63 | // --------------------------------------------- 64 | -------------------------------------------------------------------------------- /slides/css/theme/source/white.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * White theme for reveal.js. This is the opposite of the 'black' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css); 16 | 17 | 18 | // Override theme settings (see ../template/settings.scss) 19 | $backgroundColor: #fff; 20 | 21 | $mainColor: #222; 22 | $headingColor: #222; 23 | 24 | $mainFontSize: 42px; 25 | $mainFont: 'Source Sans Pro', Helvetica, sans-serif; 26 | $headingFont: 'Source Sans Pro', Helvetica, sans-serif; 27 | $headingTextShadow: none; 28 | $headingLetterSpacing: normal; 29 | $headingTextTransform: uppercase; 30 | $headingFontWeight: 600; 31 | $linkColor: #2a76dd; 32 | $linkColorHover: lighten( $linkColor, 15% ); 33 | $selectionBackgroundColor: lighten( $linkColor, 25% ); 34 | 35 | $heading1Size: 2.5em; 36 | $heading2Size: 1.6em; 37 | $heading3Size: 1.3em; 38 | $heading4Size: 1.0em; 39 | 40 | section.has-dark-background { 41 | &, h1, h2, h3, h4, h5, h6 { 42 | color: #fff; 43 | } 44 | } 45 | 46 | 47 | // Theme template ------------------------------ 48 | @import "../template/theme"; 49 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/template/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin vertical-gradient( $top, $bottom ) { 2 | background: $top; 3 | background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); 4 | background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); 5 | background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); 6 | background: -o-linear-gradient( top, $top 0%, $bottom 100% ); 7 | background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); 8 | background: linear-gradient( top, $top 0%, $bottom 100% ); 9 | } 10 | 11 | @mixin horizontal-gradient( $top, $bottom ) { 12 | background: $top; 13 | background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); 14 | background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); 15 | background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); 16 | background: -o-linear-gradient( left, $top 0%, $bottom 100% ); 17 | background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); 18 | background: linear-gradient( left, $top 0%, $bottom 100% ); 19 | } 20 | 21 | @mixin radial-gradient( $outer, $inner, $type: circle ) { 22 | background: $outer; 23 | background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 24 | background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); 25 | background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 26 | background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 27 | background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 28 | background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 29 | } -------------------------------------------------------------------------------- /slides/css/theme/template/settings.scss: -------------------------------------------------------------------------------- 1 | // Base settings for all themes that can optionally be 2 | // overridden by the super-theme 3 | 4 | // Background of the presentation 5 | $backgroundColor: #2b2b2b; 6 | 7 | // Primary/body text 8 | $mainFont: 'Lato', sans-serif; 9 | $mainFontSize: 40px; 10 | $mainColor: #eee; 11 | 12 | // Vertical spacing between blocks of text 13 | $blockMargin: 20px; 14 | 15 | // Headings 16 | $headingMargin: 0 0 $blockMargin 0; 17 | $headingFont: 'League Gothic', Impact, sans-serif; 18 | $headingColor: #eee; 19 | $headingLineHeight: 1.2; 20 | $headingLetterSpacing: normal; 21 | $headingTextTransform: uppercase; 22 | $headingTextShadow: none; 23 | $headingFontWeight: normal; 24 | $heading1TextShadow: $headingTextShadow; 25 | 26 | $heading1Size: 3.77em; 27 | $heading2Size: 2.11em; 28 | $heading3Size: 1.55em; 29 | $heading4Size: 1.00em; 30 | 31 | // Links and actions 32 | $linkColor: #13DAEC; 33 | $linkColorHover: lighten( $linkColor, 20% ); 34 | 35 | // Text selection 36 | $selectionBackgroundColor: #FF5E99; 37 | $selectionColor: #fff; 38 | 39 | // Generates the presentation background, can be overridden 40 | // to return a background image or gradient 41 | @mixin bodyBackground() { 42 | background: $backgroundColor; 43 | } -------------------------------------------------------------------------------- /slides/img/data/float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/data/float.png -------------------------------------------------------------------------------- /slides/img/examples/nervous.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/examples/nervous.png -------------------------------------------------------------------------------- /slides/img/examples/nomansky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/examples/nomansky.png -------------------------------------------------------------------------------- /slides/img/examples/uss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/examples/uss.png -------------------------------------------------------------------------------- /slides/img/extra/ant/3D.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/ant/3D.jpg -------------------------------------------------------------------------------- /slides/img/extra/ant/step0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/ant/step0.png -------------------------------------------------------------------------------- /slides/img/extra/ant/step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/ant/step1.png -------------------------------------------------------------------------------- /slides/img/extra/ant/step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/ant/step2.png -------------------------------------------------------------------------------- /slides/img/extra/ant/step3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/ant/step3.png -------------------------------------------------------------------------------- /slides/img/extra/ant/step4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/ant/step4.png -------------------------------------------------------------------------------- /slides/img/extra/emergence_flocking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/emergence_flocking.png -------------------------------------------------------------------------------- /slides/img/extra/emergence_polar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/emergence_polar.png -------------------------------------------------------------------------------- /slides/img/extra/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/noise.png -------------------------------------------------------------------------------- /slides/img/extra/prng.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/prng.png -------------------------------------------------------------------------------- /slides/img/extra/tools/blender.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/blender.jpg -------------------------------------------------------------------------------- /slides/img/extra/tools/houdini.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/houdini.jpg -------------------------------------------------------------------------------- /slides/img/extra/tools/magicavoxel_closeup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/magicavoxel_closeup.png -------------------------------------------------------------------------------- /slides/img/extra/tools/magicavoxel_shader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/magicavoxel_shader.png -------------------------------------------------------------------------------- /slides/img/extra/tools/magicavoxel_sphere.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/magicavoxel_sphere.png -------------------------------------------------------------------------------- /slides/img/extra/tools/meshlab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/meshlab.png -------------------------------------------------------------------------------- /slides/img/extra/tools/openframeworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/openframeworks.png -------------------------------------------------------------------------------- /slides/img/extra/tools/processing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/processing.png -------------------------------------------------------------------------------- /slides/img/extra/tools/shadertoy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/shadertoy.png -------------------------------------------------------------------------------- /slides/img/extra/tools/structure_synth/structure_synth0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/structure_synth/structure_synth0.png -------------------------------------------------------------------------------- /slides/img/extra/tools/structure_synth/structure_synth1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/structure_synth/structure_synth1.png -------------------------------------------------------------------------------- /slides/img/extra/tools/structure_synth/structure_synth2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/structure_synth/structure_synth2.png -------------------------------------------------------------------------------- /slides/img/extra/tools/structure_synth/structure_synth3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/tools/structure_synth/structure_synth3.png -------------------------------------------------------------------------------- /slides/img/extra/trails.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/extra/trails.png -------------------------------------------------------------------------------- /slides/img/process/circular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/circular.png -------------------------------------------------------------------------------- /slides/img/process/formal_grammar.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/formal_grammar.ai -------------------------------------------------------------------------------- /slides/img/process/formal_grammar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/formal_grammar.png -------------------------------------------------------------------------------- /slides/img/process/formal_grammar_test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/formal_grammar_test.png -------------------------------------------------------------------------------- /slides/img/process/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/grid.png -------------------------------------------------------------------------------- /slides/img/process/iteration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/iteration.png -------------------------------------------------------------------------------- /slides/img/process/mst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/mst.png -------------------------------------------------------------------------------- /slides/img/process/point_symmetry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/point_symmetry.png -------------------------------------------------------------------------------- /slides/img/process/projection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/projection.png -------------------------------------------------------------------------------- /slides/img/process/reflection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/reflection.png -------------------------------------------------------------------------------- /slides/img/process/sierpinski.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/sierpinski.png -------------------------------------------------------------------------------- /slides/img/process/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/tree.png -------------------------------------------------------------------------------- /slides/img/process/triangular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/triangular.png -------------------------------------------------------------------------------- /slides/img/process/vector_field.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/process/vector_field.png -------------------------------------------------------------------------------- /slides/img/space/0_cartesian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/0_cartesian.png -------------------------------------------------------------------------------- /slides/img/space/1_polar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/1_polar.png -------------------------------------------------------------------------------- /slides/img/space/2_cylindrical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/2_cylindrical.png -------------------------------------------------------------------------------- /slides/img/space/3D_printing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/3D_printing.png -------------------------------------------------------------------------------- /slides/img/space/3_spherical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/3_spherical.png -------------------------------------------------------------------------------- /slides/img/space/4_3Dcartesian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/4_3Dcartesian.jpg -------------------------------------------------------------------------------- /slides/img/space/4_3Dcartesian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/4_3Dcartesian.png -------------------------------------------------------------------------------- /slides/img/space/5_4Dcartesian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/5_4Dcartesian.png -------------------------------------------------------------------------------- /slides/img/space/6_4Dpoint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/6_4Dpoint.png -------------------------------------------------------------------------------- /slides/img/space/7_4Dline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/7_4Dline.png -------------------------------------------------------------------------------- /slides/img/space/HSL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/HSL.png -------------------------------------------------------------------------------- /slides/img/space/HSL_sphere.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/HSL_sphere.png -------------------------------------------------------------------------------- /slides/img/space/Ndimensional.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/Ndimensional.ai -------------------------------------------------------------------------------- /slides/img/space/RGB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/RGB.png -------------------------------------------------------------------------------- /slides/img/space/RGBA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/RGBA.png -------------------------------------------------------------------------------- /slides/img/space/TSNE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/TSNE.png -------------------------------------------------------------------------------- /slides/img/space/depthbuffer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/depthbuffer.jpg -------------------------------------------------------------------------------- /slides/img/space/hsl_palette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/hsl_palette.jpg -------------------------------------------------------------------------------- /slides/img/space/hyperbolic_knit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/hyperbolic_knit.jpg -------------------------------------------------------------------------------- /slides/img/space/hypercube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/hypercube.png -------------------------------------------------------------------------------- /slides/img/space/moebius.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/moebius.png -------------------------------------------------------------------------------- /slides/img/space/notesonblindness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/notesonblindness.jpg -------------------------------------------------------------------------------- /slides/img/space/soundwave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/soundwave.png -------------------------------------------------------------------------------- /slides/img/space/stereo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/stereo.png -------------------------------------------------------------------------------- /slides/img/space/surround-sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/surround-sound.png -------------------------------------------------------------------------------- /slides/img/space/wavetypes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/img/space/wavetypes.png -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/LICENSE: -------------------------------------------------------------------------------- 1 | SIL Open Font License (OFL) 2 | http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/league-gothic.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'League Gothic'; 3 | src: url('league-gothic.eot'); 4 | src: url('league-gothic.eot?#iefix') format('embedded-opentype'), 5 | url('league-gothic.woff') format('woff'), 6 | url('league-gothic.ttf') format('truetype'); 7 | 8 | font-weight: normal; 9 | font-style: normal; 10 | } -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/league-gothic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/league-gothic/league-gothic.eot -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/league-gothic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/league-gothic/league-gothic.ttf -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/league-gothic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/league-gothic/league-gothic.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-italic.eot -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-italic.ttf -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-italic.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-regular.eot -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-regular.ttf -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-regular.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-semibold.eot -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-semibold.ttf -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-semibold.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicoptere/GROW_workshop/749b21d69d3437ac8d9086a265adfcac3816f6a3/slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Source Sans Pro'; 3 | src: url('source-sans-pro-regular.eot'); 4 | src: url('source-sans-pro-regular.eot?#iefix') format('embedded-opentype'), 5 | url('source-sans-pro-regular.woff') format('woff'), 6 | url('source-sans-pro-regular.ttf') format('truetype'); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | 11 | @font-face { 12 | font-family: 'Source Sans Pro'; 13 | src: url('source-sans-pro-italic.eot'); 14 | src: url('source-sans-pro-italic.eot?#iefix') format('embedded-opentype'), 15 | url('source-sans-pro-italic.woff') format('woff'), 16 | url('source-sans-pro-italic.ttf') format('truetype'); 17 | font-weight: normal; 18 | font-style: italic; 19 | } 20 | 21 | @font-face { 22 | font-family: 'Source Sans Pro'; 23 | src: url('source-sans-pro-semibold.eot'); 24 | src: url('source-sans-pro-semibold.eot?#iefix') format('embedded-opentype'), 25 | url('source-sans-pro-semibold.woff') format('woff'), 26 | url('source-sans-pro-semibold.ttf') format('truetype'); 27 | font-weight: 600; 28 | font-style: normal; 29 | } 30 | 31 | @font-face { 32 | font-family: 'Source Sans Pro'; 33 | src: url('source-sans-pro-semibolditalic.eot'); 34 | src: url('source-sans-pro-semibolditalic.eot?#iefix') format('embedded-opentype'), 35 | url('source-sans-pro-semibolditalic.woff') format('woff'), 36 | url('source-sans-pro-semibolditalic.ttf') format('truetype'); 37 | font-weight: 600; 38 | font-style: italic; 39 | } --------------------------------------------------------------------------------