About Algoportoflio

you can visit deployed version in here

I recently attended a collection of sessions on creating generative art using processing (open source tool for generative art using java ) at cocoon culture center located @cairo , So I took the chance and delved into P5.js which is JavaScript library for creative coding as well but for web . I wanted to make a react PWA(progressive web app) so i used react-p5 wich is a npm package for p5 to use it within your React app to create this website , which serves as

a online exhibtion to the offline one that was held @ cairo .

but thats not all if you click on "play with me " button it will take you to a new canvas with moving/interactive generative art created in your browser thanks to p5 and react-p5 ..

I used special css library called "98.css" which made alot of the styling much much easier. I also used cards from material ui to implement the gallary section.

The whole theme is inspired by win98 and this was me trying to simulate and create my own version as you can see.(the reson for the whole retro theme as i have been playing a lot of old nostalgic games on my switch lately so that was the first thing came to my mind :D )

how to use it :

click on "cocoon.exe" and check the online exhibtion to see some generative art works by 5 amazing artists (including me) with thier instagram accounts linked .

click on "play with me " it will take you to a new canvas with moving/interactive generative art created in your browser thanks to p5 and react-p5 (touch your screen to change pattern).

Technologies

react

react-p5

material ui /cards

98.css

firebase (for hosting and CI/CD)

Getting Started with algoart App in development mode

fork and clone the app

npm install

rub npm install to install all needed dependencies

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.