All Projects → generative-design → Code Package P5.js

generative-design / Code Package P5.js

Licence: apache-2.0
Code package of the book: Generative Design – Creative Coding for the Web with JavaScript in p5.js

Programming Languages

javascript
184084 projects - #8 most used programming language
p5js
31 projects

Projects that are alternatives of or similar to Code Package P5.js

canon-generator
Canon-generator: algorithmic composition using music21 and python
Stars: ✭ 19 (-96.53%)
Mutual labels:  generative-art
Vpype
The Swiss-Army-knife command-line tool for plotter vector graphics.
Stars: ✭ 292 (-46.62%)
Mutual labels:  generative-art
Rpd
👌 A Minimal Engine for creating Node-Based Visual Programming User Interfaces
Stars: ✭ 370 (-32.36%)
Mutual labels:  generative-art
desert
A fast (?) random sampling drawing library
Stars: ✭ 61 (-88.85%)
Mutual labels:  generative-art
Sand Spline
generative algorithm
Stars: ✭ 261 (-52.29%)
Mutual labels:  generative-art
Generativeart
Generative Art in Go
Stars: ✭ 313 (-42.78%)
Mutual labels:  generative-art
frameV
Framed Visuals: collaborative generative art.
Stars: ✭ 20 (-96.34%)
Mutual labels:  generative-art
Weir
A system for making generative systems
Stars: ✭ 451 (-17.55%)
Mutual labels:  generative-art
Csound Expression
Haskell Framework for Electronic Music
Stars: ✭ 257 (-53.02%)
Mutual labels:  generative-art
Flutter D Art
Generative d.Art with Flutter
Stars: ✭ 356 (-34.92%)
Mutual labels:  generative-art
VQGAN-CLIP-Docker
Zero-Shot Text-to-Image Generation VQGAN+CLIP Dockerized
Stars: ✭ 58 (-89.4%)
Mutual labels:  generative-art
Artline
A Deep Learning based project for creating line art portraits.
Stars: ✭ 3,061 (+459.6%)
Mutual labels:  generative-art
Generativeart
Create Generative Art with R
Stars: ✭ 322 (-41.13%)
Mutual labels:  generative-art
glitch-image
🖼 Generate and save unique glitchy images
Stars: ✭ 46 (-91.59%)
Mutual labels:  generative-art
Solving Sol
Implement Sol LeWitt's instructions in JavaScript.
Stars: ✭ 417 (-23.77%)
Mutual labels:  generative-art
nft-generator-py
Unique image & metadata generation using weighted layer collections.
Stars: ✭ 127 (-76.78%)
Mutual labels:  generative-art
Context Free
Context Free is a program that generates images from written instructions called a grammar. The program follows the instructions in a few seconds to create images that can contain millions of shapes.
Stars: ✭ 326 (-40.4%)
Mutual labels:  generative-art
Glisp
A Lisp-based Design Tool Bridging Graphic Design and Computational Arts
Stars: ✭ 519 (-5.12%)
Mutual labels:  generative-art
Pts
A library for visualization and creative-coding
Stars: ✭ 4,628 (+746.07%)
Mutual labels:  generative-art
Css Doodle
🎨 A web component for drawing patterns with CSS.
Stars: ✭ 4,014 (+633.82%)
Mutual labels:  generative-art

Generative Design Code Package (for P5.js)

Hi! This GitHub repository contains all of the source code for the book Generative Design: Creative Coding for the Web with JavaScript in p5.js. To get started, please follow the intructions in the sections: Setup and Running the Sketches. Enjoy!


Authors:

with contributions by:

Setup

The setup allows you to download the dependencies related to contributing changes to the project (e.g. generative-design-library.js). It also allows you to run a local web server using node. If any of that sounds too foreign or is not of interest and you just want to run the sketches, jump down to Running the Sketches.

  1. Install node.js (go for the latest stable version)
  2. Open Terminal and navigate over to the Code-Package-p5.js folder that you downloaded onto your computer:
$ cd path/to/folder
# e.g. cd /Users/GG/Documents/Code-Package-p5.js
  1. Run:
$ npm install

Running the Sketches

While most of the sketches work without running a local webserver, there are some sketches that will not run properly since they use external files2 (e.g. images or data) to create and inform the visualization. To run the sketches, you are welcome to use a local webserver of your liking.

There are many ways to start a local webserver. Please see the options below (not in any particular order)

Option 1

One method is to to use the local webserver of your choice (e.g. simple python webserver) and open up localhost:<port>in your browser1.

$ cd path/to/folder
# e.g. cd /Users/GG/Documents/Code-Package-p5.js

$ python -m SimpleHTTPServer
# check localhost:8000

Option 2

If you've already followed the instructions in the Setup section and you're using Node.js, you can follow the instructions below:

  1. Start a local web server (with live reload) by typing in your Terminal or Commandline the command below. This will open the index.html file (list of all sketches) a new browser window.
$ npm start
  1. Click on any of the links 🔗 listed to view and interact with the sketches.
  2. Interact, create, save, and share your work! 🌈#GenerativeGestaltung #generativedesign #p5js

1The default port is 8000, but you can change the port number by specifying the number after the command e.g. python -m SimpleHTTPServer 5000

2Some sketches work only as expected when the files are placed online, as the rely on "security" sensitive functionality like loading external files. If you try to view them locally without running a web server, you get some kind of "cross-origin" errors 😭 (see your browser's console). The solution is to serve the files using what's called a local web server. This is what happens when you run npm start as shown above or when you run your own local server.

License

All of the book's source code is licensed under the Apache License Version 2.0

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].