Skip to content

Instantly share code, notes, and snippets.

@ollicle

ollicle/SketchSystems.spec

Last active October 26, 2018 10:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ollicle/9bacbc953d93df7c0062973807135890 to your computer and use it in GitHub Desktop.
Save ollicle/9bacbc953d93df7c0062973807135890 to your computer and use it in GitHub Desktop.
Download ZIP
Blot animations
Raw
SketchSystems.spec
Blot animations
White square
center tap -> Black dot
top left tap -> Top left arc
top right tap -> Top right arc
bottom left tap -> Bottom left arc
bottom right tap -> Bottom right arc
Black dot
center tap -> Black square
top left tap -> Bottom right dot
top right tap -> Bottom left dot
bottom left tap -> Top right dot
bottom right tap -> Top left dot
Black square
center tap -> White dot
top left tap -> Bottom right dot
top right tap -> Bottom left dot
bottom left tap -> Top right dot
bottom right tap -> Top left dot
White dot
center tap -> White square
top left tap -> Top left arc
top right tap -> Top right arc
bottom left tap -> Bottom left arc
bottom right tap -> Bottom right arc
Top left arc
center tap -> White dot
top left tap -> Top left corner
top right tap -> Top right arc
bottom left tap -> Bottom left arc
bottom right tap -> White square
Top right arc
center tap -> White dot
top left tap -> Top left arc
bottom right tap -> Bottom right arc
top right tap -> Top right corner
bottom left tap -> White square
Bottom right arc
center tap -> White dot
top left tap -> White square
top right tap -> Top right arc
bottom left tap -> Bottom left arc
bottom right tap -> Bottom right corner
Bottom left arc
center tap -> White dot
top left tap -> Top left arc
top right tap -> White square
bottom left tap -> Bottom left corner
bottom right tap -> Bottom right arc
Top left dot
center tap -> Black dot
top left tap -> Black square
top right tap -> Bottom left dot
bottom right tap -> Top left corner
bottom left tap -> Top right dot
Top right dot
center tap -> Black dot
bottom left tap -> Top right corner
top left tap -> Bottom right dot
bottom right tap -> Top left dot
top right tap -> Black square
Bottom left dot
center tap -> Black dot
top right tap -> Bottom left corner
top left tap -> Bottom right dot
bottom left tap -> Black square
bottom right tap -> Top left dot
Bottom right dot
center tap -> Black dot
top left tap -> Bottom right corner
top right tap -> Bottom left dot
bottom right tap -> Black square
bottom left tap -> Top right dot
Top left corner*
center tap -> Bottom right corner
top left tap -> Top left dot
top right tap -> Top right corner
bottom right tap -> Top left arc
bottom left tap -> Bottom left corner
Top right corner
center tap -> Bottom left corner
top right tap -> Top right dot
top left tap -> Top left corner
bottom left tap -> Top right arc
bottom right tap -> Bottom right corner
Bottom left corner
center tap -> Top right corner
top left tap -> Top right corner
top right tap -> Bottom left arc
bottom left tap -> Bottom left dot
bottom right tap -> Bottom right corner
Bottom right corner
center tap -> Top left corner
top left tap -> Bottom right arc
top right tap -> Top right corner
bottom right tap -> Bottom right dot
bottom left tap -> Bottom left corner
Raw
SketchSystems_prototype.js
const makeClass = function(name) {
return name.split(' ').join('-').toLowerCase();
};
const shapes = {
'White square': 'linear-gradient(white, white)',
'Black square': 'linear-gradient(black, black)',
'Black dot': 'radial-gradient(black 0%, black 40%, white 40%, white)',
'White dot': 'radial-gradient(white 0%, white 40%, black 40%, black)',
// 'Top left arc': 'radial-gradient(circle farthest-side at bottom right, white 0%, white 100%, black 100%, black)',
// 'Top right arc': 'radial-gradient(circle farthest-side at bottom left, white 0%, white 100%, black 100%, black)',
// 'Bottom right arc': 'radial-gradient(circle farthest-side at top left, white 0%, white 100%, black 100%, black)',
// 'Bottom left arc': 'radial-gradient(circle farthest-side at top right, white 0%, white 100%, black 100%, black)',
'Top left corner': 'linear-gradient(to top left, white, white 50%, black 50%, black)',
'Top right corner': 'linear-gradient(to top right, white, white 50%, black 50%, black)',
'Bottom left corner': 'linear-gradient(to bottom left, white, white 50%, black 50%, black)',
'Bottom right corner': 'linear-gradient(to bottom right, white, white 50%, black 50%, black)',
// 'Top left dot': 'radial-gradient(circle farthest-side at top left, black 0%, black 100%, white 100%, white)',
// 'Top right dot': 'radial-gradient(circle farthest-side at top right, black 0%, black 100%, white 100%, white)',
// 'Bottom right dot': 'radial-gradient(circle farthest-side at bottom right, black 0%, black 100%, white 100%, white)',
// 'Bottom left dot': 'radial-gradient(circle farthest-side at bottom left, black 0%, black 100%, white 100%, white)',
};
function render(model){
let current_state_name = model.active_states[0].name;
return $('div',{style:{ padding: '2rem', textAlign: 'center'}},
$('style',`
/*
@keyframes dot_topLeftDot_to_topLeftCorner {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
*/
button {
background-color: transparent;
border: none
}
.over-button {
position: absolute;
width: 50%;
height: 50%;
}
.blot-box {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.black-dot {
position: absolute;
top: 0;
left: 0;
background-color: rgba(50,0,0,0.75);
border-radius: 50%;
height: 100%;
width: 100%;
transition: transform 2s ease-in-out;
}
.white-dot {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,0,1);
border-radius: 50%;
height: 100%;
width: 100%;
transition: transform 2s ease-in-out;
}
.white-square .black-dot {
transform: scale(0.0001);
}
.black-square .black-dot {
transform: scale(2);
}
.black-dot .black-dot {
transform: scale(0.6);
}
.white-dot .black-dot {
transform: scale(0.6);
}
.top-right-arc .black-dot {
transform: scale(1.5);
}
.top-right-arc .white-dot {
transform: scale(2) translate(-25%, 25%);
}
.top-left-arc .black-dot {
transform: scale(1.5);
}
.top-left-arc .white-dot {
transform: scale(2) translate(25%, 25%);
}
.bottom-right-arc .black-dot {
transform: scale(1.5);
}
.bottom-right-arc .white-dot {
transform: scale(2) translate(-25%, -25%);
}
.bottom-left-arc .black-dot {
transform: scale(1.5);
}
.bottom-left-arc .white-dot {
transform: scale(2) translate(25%, -25%);
}
.top-left-dot .black-dot {
transform: scale(2) translate(-25%, -25%);
}
.top-left-dot .white-dot {
transform: scale(2) rotate(45deg) scaleX(0) translateX(-35.5%);
}
.top-right-dot .black-dot {
transform: scale(2) translate(25%, -25%);
}
.top-right-dot .white-dot {
transform: scale(2) rotate(-45deg) scaleX(0) translateX(-35.5%);
}
.bottom-left-dot .black-dot {
transform: scale(2) translate(-25%, 25%);
}
.bottom-left-dot .white-dot {
transform: scale(2) rotate(-45deg) scaleX(0) translateX(-35.5%);
}
.bottom-right-dot .black-dot {
transform: scale(2) translate(25%, 25%);
}
.bottom-right-dot .white-dot {
transform: scale(2) rotate(45deg) scaleX(0) translateX(-35.5%);
}
.top-left-corner .black-dot {
transform: scale(2) rotate(45deg) scaleX(1) translateX(-35.5%);/**/
transform: scale(2) rotate(45deg) scaleX(0) translateX(-35%);/**/
}
.top-left-corner .white-dot {
transform: scale(2) rotate(45deg) scaleX(0) translateX(-35.5%);
}
.top-right-corner .black-dot {
transform: scale(2) rotate(-45deg) scaleX(1) translateX(-35.5%);/**/
transform: scale(2) rotate(-45deg) scaleX(0) translateX(-35%);/**/
}
.top-right-corner .white-dot {
transform: scale(2) rotate(-45deg) scaleX(0) translateX(-35.5%);
}
.bottom-right-corner .black-dot {
transform: scale(2) rotate(-45deg) scaleX(1) translateX(-35.5%);/**/
transform: scale(2) rotate(-45deg) scaleX(0) translateX(-35%);/**/
}
.bottom-right-corner .white-dot {
transform: scale(2) rotate(-45deg) scaleX(0) translateX(-35.5%);
}
`),
$("div",
{
style:
{
position: 'relative',
display: 'flex',
textAlign: 'center',
lineHeight: '200px',
width: '200px',
margin: 'auto',
height: '200px',
backgroundImage: `${shapes[current_state_name]}`,
boxShadow: '0 2px 20px #999'
}
},
$('div',{
'class': `blot-box ${makeClass(current_state_name)}`
},
$('div', {'class':'black-dot'}),
$('div', {'class':'white-dot'})
),
$('button',
{
'class': 'over-button',
style: {
top: '0',
left: '0',
},
onClick: function(){
model.emit('top left tap');
}
},
''
),
$('button',
{
'class': 'over-button',
style: {
top: '0',
right: '0',
},
onClick: function(){
model.emit('top right tap');
}
},
''
),
$('button',
{
'class': 'over-button',
style: {
bottom: '0',
right: '0',
},
onClick: function(){
model.emit('bottom right tap');
}
},
''
),
$('button',
{
'class': 'over-button',
style: {
bottom: '0',
left: '0',
},
onClick: function(){
model.emit('bottom left tap');
}
},
''
),
$('button',
{
style: {
flex: 'auto',
transform: 'rotate(45deg) scale(0.7)'
},
onClick: function(){
model.emit('center tap');
}
},
''
),
),
$('p',
`${current_state_name}`)
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment