Fxhash_projects

Projects done using FX Hash code. Each folder contain an html file as placeholder, a p5 library code as reference: https://p5js.org/ , a css code for basic styling and the sketch itself. Most of the sketches were developed in Open Processing, a site for online coding with the p5 library: https://openprocessing.org and the reference of the library: https://p5js.org/reference/ Some of the sketches do not use FX HAsh yet but are implemented using random. random() will be replaced by fx rand(). An example is the orange sketch. Here also are other samples , mainly because they are built in p5.js

---

#Essential Resources

The Coding Train (YouTube): Daniel Shiffman is the "patron saint" of p5.js. His Code! Programming with p5.js playlist is gold.

p5.js Reference: Keep the Reference Page open at all times. It's the best documentation in the dev world.

OpenProcessing: Look at what others are making for inspiration (and to peek at their code).

---

Learning p5.js in a month is a fantastic goal. Because p5.js is designed for visual instant gratification, you’ll be making "art" on Day 1. The best way to tackle this is to spend 30–60 minutes a day. Use the p5.js Web Editor so you don't have to worry about setup.

Here is the learning schedule organized into a scannable table.

Week	Day	Topic	Goal
Week 1	1	The Canvas	Understand setup(), draw(), and the coordinate system.
	2	2D Shapes	Draw primitives like rect(), ellipse(), and line().
	3	Color & Style	Master fill(), stroke(), and color values.
	4	Coordinates	Practice spatial placement and relative positioning.
	5	Custom Shapes	Use beginShape() and vertex() for complex polygons.
	6-7	Project	Create a "Self-Portrait" or "Robot" using static shapes.
Week 2	8	Variables	Create and use custom variables (let) for position/size.
	9	Built-in Vars	Utilize interactive variables like mouseX and mouseY.
	10	Animation	Increment variables inside draw() to create movement.
	11	Randomness	Use random() for jitter and varied color palettes.
	12	The map() Function	Translate one range of numbers into another for control.
	13	Conditionals	Use if/else logic to create bouncing or edge detection.
	14	Project	Build an interactive "Paint" program/drawing tool.
Week 3	15	For Loops	Use loops to draw multiple objects with minimal code.
	16	Nested Loops	Create complex grids and repeating patterns.
	17	Functions	Organize code into reusable custom functions.
	18	Transformations	Master translate(), rotate(), and push/pop.
	19	Trigonometry	Use sin() and cos() for wave-like motion.
	20	Arrays	Store lists of data to manage multiple elements.
	21	Project	Design a generative wallpaper/pattern generator.
Week 4	22	Classes (OOP)	Create "blueprints" for objects using Classes.
	23	Object Arrays	Manage a collection of active objects (e.g., particles).
	24	Collision	Write logic to detect when two objects intersect.
	25	External Media	Import and display images using loadImage().
	26	Sound	Add audio triggers and effects using p5.sound.
	27-30	Final Project	Build a game, music visualizer, or generative garden.