Taking The Web
off the screen
@charlotte_dann
Why use computers for art?
Physical
Design
Build
Test
Learn
CSS Generative Art
.grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.grid__item {
width: 100%;
height: 100%;
background: white;
position: relative;
overflow: hidden;
}
.grid__item:before {
content: '';
display: block;
position: absolute;
width: 200%;
height: 200%;
border-radius: 50%;
background: black;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6720076/pasted-from-clipboard.png)
.grid__item:before {
content: '';
display: block;
position: absolute;
width: 200%;
height: 200%;
border-radius: 50%;
background: black;
}
.grid__item:nth-child(2n):before {
right: 0;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6720102/pasted-from-clipboard.png)
.grid__item:before {
content: '';
display: block;
position: absolute;
width: 200%;
height: 200%;
border-radius: 50%;
background: black;
}
.grid__item:nth-child(3n):before {
right: 0;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6720097/pasted-from-clipboard.png)
.grid__item:before {
content: '';
display: block;
position: absolute;
width: 200%;
height: 200%;
border-radius: 50%;
background: black;
}
.grid__item:nth-child(3n):before {
right: 0;
}
.grid__item:nth-child(2n):before {
bottom: 0;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6720115/pasted-from-clipboard.png)
.grid__item:before {
content: '';
display: block;
position: absolute;
width: 200%;
height: 200%;
border-radius: 50%;
background: black;
}
.grid__item:nth-child(2n):before {
right: 0;
}
.grid__item:nth-child(3n):before {
bottom: 0;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6720125/pasted-from-clipboard.png)
.grid__item:before {
content: '';
display: block;
position: absolute;
width: 200%;
height: 200%;
border-radius: 50%;
background: black;
}
.grid__item:nth-child(3n):before {
right: 0;
}
.grid__item:nth-child(4n):before {
bottom: 0;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6720130/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6720180/IMG_20190705_102639.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6724715/IMG_20180628_153855.jpg)
Pen Plotting
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6737065/penplot05.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6737066/penplot06.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6737114/penplot07.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6725027/tip.jpg)
Test everything on crappy paper first
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6741349/penplot10.jpg)
Use canvas2svg for
easy vector outputs from canvas drawings
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6725027/tip.jpg)
const size = 1000
const canvas = document.createElement('canvas')
canvas.width = size
canvas.height = size
document.body.appendChild(canvas)
const context = canvas.getContext('2d')
context.strokeStyle = '#fff'
context.lineWidth = 5
context.lineCap = 'round'
const u = size / 20
context.beginPath()
for (let i = 0; i < 100; i++) {
const x = i%10
const y = Math.floor(i/10)
const rotations = (i%3 === 0 && 1) + (i%4 === 0 && 2)
context.save()
context.translate(u+x*u*2, u+y*u*2)
context.rotate(rotations * Math.PI / 2)
context.moveTo(-u, u)
context.quadraticCurveTo(-u, -u, u, -u)
context.restore()
}
context.stroke()
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6737132/download__22_.png)
const size = 1000
import saveAs from 'file-saver'
import C2S from 'canvas2svg'
const context = new C2S(size, size)
context.strokeStyle = '#fff'
context.lineWidth = 5
context.lineCap = 'round'
const u = size / 20
context.beginPath()
for (let i = 0; i < 100; i++) {
const x = i%10
const y = Math.floor(i/10)
rotations = (i%3 === 0 && 1) + (i%4 === 0 && 2)
context.save()
context.translate(u+x*u*2, u+y*u*2)
context.rotate(rotations * Math.PI / 2)
context.moveTo(-u, u)
context.quadraticCurveTo(-u, -u, u, -u)
context.restore()
}
context.stroke()
const blob = new Blob([context.getSerializedSvg()], {
type: 'text/plain',
})
saveAs(blob, 'pattern.svg')
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6737132/download__22_.png)
Laser Cutting
abstractpuzzl.es
abstractpuzzl.es
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6741437/penplot11.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6742366/2013-11-08_12.16.02__1_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6742368/etch.jpg)
Get access at a Hackspace, university, or pay-by-the-hour facilities
Figure out the right settings with material testing first
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6725027/tip.jpg)
3D Printing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5443924/pasted-from-clipboard.png)
Generative Gestaltung
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5443979/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6723799/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5447523/rotatec2-1_1.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5447527/rotatec3_1.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5447548/rotatec4_1.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5447549/rotatec5_1.gif)
You can export STL
files from ThreeJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6725027/tip.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5470974/form2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744832/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744836/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744846/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744853/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744862/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5470974/form2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744832/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744836/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744846/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744853/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744862/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5470974/form2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744832/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744836/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744846/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744853/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744862/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744868/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5470974/form2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744832/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744836/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744846/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744853/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744862/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6744868/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5471087/unnamed__2_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5471096/unnamed__3_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5476325/Screenshot_2017-11-02_10.11.27.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5476480/ends01.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5476485/ends06.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5476487/ends07.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5476479/ends03.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5476482/ends04.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5476478/ends02.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5481394/DSC_0020_3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5490237/IMG_7612.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5490238/IMG_7677.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5481341/edit03.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/5481344/passb02.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6747517/coralCup.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6747554/pasted-from-clipboard.png)
Reaction Diffusion Coral Cup,
Nervous System
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6747565/pasted-from-clipboard.png)
Mass customisation, unmade
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6747639/unmade.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6747643/farfetch-interaction-2.gif)
3d-printed glass,
mit glass lab
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6747576/GIF-glass-3D-printing.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6747582/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/956191/images/6747584/pasted-from-clipboard.png)
thank you
@charlotte_dann
FFConf 2019 - Taking The Web Off The Screen
By Charlotte Dann
FFConf 2019 - Taking The Web Off The Screen
The rise of generative art has brought a whole new wave of creativity to the web; this talk is about the myriad of ways we can use all that coding knowledge to make cool art in the physical realm.
- 1,238