Gatsby P5 Starter

Overview

This is a Gatsby starter that integrates with p5.js, a JavaScript library for creating interactive graphics and animations. The starter provides a way to display p5.js sketches in a responsive CSS-grid gallery. The creator of this starter created it because they love working with p5.js and wanted an easy way to showcase their sketches. They couldn’t find any pre-existing scaffolding in the Gatsby Starter Library, so they decided to create their own.

Features

• Gatsby integration: This starter is built on Gatsby, a React-based framework for creating fast and modern websites.
• React integration for p5.js sketches: The starter provides a custom wrapper for integrating p5.js sketches into React components.
• Responsive CSS-grid gallery: The starter includes a responsive gallery layout built with CSS-grid and Sass for displaying the p5.js sketches.

Installation

To use this Gatsby starter, you need to have Node.js, Git, and the Gatsby CLI installed.

1. Make sure you have Node.js installed. Run node -v on the command line to check if it’s installed.
2. Install Git if you don’t have it already.
3. Install the Gatsby CLI globally by running sudo npm install -g gatsby-cli and entering your password when prompted.
4. If you already have gatsby-cli and encounter an error related to a missing dependency called ink, update your gatsby-cli by running npm update gatsby.

Once you have the prerequisites installed, you can create a new Gatsby site and start using the p5.js integration provided by this starter.

1. Use the Gatsby CLI to create a new site based on this starter by running gatsby new [directory-name] https://github.com/[repo-name].
   • Replace [directory-name] with the desired name for your project directory.
   • Replace [repo-name] with the URL of the repository for this starter.
2. Navigate into the project directory by running cd [directory-name].
3. Start the Gatsby development server by running gatsby develop.
4. Your site is now running at http://localhost:8000. You can also access GraphiQL, a tool for querying your data, at http://localhost:8000/___graphql.

To add your own p5.js sketches to the gallery, follow the instructions provided in the README of the starter.

Summary

The Gatsby p5.js Gallery Starter is a Gatsby starter that allows users to easily display their p5.js sketches in a responsive gallery layout. It provides integration with p5.js and React, as well as a CSS-grid gallery for showcasing the sketches. The installation process involves setting up the necessary prerequisites and then creating a new Gatsby site based on this starter. Users can then add their own p5.js sketches to the gallery by following the instructions provided. Overall, this starter is a convenient solution for p5.js enthusiasts who want to showcase their work using Gatsby.