(null)
+// return (
+// <>
+//
+//
+//
+//
+// )
+// }
+
+// export default MarkdownPage;
+
+// import { MDXEditor, headingsPlugin, listsPlugin, quotePlugin, thematicBreakPlugin } from '@mdxeditor/editor'
+
+// function App() {
+// return
+// }
+
+import Image from 'next/image'
+import dynamic from 'next/dynamic'
+import { Suspense } from 'react'
+
+const EditorComp = dynamic(() => import('@/components/MDXEditor'), {
+ ssr: false,
+})
+
+const markdown = `
+Hello **world**!
+`
+
+export default function Home() {
+ return (
+ <>
+
+ This is a bare-bones unstyled MDX editor without any plugins and no
+ toolbar. Check the EditorComponent.tsx file for the code.
+
+
+ To enable more features, add the respective plugins to your instance -
+ see{' '}
+
+ the docs
+ {' '}
+ for more details.
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/(dashboard)/visualizer/page.tsx b/app/(dashboard)/visualizer/page.tsx
new file mode 100644
index 0000000..56ef795
--- /dev/null
+++ b/app/(dashboard)/visualizer/page.tsx
@@ -0,0 +1,35 @@
+
+import Uploader from "@/components/FileUploader"
+import {Visualizer} from "@/components/Visualizer"
+const getEEGData = async () => {
+ // const user = await getUserFromClerkID
+ // const entry = await prisma.journalEntry.findMany({
+ // where:{
+ // userId: user.id,
+ // },
+ // orderBy:{
+ // createdAt: 'desc'
+ // }
+ // })
+ // eegData =
+ // return eegData
+}
+
+const VisualizerPage = async () => {
+ // const data = await getEEGData()
+ // console.log('data ', data)
+ return (
+
+
Journal
+
+ Visualization
+ {/* */}
+
+
+
+
+
onClick(feeling.name)}
- >
-
- {feeling.name}
-
-
- {feelingsData.map((feeling) => (
-
- ))}
- {selectedFeeling && (
-
-
{`You selected: ${selectedFeeling}`}
-
- )}
-
+
Upload an image
+
+
+ );
+}
+
+export default Uploader;
\ No newline at end of file
diff --git a/components/ForwardRefEditor.tsx b/components/ForwardRefEditor.tsx
new file mode 100644
index 0000000..ddb47df
--- /dev/null
+++ b/components/ForwardRefEditor.tsx
@@ -0,0 +1,18 @@
+'use client'
+import dynamic from 'next/dynamic'
+import { forwardRef } from 'react'
+import {type MDXEditorMethods,MDXEditorProps } from '@mdxeditor/editor'
+// ForwardRefEditor.tsx
+
+// This is the only place InitializedMDXEditor is imported directly.
+const Editor = dynamic(() => import('./InitializedMDXEditor'), {
+ // Make sure we turn SSR off
+ ssr: false
+})
+
+// This is what is imported by other components. Pre-initialized with plugins, and ready
+// to accept other props, including a ref.
+export const ForwardRefEditor = forwardRef((props, ref) => )
+
+// TS complains without the following line
+ForwardRefEditor.displayName = 'ForwardRefEditor'
\ No newline at end of file
diff --git a/components/InitializedMDXEditor.tsx b/components/InitializedMDXEditor.tsx
new file mode 100644
index 0000000..b62dd52
--- /dev/null
+++ b/components/InitializedMDXEditor.tsx
@@ -0,0 +1,34 @@
+'use client'
+// InitializedMDXEditor.tsx
+import type { ForwardedRef } from 'react'
+import {
+ headingsPlugin,
+ listsPlugin,
+ quotePlugin,
+ thematicBreakPlugin,
+ markdownShortcutPlugin,
+ MDXEditor,
+ type MDXEditorMethods,
+ type MDXEditorProps
+} from '@mdxeditor/editor'
+
+// Only import this to the next file
+export default function InitializedMDXEditor({
+ editorRef,
+ ...props
+}: { editorRef: ForwardedRef | null } & MDXEditorProps) {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/components/MDXEditor.tsx b/components/MDXEditor.tsx
new file mode 100644
index 0000000..8151bd1
--- /dev/null
+++ b/components/MDXEditor.tsx
@@ -0,0 +1,33 @@
+//https://uiwjs.github.io/react-md-editor/
+// https://github.com/rehypejs/rehype-sanitize
+
+//https://mdxeditor.dev/
+//https://github.com/mdx-editor/editor
+
+"use client";
+
+import { MDXEditor, MDXEditorMethods, headingsPlugin } from "@mdxeditor/editor";
+import { FC } from "react";
+import '@mdxeditor/editor/style.css';
+
+interface EditorProps {
+ markdown: string;
+ editorRef?: React.MutableRefObject;
+}
+
+/**
+ * Extend this Component further with the necessary plugins or props you need.
+ * proxying the ref is necessary. Next.js dynamically imported components don't support refs.
+ */
+const Editor: FC = ({ markdown, editorRef }) => {
+ return (
+ console.log(e)}
+ ref={editorRef}
+ markdown={markdown}
+ plugins={[headingsPlugin()]}
+ />
+ );
+};
+
+export default Editor;
\ No newline at end of file
diff --git a/components/P5Wrapper.tsx b/components/P5Wrapper.tsx
new file mode 100644
index 0000000..c080f9d
--- /dev/null
+++ b/components/P5Wrapper.tsx
@@ -0,0 +1,66 @@
+import { P5CanvasInstance, ReactP5Wrapper } from "@p5-wrapper/react";
+// import React from "react";
+import { type Sketch } from "@p5-wrapper/react";
+import { NextReactP5Wrapper } from "@p5-wrapper/next";
+import {sketch1, sketch2, sketch3} from "@/utils/sketch";
+import { Download } from "@/utils/firebase";
+import {eeg, getData } from "@/utils/eeg"
+import { NextResponse, NextRequest } from "next/server";
+// import {getData} from "@/utils/"
+// processed EEG JSON https://firebasestorage.googleapis.com/v0/b/entheogen-a76f2.appspot.com/o/eeg%2F1d4df6b8-90ea-4437-8bea-fddb5b2802ba.json?alt=media&token=09a53f76-5b1f-450c-bf3c-dae19fe321d7
+import React, { useState, useEffect } from "react"
+import data from "@/data/eeg/1d4df6b8-90ea-4437-8bea-fddb5b2802ba.json"
+// const [results, setResults] = useState('')
+// const [loading, setLoading] = useState(false)
+// const getData = async () => {
+// setLoading(true)
+// // "1d4df6b8-90ea-4437-8bea-fddb5b2802ba" - eeg/
+// // 020164cc-7d0b-4b61-8c37-4b38be8e52a5 - muse/ await Download("020164cc-7d0b-4b61-8c37-4b38be8e52a5")
+// const res = await fetch("https://firebasestorage.googleapis.com/v0/b/entheogen-a76f2.appspot.com/o/eeg%2F1d4df6b8-90ea-4437-8bea-fddb5b2802ba.json?alt=media&token=09a53f76-5b1f-450c-bf3c-dae19fe321d7") //
+// setResults(res)
+// setLoading(false)
+// console.log("res in getData before is: ", res.json())
+// const { data } = res.json()
+
+// // const contents = await res.download();
+// // console.log("contents are: ", contents);
+// // const parsedContents = JSON.parse(res);
+// // console.log("parsedContents :",parsedContents )
+// const eegData = await eeg(data.data)
+// // console.log("res in getData after is: ", res)
+// return res
+// }
+
+// const eegData = async () => {
+// const data = await getData()
+// return data
+// }
+
+export default function P5() {
+ const [rotation, setRotation] = useState(0);
+ const [render, setRender] = useState({
+ renderAlpha: true,
+ renderBeta: true,
+ renderGamma: true,
+ renderDelta: true,
+ renderTheta: true
+ })
+ // localStorage.canvasWidth = width
+ useEffect(() => {
+ const interval = setInterval(
+ () => setRotation(rotation => rotation + 100),
+ 100
+ );
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, []);
+
+ // console.log("data in P5", data)
+ return ;
+
+ // return ;
+ // return ;
+
+}
\ No newline at end of file
diff --git a/components/Visualizer.tsx b/components/Visualizer.tsx
new file mode 100644
index 0000000..ac5981f
--- /dev/null
+++ b/components/Visualizer.tsx
@@ -0,0 +1,24 @@
+// processed EEG JSON https://firebasestorage.googleapis.com/v0/b/entheogen-a76f2.appspot.com/o/eeg%2F1d4df6b8-90ea-4437-8bea-fddb5b2802ba.json?alt=media&token=09a53f76-5b1f-450c-bf3c-dae19fe321d7
+// raw EEG JSON https://firebasestorage.googleapis.com/v0/b/entheogen-a76f2.appspot.com/o/muse%2F020164cc-7d0b-4b61-8c37-4b38be8e52a5.json?alt=media&token=d4d4a9aa-c512-43d5-8b86-f4acd16c0426
+"use client"
+import P5 from "./P5Wrapper"
+export const Visualizer = () => {
+ return (
+
+ {/* Viz */}
+
+ {/*
+
+
+
+
+
+
+
+
+ */}
+ {/* {this.props.renderViz ?
: null} */}
+ {/* */}
+ ![]()
tag to "download"
+ let res = ""
+ var xhr = new XMLHttpRequest();
+ xhr.responseType = 'json';
+ xhr.onload = function(event) {
+ var json= xhr.response;
+ console.log(json); // now you read the file content
+ res = json
+ };
+ xhr.open('GET', url);
+ xhr.send();
+ console.log("xhr: ", xhr)
+ return res
+ // console.log("url in eegRef is: ", url)
+ // dataURL = url
+ // return url //`${url}alt=media&token=09a53f76-5b1f-450c-bf3c-dae19fe321d7`
+ })
+ .catch((error) => {
+ // A full list of error codes is available at
+ // https://firebase.google.com/docs/storage/web/handle-errors
+ console.log("error in eegRef: ", error)
+ switch (error.code) {
+ case 'storage/object-not-found':
+ // File doesn't exist
+ return "File doesn't exist"
+ break;
+ case 'storage/unauthorized':
+ // User doesn't have permission to access the object
+ return " User doesn't have permission to access the object"
+ break;
+ case 'storage/canceled':
+ // User canceled the upload
+ return " User canceled the upload"
+ break;
+
+ // ...
+
+ case 'storage/unknown':
+ // Unknown error occurred, inspect the server response
+ return "Unknown error occurred, inspect the server response"
+ break;
+ }
+ });
+ return dataURL
+}
\ No newline at end of file
diff --git a/utils/sketch.ts b/utils/sketch.ts
new file mode 100644
index 0000000..f64c318
--- /dev/null
+++ b/utils/sketch.ts
@@ -0,0 +1,272 @@
+import { type Sketch } from "@p5-wrapper/react";
+import {
+ P5CanvasInstance,
+ ReactP5Wrapper,
+ SketchProps
+} from "@p5-wrapper/react";
+import React, { useEffect, useState } from "react";
+
+type MySketchProps = SketchProps & {
+ rotation: number;
+};
+
+export const sketch3: Sketch = (p5: P5CanvasInstance) => {
+ let rotation = 0;
+
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ p5.updateWithProps = props => {
+ if (props.rotation) {
+ rotation = (props.rotation * Math.PI) / 180;
+ }
+ };
+
+ p5.draw = () => {
+ p5.background(100);
+ p5.normalMaterial();
+ p5.noStroke();
+ p5.push();
+ p5.rotateY(rotation);
+ p5.box(100);
+ p5.pop();
+ };
+};
+
+
+type MySketch1Props = SketchProps & {
+ data: object;
+ render: object;
+};
+
+
+export const sketch1: Sketch = (p5: P5CanvasInstance) => {
+ // let data = getData()
+ // console.log("data in sketch", data)
+ console.log("props in sketch", p5)
+ p5.props = {}
+
+ p5.onSetAppState = () => { }
+
+ let data = {}
+
+ let i = 0;
+
+ let n = 0;
+ let n2 = 0;
+ let n3 = 0;
+ let n4 = 0;
+ let n5 = 0;
+
+ let x =0;
+ let y =0;
+ let x2 = 0;
+ let y2 = 0;
+ let rad = 0;
+ let rad2 =0;
+
+ let dist =0;
+ let dist2 = 0;
+ let x3 = 0;
+ let y3 =0;
+
+ let x4 =0;
+ let y4 =0;
+ let rad3 =0;
+ let rad4 =0;
+ let dist3 = 0;
+ let dist4= 0;
+
+ let x5 =0;
+ let y5 =0;
+ let rad5 =0;
+ let dist5 =0;
+
+ let yIn =0;
+ let rotateBy =0;
+ let ang =0;
+ let incr = 1;
+ let deg = 0;
+
+ let width = 400 //localStorage.canvasWidth
+ let height = 400//localStorage.canvasWidth
+ let framec;
+
+ let render = true
+ let gammaL = 100
+ let betaL = 100
+ let alphaL = 100
+ let thetaL = 100
+ let deltaL = 100
+
+ // let renderAlpha = false
+ // let renderBeta = false
+ // let renderGamma = false
+ // let renderDelta = false
+ // let renderTheta = false
+
+ p5.setup = () => {
+ // console.log("props in sketch setup", p5.props.data)
+ // p5.createCanvas(width, height)
+ // console.log("width: ", width)
+ // console.log("localstorage width: ",localStorage.canvasWidth)
+ p5.createCanvas(width, height) //p5.WEBGL)
+
+ p5.colorMode("hsb", 360, 100, 100,1)
+ p5.background(255, 0, 0)
+
+ i = 0;
+
+ rad = -20;
+ rad2 = -20;
+ rad3 = -20;
+ rad4 = -20;
+ rad5 = -20;
+
+ dist = 300;
+ dist2 = 350;
+ dist3 = 400;
+ dist4 = 450;
+ dist5 = 500;
+
+ n = 20;
+ n2 = 100;
+ n3 = 20;
+ n4 = 100;
+ n5 = 20;
+ framec = 0
+ }
+
+ p5.updateWithProps = function (props) {
+ console.log("props are: ", props)
+ if (props.data) {
+ console.log("data is:", props.data.data)
+ data = props.data.data
+ render = true
+ }
+ // if(props.render){
+ // console.log("props.render:", props.render)
+ // props.render.renderGamma ? gammaL = 100 : gammaL = 0
+ // props.render.renderBeta ? betaL = 100 : betaL = 0
+ // props.render.renderAlpha ? alphaL = 100 : alphaL = 0
+ // props.render.renderTheta ? thetaL = 100 : thetaL = 0
+ // props.render.renderDelta ? deltaL = 100 : deltaL = 0
+ // }
+ };
+
+
+ // p5.updateWithProps = props => {
+ // if (props.data) {
+ // // console.log("data is:", props.data.data)
+ // // rotation = (props.rotation * Math.PI) / 180;
+ // }
+ // };
+
+ p5.draw = () => {
+
+ if (p5.frameCount % 60 === 1) {
+ p5.onSetAppState({ frameRate: p5.frameRate().toFixed(1) })
+ }
+
+ p5.noStroke()
+
+ // console.log(!!data)
+ // console.log('data is: ', data)
+ // if (render) {
+ framec = p5.frameCount / 60
+ console.log("framec is: ", framec)
+ i = parseInt(framec % data.delta.length) * 10;
+ console.log("i is: ", i)
+
+ console.log("data.delta[i] is: ", data.delta[i])
+
+ rad = data.delta[i].scaled_rad;
+ rad2 = data.theta[i].scaled_rad;
+ rad3 = data.alpha[i].scaled_rad;
+ rad4 = data.beta[i].scaled_rad;
+ rad5 = data.gamma[i].scaled_rad;
+
+ dist = data.delta[i].scaled_dist;
+ dist2 = data.theta[i].scaled_dist;
+ dist3 = data.alpha[i].scaled_dist;
+ dist4 = data.beta[i].scaled_dist;
+ dist5 = data.gamma[i].scaled_dist;
+
+ n = 20//data.delta[i].scaled_noise;
+ n2 = 20//data.theta[i].scaled_noise;
+ n3 = 20//data.alpha[i].scaled_noise;
+ n4 = 20//data.beta[i].scaled_noise;
+ n5 = 20//data.gamma[i].scaled_noise;
+ // }
+
+ console.log("rad is: ", rad)
+
+ console.log("dist is: ", dist)
+
+ console.log("n is: ", n)
+
+ p5.fill(0,0,0, 0.1)
+ p5.rect(0, 0, width, height);
+ rotateBy += .003;
+ p5.push();
+
+ p5.translate(width / 2, height / 2);
+ p5.rotate(rotateBy);
+
+ while (deg <= 360) {
+ deg += incr;
+ // console.log("deg is: ", deg)
+ ang = p5.radians(deg);
+ // console.log("ang is: ", ang)
+
+ if(deltaL === 100){
+ p5.fill(280, 100, 100);
+ x = p5.cos(ang) * (rad + (dist * p5.noise(y / n, yIn)));
+ y = p5.sin(ang) * (rad + (dist * p5.noise(x / n, yIn)));
+ p5.ellipse(x, y, 1.5, 1.5);
+ }
+ if (thetaL === 100) {
+ p5.fill(240, 100, thetaL);
+ x2 = p5.cos(ang) * (rad2 + (dist2 * p5.noise(y2 / n2, yIn)));
+ y2 = p5.sin(ang) * (rad2 + (dist2 * p5.noise(y2 / n2, yIn)));
+ p5.ellipse(x2, y2, 1.5, 1.5);
+ }
+ if (alphaL === 100) {
+ p5.fill(100, 100, alphaL);
+ x3 = p5.cos(ang) * (rad3 + (dist3 * p5.noise(y3 / n3, yIn)));
+ y3 = p5.sin(ang) * (rad3 + (dist3 * p5.noise(x3 / n3, yIn)));
+ p5.ellipse(x3, y3, 1.5, 1.5);
+ }
+ if (betaL === 100) {
+ p5.fill(50, 100, betaL);
+ x4 = p5.cos(ang) * (rad4 + (dist4 * p5.noise(y4 / n4, yIn)));
+ y4 = p5.sin(ang) * (rad4 + (dist4 * p5.noise(y4 / n4, yIn)));
+ p5.ellipse(x4, y4, 1.5, 1.5);
+ }
+ if (gammaL === 100) {
+ p5.fill(0, 100, gammaL);
+ x5 = p5.cos(ang) * (rad5 + (dist5 * p5.noise(y5 / n5, yIn)));
+ y5 = p5.sin(ang) * (rad5 + (dist5 * p5.noise(y5 / n5, yIn)));
+ p5.ellipse(x5, y5, 1.5, 1.5);
+ }
+ }
+ deg = 0;
+ yIn += .005;
+ p5.pop();
+ }
+
+}
+
+export const sketch2: Sketch = (p5) => {
+ p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);
+
+ p5.draw = () => {
+ p5.background(250);
+ p5.normalMaterial();
+ p5.push();
+ p5.rotateZ(p5.frameCount * 0.01);
+ p5.rotateX(p5.frameCount * 0.01);
+ p5.rotateY(p5.frameCount * 0.01);
+ p5.plane(100);
+ p5.pop();
+ };
+};