nodebox / seed Goto Github PK

View Code? Open in Web Editor NEW

21.0 21.0 8.0 4.9 MB

Procedural Content Generator

Home Page: https://seed.emrg.be/

License: MIT License

CSS 22.08% HTML 2.02% JavaScript 75.37% Shell 0.52%

javascript procedural-generation

seed's Introduction

NodeBox 3

NodeBox is a new software application for creating generative art using procedural graphics and a new way to approach graphic design.

Highlights:

Node based -- the software uses a non-destructive workflow where every operation is represented by a visual block of code.
Open to extend -- look and change the source of every code block.
Python or Clojure -- Nodes can be written in popular dynamic programming languages.

For downloads, documentation and the forum, visit the website:

https://nodebox.net/

Building on Mac

NodeBox requires the Java JDK, and Homebrew (for Ant and Maven)

NodeBox uses Ant and Maven to build a running version. Install these first:

brew install ant maven

Then from the Terminal, run:

git clone https://github.com/nodebox/nodebox.git
cd nodebox
ant run

# To create a full app (the build will be in dist/mac):
ant dist-mac

Building on Windows

Install Git.
Install a recent Java SDK.
Install Ant.
Install Wix Toolset.

From the command prompt, run:

# Setup the correct environment variables
# (Modify these paths to your installation directories.)
set JAVA_HOME=c:\java\jdk
set ANT_HOME=c:\java\ant
set WIX_HOME=c:\java\wix
set PATH=%PATH%;%ANT_HOME%\bin;%WIX_HOME%\bin

git clone https://github.com/nodebox/nodebox.git

cd nodebox
ant run

# To create a full app (the MSI will be in dist/windows):
# Set the correct version in src/main/resources/version.properties
ant dist-win

Building on Linux

Ubuntu Linux

Or other distributions based on APT package system:

sudo apt install git openjdk-11-jdk ant
git clone https://github.com/nodebox/nodebox.git
cd nodebox
ant run

Fedora Linux

Or other distributions based on YUM package system:

sudo yum install git java-11-openjdk ant
git clone https://github.com/nodebox/nodebox.git
cd nodebox
ant run

Arch Linux

Nodebox has an aur package for distributions based on Arch linux : nodebox-git

yaourt -S nodebox-git

git clone https://aur.archlinux.org/nodebox-git.git
cd nodebox-git
makepkg
sudo pacman -U nodebox-git-[version-number]-any.pkg.tar.xz

You can then launch nodebox as any desktop application, or by running the nodebox command on terminal.

Building on FreeBSD/PC-BSD

Just use pkg:

sudo pkg install git openjdk-11 apache-ant
git clone https://github.com/nodebox/nodebox.git
cd nodebox
ant run

seed's People

Contributors

Stargazers

Watchers

Forkers

tanvikumar kunal-mohta wvik chanakade pramodith ophid1an codestryker

seed's Issues

The Save Button still generates a new URL on no change

The Save Button still generates a new URL even though seed and sketch haven't changed. Perhaps disable the button on saving and allow clicks on seed change and source change?

Will fix this if required.

Changing the seed doesn't highlight the save button.

Unknown sketch should give 404, not "Cannot read property split of undefined"

Wheb loading an unknown sketch we do not get a 404 error but a weird JavaScript error.

For example try loading this page:

https://seed.emrg.be/sketch/DOESNOTEXIST

The error looks like the following:

Allow sketches to import other sketches

As a user I want to bring in other sketches in my sketches so I can re-use existing work/

As an example, you could create a "fake title" generator that could be used in a "fake news website" generator. Imagine we have a fake title generator saved as sketch -L41HTgXT1z6Vaxno2eR. This is how we could import it:

%import "-L41HTgXT1z6Vaxno2eR" as headline

root:
- <html><body><h1>Fake Gazette</h1>{{ article * 10 }}</body></html>

article:
- <article><h1>{{ headline }}</h1><a href="#">Read More...</a></article>

Because sketch URLs are immutable there are no version conflicts (although it makes it harder to upgrade them with new features).

This depends on #4 (preamble syntax).

Before running the sketch, check if all references are valid

Currently resolving references happens at runtime, which means sketches like this only fail 50% of the time:

root:
- This line is fine
- This line contains an invalid {{ reference }}

To avoid these errors happening at runtime I suggest creating a validation step in parsePhraseBook that checks if all references in the script are valid.

Deploying to Firebase will return a stale version from cache

Firebase Hosting aggresively caches all files, including JS and CSS files. This means that doing firebase deploy will not immediately show the new version on the web.

