-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathformLibrary.html
169 lines (165 loc) · 17.2 KB
/
formLibrary.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title> form library THREEf.js </title>
</head>
<body>
<h3> form Library THREEf.js / @author hofk / http://sandbox.threejs.hofk.de/ </h3>
Join GitHub. Append your form in this file. https://github.com/hofk/THREEf.js . Use the examples as follow:</br>
</br>
</body>
<script> // Do not change this first part.
info = document.body.appendChild( document.createElement( "textarea" ) );
info.rows="16";
info.cols="125";
info.value = "var geometry = new THREE.Geometry(); // create a base geometry \n // or \nvar geometry = new THREE.BufferGeometry(); // create a base buffer geometry \ngeometry.createMorphGeometry = THREEf.createMorphGeometry; // insert the method from THREEf\n\n// then apply the method with the appropriate parameters \ngeometry.createMorphGeometry({ \n\n// set the list of parameters from examples below\n\n});\n\n// use the parameter indexed: false, if you want a non-indexed BufferGeometry. \n// use mesh.add( geometry.quadLine ); if you use parameter quadLine: true,"
document.body.appendChild( document.createElement( "hr" ) );
parameterList = [];
for ( var i = 0; i < 100; i ++){
document.body.appendChild( document.createElement( "IMG" ) );
document.images[i].height = "160"; // standard, see instructions below
document.images[i].width = "160"; // standard, see instructions below
parameterList[i] = document.body.appendChild( document.createElement( "textarea" ) );
parameterList[i].rows="10";
parameterList[i].cols="100";
document.body.appendChild( document.createElement( "hr" ) );
}
</script>
<script>
// Go to the end of this script and submit your form.
// Follow the instructions there.
//___________________________________________________________
document.images[0].src = "img/0000_leaf.png";
parameterList[0].value = "//0000 leaf @author hofk / http://sandbox.threejs.hofk.de/ \n radius: 20,\n height: 80,\n radiusSegments: 20,\n heightSegments: 20,\n circOpen: true,\n rCircHeight: function ( u, v, t ) { return Math.sin( 3.14 * v ) + 0.05 },\n unrollCover: function ( v, t ) { return 0.5 * Math.sin( 3.14 * v) - 0.05 },\n moveX: function ( u, v, t ) { return -5 * Math.sin( v ) * Math.cos( v ) },\n moveZ: function ( u, v, t ) { return 4 * v },\n endCircAngle: function ( v, t ) { return 0.83 },\n startCircAngle: function ( v, t ) { return 0.17 },\n scaleHeight: function ( v, t ) { return Math.sqrt( v ) }";
//___________________________________________________________
document.images[1].src = "img/0001_sphere.png";
parameterList[1].value = "//0001 sphere @author hofk \n radius: 50,\n radiusSegments: 36,\n heightSegments: 36,\n rCircHeight: function ( u, v, t ) { return Math.sqrt( 1 - ( 2 * v - 1 ) * ( 2 * v - 1 ) ) }";
//___________________________________________________________
document.images[2].src = "img/0002_knot.png";
parameterList[2].value = "//0002 knot / various knots - http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf \n radius: 4,\n heightSegments: 400,\n centerX: function ( v, t ) { return Math.cos( 4*v *2*Math.PI ) * ( 1 + 0.5 * ( Math.cos( 5*v *2*Math.PI ) + 0.4 * Math.cos( 20*v *2*Math.PI ))) },\n centerY: function ( v, t ) { return Math.sin( 4*v *2*Math.PI ) * ( 1 + 0.5 * ( Math.cos( 5*v *2*Math.PI ) + 0.4 * Math.cos( 20*v *2*Math.PI ))) },\n centerZ: function ( v, t ) { return 0.35 * Math.sin( 15*v *2*Math.PI ) }";
//___________________________________________________________
document.images[3].width = "208";
document.images[3].src = "img/0003_double.png";
parameterList[3].value = "//0003 double @author hofk \n radius: 50,\n height: 25,\n radiusSegments: 40,\n heightSegments: 20,\n withTop: true,\n withBottom: true,\n rCircHeight: function ( u, v, t ) { return 0.2 + ( Math.abs( Math.sin( 6.28 * u ) ) * Math.sin( 3.14 * v ) ) }";
//___________________________________________________________
document.images[4].width = "237";
document.images[4].src = "img/0004_concave.png";
parameterList[4].value = "//0004 concave @author hofk \n radius: 100,\n radiusSegments: 50,\n scaleCircAngle: function ( u, t ) { return 1 / ( 1 + Math.exp( - 12 * ( u - 0.5 ) ) ) },\n moveX: function ( u, v, t ) { return -0.5 * ( 1 + Math.cos( 2 * Math.PI * u ) ) },\n moveZ: function ( u, v, t ) { return -0.12 * Math.sin( 6 * Math.PI * u ) },\n rCircHeight: function ( u, v, t ) { return 0.5 + 0.5 * Math.sqrt( 1 - ( 2 * v - 1 ) * ( 2 * v - 1 ) ) }";
//___________________________________________________________
document.images[5].src = "img/0005_spiked_ball.png";
parameterList[5].value = "//0005 spiked ball @author hofk \n radius: 50,\n radiusSegments: 20,\n heightSegments: 20,\n waffled: true,\n waffleDeep: function ( u, v, t ) { return -10 },\n rCircHeight: function ( u, v, t ) { return Math.sqrt( 1 - ( 2 * v - 1 ) * ( 2 * v - 1 ) ) }";
//___________________________________________________________
document.images[6].width = "238";
document.images[6].src = "img/0006_coil_spring.png";
parameterList[6].value = "//0006 coil spring (moved by t) @author hofk \n radius: 2,\n height: 160,\n radiusSegments: 16,\n heightSegments: 500,\n centerX: function ( v, t ) { return 0.5 * Math.sin( 10 * Math.PI * v ) },\n centerY: function ( v, t ) { return v * ( v + 0.4 * ( 1 + Math.sin( t ) ) ) },\n centerZ: function ( v, t ) { return 0.5 * Math.cos( 10 * Math.PI * v ) }";
//___________________________________________________________
document.images[7].width = "235";
document.images[7].src = "img/0007_washbowl.png";
parameterList[7].value = "//0007 washbowl @author hofk \n radius: 80,\n radiusSegments: 36,\n heightSegments: 36,\n rCircHeight: function ( u, v, t ) { return Math.sqrt( 1 - ( 2 * u - 1 ) * ( 2 * u - 1 ) ) * Math.sqrt( 1 - ( 2 * v - 1 ) * ( 2 * v - 1 ) )},\n moveX: function ( u, v, t ) { return u < 0.1 || 0.9 < u ? 0.4* Math.cos( 6.3 * u ) : 0 },\n moveY: function ( u, v, t ) { return -v * v * v * v }";
//___________________________________________________________
document.images[8].src = "img/0008_streamlined.png";
parameterList[8].value = "//0008 streamlined @author hofk \n radius: 36,\n radiusSegments: 36,\n heightSegments: 36,\n rCircHeight: function ( u, v, t ) { return 6 * v - Math.floor( 6 * v ) },\n moveX: function ( v, t ) { return 4 * ( 0.5 - v ) * ( 0.5 - v ) }";
//___________________________________________________________
document.images[9].src = "img/0009_gramophone.png";
parameterList[9].value = "//0009 gramophone @author hofk \n rCircHeight: function ( u, v, t ) { return 0.25-Math.pow(2, 10 * (v - 1)) * Math.sin((v - 1.1) * 5 * Math.PI) },\n centerX: function ( v, t ) { return 0.25-Math.pow(2, 10 * (v - 1)) * Math.sin((v - 1.1) * 5 * Math.PI) },\n radius: 25,\n height: 50,\n radiusSegments: 16,\n heightSegments: 32,\n withBottom: true";
//___________________________________________________________
document.images[10].height = "219";
document.images[10].src = "img/0010_unknown.png";
parameterList[10].value = "//0010 unknown @author hofk \n radius: 60,\n radiusSegments: 60,\n withTop: true,\n withBottom: true,\n topHeight: function ( u, t ) { return 0.75 + 0.25 * ( 1 + Math.sin( 8 * Math.PI * u ) ) },\n bottomHeight: function ( u, t ) { return -0.75 + 0.25 * ( 1 + Math.cos( 8 * Math.PI * u ) ) }";
//___________________________________________________________
document.images[11].height = "178";
document.images[11].src = "img/0011_curved_cylinder.png";
parameterList[11].value = "//0011 curved cylinder @author hofk \n withBottom: true,\n moveX: function ( u, v, t ) { return Math.exp( -200 * v * v * v * v ) }";
//___________________________________________________________
document.images[12].src = "img/0012_vase.png";
parameterList[12].value = "//0012 vase @author hofk \n radius: 50,\n withTop: true,\n withBottom: true,\n scaleHeight: function ( v, t ) { return Math.sin( 2.6 * v ) },\n rCircHeight: function ( u, v, t ) { return Math.sin( 0.4 + 2.3 * v ) }";
//___________________________________________________________
document.images[13].height = "195";
document.images[13].src = "img/0013_half_twisted.png";
parameterList[13].value = "//0012 half twisted @author hofk \n height: 60,\n withBottom: true,\n endCircAngle: function ( v, t ) { return Math.sqrt(0.19 + 1.28 * v) },\n startCircAngle: function ( v, t ) { return Math.sqrt(0.01 * v ) }";
//___________________________________________________________
document.images[14].width = "216";
document.images[14].src = "img/0014_eight_part.png";
parameterList[14].value = "//0014 eight-part @author hofk \n withTop: true,\n radiusSegments: 40,\n rCircHeight: function ( u, v, t ) { return 0.5 * ( Math.abs( Math.sin( u * 4 * Math.PI ) ) + Math.abs( Math.sin( v * 4 * Math.PI ) ) ) }";
//___________________________________________________________
document.images[15].src = "img/0015_cup_with_spout.png";
parameterList[15].value = "//0015 cup with spout @author hofk \n radius: 32,\n radiusSegments: 36,\n withBottom: true,\n rCircHeight: function ( u, v, t ) { return u < 0.125 ? v * ( 1 + 2 * Math.sqrt( u ) ) + 0.5 : v + 0.5 }";
//___________________________________________________________
document.images[16].width = "270";
document.images[16].src = "img/0016_pencil.png";
parameterList[16].value = "//0016 pencil @author hofk \n radius: 4,\n radiusSegments: 6,\n withTop: true,\n rCircHeight: function ( u, v, t ) { return v < 0.2 ? 5 * v : 1 }";
//___________________________________________________________
document.images[17].width = "177";
document.images[17].src = "img/0017_whip.png";
parameterList[17].value = "//0017 whip @author hofk \n radius: 4,\n heightSegments: 80,\n rCircHeight: function ( u, v, t ) { return Math.exp( -3 * v ) - 0.05 },\n centerX: function ( v, t ) { return 0.1 * Math.cos( 12 * v) },\n centerY: function ( v, t ) { return 1 - Math.exp( -3 * v ) },\n centerZ: function ( v, t ) { return 0.1 * Math.sin( 12 * v) }";
//___________________________________________________________
document.images[18].width = "188";
document.images[18].src = "img/0018_snail.png";
parameterList[18].value = "//0018 snail @author hofk \n radius: 120,\n heightSegments: 80,\n rCircHeight: function ( u, v, t ) { return 1 - v },\n centerX: function ( v, t ) { return 0.1 * Math.cos( 12 * v) },\n centerZ: function ( v, t ) { return 0.1 * Math.sin( 12 * v) },\n moveY: function ( u, v, t ) { return 0.2 * Math.sin( 1.9 * v ) }";
//___________________________________________________________
document.images[19].src = "img/0019_lace_bag_with_chambers.png";
parameterList[19].value = "//0019 lace bag with chambers @author hofk \n radius: 40,\n radiusSegments: 40,\n rCircHeight: function ( u, v, t ) { return Math.sin( v ) },\n bottomHeight: function ( u, t ) { return 0.4 + 0.4 * Math.sin( 8 * Math.PI * u ) }";
//___________________________________________________________
document.images[20].width = "203";
document.images[20].src = "img/0020_curved_shell.png";
parameterList[20].value = "//0020 curved shell @author hofk \n radius: 80,\n radiusSegments: 80,\n rCircHeight: function ( u, v, t ) { return Math.sqrt( v ) },\n topHeight: function ( u, t ) { return 0.8 + 0.2 * Math.sin( 16 * Math.PI * u ) }";
//___________________________________________________________
document.images[21].width = "248";
document.images[21].src = "img/0021_superimposed.png";
parameterList[21].value = "//0021 superimposed @author hofk \n heightSegments: 100,\n centerX: function ( v, t ) { return ( v - 1 ) * ( v - 1) * Math.cos( 6 * Math.PI * v ) }";
//___________________________________________________________
document.images[22].src = "img/0022_goblet.png";
parameterList[22].value = "//0022 goblet @author hofk \n rCircHeight: function ( u, v, t ) { return 1 / ( 1 + Math.exp( - 6 * ( v - 0.5 ) ) ) }";
//__________________________________________________________
document.images[23].height = "175";
document.images[23].src = "img/0023_2.png";
parameterList[23].value = "//0023 2 @author hofk \n centerPoints: [ [ .6, 0, 0 ], [ .5, 0, 0 ], [ .4, 0, 0 ],[ .3, 0, 0 ], [ .2, 0, 0 ],[ .1, .01, 0 ], [ .02, .07, 0 ], [ 0, .1 , 0 ], [ .02, .13, 0 ], [ .1, .21, 0 ], [ .2, .28, 0 ], [ .3, .35 , 0 ], [ .4, .42 , 0 ], [ .5,.5 , 0 ],[ 0.58, .6 , 0 ],[ .6, .7, 0 ], [ .58, .8, 0 ], [ .51, .9, 0 ], [ .44, .95, 0 ], [ .38, .98, 0 ], [ .3, 1, 0 ],[ .2, .99, 0 ], [ .1, .94, 0 ], [ 0, 0.88, 0 ] ]";
//__________________________________________________________
document.images[24].src = "img/0024_heart.png";
parameterList[24].value = "//0024 heart (pulsating by t) @author hofk \n radiusSegments: 50,\n height: 10,\n withTop: true,\n withBottom: true,\n rCircHeight: function ( u, v, t ) { return 20 * ( u - 0.5 ) * ( u - 0.5 ) + 0.3 * Math.sin ( Math.PI * v ) + 0.3 * Math.sin( t ) },\n moveX: function ( u, v, t ) { return -Math.cos( 2 * Math.PI * u ) },\n topHeight: function ( u, t ) { return 0.6 * ( 1.4 + Math.cos ( Math.sin( t ) * Math.sin( t ) * u ) ) }";
//__________________________________________________________
document.images[25].width = "305";
document.images[25].src = "img/0025_wave_with_spikes.png";
parameterList[25].value = "//0025 wave with spikes @author hofk \n style: 'cover',\n waffled: true,\n waffleDeep: function ( u, v, t ) { return -3 },\n radiusSegments: 160,\n heightSegments: 160,\n rCircHeight: function ( u, v, t ) { return 0.33 * Math.cos( 12.6 * u ) * Math.cos ( 12.6 * v ) },\n materialCover: function ( u, v, t ) { return 0.3 + 0.2 * ( 1 + Math.cos( 12.6 * u ) * Math.cos ( 12.6 * v ) ) }";
//__________________________________________________________
document.images[26].src = "img/0026_screwed.png";
parameterList[26].value = "//0026 screwed @author hofk \n radius: 40,\n radiusSegments: 36,\n heightSegments: 36,\n endCircAngle: function ( v, t ) { return Math.exp( 1 - 3 * v ) },\n startCircAngle: function ( v, t ) { return Math.exp( -3 * v ) },\n materialCover: function ( u, v, t ) { return 0.2 + 0.7 * v }";
//__________________________________________________________
document.images[27].width = "206";
document.images[27].src = "img/0027_food_bowl.png";
parameterList[27].value = "//0027 food bowl @author hofk \n radius: 72,\n radiusSegments: 36,\n withTop: true,\n rCircHeight: function ( u, v, t ) { return 0.6 + 0.6 * v },\n scaleHeight: function ( v, t ) { return 1 - ( 0.5 - v ) * ( 0.5 - v ) }";
//__________________________________________________________
document.images[28].width = "249";
document.images[28].src = "img/0028_oval_can.png";
parameterList[28].value = "//0028 oval can @author hofk \n height: 8,\n radiusSegments: 36,\n withTop: true,\n withBottom: true,\n rCircHeight: function ( u, v, t ) { return 0.85 - 0.15 * Math.sin( 4 * Math.PI * u ) }";
//__________________________________________________________
document.images[29].width = "193";
document.images[29].src = "img/0029_water_staircase.png";
parameterList[29].value = "//0029 water staircase @author hofk \n radius: 6,\n circOpen: true,\n centerPoints: [ [ 0, 0, 0 ], [ .1, .1, 0 ], [ .2, 0.01, 0 ], [ .3, .1, 0], [ .4, 0.01, 0 ], [ .5, 0.1, 0 ], [ .6, 0.01, 0 ], [ .7, 0.1, 0 ], [ .8, 0.01, 0 ], [ .9, 0.1, 0 ], [ 1, 0.0, 0 ] ],\n unrollCover: function ( v, t ) { return 1.4 }";
//__________________________________________________________
document.images[30].width = "188";
document.images[30].height = "238";
document.images[30].src = "img/0030_yellow_quad.png";
parameterList[30].value = "//0030_yellow_quad.png @author hofk \n radius: 40,\n radiusSegments: 36,\n withTop: true, \n rCircHeight: function ( u, v, t ) { \n if ( u < 0.2 ){ \n return 0.5 * Math.tan( 6.28 * u * v ); \n } else if ( u >= 0.2 ) { \n return 1.2 * Math.sin( 3.14 * u * v ); \n } \n },\n materialCover: function ( u, v, t ) { return 0.5 },\n quadLine: true,\n quadColor: 0x0000ff,\n materialTop: function ( u, t ) { return 0.5 },\n\n //NOTE! use mesh.add( geometry.quadLine ); ";
//__________________________________________________________
document.images[31].src = "img/0031_quadLine _moved.png";
parameterList[31].value = "//0031_quadLine _moved.png @author hofk \n quadLine: true,\n rCircHeight: function ( u, v, t ) { return 0.6 + Math.abs( ( u - v ) * 2 * Math.sin( t ) ) },\n materialCover: function ( u, v, t ) { return 0.6 }, \n\n //NOTE! use mesh.add( geometry.quadLine ); ";
//__________________________________________________________
document.images[32].src = "img/ .png";
parameterList[32].value = "//0...Here is the right place for your example! \n ";
//__________________________________________________________
// +++++ Do not destroy the following instructions. +++++
//
// Copy the last section, increase the indices and then describe your form in the penultimate section.
// Set the number nnnn, a description and your author tag, possibly with URL.
// If you copy the list of parameters into the string, replace the line break with \n
// Copy your image to the img directory and use the pattern from above (fourDigits_name.type) for the name.
// Take png (or jpg) images up to approximately 100KByte.
//
// If the image is not square, change the height or width in your section:
// document.images [index].width = "value" or document.images [index].height = "value"
// See examples index 3 and 10, standard is 160 x 160.
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++
</script>
</html>