Generative Art and Transitioning Between Images

Processing Coding Questions
1

Hey everyone! My code below is functional when applied to one image for this self contained particle system. I am wondering how I can transition to different images similarly to this youtube video: https://www.youtube.com/watch?v=zT7We17o4zU

I am trying to make generative art for my website and would love some assistance.

PImage img;
float frequency = 0.01;
float noiseInterval = PI;

void setup() {
  size (475, 597);
  img = loadImage("Capture.PNG");
  smooth();
  background(0);
}

void draw() {
   for (int i = 0; i < 300; i++) {
     float x = map(noise(i*noiseInterval + frameCount * frequency),0,1,0,width);
     float y = map(noise(i*noiseInterval+1 + frameCount * frequency),0,0.75,0,height);
     color c = img.get(int(x), int(y));
     fill(c, 12);
     noStroke();
     ellipse(int(x), int(y), 5, 5);
  }
  
}
1 Like
2

nice,
but if that is for a web page why you start with

  • JAVA

and not

  • p5.js

or you just want make pictures?

1 Like
3

I realized afterward that p5.js will be good for it as it integrates with angular.

4

Thankfully these both kind of are interchangeable languages.

1 Like
5

I look forward to seeing your work!

Check out some of the books below.
The “Generative Design” books are an inspiration.

There are many ways to capture and share creative works.

Sharing a few examples with the community here:

Animated GIFs:

Movie Maker:

I use this to capture and then use as I wish.
I had a few sketches that were to slow in real time and I just capture frames for that and rendered overnight; just like they do for the movies!

Screen Capture:

There are numerous apps for this; I happen to have this one.
An example I did years ago:

Some cool sites:
https://twitter.com/beesandbombs

https://twitter.com/sasj_nl
http://www.sasj.nl/daily/

Books:

Many have example code available.
http://www.generative-gestaltung.de/ :slight_smile:

P5.js:

“You can think of your whole browser page as your sketch”
The site does not list this “NEW” book yet:
http://www.generative-gestaltung.de/

Sites:

And all the ways that are not listed here… please add them

:slight_smile:

4 Likes