The point of this project is to finally build a proper website for AII3, one that i can eventually transfer a lot of my work to and customize a entire website without relying on a external organization or tool (like Mobirise)
At the moment the context shown when going to AII3.org looks like this (see image). I set this up several months ago to simply show that i own the page and that i was planning to build a proper page in the near future.
the basic page features a black and white scheme with a slowly appearing ASCII artwork and basic contact info.
This work in progress page can still be found on my Github
Site and layout sketch up
For the AII3 website i wanted to go with a black and white, color scheme. with black being the background and white being used for the highlights for a "terminal" like look. for the layout i decided on 3 key areas: Logo, Projects and Frame.
The Logo is a section displaying the AII3 logo
Projects is a section that appears like a file system in a computer, with Named folders that contain items that when clicked link to other pages. This will act in place of more tradition methods like a hamburger bar link system.
Frame is a section that displays a 3d model wireframe, this changes depending on the item selected
screenshot of plotter vision system
The frame system needs to be able to:
1. display a STL model
2. do so in black and white
3. change the selected model
4. work within React.JS
After a lot of research i found a open source project that would act as a perfect base that i could reactor and build up into the frame system i need. Called Plotter-Vision it is based upon the P5.JS Javascript library.
Plotter-Vision: Web Github Blog
Made by Trammell Hudson
What is P5.JS?
P5.JS is a JavaScript library for creating interactive, web-based art and
design projects. It includes a variety of built-in functions and tools for
working with graphics, animation, and input events, as well as support for
WebGL, which allows developers to create high-performance 3D graphics and
animations.
Some examples of what you can do with P5.JS include:
* Creating interactive animations and graphics using JavaScript
* Implementing input events, such as mouse and keyboard interactions, to create interactive experiences
screenshot of the react-p5 library
To do this I used the react-p5 library (Link), installed through the npm command. and leveraging the example sketch while referring back to demos from the P5.JS website i was able to get a basic P5.JS app working within React.JS (shown in the image below)
basic p5.js app running within react
"pong" app and the code
i've used p5.js before using their online editor, messing with demos for a bit of fun but have never applied it to a proper app i plan to deploy. To refresh my memory and just get used to the new syntax needed for p5 in react i made a basic "pong" style app to refamiliarize myself
Image Description
WIP
Mobirise.com