Commit bf285554 by PLN (Algolia)

hydra: checkpoint

parent 13861a9a
// s0.initImage("/home/pln/Work/Hydra/ELEMENT/taylor-van-riper-yQorCngxzwI-unsplash.jpg")
s0.initImage("https://images.unsplash.com/photo-1492496913980-501348b61469?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
s1.initImage("https://images.unsplash.com/photo-1613036582025-ba1d4ccb3226?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
s0.initImage("/home/pln/Work/Hydra/ELEMENT/ricardo-gomez-angel--98jVaVuGv0-unsplash.jpg")
src(s0)
// .rotate(() => 0.3 + time / 2)
.modulate(src(o2).scale(2))
.out(o3)
src(o3).scale(0.9)
.mult(src(s1)
.scale(() => 1 + 0.4 * Math.sin(time / 12))
// .modulate(voronoi(10,0.04))
)
.out(o2)
src(o2)
.mask(voronoi(5, .1))
.scale(() => 1 + 0.1 * a.fft[0])
// .thresh(() => 0.6 + 0.4 * a.fft[2])
// .add(src(s0)
// .scale(() => 9 + .4 * a.fft[0]))
// .rotate(() => time % 360)
// )
// .modulate(src(s0).scale(1,() +> 0 + a.fft[2]),0.56)
// .brightness(() => -0.2 + 0.3 * a.fft[3])
.add(gradient(0.8).modulate(osc(25,0.1,0.5)).repeat(() => 4 + 2 * Math.sin(time / 20),2).modulate(voronoi(20, .04).rotate(() => time/30)), 0.25)
.modulate(voronoi(20, .04)
.rotate(() => time/100)
.kaleid(() => 5*Math.sin(time/200))
// .modulateHue(() => voronoi(20, .04))
// .hue(() => time/100)
.out(o1)
src(o1)
.rotate(() => time/53)
// .scale(() => 0.4 + 0.1 *Math.sine(time/200))
// .kaleid(5)
.brightness(0.2)
.contrast(1.8)
.out(o0)
a.show()
a.setSmooth(0.9)
// render(o3)
render()
s0.initImage("///home/pln/Work/Hydra/img/jm.png")
a.show()
a.setSmooth(0.84)
src(s0)
// .scale(() => 1 + 2 * a.fft[0])
.out(o0)
src(o0)
.mult(src(s0)
.rotate(() => -1 * a.fft[3])
.scale(() => 1 + 0.2 * a.fft[3])
)
.thresh(() => 0.91 - 0.8 * a.fft[3])
.diff(
src(s0)
.scale(() => 1 + 0.3 * a.fft[0])
.colorama(() => 0.6 + 0.3 * Math.sin(time/200))
)
.out(o1)
src(o1)
.out(o2)
src(o2)
.mult(src(o2).thresh(0.8),() => 0.5 + 0.4 * Math.sin(time / 13))
.out(o3)
render(o3)
a.hide()
// POUSSIERE
s0.initImage("///home/pln/Work/Hydra/img/jm.png")
s1.initImage("/home/pln/Work/Hydra/StarryNights/img/september-13-2019-arches-cluster.jpg")
// s1.initCam(1)
src(s0)
// .modulate(noise())
.scale(0.7)
// .repeatX(2)
.scroll(0,0.13)
.out(o0)
src(o0)
.add(src(s1)
.scale(() => 0.6 + 0.2 * Math.sin(time/10))
.luma(() => 0.9 + 0.5 * Math.sin(time / 13))
.brightness(() => -0.2 + 0.2 * Math.sin(time / 20))
)
.mask(src(s0).luma(0.5).invert())
.out(o1)
src(o1)
.scale(0.9)
.out(o2)
src(o2)
.modulate(src(s0).scrollY(0.2).scale(() => 0.2 + 0.1 * Math.cos(time / 100))) // FOR 408.jpg
.modulate(src(s0).sub(src(o2).scroll(0.6)).colorama(2), 0.8)
// .scale(() => 2.5 + 0.5 * (time / 10 % 30))
.add(noise(100,0.2).luma(0.9).scale(0.5))
.out(o3)
render(o3)
......@@ -25,5 +25,4 @@ src(o1)
.add(noise(100,0.2).luma(0.9).scale(0.5))
.out(o3)
render()
render(o3)
s0.initImage("/home/pln/Work/Hydra/zephyr/maze.png")
s1.initImage("/home/pln/Work/Hydra/StarryNights/img/september-13-2019-arches-cluster.jpg")
// s1.initCam(1)
src(s0)
// .modulate(noise())
.scale(0.7)
// .repeatX(2)
.scroll(0,0.13)
.out(o0)
src(o0)
.add(src(s1)
.scale(() => 0.6 + 0.2 * Math.sin(time/10))
.luma(() => 0.9 + 0.5 * Math.sin(time / 13))
.brightness(() => -0.2 + 0.2 * Math.sin(time / 20))
)
.mask(src(s0).luma(0.5).invert())
.out(o1)
src(o1)
.scale(0.9)
.out(o2)
src(o2)
.modulate(src(s0).scrollY(0.2).scale(() => 0.2 + 0.1 * Math.cos(time / 100))) // FOR 408.jpg
.modulate(src(s0).sub(src(o2).scroll(0.6)).colorama(2), 0.8)
// .scale(() => 2.5 + 0.5 * (time / 10 % 30))
.add(noise(100,0.2).luma(0.9).scale(0.5))
.out(o3)
render(o3)
// On March 30 in 1997
// Four Faces of Mars
// "Four sides of Mars are captured in these Hubble images, taken over the course of a day. Mars has rotated about ninety degrees between each view.
s0.initImage("https://imagine.gsfc.nasa.gov/hst_bday/images/march-30-2019-four-faces-of-mars.jpg")
src(s0)
.scale(() => 0.5 + 0.15 * Math.sin(time/20),1.35)
.hue([0,0.5,0.6,0.7].fast(1/8))
.out(o0)
src(o0)
.scale(() => 0.99 + 0.15 * Math.sin(time/40),0.59)
.out(o1)
src(o1)
.diff(src(o2).scale(0.99).thresh(() => 0.9 + 0.2 * Math.sin(time / 13)))
// .scale(() => 0.99 + 0.2 * Math.sin(time/9),0.65)
.out(o2)
src(o2)
// .scroll(() => 0 + 0.1 * Math.sin(time/4),0.65)
.rotate(() => Math.sin(time/100))
.blend(src(o3).scale(() => 1 + 0.15 * Math.sin(time / 130)))
.contrast(() => 1.5 + 0.4 * Math.sin(time/20))
.out(o3)
render(o3)
/* BASICS */
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
color: black;
direction: ltr;
}
/* PADDING */
.CodeMirror-lines {
padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
padding: 0 4px; /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
/* GUTTER */
.CodeMirror-gutters {
border-right: 1px solid #ddd;
background-color: #f7f7f7;
white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
min-width: 20px;
text-align: right;
color: #999;
white-space: nowrap;
}
.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }
/* CURSOR */
.CodeMirror-cursor {
border-left: 1px solid black;
border-right: none;
width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
width: auto;
border: 0 !important;
background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
z-index: 1;
}
.cm-fat-cursor-mark {
background-color: rgba(20, 255, 20, 0.5);
-webkit-animation: blink 1.06s steps(1) infinite;
-moz-animation: blink 1.06s steps(1) infinite;
animation: blink 1.06s steps(1) infinite;
}
.cm-animate-fat-cursor {
width: auto;
border: 0;
-webkit-animation: blink 1.06s steps(1) infinite;
-moz-animation: blink 1.06s steps(1) infinite;
animation: blink 1.06s steps(1) infinite;
background-color: #7e7;
}
@-moz-keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
@-webkit-keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
@keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}
.cm-tab { display: inline-block; text-decoration: inherit; }
.CodeMirror-rulers {
position: absolute;
left: 0; right: 0; top: -50px; bottom: -20px;
overflow: hidden;
}
.CodeMirror-ruler {
border-left: 1px solid #ccc;
top: 0; bottom: 0;
position: absolute;
}
/* DEFAULT THEME */
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}
.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}
.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}
.CodeMirror-composing { border-bottom: 2px solid; }
/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}
/* STOP */
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror {
position: relative;
overflow: hidden;
background: white;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -30px; margin-right: -30px;
padding-bottom: 30px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
}
.CodeMirror-sizer {
position: relative;
border-right: 30px solid transparent;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actual scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0; top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0; left: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
left: 0; bottom: 0;
}
.CodeMirror-gutters {
position: absolute; left: 0; top: 0;
min-height: 100%;
z-index: 3;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: -30px;
}
.CodeMirror-gutter-wrapper {
position: absolute;
z-index: 4;
background: none !important;
border: none !important;
}
.CodeMirror-gutter-background {
position: absolute;
top: 0; bottom: 0;
z-index: 4;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
.CodeMirror-lines {
cursor: text;
min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
/* Reset some styles that the rest of the page might have set */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
border-width: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
-webkit-tap-highlight-color: transparent;
-webkit-font-variant-ligatures: contextual;
font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-linebackground {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
padding: 0.1px; /* Force widget margins to stay inside of the container */
}
.CodeMirror-widget {}
.CodeMirror-rtl pre { direction: rtl; }
.CodeMirror-code {
outline: none;
}
/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-cursor {
position: absolute;
pointer-events: none;
}
.CodeMirror-measure pre { position: static; }
div.CodeMirror-cursors {
visibility: hidden;
position: relative;
z-index: 3;
}
div.CodeMirror-dragcursors {
visibility: visible;
}
.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible;
}
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
.cm-searching {
background-color: #ffa;
background-color: rgba(255, 255, 0, .4);
}
/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }
@media print {
/* Hide the cursor when printing */
.CodeMirror div.CodeMirror-cursors {
visibility: hidden;
}
}
/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }
/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
/* vietnamese */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBnQeNHkQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBmQeNHkQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBoQeM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBnQeNHkQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBmQeNHkQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBoQeM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBnQeNHkQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBmQeNHkQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/chivo/v18/va9I4kzIxd1KFrBoQeM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*.styled-background {
background-color: #f00;
}*/
#info-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 80;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;
font-family: 'Chivo', sans-serif;
}
#info-container.hidden {
height: 40px;
padding: 0px;
pointer-events: none;
}
#modal {
width: 70%;
height: 70%;
min-width: 800px;
min-height: 300px;
background: rgba(0, 0, 0, 1);
border: 1px solid white;
padding: 0px;
margin: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: column;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
@media (max-width: 768px) {
#modal {
width: 100%;
min-width: 0px;
}
}
.hidden > #modal {
width: 100%;
min-height: 0px;
background: rgba(0, 0, 0, 0);
border: 0px;
pointer-events: none;
}
.hidden > #modal > #modal-header {
border: 0px;
pointer-events: none;
}
#modal-header {
width: 100%;
/* height: 40px; */
border: 1px solid white;
margin: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.icon {
margin: 10px;
margin-right: 15px;
margin-left: 15px;
cursor: pointer;
pointer-events: auto;
font-size: 20px;
}
.icon:hover{
color: #ccc;
}
.language-select {
padding: 8px;
text-align: center;
font-weight: 200;
cursor: pointer;
pointer-events: auto;
background-color: black;
transition: border
}
.language-select:hover{
color: #ccc;
}
.language-select.selected {
border: solid white 1px;
margin-bottom: -1px;
border-bottom: black;
}
.icon.hidden {
display: none;
}
.hidden > #modal > #modal-body {
overflow: hidden;
}
#modal-body {
font-family: 'Chivo', sans-serif;
width: 100%;
/* height: 100%; */
flex: 1;
overflow-y: auto;
}
.modal-content {
margin: 40px;
margin-left: 65px;
margin-right: 65px;
font-weight: 300;
}
.modal-content.extensions {
margin: 20px;
}
.modal-content > h1{
font-size: 40px;
margin: 0px;
font-weight: 400;
}
.modal-content > h3{
margin: 0px;
/* margin-bottom: 40px; */
text-transform: uppercase;
font-weight: 400;
/* font-size: 26px; */
}
.modal-content > h4{
font-weight: 300;
font-size: 18px;
}
.modal-content > p{
font-size: 18px;
font-weight: 100;
font-weight: 300;
}
.extension-list {
padding-top: 10px;
}
.extension-icon {
/* color: rgb(250, 9, 162); */
/* background-color: rgba(255, 255, 255, 0.6); */
/* color: black; */
font-size: 0.8rem;
padding: 4px;
font-weight: 900;
/* border: solid 2px rgb(250, 9, 162); */
/* color: black; */
cursor: pointer;
pointer-events: auto;
display: inline-block;
/* text-decoration: underline; */
/* border-bottom: solid 1px white; */
}
.example-icon {
/* background-color: white; */
/* color: black; */
text-decoration: underline;
font-weight: bold;
}
.extension-buttons {
float: right;
text-align: right;
}
.extension-icon:hover {
background-color: rgb(250, 9, 162);
color: black;
}
.extension-list-item {
/* cursor: pointer; */
margin: 1px;
padding: 1px;
overflow: hidden;
}
.extension-list-item:hover {
background: #111;
/* color: black; */
/* border: solid white 1px; */
}
.align-right {
text-align: right;
}
.small {
font-size: 14px;
}
a{
color: #fff;
}
ul > li {
margin-top: 5px;
font-size: 16px;
}
.olivia {
color: #ff0066;
}
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
#modal-body::-webkit-scrollbar-track {
/* box-shadow: inset 0 0 5px grey;
border-radius: 10px; */
background-color: black;
border: 1px solid white;
}
/* Handle */
#modal-body::-webkit-scrollbar-thumb {
background: black;
border: 2px solid white;
cursor: pointer;
/* border-radius: 10px; */
}
This source diff could not be displayed because it is too large. You can view the blob instead.
.CodeMirror-hints {
position: absolute;
z-index: 10;
overflow: hidden;
list-style: none;
margin: 0;
padding: 2px;
-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
box-shadow: 2px 3px 5px rgba(0,0,0,.2);
border-radius: 3px;
border: 1px solid silver;
background: white;
font-size: 90%;
font-family: monospace;
max-height: 20em;
overflow-y: auto;
}
.CodeMirror-hint {
margin: 0;
padding: 0 4px;
border-radius: 2px;
white-space: pre;
color: black;
cursor: pointer;
}
li.CodeMirror-hint-active {
background: #08f;
color: white;
}
/*.styled-background {
background-color: #f00;
}*/
html, body {
background: #000;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: #fff;
line-height: 1.4;
}
.camera-inputs{
color: black;
background: white;
}
textarea {
background: #000;
}
canvas {
/* background-color: #000; */
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
a:hover {
/* opacity: 0.5; */
background-color: white;
color: black;
}
#hydra-ui {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#code {
z-index: 5;
}
#hydra-canvas {
position: absolute;
top: 0px;
left: 0px;
z-index: -2;
}
#audio-canvas {
position: absolute;
bottom: 0px;
right: 0px;
background-color: transparent;
}
.CodeMirror {
position: absolute;
/* top: 20px;
left: 20px; */
z-index: 5;
/* width: calc(100% - 20px);
height: calc(100% - 20px); */
background: transparent;
width: calc(100% - 60px);
height: calc(100% - 60px);
}
.console {
/* bottom: 0px;
position: absolute;
padding: 20px;
padding-bottom: 5px;
width: calc(100% - 40px); */
z-index: 6;
left: 0px;
font-family: monospace;
font-size: 14px;
color: #aaa;
pointer-events: none;
padding: 15px;
padding-bottom: 5px;
}
.log-error {
color: #f00;
}
.styled-background {
/* background-color: #f00 !important; */
background: rgba(0, 255, 255, 0.5) !important;
mix-blend-mode: difference;
}
#editor-container {
width: 100%;
height: 100%;
/* position: fixed; */
position: absolute;
/* padding: 20px; */
}
/*
Name: Tomorrow Night - Eighties
Author: Chris Kempson
CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/
/*.cm-s-tomorrow-night-eighties.CodeMirror { background: #000000; color: #CCCCCC; }*/
/*OJ*/
.cm-s-tomorrow-night-eighties.CodeMirror {
background: rgba(0, 0, 0, 0);
transition: background-color 0.3s ease;
color: #cccccc;
font-size: 18px;
height: 100%;
}
.cm-s-tomorrow-night-eighties span span.CodeMirror-selectedtext {
background: #666666;
}
.cm-s-tomorrow-night-eighties .CodeMirror-line::selection,
.cm-s-tomorrow-night-eighties .CodeMirror-line > span::selection,
.cm-s-tomorrow-night-eighties .CodeMirror-line > span > span::selection {
background: rgba(45, 45, 45, 0.99);
}
.cm-s-tomorrow-night-eighties .CodeMirror-line::-moz-selection,
.cm-s-tomorrow-night-eighties .CodeMirror-line > span::-moz-selection,
.cm-s-tomorrow-night-eighties .CodeMirror-line > span > span::-moz-selection {
background: rgba(45, 45, 45, 0.99);
}
.cm-s-tomorrow-night-eighties .CodeMirror-gutters {
background: #000000;
border-right: 0px;
}
.cm-s-tomorrow-night-eighties .CodeMirror-guttermarker {
color: #f2777a;
}
.cm-s-tomorrow-night-eighties .CodeMirror-guttermarker-subtle {
color: #777;
}
.cm-s-tomorrow-night-eighties .CodeMirror-linenumber {
color: #515151;
}
.cm-s-tomorrow-night-eighties .CodeMirror-cursor {
border-left: 3px solid #999;
}
/* OJ*/
.cm-s-tomorrow-night-eighties .CodeMirror-line span {
background-color: rgba(0, 0, 0, 0.6);
transition: background-color 0.3s ease;
color: #cccccc;
}
/* fix weird alternating background colors */
.cm-s-tomorrow-night-eighties .CodeMirror-line span span {
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.3s ease;
}
.cm-s-tomorrow-night-eighties span.cm-comment {
color: #d27b53;
}
.cm-s-tomorrow-night-eighties span.cm-atom {
color: #a16a94;
}
.cm-s-tomorrow-night-eighties span.cm-number {
color: #a16a94;
}
.cm-s-tomorrow-night-eighties span.cm-property,
.cm-s-tomorrow-night-eighties span.cm-attribute {
color: #99cc99;
}
.cm-s-tomorrow-night-eighties span.cm-keyword {
color: #f2777a;
}
.cm-s-tomorrow-night-eighties span.cm-string {
color: #ffcc66;
}
.cm-s-tomorrow-night-eighties span.cm-variable {
color: #99cc99;
}
.cm-s-tomorrow-night-eighties span.cm-variable-2 {
color: #6699cc;
}
.cm-s-tomorrow-night-eighties span.cm-def {
color: #f99157;
}
.cm-s-tomorrow-night-eighties span.cm-bracket {
color: #cccccc;
}
.cm-s-tomorrow-night-eighties span.cm-tag {
color: #f2777a;
}
.cm-s-tomorrow-night-eighties span.cm-link {
color: #a16a94;
}
.cm-s-tomorrow-night-eighties span.cm-error {
background: #f2777a;
color: #6a6a6a;
}
.cm-s-tomorrow-night-eighties .CodeMirror-activeline-background {
background: #343600;
}
/*.cm-s-tomorrow-night-eighties .CodeMirror-activeline-background { background: #0f0; }*/
.cm-s-tomorrow-night-eighties .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}
// Moire Pourpre
// Derived from `moire` by Olivia Jack
// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
var pattern = () => osc(() => (120 + 100 * Math.sin(time/12)),-0.0001)
.kaleid(() => 10 + 8.5 * Math.sin(time/193))
.scale(1, 0.4)
pattern()
.scrollX(() =>
0.01, // 0.002 + 0.01 * Math.sin(time),
0 // -0.0020 - 0.01 * Math.sin(time),
)
.mult(pattern())
.scale(() => 2.2 + 2 * Math.sin(time / 15))
.out()
src(o0).scale(1.2).out(o1)
render(o1)
s0.initImage("/home/pln/Work/Hydra/StarryNights/img/arp299.jpg")
src(s0).scale(() => 2.2 + 0.6 * Math.sin(time / 12))
.modulate(o1)
.out(o2)
render(o2)
src(o2)
.brightness(-0.3)
.contrast(1.2)
.saturate(1.5)
.add(src(o1).mask(noise(100).thresh(() => 0.7 + 0.25 * Math.sin(time / 10))))
.out(o3)
render(o3)
render()
// s0.initImage("https://images.unsplash.com/photo-1583686298564-46fbffda0707?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
s0.initImage("/home/pln/Work/Hydra/URBANUS/teng-yuhong-qMehmIyaXvY-unsplash.jpg")
src(s0)
.scale(0.8,1.15)
// .mask(shape(4)
// .scroll(0,-0.02)
// .scale(2.85,5)
// )
// .repeat(() => 2 + 0.5 * Math.sin(time / 10),
// () => 2 + 0.5 * Math.sin(time / 10))
.scale(() => 0.7 + 0.2 * Math.sin(time/20))
.out(o0)
src(o0)
.blend(
src(o0).modulate(src(o0).scale(() => 1.9 + 1.4 * Math.sin(time/200)))
, () => 0.15 + 0.05 * Math.sin(time/199.3))
.out(o1)
src(o1)
.brightness(() => -0.2 + 0.13 * Math.sin(time/20))
.saturate(1.25)
.contrast(1.8)
.scale(2)
.out(o2)
src(o2)
// EYE OF SOCIETY
// .add(src(o3).scale(0.999).rotate(() => (time/1000) % 360),0.8)
.scale(1.02,1.4)
// STAMP OF SOCIETY
.add(src(o2)
.thresh(0.3)
.scale(() => 0.62 + 0.4 * Math.sin(time / 29))
)
.out(o3)
render(o3)
// TULIPES
// s0.initImage("/home/pln/Work/Hydra/img/tulipes.jpeg")
s0.initImage("https://git.plnech.fr/pln/Hydra/img/tulipes.jpeg")
src(s0)
// .modulate(noise())
.scale(0.99)
.out(o0)
src(o0)
.scale(() => 2 + 0.5 * a.fft[0])
.scroll(() => 2 + 0.15 * a.fft[1] - 0.05 * time / 2)
.add(src(s1)
.scale(() => 1.2 + 0.2 * Math.sin(time/3))
)
.mask(src(s0)
.scale(() => 0.9 + 0.03 * Math.sin(time / 20))
.luma(() => 0.5 + 0.24 * Math.sin(time / 40))
// .invert()
)
.out(o1)
src(o0).scale(1.2)
.scale(() => 1.8 - 0.3 * a.fft[3])
.add(noise(100,0.2)
.luma(() => 0.86 + 0.1 * Math.sin(time/13))
.thresh(() => 0.66 + 0.3 * Math.sin(time/93)).scale(0.5),
() => 0.9
)
.out(o2)
src(o2)
.blend(src(o1)
.colorama(0.002)
.hue(0.4)
.rotate(() => (time/1933 % 360))
, () => 0.2 + 0.4 * Math.sin(time / 4))
.add(src(o1).hue(-0.4).modulate(src(o2).scale(0.99)))
.brightness(- 0.2 + 0.2 * Math.sin(time / 93))
.saturate(1.25)
.out(o3)
// render()
render(o3)
a.show()
a.setSmooth(0.8)
// source
s0.initImage("https://images.unsplash.com/photo-1533387520709-752d83de3630?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
// o0: juste la source ajustee
src(s0)
.scale(2)
.out(o0)
// o1:
src(o0)
.modulate(src(s0).scale(() => 0.9 + 0.2 * Math.sin(time)))
// .modulate(noise())
.out(o1)
// o2:
// src(o1)
noise(1000,0.2)
.thresh(0.9)
.mask(shape(4).scale(1.4,8).scroll(0,0.3))
.out(o2)
// o2: ajustements finaux
src(o1)
.brightness(-0.5)
.add(o2)
.hue(0.7)
.contrast(1.8)
.out(o3)
//
render()
render(o3)
a.show()
a.setBins(10)
a.setScale(0.3)
a.setCutoff(0.3)
// MOUNTAIN
s0.initImage("/home/pln/Work/Hydra/img/visualsofdana-0j8DqmAYpkw-unsplash.jpg")
// COFFEE
s1.initImage("/home/pln/Work/Hydra/img/massimiliano-morosinotto-uJIhAvqFJxg-unsplash.jpg")
// SUNSET
// s0.initImage("https://images.unsplash.com/photo-1495567720989-cebdbdd97913?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
src(s0)
// .modulate(noise())
.scale(1.9)
.repeat(4,4)
// .scroll(0,0.13)
.brightness(() => - 0.5)
.out(o0)
src(o0)
.scale(() => 2 + 0.5 * a.fft[0])
.add(src(s1)
.scale(() => 1.6 + 0.2 * Math.sin(time/10))
// .luma(() => 0.99 - 0.2 * a.fft[3] - 0.05 * a.fft[0])
.brightness(() => -0.5 + 0.01 * a.fft[3] + 0.12 * a.fft[2] + 0.05 * a.fft[0])
)
// .mask(src(s0).luma(0.5).invert())
.out(o1)
src(o1)
.scale(0.9)z
.out(o2)
src(o2)
.scale(() => 1.2 + 0.05 * a.fft[0])
.add(noise(100,0.2).luma(0.99).scale(0.5),
() => 0.4 + 2 * a.fft[0] + a.fft[3]
)
.blend(src(o1)
// .colorama(0.0001)
.rotate(() => (time/12 % 360)) // TODO Rotate
,() => 0.8 * a.fft[2] + 0.2 * a.fft[3])
.hue(() => 0.8 + (0.1 * Math.sin(time)))
.blend(src(o3)
.modulate(voronoi(() => a.fft[3]))
, () => 0.2 + 0.4 * Math.sin(time / 12))
.add(src(o1).scale(() => 1.02 + 0.05 * Math.sin(time)))
.saturate(() => 0 + a.fft[0] + 0.3 * a.fft[1] + 0.4 * a.fft[2])
.out(o3)
render(o3)
a.setBins(4)
a.show()
a.setScale(4)
a.setCutoff(1)
a.setSmooth(0.35)
// MOUNTAIN
s0.initImage("/home/pln/Work/Hydra/img/visualsofdana-0j8DqmAYpkw-unsplash.jpg")
// COFFEE
s1.initImage("/home/pln/Work/Hydra/img/massimiliano-morosinotto-uJIhAvqFJxg-unsplash.jpg")
// SUNSET
// s0.initImage("https://images.unsplash.com/photo-1495567720989-cebdbdd97913?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
src(s0)
// .modulate(noise())
.scale(1.9)
.repeat(4,4)
// .scroll(0,0.13)
.brightness(() => - 0.5)
.out(o0)
src(o0)
.scale(() => 2 + 0.5 * a.fft[0])
.add(src(s1)
.scale(() => 1.6 + 0.2 * Math.sin(time/10))
// .luma(() => 0.99 - 0.2 * a.fft[3] - 0.05 * a.fft[0])
.brightness(() => -0.5 + 0.01 * a.fft[3] + 0.12 * a.fft[2] + 0.05 * a.fft[0])
)
// .mask(src(s0).luma(0.5).invert())
.out(o1)
src(o1)
.scale(0.9)z
.out(o2)
src(o2)
.scale(() => 1.2 + 0.05 * a.fft[0])
.add(noise(100,0.2).luma(0.99).scale(0.5),
() => 0.4 + 2 * a.fft[0] + a.fft[3]
)
.blend(src(o1)
// .colorama(0.0001)
.rotate(() => (time/12 % 360)) // TODO Rotate
,() => 0.8 * a.fft[2] + 0.2 * a.fft[3])
.hue(() => 0.8 + (0.1 * Math.sin(time)))
.blend(src(o3)
.modulate(voronoi(() => a.fft[3]))
, () => 0.2 + 0.4 * Math.sin(time / 12))
.add(src(o1).scale(() => 1.02 + 0.05 * Math.sin(time)))
.saturate(() => 0 + a.fft[0] + 0.3 * a.fft[1] + 0.4 * a.fft[2])
.out(o3)
render(o3)
a.setBins(4)
a.show()
a.setScale(4)
a.setCutoff(1)
a.setSmooth(0.35)
s0.initImage("/home/pln/Work/Hydra/zephyr/maze.png")
s1.initImage("/home/pln/Work/Hydra/StarryNights/img/september-13-2019-arches-cluster.jpg")
// s1.initCam(1)
src(s0)
// .modulate(noise())
.scale(0.3)
// .repeatX(2)
.scroll(0,0.13)
.out(o0)
src(o0)
.add(src(s1)
.scale(() => 0.6 + 0.2 * Math.sin(time/10))
.luma(() => 0.9 + 0.5 * Math.sin(time / 13))
.brightness(() => -0.2 + 0.2 * Math.sin(time / 20))
)
.mask(src(s0).luma(0.5).invert())
.out(o1)
src(o1)
.scale(0.9)
.out(o2)
src(o2)
.modulate(src(s0).scrollY(0.2).scale(() => 0.2 + 0.1 * Math.cos(time / 100))) // FOR 408.jpg
.modulate(src(s0).sub(src(o2).scroll(0.6)).colorama(2), 0.8)
.scale(() => 2.5 + 0.5 * Math.sin(time/12))
.add(noise(100,0.2).luma(0.9).scale(0.5))
.out(o3)
render(o3)
......@@ -10,8 +10,9 @@ src(s0)
.scrollX(-0.1)
.out(o0)
src(o0).modulate(o2)
.scale(0.99)
src(o0)
.modulate(o2)
.scale(() => 1 + 0.01 * Math.sin(time / 20))
.out(o1)
src(o1)
......@@ -19,11 +20,11 @@ src(o1)
.out(o2)
src(o2)
.scale(() => 1.05 + 0.2 * Math.sin(time / 10))
.scale(() => 1.05 + 0.2 * Math.sin(time / 23))
.luma(() => 0.1 + 0.7 * (Math.sin(time /100)))
.blend(src(o2)
.modulateRotate(src(o3).scale(() => 1 + 19 * Math.sin(time / 20)))
.scale(() => 0.4 + 0.05 * Math.sin(time / 10))
.scale(() => 0.4 + 0.05 * Math.sin(time / 80))
, 0.2)
.out(o3)
......
s0.initImage("///home/pln/Work/Hydra/img/rick.png")
a.show()
a.setSmooth(0.84)
src(s0)
// .scale(() => 1 + 2 * a.fft[0])
.out(o0)
src(o0)
.mult(src(s0)
.rotate(() => -1 * a.fft[3])
.scale(() => 1 + 0.2 * a.fft[3])
)
.thresh(() => 0.91 - 0.8 * a.fft[3])
.diff(
src(s0)
.scale(() => 1 + 0.3 * a.fft[0])
.colorama(() => 0.6 + 0.3 * Math.sin(time/200))
)
.out(o1)
src(o1)
.out(o2)
src(o2)
.mult(src(o2).thresh(0.8),() => 0.5 + 0.4 * Math.sin(time / 13))
.out(o3)
render(o3)
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
// moire
// by Olivia Jack
// twitter: @_ojack_
var pattern = () => osc(200,0.01)
.kaleid(() => 3 + Math.sin(time/200))
.scale(1, 0.4)
pattern()
.scrollX(() =>
0.002 + 0.01 * Math.sin(time/10),
-0.0020 - 0.01 * Math.sin(time/1000),
)
.mult(pattern())
.out()
// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
//corrupted screensaver
//by Ritchse
//instagram.com/ritchse
voronoi(350,0.15)
.modulateScale(osc(8).rotate(Math.sin(time)),.5)
.thresh(.8)
.modulateRotate(osc(7),.4)
.thresh(.7)
.diff(src(o0).scale(1.8))
.modulateScale(osc(2).modulateRotate(o0,.74))
.diff(src(o0).rotate([-.012,.01,-.002,0]).scrollY(0,[-1/199800,0].fast(0.7)))
.brightness([-.02,-.17].smooth().fast(.5))
.out()
// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
//Inspired by corrupted screensaver, by Ritchse - instagram.com/ritchse_jp
s0.initImage("/home/pln/Work/Hydra/img/portrait_rhadamanthe.jpg")
src(s0)
.scale(1.8)
// .scroll(() => 0 + 0.01 * Math.sin(time),() => 0.01 + 0.02 * Math.cos(time/3))
.mult(voronoi(100,0.01).mask(shape(30).scale(2)),() => 0.25 + 0.5 * Math.sin(time/10))
.out(o0)
voronoi(1330,0.015)
.modulateScale(osc(18,0.001)
.rotate(() => Math.sin(time/13))
,100)
.thresh(.8)
.modulateRotate(osc(7,0.05 * Math.abs(Math.sin(time/4))),0.02)
.thresh(0.05)
.diff(
src(o1).scale(() => 1.4 + 0.28 * Math.sin(time/13))
)
.modulateScale(
osc(18,0.01).modulateRotate(o1,.74)
)
.diff(src(o1).rotate([-.012,.01,-.002,0]).scrollY(0,[-1/424242,0].fast(0.7)))
.brightness([-.02,-.1].smooth().fast(.5))
.out(o1)
src(o0)
.modulateRotate(src(o1).scroll(0.5),2)
.modulateScale(o1)
.diff(o1,0.5)
.out(o2)
src(o2)
.contrast(1.2)
.saturate(0)
.out(o3)
render()
render(o3)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment