diff --git a/package.json b/package.json index 4e08e21c..e6622de2 100644 --- a/package.json +++ b/package.json @@ -12,12 +12,12 @@ "animejs": "^3.1.0", "core-js": "^3.6.4", "dat.gui": "^0.7.6", - "firebase": "^7.8.1", + "firebase": "^9.6.8", "intersection-observer": "^0.7.0", "lodash.throttle": "^4.1.1", "register-service-worker": "^1.6.2", - "shader-park-core": "^0.0.271", - "three": "^0.126.1", + "shader-park-core": "^0.2.5", + "three": "^0.155.0", "v-lazy-image": "^1.3.2", "vue": "^2.6.11", "vue-codemirror": "^4.0.6", @@ -29,13 +29,15 @@ "vuex": "^3.1.2" }, "devDependencies": { - "@vue/cli-plugin-babel": "~4.2.0", - "@vue/cli-plugin-pwa": "~4.2.0", - "@vue/cli-plugin-router": "~4.2.0", - "@vue/cli-plugin-vuex": "~4.2.0", - "@vue/cli-service": "~4.2.0", - "less": "^3.0.4", - "less-loader": "^5.0.0", + "@babel/core": "^7.17.5", + "@babel/preset-env": "^7.16.11", + "@vue/cli-plugin-babel": "~5.0.1", + "@vue/cli-plugin-pwa": "~5.0.1", + "@vue/cli-plugin-router": "~5.0.1", + "@vue/cli-plugin-vuex": "~5.0.1", + "@vue/cli-service": "~5.0.1", + "less": "^4.1.2", + "less-loader": "^10.2.0", "vue-template-compiler": "^2.6.11" } } diff --git a/public/img/icons/p5.png b/public/img/icons/p5.png new file mode 100644 index 00000000..31b55b9f Binary files /dev/null and b/public/img/icons/p5.png differ diff --git a/public/img/icons/sp-hero.png b/public/img/icons/sp-hero.png new file mode 100644 index 00000000..ae853f20 Binary files /dev/null and b/public/img/icons/sp-hero.png differ diff --git a/public/img/icons/sphere.jpg b/public/img/icons/sphere.jpg new file mode 100644 index 00000000..d885104f Binary files /dev/null and b/public/img/icons/sphere.jpg differ diff --git a/public/index.html b/public/index.html index d790d4e0..d00a097c 100644 --- a/public/index.html +++ b/public/index.html @@ -1,9 +1,38 @@ + + + Shader Park + + + + + + + + + + + + + + + + + + + + Shader Park diff --git a/src/App.vue b/src/App.vue index 851f86b5..93292cad 100644 --- a/src/App.vue +++ b/src/App.vue @@ -42,6 +42,34 @@ export default { hasBeenLoaded: false } }, + metaInfo: { + title: 'Shader Park', + meta: [ + {property: 'og:title', content: 'Shader Park'}, + {property: 'og:site_name', content: 'Shader Park'}, + // The list of types is available here: http://ogp.me/#types + {property: 'og:type', content: 'website'}, + // Should the the same as your canonical link, see below. + // {property: 'og:url', content: 'https://www.my-site.com/my-special-page'}, + {property: 'og:image', content: 'https://www.dropbox.com/s/anbwi6k3wm7tn59/sp-hero.png?dl=1'}, + // Often the same as your meta description, but not always. + {property: 'og:description', content: "A JavaScript library for creating interactive procedural 2D and 3D shaders."}, + + // Twitter card + {name: 'twitter:card', content: 'summary'}, + // {name: 'twitter:site', content: 'https://www.my-site.com/my-special-page'}, + {name: 'twitter:title', content: 'Shader Park'}, + {name: 'twitter:description', content: "A JavaScript library for creating interactive procedural 2D and 3D shaders."}, + // Your twitter handle, if you have one. + // {name: 'twitter:creator', content: '@alligatorio'}, + {name: 'twitter:image:src', content: 'https://www.dropbox.com/s/anbwi6k3wm7tn59/sp-hero.png?dl=1'}, + + // Google / Schema.org markup: + {itemprop: 'name', content: 'Shader Park'}, + {itemprop: 'description', content: "A JavaScript library for creating interactive procedural 2D and 3D shaders."}, + {itemprop: 'image', content: 'https://www.dropbox.com/s/anbwi6k3wm7tn59/sp-hero.png?dl=1'} + ] + }, computed: { displayShareModal() { return this.$store.getters.displayShareModal; diff --git a/src/client/normalize.css b/src/client/normalize.css index 02d9f1c6..4f3a502a 100644 --- a/src/client/normalize.css +++ b/src/client/normalize.css @@ -112,7 +112,7 @@ dfn { * contexts in Firefox 4+, Safari, and Chrome. */ h1 { - font-size: 2em; + /* font-size: 2em; */ margin: 0.67em 0; } /** diff --git a/src/components/About.vue b/src/components/About.vue index 82fdda70..1ea64232 100644 --- a/src/components/About.vue +++ b/src/components/About.vue @@ -6,23 +6,24 @@ It integrates diverse computer graphics techniques into a unified programming interface designed for fast experimentation and live-coding.

- Inspired by tools and communities like P5.js, Processing and Shader Toy, Torin Blankensmith and + Inspired by tools and communities like P5.js, Processing, Three.js, and Shader Toy, Torin Blankensmith and Peter Whidden developed Shader Park with the intention of making emerging technology in computer graphics accessible and inclusive for artists, designers, and educators.

- If you enjoy using Shader Park please consider giving us a star.
- Website: Star
- Core Framework: Star - + If you enjoy using Shader Park please consider giving us a star.

+ Core Framework + Star +
+ Website + Star
+

Acknowledgments:
- Huge thanks to Inigo Quilez for his guidance and research on raymarching and signed distance fields. This project is heavily inspired by ShaderToy (hence the name) and we encourage anyone on this site to also explore Shadertoy. - - Special thanks to the following for guidance on Shader Park:
- Andrew Palmer, Ricardo Cabello, Ben Fry, Casey Reas, Kyle Phillips, Reza Ali, Alex Miller, and Avneeseh Sware. - Thanks to Jono Brandel for the inspiration for the design of the editor heavily based on Anitype + Special thanks to the following for inspiration and guidance:
+ Inigo Quilez, Ricardo Cabello, Andrew Palmer, Ben Fry, Casey Reas, Kyle Phillips, Reza Ali, Alex Miller, Avneesh Sarwate, Jono Brandel and Cassie Tarakajian. +




diff --git a/src/components/Editor.vue b/src/components/Editor.vue index f6f97bf9..9b418dc2 100644 --- a/src/components/Editor.vue +++ b/src/components/Editor.vue @@ -49,9 +49,10 @@

- + +
-
+
@@ -183,6 +184,7 @@ export default { watch : { sculptureError(error) { if(error) { + this.errorMessages = []; let message = error.toString(); let lastErrorIndex = this.errorMessages.length - 1; if(!this.errorMessages.length) { // empty, so push new message @@ -241,6 +243,25 @@ export default { } }, methods: { + showHideConsole() { + let cm = this.$refs.myCm.$el; + let consoleContainer = this.$refs.consoleContainer; + let showHideConsole = this.$refs.showHideConsole; + console.log('showHideConsole',cm, consoleContainer); + if(cm && consoleContainer) { + if(cm.classList.contains('max')) { + cm.classList.remove('max'); + consoleContainer.classList.remove('max') + showHideConsole.classList.remove('max'); + + } else { + cm.classList.add('max'); + consoleContainer.classList.add('max'); + showHideConsole.classList.add('max'); + } + } + console.log('showHideConsole',cm, consoleContainer); + }, cycleResizeWindows() { let interval = setInterval(() => { this.codemirror.refresh(); @@ -258,6 +279,7 @@ export default { onCmFocus(cm) { }, onCmCodeChange(newCode) { + if(newCode !== this.selectedSculpture.shaderSource){ this.selectedSculpture.saved = false; this.$store.commit('setUnsavedChanges', {[this.selectedSculpture.id] : false}) @@ -265,6 +287,7 @@ export default { this.code = newCode; if(this.autoUpdate) { if(this.selectedSculpture){ + this.selectedSculpture.shaderSource = this.code; } } @@ -465,23 +488,32 @@ export default { pointer-events: none; //border-bottom: 2px solid #f5f5f5; - .clear-console { + .show-hide-console { position: absolute; pointer-events: initial !important; - right: 20px; + padding-bottom: 1px; + right: 10px; line-height: 20px; margin: 0px; + margin-top: -7px; left: auto; + transform: rotate(0deg); + transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out; + &.max { + box-shadow: 0 -1px -3px 0 rgba(0, 0, 0, 0.15); + transform: rotate(180deg); + } } } .console-container { overflow: scroll; - height: 8vh; + height: 12vh; padding-left: 10px; + transition: height 300ms ease-in-out; - .error-messages { - + &.max { + height: 45vh; } // padding-bottom: 10px; // padding-top: 10px; @@ -568,11 +600,14 @@ label { .CodeMirror-scroll { height: auto; overflow: scroll !important; - max-height: 81vh; - max-width: 100%; - &.embed { - max-height: 92vh; - } + // max-height: 81vh; + // max-width: 100%; + // &.max{ + // max-height: 48vh; + // } + // &.embed { + // max-height: 92vh; + // } } .CodeMirror { @@ -595,7 +630,11 @@ label { } .vue-codemirror { - max-height: calc(74vh - 2px); + max-height: calc(70vh - 2px); + &.max{ + max-height: calc(37vh - 2px); + } + transition: max-height 300ms ease-in-out; overflow: scroll; } diff --git a/src/components/Examples.vue b/src/components/Examples.vue index ffaf2143..7c629ce0 100644 --- a/src/components/Examples.vue +++ b/src/components/Examples.vue @@ -19,7 +19,7 @@ export default { room : Room }, mounted() { - this.$store.commit('setInitialCameraPose', [6, 2.5, 4]); + this.$store.commit('setInitialCameraPose', [14, 2.5, 4]); if(this.embed && this.embed === 'true') { this.$store.commit('setEmbedded', true); } @@ -32,7 +32,7 @@ export default { temp.reverse(); this.sculptures = temp; //array.push isn't tracked by state, resetting is setTimeout(() => { - window.onCanvasResize(); + window.onCanvasResize(); }, 10); } diff --git a/src/components/Explore.vue b/src/components/Explore.vue index 06632e38..09a0abe4 100644 --- a/src/components/Explore.vue +++ b/src/components/Explore.vue @@ -1,11 +1,12 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/src/components/Room.vue b/src/components/Room.vue index a8e5abec..b5cad0cb 100644 --- a/src/components/Room.vue +++ b/src/components/Room.vue @@ -14,8 +14,8 @@ import {Vector3} from 'three'; export default { props: ['sculpturesData'], data: function() { - return { - grid : {x: 5, z: 0, spacing: 3.0, size: 1.0}, + return { + grid : {x: 11, z: 0, spacing: 4.0, size: 1.0}, sculptures : this.sculpturesData || [], sculpPositions: [] } diff --git a/src/components/Sculpture.vue b/src/components/Sculpture.vue index 8ff46779..6fe9b077 100644 --- a/src/components/Sculpture.vue +++ b/src/components/Sculpture.vue @@ -111,6 +111,7 @@ export default { this.shaderSource = input; try { this.sculpture.refreshMaterial(input); + this.$store.commit('setSculptureError', ' '); } catch (e) { this.$store.commit('setSculptureError', e); } diff --git a/src/components/SculptureFeed.vue b/src/components/SculptureFeed.vue index 7b28910b..d48a53bd 100644 --- a/src/components/SculptureFeed.vue +++ b/src/components/SculptureFeed.vue @@ -4,7 +4,7 @@
- +
{{sculpture.title}} @@ -90,11 +90,15 @@ img[lazy=loaded] { filter: blur(10px); opacity: 0.5; min-width: 0; + height: 350px; + object-fit: contain; transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out; } .v-lazy-image-loaded { opacity: 1; filter: blur(0); + height: 350px; + object-fit: contain; } .sculpture-container { diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue index 86574ea5..fa04c1de 100644 --- a/src/components/ShareModal.vue +++ b/src/components/ShareModal.vue @@ -35,9 +35,6 @@ export default { data: function() { return { - // shareUrl: "https://shaderpark.netlify.com/embed/", - // embedUrl: "https://shaderpark.netlify.com/sculpture/", - // codeOpen: false, showCopiedEmbedInfo: false, showCopiedEditInfo: false, showCopiedFullScreenInfo: false, @@ -57,13 +54,13 @@ export default { return this.$store.state.currSculpture; }, embedUrl() { - return ``; + return ``; }, fullScreenUrl() { - return `https://shaderpark.netlify.com/embed/${this.currSculpture.id}${this.isExample}`; + return `https://shaderpark.com/embed/${this.currSculpture.id}${this.isExample}`; }, editUrl() { - return `https://shaderpark.netlify.com/sculpture/${this.currSculpture.id}${this.isExample}`; + return `https://shaderpark.com/sculpture/${this.currSculpture.id}${this.isExample}`; }, sculptureTitle() { return this.currSculpture.title; diff --git a/src/components/SignIn.vue b/src/components/SignIn.vue index 438893e7..8f21f72b 100644 --- a/src/components/SignIn.vue +++ b/src/components/SignIn.vue @@ -13,7 +13,8 @@