Taking The Web
off the screen
@charlotte_dann
charlottedann.com
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;
}
.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: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: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;
}
.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;
}
.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;
}
Pen Plotting
Test everything on crappy paper first
Use canvas2svg for
easy vector outputs from canvas drawings
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()
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')Laser Cutting
abstractpuzzl.es
abstractpuzzl.es
Get access at a Hackspace, university, or pay-by-the-hour facilities
Figure out the right settings with material testing first
3D Printing
Generative Gestaltung
You can export STL
files from ThreeJS
hexatope.io
Reaction Diffusion Coral Cup,
Nervous System
Mass customisation, unmade
3d-printed glass,
mit glass lab
thank you
@charlotte_dann
charlottedann.com
Beyond Tellerrand Berlin 2019 - Taking The Web Off The Screen
By Charlotte Dann
Beyond Tellerrand Berlin 2019 - Taking The Web Off The Screen
Most web developers don’t get the joyous experience of touching and feeling the things they’ve created. Interest in generative art on the web is at an all-time high, but predominantly confined to screens and pixels, without much room for tactility. Through her unwavering enthusiasm for making physical things, Charlotte will demonstrate a myriad of ways you can use your coding prowess to make art in the physical realm.
