Social Exploration of Design Spaces

Christopher Carlson, Wolfram Research

Join the Conversation #WolframTechConf

Discussion

What could you imagine using a design space site for?

Can you imagine any interesting design spaces?

Have you seen a design space site elsewhere?

A Design Space

Manipulate[
Graphics[
With[{th=(1)/(2n-1),f=RoundStarPolygon,c={0,0}},
Table[Rotate[{
{Black,f[c(i/(2n-1)),Abs[1-(1)(i/(2n-1))],1-sh,tw °,npts,res]},
{White, f[c(i/(2n-1))+
{0,d(-th + 2 th((i+1)/(2n-1)))},Abs[1-(1)((i+1)/(2n-1))],1-sh,tw °,npts,res]}
},360° rot(i/(2n-1)),{0,0}],{i,0,2n-1,2}]
],PlotRange->1,ImageSize->500],
Pane[Grid[{
{Item[Style["splat",Bold],Alignment->Left],""},
{"points",Control[{{npts,13,""},2,600,1.}]},
{"sharpness",Control[{{sh,.25,""},0,1}]},
{"resolution",Control[{{res,600,""},3,600,1.}]},
{"",""},
{"",""},
{Item[Style["stacking",Bold],Alignment->Left],""},
{"count",Control[{{n,1,""},1,200,1.}]},
{"displacement",Control[{{d,0,""},-3,3}]},
{"rotation",Control[{{rot,0,""},0,10}]}
},Alignment->{{Right,Left}},Dividers->{None,{False,False,False,False,False,GrayLevel[.7],False,False,False,False,False,False,False}}],
ImageMargins->{10{1,1},{0,0}}],
SaveDefinitions->True,ControlPlacement->Left,TrackedSymbols->True,
Bookmarks->{
"Round Star":>{d=0,npts=13.,n=1,res=600.,rot=0,sh=0.25},
"Ink Splat":>{d=-0.35,ir=0,is=290,npts=100,n=1,res=64,rot=0,sh=0.5,tw=0},
"Sea Creature 1":>{d=-0.7,ir=0,is=290,npts=241,n=39,res=98,rot=4.66,sh=0.178,tw=1.72},
"Sea Creature 2":>{d=-0.7,ir=0.33,is=290,npts=237,n=39,res=98,rot=4.6,sh=0.178,tw=1.72},
"Sea Creature 3":>{d=-1,ir=0,is=290,npts=435,n=39,res=282,rot=1.58,sh=0.146,tw=1.72}
}
]

A Design Space Proposal

Proposal

Varieties of Design Spaces

Varieties of Design Spaces: Dimensioned Structures

https://beastgrip.com/pages/user-guide

Varieties of Design Spaces: Architectural

http://demonstrations.wolfram.com/AlgorithmicArchitectureWithCellularAutomata/

