# Generative Art and Transitioning Between Images

**URL:** <https://discourse.processing.org/t/generative-art-and-transitioning-between-images/14769>\
**Category:** Coding Questions\
**Created:** [October 17, 2019, 8:59pm UTC](https://discourse.processing.org/t/generative-art-and-transitioning-between-images/14769 "2019-10-17T20:59:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![e-sosa](https://avatars.discourse-cdn.com/v4/letter/e/f9ae1b/32.png) [@e-sosa](https://discourse.processing.org/u/e-sosa)\
**Post date:** [October 17, 2019, 8:59pm UTC](https://discourse.processing.org/t/generative-art-and-transitioning-between-images/14769/1 "2019-10-17T20:59:29Z")

</div>

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](https://www.youtube.com/watch?v=zT7We17o4zU)

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

```auto
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);
  }
  
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 17, 2019, 9:07pm UTC](https://discourse.processing.org/t/generative-art-and-transitioning-between-images/14769/2 "2019-10-17T21:07:37Z")

</div>

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

- JAVA

and not

- p5.js

or you just want make pictures?

---

<div class="post-metadata">

**Author:** ![e-sosa](https://avatars.discourse-cdn.com/v4/letter/e/f9ae1b/32.png) [@e-sosa](https://discourse.processing.org/u/e-sosa)\
**Post date:** [October 17, 2019, 9:10pm UTC](https://discourse.processing.org/t/generative-art-and-transitioning-between-images/14769/3 "2019-10-17T21:10:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![e-sosa](https://avatars.discourse-cdn.com/v4/letter/e/f9ae1b/32.png) [@e-sosa](https://discourse.processing.org/u/e-sosa)\
**Post date:** [October 17, 2019, 9:11pm UTC](https://discourse.processing.org/t/generative-art-and-transitioning-between-images/14769/4 "2019-10-17T21:11:39Z")

</div>

Thankfully these both kind of are interchangeable languages.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 17, 2019, 11:28pm UTC](https://discourse.processing.org/t/generative-art-and-transitioning-between-images/14769/5 "2019-10-17T23:28:52Z")

</div>

> [@e-sosa](#):
>
> I am trying to make generative art for my website and would love some assistance.

I look forward to seeing your work!

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

> [@kll](#):
>
> but if that is for a web page why you start with
> 
> - JAVA
> 
> and not
> 
> - p5.js
> 
> or you just want make pictures?

There are many ways to capture and share creative works.

Sharing a few examples with the community here:

Animated GIFs:

> [@Creating Animated GIFs in Processing](https://discourse.processing.org/t/creating-animated-gifs-in-processing/12386):
>
> I have a new hobby! slight_smile

Movie Maker:

> **[Tools](https://processing.org/reference/tools/)**
>
> The following tools are included with the Processing software. Select the tool you want to use from the Tools menu of the Processing Environment. These tools are open source; the code is distributed w…

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:

> **[Camtasia - Fast and Easy Video Editing Software | TechSmith](https://www.techsmith.com/video-editor.html)**
>
> Camtasia: Best all-in-one video editing software. Try free now!

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

[![](https://img.youtube.com/vi/n0tHdCL0i20/maxresdefault.jpg "Orbitals III") ](https://www.youtube.com/watch?v=n0tHdCL0i20)

Some cool sites:  
[https://twitter.com/beesandbombs](https://twitter.com/beesandbombs)

> **[Dave Whyte](https://dribbble.com/beesandbombs)**
>
> Dave Whyte | former physicist. taking commissions — dawhyte at tcd.ie | Connect with them on Dribbble; the global community for designers and creative professionals.

[https://twitter.com/sasj\_nl](https://twitter.com/sasj_nl)  
[http://www.sasj.nl/daily/](http://www.sasj.nl/daily/)

Books:

> **[Books](https://processing.org/books/)**
>
> Processing books cover topics from programming basics to visualization. Browse this page to find the right books for you.

Many have example code available.  
[http://www.generative-gestaltung.de/](http://www.generative-gestaltung.de/)🙂

P5.js:

> **[home | p5.js](https://p5js.org/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

“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/](http://www.generative-gestaltung.de/)

Sites:

> **[OpenProcessing - Creative Coding for the Curious Mind](https://openprocessing.org/)**
>
> OpenProcessing - Creative Coding for the Curious Mind

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

🙂