A solution would be to automatically append a md5 hash or timestamp to the file names in index.html.

Replace Firebase Websocket with REST API

We run into issues of too many connections when using Firebase during workshops. Each <iframe> causes an additional connection to be opened.

Firebase has support for a REST API. E.g. this is how you can fetch a sketch:
https://emrg-pcg.firebaseio.com/sketch/-L0iQdDbqd1vMVn7hgmo.json

Reference:
https://firebase.google.com/docs/reference/rest/database/

Because we don't depend on the real-time aspect I would suggest replacing the Websocket connection with GET and POST requests across the app.

Configurable recursion depth

Allow the user to configure the depth of the recursion. Currently this value is hard-coded. This would allow users to make more complex recursive structures like trees or fractals.

Example of the syntax:

% depth: 100

root:
- <svg ... />

This depends on #4 (preamble syntax).

Local version warning has some usability issues

The initial commit for local version changes looks very good! There are some small issues I'd still like to see fixed:

Restore button sometimes overlays the "Save" button (see screenshot).
No extra confirm dialog when clicking the "Restore" button
Prompt sounds weird on the blank sketch page
Prompt sounds like somebody else has made the changes instead of the user.
Still gives the warning even if the source code is identical (e.g. accidentally typing a letter and deleting it)

Allow users to export animated GIFs

When creating an animation, it would be nice if users could export the animation as an animated GIF.

This is challenging for a number of reasons:

The output are HTML / SVG elements, not a canvas tag, so we can't use something like GIF.js
The element we want to convert to GIF can be any element, of any size. The size can even change between frames.

One idea is to create a server-side renderer that could take seed sketches and render them in a headless browser, like Headless Chrome or PhantomJS. This would work as a webservice: we request a URL and it returns a GIF image.

Better "whitespace" checking.

Right now, as individual characters goes, only single spaces " " are considered white space, and we tell the parser to skip those in some instances (most importantly when they occur between {{ }} tokens). But sometimes white space is not visible to the eye, causing errors that are hard to spot. Extend the skipWhitespace function to characters that are also considered white space.

The alternative is to make such white space characters visible in the editor. For that, #19 is a prerequisite.

Make the seed an optional query string in the URL

Currently, when a sketch is loaded it takes the value of the saved seed version. However, this way different variations of the same sketch can't be easily bookmarked, without saving a new version first, even if nothing in the code changes. A better way is to add an optional query string, for example ?seed=IJX in the URL.

The application should use this seed if present, and otherwise use the saved seed value as is now the case (if it was saved in the first place). Furthermore, if the seed value changes, the URL should reflect the newly set seed, so that it can be bookmarked by the user. This needs to be done in a careful way though, because setting the URL through javascript causes the page to reload, and we don't want that. However, apparently we can manipulate the URL through window.history.pushState(), which doesn't trigger a page load so this might be the better way to go.

I think this is a better way of handling the issue described in #8

Add "preamble" syntax to configure a sketch

There are some global parameters that need to be set for the sketch. These include:

length / duration of an animation
animation type (linear, bounce)
recursion depth

We need to think of a syntax and create an implementation to support these global parameters.

Gender specification in sketches

Right now if the user wants to include a gender specific word like his/her, he/she, etc., then it needs to be hard coded. What it means that the user will have know before hand what the gender is.
Maybe you could add a way to let user specify the statement to be used for a particular gender.

It could be done in the following way -

root:
- (male) {{ giver }} did his job.
- (female) {{giver}} did her job.

This is just a suggestive syntax. It should obviously be decided by you.

Add syntax for using items only once

When creating a new project it's often useful to only use terms once.

E.g. if you have a list of names or topics, you only want Seed to select from the list, but never show the same thing more than once.

We already have a syntax for re-using a selection:

{{ topic:one }}

I propose using the syntax for distinct elements:

{{ topic:~site }}

Internally what this does is generate a list of indices, one for each option, shuffled in random order. E.g. if a list of topics has 5 items the indices could look like this:

4 2 1 0 3

This implies that if you have 5 items, you can only use the {{ topic:~site }} token 5 times. If you use it more than 5 times, the list of indices is repeated (e.g. 4 2 1 0 3 4 2 1 0 3 ...).

Why does the history change for every seed change?

Do we need to change the history item every time we change the seed? This might result in hundreds of history items when exploring a design.
An alternative might be to just push a seed onto the URL using replaceState.

Add metadata to the page to help with Slack/Twitter/Facebook previews

This requires something like #16 to be implemented first.

Here's a guide to "unfurling":
https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254

Add syntax highlighting.