Manipulate[
If[bs===Sphere,o=0];
With[{u=Part[CellularAutomaton[{rn,{2,{{2,2,2},{2,1,2},{2,2,2}}},{1,1}},{{Table[1,{init}]},0},{t,All,All}],1+Accumulate[IntegerDigits[c,2,t]]]},
With[{
g=Graphics3D[{Opacity[1-o],EdgeForm[If[se,Black,None]],bs[{#2,#3,-#1}]&@@@Position[u,1]},PlotRange->{(2t+3){0,1},(2t+3+init){0,1},{-t-1,0}},ImageSize->400,Method->{"SpherePoints"->{20,15}}]},
If[plan,Grid[{{g,Column[ArrayPlot[Sqrt[Total[#]],ImageSize->120]&/@{u,Transpose[u],Transpose[u,{2,3,1}]}]}}],g]]],
{{rn,121268,"rule number"},{121268,124844,124868,164124,174826,174832},SetterBar},
{{c,1,"choice number"},1,2^20,1},
{{init,5,"size of initial block"},2,25,1,Appearance->"Labeled"},
{{t,6,"steps of evolution"},1,15,1,Appearance->"Labeled"},Delimiter,
{{bs,Cuboid,"shape of blocks"},{Cuboid->"cubes",Sphere->"spheres"}},{{o,0,"transparency"},0,1,Enabled->(bs===Cuboid)},{{plan,True,"show plan & elevations"},{True,False}},{{se,True,"show edges"},{True,False}}, ControlPlacement->Left,AutorunSequencing->{1,3,6}]

Varieties of Design Spaces: Logos

Manipulate[
Graphics[{
Table[Rotate[Rotate[Inset[Style[c,s],{x,0}],a,{x,0}],i 2 π/n,{0,0}],{i,0,n-1}]
},PlotRange->1],
{{c,"a","character"},CharacterRange["a","z"],Slider},
{{n,3,"symmetry"},2,10,1},
{{x,.46,"x"},-1,1},
{{s,283,"size"},12,400,1},
{{a,5.9,"rotation"},0,2π},
Bookmarks->{"k4":>{a=5.9,c="k",n=4,s=176,x=0.405}}
]

Varieties of Design Spaces: Art

http://demonstrations.wolfram.com/PaintYourOwnRothko/

Manipulate[
Switch[choose,
1,{color1,color2}={clr1,clr2},
2,{color1,color2}={clr3,clr4},
3,{color1,color2}={clr5,clr6}
];
Graphics[{
Scale[Translate[{ColorData[If[(choose==1),"SolarColors",If[(choose==2),"DeepSeaColors","FuchsiaTones"]]][color1],Scale[pf1,10]},pt],{1,scale1}],
Scale[Translate[{ColorData[If[(choose==1),"SolarColors",If[(choose==2),"DeepSeaColors","FuchsiaTones"]]][color2],Scale[pf2,10]},pt2],{1,scale2}],
If[locate,{{White,Table[Circle[pt,rings],{rings,0,.8,.3}]},
{White,Table[Circle[pt2,rings],{rings,0,.8,.3}]}}]
},Axes->False,PlotRange->30,Background->Lighter@ColorData[If[(choose==1),"SolarColors",If[(choose==2),"DeepSeaColors","FuchsiaTones"]]][color2],ImageSize->{360}],
Dynamic[Switch[choose,1,
Row[{
Row[{
"       color 1 ",
Grid[{{
(* ColorSetter hidden under Rectangle of desired color *)
Dynamic@Overlay[{
ColorSetter[ColorData["SolarColors"][clr1],ImageSize->{19,19}],
Graphics[{ColorData["SolarColors"][clr1],Rectangle[]},ImageSize->19,ImagePadding->0]},{1,2},1,Alignment->Center],
(* Slider hidden under Image of ColorData Gradient *)
Dynamic@Overlay[{
Slider[Dynamic[clr1],{0,1},ImageSize->{149,19}],
Show[ColorData["SolarColors","Image"],ImageSize->150]
},{1,2},1,Alignment->Center]
}},Spacings->0.1,Alignment->Center]
}],
Row[{
"      color 2 ",
Grid[{{
(* ColorSetter hidden under Rectangle of desired color *)
Dynamic@Overlay[{
ColorSetter[ColorData["SolarColors"][clr2],ImageSize->{19,19}],
Graphics[{ColorData["SolarColors"][clr2],Rectangle[]},ImageSize->19,ImagePadding->0]},{1,2},1,Alignment->Center],
(* Slider hidden under Image of ColorData Gradient *)
Dynamic@Overlay[{
Slider[Dynamic[clr2],{0,1},ImageSize->{149,19}],Show[ColorData["SolarColors","Image"],ImageSize->150]
},{1,2},1,Alignment->Center]
}},Spacings->0.1,Alignment->Center]
}]
}],
2,Row[{
Row[{
"       color 1 ",
Grid[{{
(* ColorSetter hidden under Rectangle of desired color *)
Dynamic@Overlay[{
ColorSetter[ColorData["DeepSeaColors"][clr3],ImageSize->{19,19}],
Graphics[{ColorData["DeepSeaColors"][clr3],Rectangle[]},ImageSize->19,ImagePadding->0]},{1,2},1,Alignment->Center],
(* Slider hidden under Image of ColorData Gradient *)
Dynamic@Overlay[{
Slider[Dynamic[clr3],{0,1},ImageSize->{149,19}],Show[ColorData["DeepSeaColors","Image"],ImageSize->150]
},{1,2},1,Alignment->Center]
}},Spacings->0.1,Alignment->Center]
}],
Row[{
"      color 2 ",
Grid[{{
(* ColorSetter hidden under Rectangle of desired color *)
Dynamic@Overlay[{
ColorSetter[ColorData["DeepSeaColors"][clr4],ImageSize->{19,19}],
Graphics[{ColorData["DeepSeaColors"][clr4],Rectangle[]},ImageSize->19,ImagePadding->0]},{1,2},1,Alignment->Center],
(* Slider hidden under Image of ColorData Gradient *)
Dynamic@Overlay[{
Slider[Dynamic[clr4],{0,1},ImageSize->{149,19}],Show[ColorData["DeepSeaColors","Image"],ImageSize->150]
},{1,2},1,Alignment->Center]
}},Spacings->0.1,Alignment->Center]
}]
}],
3,Row[{
Row[{
"       color 1 ",
Grid[{{
(* ColorSetter hidden under Rectangle of desired color *)
Dynamic@Overlay[{
ColorSetter[ColorData["FuchsiaTones"][clr5],ImageSize->{19,19}],
Graphics[{ColorData["FuchsiaTones"][clr5],Rectangle[]},ImageSize->19,ImagePadding->0]},{1,2},1,Alignment->Center],
(* Slider hidden under Image of ColorData Gradient *)
Dynamic@Overlay[{
Slider[Dynamic[clr5],{0,1},ImageSize->{149,19}],Show[ColorData["FuchsiaTones","Image"],ImageSize->150]
},{1,2},1,Alignment->Center]
}},Spacings->0.1,Alignment->Center]
}],
Row[{
"      color 2 ",
Grid[{{
Dynamic@Overlay[{
ColorSetter[ColorData["FuchsiaTones"][clr6],ImageSize->{19,19}],
Graphics[{ColorData["FuchsiaTones"][clr6],Rectangle[]},ImageSize->19,ImagePadding->0]},{1,2},1,Alignment->Center],
(* Slider hidden under Image of ColorData Gradient *)
Dynamic@Overlay[{
Slider[Dynamic[clr6],{0,1},ImageSize->{149,19}],Show[ColorData["FuchsiaTones","Image"],ImageSize->150]
},{1,2},1,Alignment->Center]
}},Spacings->0.1,Alignment->Center]
}]
}]
]],
Row[{
Control@{{choose,1,"       choose"},{1->"early rothko",2->"late rothko",3->"rothko chapel"},PopupMenu,ImageSize->160},
Control@{{locate,True,"        show locators"},{True,False},Checkbox},
}],
Row[{
Control@{{scale1,.8,"       size 1"},.2,2,Slider,ImageSize->175},
Control@{{scale2,1.2,"     size 2"},.2,2,Slider,ImageSize->175}
}],
Control@{{pt,{0,15}},{-2,-30},{2,30},Locator,Appearance->None},
Control@{{pt2,{0,-14}},{-2,-30},{2,30},Locator,Appearance->None},
{{color1,.8}, ControlType-> None},
{{color2,.44}, ControlType-> None},
{{clr1,.8}, ControlType-> None},
{{clr2,.44}, ControlType-> None},
Alignment->Center,
Initialization:>{
{
color1=.8;
color2=.44;
clr1=.8;
clr2=.44;
p=Graphics[Pink,Disk[]];
{pf1,pf2}=Table[Module[
{poly},
poly=Polygon[
Join[
Table[{dx,2+RandomReal[{-1,1}]/20},{dx,-2,2,0.1}],
Table[{2+RandomReal[{-1,1}]/20,2-dy},{dy,0,2,0.1}],
Table[{2-dx,0+RandomReal[{-1,1}]/20},{dx,0,4,0.1}],
Table[{-2+RandomReal[{-1,1}]/20,dy},{dy,0,2,0.1}]
]
];
{Table[{Opacity[n/.8],Scale[poly,1+n]},{n,0,.3,0.02}],poly}
],{2}];
}
}
]

Varieties of Design Spaces: Art

http://demonstrations.wolfram.com/OpArtWithAnOpenFlexibleFourCube/

Manipulate[With[{e1={1,0,0},e2={Cos[th1],Sin[th1],0},e3={Sin[fi]Cos[th2],Sin[fi]Sin[th2],Cos[fi]}},With[{v1=Normalize[Cross[e2,e1]],v2=Normalize[Cross[e1,e3]],v3=Normalize[Cross[e3,e2]],poli={{{1,4,3,2},{1,2,6,5},{2,3,7,6},{5,6,7,8},{4,8,7,3},{1,5,8,4}},{{0,0,0}-(e1+e2+e3)/2,e1-(e1+e2+e3)/2,e1+e2-(e1+e2+e3)/2,e2-(e1+e2+e3)/2,e3-(e1+e2+e3)/2,e1+e3-(e1+e2+e3)/2,e1+e2+e3-(e1+e2+e3)/2,e2+e3-(e1+e2+e3)/2}}},With[{poli1={{{1,5,6,2},{2,6,7,3},{4,3,7,8},{1,4,8,5}},{poli[[2,1]],poli[[2,2]],poli[[2,3]],poli[[2,4]],poli[[2,1]]+v1,poli[[2,2]]+v1,poli[[2,3]]+v1,poli[[2,4]]+v1}},poli2={{{1,5,6,2},{2,6,7,3},{4,3,7,8},{1,4,8,5}},{poli[[2,1]],poli[[2,2]],poli[[2,6]],poli[[2,5]],poli[[2,1]]+v2,poli[[2,2]]+v2,poli[[2,6]]+v2,poli[[2,5]]+v2}},poli3={{{1,5,6,2},{2,6,7,3},{4,3,7,8},{1,4,8,5}},{poli[[2,1]],poli[[2,4]],poli[[2,8]],poli[[2,5]],poli[[2,1]]+v3,poli[[2,4]]+v3,poli[[2,8]]+v3,poli[[2,5]]+v3}}},Graphics3D[{Opacity[op],Texture[slike[[pat]]],Polygon[Map[poli1[[2,#]]&,poli1[[1]]],VertexTextureCoordinates->Table[vtc,{4}]],Polygon[Map[poli2[[2,#]]&,poli2[[1]]],VertexTextureCoordinates->Table[vtc,{4}]],Polygon[Map[poli3[[2,#]]&,poli3[[1]]],VertexTextureCoordinates->Table[vtc,{4}]],Translate[Polygon[Map[poli1[[2,#]]&,poli1[[1]]],VertexTextureCoordinates->Table[vtc,{4}]],(e3-v1)],Translate[Polygon[Map[poli2[[2,#]]&,poli2[[1]]],VertexTextureCoordinates->Table[vtc,{4}]],(e2-v2)],Translate[Polygon[Map[poli3[[2,#]]&,poli3[[1]]],VertexTextureCoordinates->Table[vtc,{4}]],(e1-v3)]},SphericalRegion->True,Boxed->False,ImageSize->{360},ViewAngle->vw.08Pi,PlotRange->2,Lighting->l,Background->GrayLevel[0.8]]]]],
Column[{
Control@{{th1,3.14/2,"α"},Round[3.14159/2-1.2,.01],Round[3.14159/2+1.2,.01],.01,ImageSize->Tiny,Appearance->"Labeled"},
Control@{{fi,0,"β"},0.,Round[3.14159/3.,.01],.01,ImageSize->Tiny,Appearance->"Labeled"},
Control@{{th2,0,"γ"},-.5,1.,.01,Enabled->fi>0.1,ImageSize->Tiny,Appearance->"Labeled"}
},Alignment->Left],
"(β > 0.1)",
Delimiter,"op art pattern",{{pat,1,""},Range[6]},Delimiter,
"",
"opacity",{{op,1,""},0,1,ImageSize->Tiny},
"",
"view angle",{{vw,1,""},.1,3,ImageSize->Tiny},ControlPlacement->Left,Initialization:>(vtc={{0,0},{1,0},{1,1},{0,1}};slike={,,,,,};l={{"Point",Red,{0,0,0}},{"Point",LightBlue,3{1,1,1}},{"Point",Green,-3{1,1,1}}};)]

Varieties of Design Spaces: Animations

http://community.wolfram.com/groups/-/m/t/890911

Manipulate[
DynamicModule[{cols,grid},cols=RGBColor/@{"#B463A6","#00C3FF","#3B475E"};
Animate[grid=Table[{Blend[cols[[;;-2]],Haversine[Clip[2 #,{0,2 π}]]],RotationMatrix[π/2 Haversine[Clip[#,{0,π}]]].{x,y}}&[t-π Norm[{x,y}]/Sqrt[50]],{x,-r,r},{y,-r,r}];
Graphics[{Table[{grid[[i+r+1,j+r+1,1]],Disk[grid[[i+r+1,j+r+1,2]],.1]},{i,-r,r},{j,-r,r}],Thickness[.005],Line[#[[;;,;;,2]],VertexColors->#[[;;,;;,1]]]&[Table[grid[[i+r+1]],{i,-r,r}]],Line[#[[;;,;;,2]],VertexColors->#[[;;,;;,1]]]&[Table[grid[[;;,j+r+1]],{j,-r,r}]]},PlotRange->r-3,ImageSize->540,Background->cols[[-1]]],{t,0,2 π}]],
{{r,8},2,16,1}
]

Varieties of Design Spaces: Animations

Manipulate[
Animate[
Graphics[{
Thickness[th],CapForm["Butt"],
Circle[{0,0},1,{0,90°}+2 π  f1 t],
Circle[{0,0},.7,{0,90°}+2 π  f2 t],
Circle[{0,0},.4,{0,90°}+2 π  f3 t]
},PlotRange->1.3],
{t,0,∞},AnimationRate->r
],
{{f1,1},0,5,.25},
{{f2,2},0,5,.25},
{{f3,4},0,5,.25},
{{th,.05},0,.5},
{{r,.1},0,1}
]

Varieties of Design Spaces: Sound

Manipulate[
AudioFade[AudioGenerator[{"Sin",500+mindex mf*AudioGenerator[{"Sin",mf}]}],{.05,.95}],
{{mf,50,"Modulation Frequency"},10,300},
{{mindex,0,"Modulation Index"},0.,10.},
ContinuousAction->False]

Varieties of Design Spaces: Music

http://demonstrations.wolfram.com/ModularMusic/

Manipulate[Sound[SoundNote[#,speed, "Polysynth"]&/@Table[Round[Mod[(x/einh)^exp,mod]],{x,1,length/speed,5}]],
{{einh,2,"unit"},{2,3,4,5,6,7,8,9}},
{{exp,3.5,"exponent"},{1.5,2,2.5,3,3.5,4.5,5,5.5,6}},
{{mod,60,"modulo value"},2,60,1,   Appearance -> "Labeled"},
{{speed,.15},.01,1},
{{length,10},1,20}
]

Material Outputs

Material Outputs

Staying Power?

Staying Power?

Discussion

What could you imagine using a design space site for?

Can you imagine any interesting design spaces?

Have you seen a design space site elsewhere?