Skip to content

Commit 2e684e5

Browse files
MakiNishi3MakiNishi3
authored
Add files via upload
1 parent b2fc12a commit 2e684e5

2 files changed

Lines changed: 6942 additions & 0 deletions

File tree

‎vulpixism/index.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>VULPIXISM 5</title>
6+
<link href="https://fonts.googleapis.com/css2?family=Product+Sans&display=swap" rel="stylesheet">
7+
<script src="https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.js"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/mediabunny@1.40.1/dist/modules/src/demuxer.min.js"></script>
9+
<script src="https://unpkg.com/seriously"></script>
10+
<script src="effects/tint.js"></script>
11+
<script src="effects/turbulent.js"></script>
12+
<script src="vulpixism.js"></script>
13+
<script src="effects/tzatzki.js"></script>
14+
<script src="effects/warhol.js"></script>
15+
<script src="effects/wavewarp.js"></script>
16+
<script src="effects/meshglitch.js"></script>
17+
<script src="effects/invert.js"></script>
18+
<script src="effects/kaleidoscope.js"></script>
19+
<script src="effects/rotatecube.js"></script>
20+
<script src="effects/huecycle.js"></script>
21+
<script src="effects/hsb.js"></script>
22+
<script src="effects/fractal.js"></script>
23+
<script src="effects/glitch.js"></script>
24+
<script src="effects/chromaabber.js"></script>
25+
<script src="effects/bloom.js"></script>
26+
<script src="effects/blur.js"></script>
27+
<style>
28+
body{margin:0;font-family:'Product Sans',sans-serif;background:#111;color:#fff}
29+
#ui{padding:10px;background:#222;display:flex;flex-wrap:wrap;gap:10px}
30+
button,input,select{padding:5px}
31+
#canvas{width:100%;height:70vh;background:#000}
32+
.track{border:1px solid #444;padding:5px;margin:5px}
33+
</style>
34+
</head>
35+
<body>
36+
37+
<div id="ui">
38+
<input type="file" id="fileInput" multiple accept="image/*,video/*">
39+
<select id="effect">
40+
<option value="effects/tint.js">tint</option>
41+
<option value="effects/turbulent.js">turbulent displace</option>
42+
<option value="effects/tzatzki.js">tzatzki lens</option>
43+
<option value="effects/warhol.js">warhol</option>
44+
<option value="effects/wavewarp.js">wave warp</option>
45+
<option value="effects/meshglitch.js">mesh glitch</option>
46+
<option value="effects/invert.js">invert</option>
47+
<option value="effects/kaleidoscope.js">kaleidoscope</option>
48+
<option value="effects/rotatecube.js">rotate cube</option>
49+
<option value="effects/huecycle.js">hue cycle</option>
50+
<option value="effects/hsb.js">hsb adjust</option>
51+
<option value="effects/fractal.js">fractal</option>
52+
<option value="effects/glitch.js">glitch</option>
53+
<option value="effects/chromaabber.js">chromatic abberation</option>
54+
<option value="effects/bloom.js">bloom</option>
55+
<option value="effects/blur.js">blur</option>
56+
</select>
57+
58+
<input type="number" id="duration" min="1" max="3600" value="1">
59+
<input type="range" id="rotate" min="0" max="3600">
60+
<input type="range" id="posx" min="-9999" max="9999">
61+
<input type="range" id="posy" min="-9999" max="9999">
62+
<input type="range" id="scale" min="0" max="10000">
63+
<input type="color" id="color">
64+
<select id="bool">
65+
<option value="true">true</option>
66+
<option value="false">false</option>
67+
</select>
68+
69+
<button id="create">create</button>
70+
<button id="copy">copy</button>
71+
<button id="paste">paste</button>
72+
<button id="duplicate">duplicate</button>
73+
<button id="save">save .vulpiproj</button>
74+
<button id="export">export</button>
75+
</div>
76+
77+
<canvas id="canvas"></canvas>
78+
<div id="tracks"></div>
79+
80+
<script>
81+
setTimeout(()=>{document.title="VULPIXISM 5 since 2024"},2000)
82+
83+
let seriously=new Seriously()
84+
let target=seriously.target('#canvas')
85+
let tracks=[]
86+
let clipboard=null
87+
88+
function createTrack(file){
89+
let url=URL.createObjectURL(file)
90+
let source=seriously.source(url)
91+
let effect=seriously.effect($('#effect').val().split('/').pop().replace('.js',''))
92+
effect.source=source
93+
94+
let track={
95+
source:source,
96+
effect:effect,
97+
rotate:0,
98+
x:0,
99+
y:0,
100+
scale:1
101+
}
102+
tracks.push(track)
103+
renderTracks()
104+
update()
105+
}
106+
107+
function renderTracks(){
108+
$('#tracks').html('')
109+
tracks.forEach((t,i)=>{
110+
$('#tracks').append(`<div class="track">Track ${i}</div>`)
111+
})
112+
}
113+
114+
function update(){
115+
tracks.forEach(t=>{
116+
t.effect.rotation=$('#rotate').val()
117+
})
118+
target.source=tracks.length?tracks[tracks.length-1].effect:null
119+
seriously.go()
120+
}
121+
122+
$('#fileInput').on('change',function(){
123+
[...this.files].forEach(f=>createTrack(f))
124+
})
125+
126+
$('#create').on('click',function(){
127+
createTrack(new Blob())
128+
})
129+
130+
$('#copy').on('click',function(){
131+
clipboard=JSON.stringify(tracks)
132+
})
133+
134+
$('#paste').on('click',function(){
135+
if(clipboard){
136+
tracks=JSON.parse(clipboard)
137+
renderTracks()
138+
}
139+
})
140+
141+
$('#duplicate').on('click',function(){
142+
if(tracks.length){
143+
tracks.push(JSON.parse(JSON.stringify(tracks[tracks.length-1])))
144+
renderTracks()
145+
}
146+
})
147+
148+
$('#save').on('click',function(){
149+
let data=JSON.stringify(tracks)
150+
let blob=new Blob([data])
151+
let a=document.createElement('a')
152+
a.href=URL.createObjectURL(blob)
153+
a.download="project.vulpiproj"
154+
a.click()
155+
})
156+
157+
$('#export').on('click',function(){
158+
let link=document.createElement('a')
159+
link.href=document.getElementById('canvas').toDataURL()
160+
link.download="export.png"
161+
link.click()
162+
})
163+
</script>
164+
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)