Currently it can be quite cumbersome to spot mistakes. Syntax highlighting will help a lot, but this depends on #19.

Unclear error when defining / using an identifier with spaces

Phrase identifiers can't have spaces in them. If users accidentally do add them, the error is unclear:

This is the error when defining a block with an invalid identifier:

This is the error when using an invalid identifier:

Add a `/view` route that shows just the sketch result

Add a special route, either in editor.js or using firebase.json to just show the result of the sketch without the editor. This page should:

load the sketch from the Firebase REST API.
set the seed if specified in the URL (?seed=ABC)
render the script
show the output as HTML on the page
have minimal dependencies (ideally no dependency on firebase.js / editor.js)

This is needed to solve #16 .

Configurable animation duration / type

As a user I want to be able to configure the duration of the animation instead of using the standard duration.

Using simple syntax at the top of the sketch I could set how long the animation would take (in seconds) and how the animation behaves:

% duration: 10s
% animation: linear

root:
- <svg ... />

Animation types are:

linear: play the animation repeatedly, from beginning to end.
bounce: play the animation forwards, then backwards, repeatedly.
once: play the animation once.

This depends on #4 (preamble syntax).

Each error message should mention the right line number and position.

Right now only errors on the global structure of the source code communicate their line numbers. Expand this to the parsing and runtime level.

Also I noticed the current position numbers mentioned in errors are always off by at least 2 positions (due to the the first 2 characters of a line as the necessary indentation).

Conditional text generation

I have a use case where I want to generate text based on incoming data. Depending on different data parameters I want to be able to select a piece of text.

E.g. there's a parameter called "rain_chance". Depending on the values you get different pieces of text:

weather_report(rain_chance):
-(rain_chance < 0.1) No rain expected today.
-(rain_chance < 0.1) It won't rain today.
-(rain_chance < 0.5) It probably won't rain today.
-(rain_chance < 0.8) We're pretty sure it will rain.
-(rain_chance > 0.8) Bring an umbrella!
-(_) No idea what the weather is going to be.

The syntax is preliminary: we should be able to distinguish between a conditional statement and a line of text that begins with a bracket.

There are two options for the first case, and Seed should select between them.
Note that there should also be a special operator for the "other" case.

Prompt for unsaved changes when clicking the Seed logo

Users often accidentally click the "Seed" logo instead of the "Generate" button, which takes them back to the home page instead of making changes.

Verify that there are no unchanged changes before changing the page.

Can't type in editor while animation is playing

Either:

Allow typing during animation, live-updating it while it is playing.
Stop the animation once you start typing

Remember picked values using name:hero

I want to be able to pick a certain value and re-use it throughout the script, e.g. the name of the hero:

root:
- {{ intro }} {{ main }} {{ ending }}

intro:
- {{ name:hero }} woke up. It had been a long night...

main:
- As {{ name:hero }} set on a quest,...

ending:
- At last {{ name:hero }} was back home.

Support for importing sketches as namespaces

As a continuation on #5

We should be able to call different functions(?) like sketch.rootor sketch.article on imported sketches. A made up example:

%import -myFakeArticlesSketchURL as gazette

root:
- <html><body><h1>Fake Gazette</h1>{{ gazette.article * 10 }}</body></html>

Interpolation for colors / RGB values

For animations I want to be able to interpolate between values:

- <rect x={{ 100-500 }} y=0 width=100 height=100 fill={{ red-green }} />

Add support for:

hexadecimal values
named color values (red, green, blue, ...)

Gifloopcoder has support for this

root:
- {{ square(5..100) }}

square(size):
- <rect x={{ 0..500 }} y={{ 0..500 }} width={{ size }} height={{ size }} />

A function can have multiple parameters when called:

root:
- {{ square(5..100, color) }}

Parameters are either names (causing a random lookup), value ranges, ...

Scrolling in editor

Long texts in the editor cause the scrolling bar to go way below the mark.

Execute asynchronous JavaScript in a tag

Currently the JS filter doesn't work with asynchronous JavaScript, returning a Promise object. It would be cool if we could use something like

js("await (await fetch('https://somewebservice.com/api.json")).json()")

and e.g. get the image URL back from a JSON request to Flickr.

nodebox / seed Goto Github PK

seed's Introduction

NodeBox 3

Building on Mac

Building on Windows

Building on Linux

Ubuntu Linux

Fedora Linux

Arch Linux

Building on FreeBSD/PC-BSD

seed's People

Contributors

Stargazers

Watchers

Forkers

seed's Issues

Recommend Projects

Recommend Topics

Recommend Org