workshop - Intro to Creative Coding & Generative Art, by Ahmad Moussa (links)

 https://slides.com/ahmadmoussa-3/creative-coding-generative-art

by https://x.com/gorillasu

https://timeline.lerandom.art Generative Art Timeline

https://editor.p5js.org 

https://x.com/gorillasu/status/1857444190910664749 example with p5js

https://openprocessing.org/sketch/2320206

example on fxHash https://www.fxhash.xyz/marketplace/generative/15063

colors palette : https://ronikaufman.github.io/color_pals/

colors manipulation js library : https://gka.github.io/chroma.js/

+ https://encycolorpedia.com/2b3c00

https://iquilezles.org/articles/distfunctions/ shapes and math

doc on fxHash : https://docs.fxhash.xyz/

Tricks : 

- when playing with RGB, start from the median value 127.5 and move around +/- 127.5

- RGB + 2 chars => 2 chars of transparency

- cos/sin/tan [0..1] with frameCount native variable of p5js : use pi to divide values and have the last frame coincide with the first frame of the loop.

--- first example

let a = 1;

var b;

const windowWidth = 800;

const windowHeitgh = 800;

function setup() {

  // attach a canvas element to the dom

  createCanvas(windowWidth, windowHeitgh);

  

}

// runs continously for each frame of the video, unless noLoop() inside

function draw() {

  // "#efface"

  // "#decede"

  background("#decede");

  ellipse(100, 150, 100)

  fill ("#efface")

  rect (300, 200, 200)

  noStroke()

  stroke("blue")

  

}

-- animated

let a = 1;

var b;

const windowWidth = 400;

const windowHeitgh = windowWidth;

function setup() {

  // attach a canvas element to the dom

  createCanvas(windowWidth, windowHeitgh);

  

}

// runs continously for each frame of the video, unless noLoop() inside

function draw() {

  // "#efface"

  // "#decede"

  background("#decede");

  noStroke()

  let t = frameCount 

  // for (let y = 0; y < 400; y=y+1){

  //   ellipse (200, y, 5)

  // }

  

  // console.log(frameCount/50)

  for (let y = 0; y < 400; y=y+1){

    fill(127.5 + sin (-frameCount/50 + y/20) * 127.5, 

         127.5 + sin (-frameCount/50 + y/20) * 127.5, 

         127.5 + sin (-frameCount/50 + y/20) * 127.5)

    

    ellipse (200 + sin (-frameCount/50 + y/20) * 20, 

             y,

             20 + cos (frameCount/30 + y/10) * 10)

  }  

  

}

--- moving, and colors changing (by me, inspired by GorillaSun)

let a = 1;

var b;

const windowWidth = 400;

const windowHeitgh = windowWidth;

let variation = 0

let variation2 = 2

function setup() {

  // attach a canvas element to the dom

  createCanvas(windowWidth, windowHeitgh);

  frameRate(50) // frame / s

  

  randomSeed(0) // so that random always does the same

  variation = random(0, 80)

  variation2 = random(100, 80)

}

let loopLength = 75

// runs continously for each frame of the video, unless noLoop() inside

function draw() {

  // "#efface"

  // "#decede"

  background("#decede");

  

  // trick to 

  let t = ( frameCount % loopLength ) / loopLength  * 2 * PI;

  

  // console.log(sin(PI))

  

  // noStroke()

  

  // for (let y = 0; y < 400; y=y+1){

  //   ellipse (200, y, 5)

  // }

  

  // console.log(frameCount/50)

  for (let y = 0; y < 400; y=y+1){

    stroke (127.5 + sin (-t + y/variation) * 127.5, 

            127.5 + sin (-t + y/20) * 127.5, 

            127.5 + sin (-t + y/variation2) * 127.5)

    

    // fill(127.5 + sin (-t/50 + y/20) * 127.5, 

    //      127.5 + sin (-t/50 + y/20), 

    //      127.5 + sin (-t/50 + y/20) * 127.5)

    noFill()

    

    square (200 + sin (-t/50 + y/variation) * 20, 

            200 + tan (-t/50 + y/variation) * variation*variation/3,

             20 + cos (t/30 + y/variation) * variation)

  }  

  

}

function keyPressed(){

  console.log(keyCode)

  if (keyCode == 56){

  saveGif('annimation', 4)

  }

}

--- other links and code from the presentation

other code from the presentation :

Sinus Wave by Ahmad Moussa || Gorilla Sun  https://openprocessing.org/sketch/1784279

function setup() {

createCanvas(400, 400);

}

function draw() {

background(0);

noStroke();

let t = millis()/500

for(let y = 20; y < 380; y++){

  fill(

    127.5 + 127.5 * sin(t + y/40),

    127.5 - 127.5 * cos(t + y/40),

    127.5 + 127.5 * cos(t + y/40)

  )

  ellipse(

    200 + sin(t + y/80 +

              sin(t + y/400) +

              cos(t + y/100)*2

             ) * 30, 

    y + sin(t + y/80 +

              sin(t + y/400))*15,

    20 + sin(t + y/10) * 15)

}

}

variation square by Ahmad Moussa || Gorilla Sun 

function setup() {

createCanvas(400, 400);

}

function draw() {

background(0);

noStroke();

let t = millis()/500

for(let y = 20; y < 380; y++){

  fill(

    127.5 + 127.5 * sin(t + y/40),

    127.5 + 127.5 * cos(t + y/40),

    127.5 - 127.5 * sin(t + y/80)

  )

  ellipse(

    200 + sin(t + y/80 +

              sin(t + y/400) +

              cos(t + y/50)*2

             ) * 30, 

    y + sin(t + y/80 +

              sin(t + y/400))*15,

    20 + sin(t + y/30) * 15)

}

}

LINKS

https://neal.fun/

https://datasciencebydesign.org/blog/a-conversation-with-saskia-freeke

https://www.instagram.com/p/Cs9Jyz_ss1Y/

https://onemillioncheckboxes.com/

https://www.todepond.com/

https://www.instagram.com/p/C1m2zkYsTPx/

https://www.holo.mg/dossiers/vera-molnar-weaving-variations/

https://x.com/v3ga/status/1734285242809065546

https://www.youtube.com/@HYPERRAUMTV/videos

Zach Lieberman, Talk: Poetic Computation + atlas of blobs

https://openprocessing.org/user/272186?view=sketches&o=48

https://openprocessing.org/sketch/1790997

https://openprocessing.org/sketch/1792470

https://openprocessing.org/sketch/2320206 simple circles packing by Ahmad Moussa || Gorilla Sun 

(with : <script src="https://openprocessing.org/openprocessing_sketch.js"></script>

<script src="https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.js"></script>

<script src="https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/addons/p5.sound.min.js"></script> )

let circles = []

let numAttempts = 20000

let canvas_width = 800

let canvas_height = 800

let padding = 50

function setup() {

  createCanvas(canvas_width, canvas_height);

  pixelDensity(4)

  

  background(0)

  stroke(255)

  

  for(let n = 0; n < numAttempts; n++){

    

    let randX = random(padding, canvas_width-padding)

    let randY = random(padding, canvas_height-padding)

    let randR = random(5, 120)

    

    let placeable = true

    for(let circle of circles){

      let d = dist(

        randX, randY, circle.x, circle.y

      )

      

      if(d < randR + circle.r + 5){

        placeable = false

      }

    }

    

    if(

      (randX + randR > canvas_width-padding) ||

      (randX - randR < padding) ||

      (randY + randR > canvas_height-padding) ||

      (randY - randR < padding)

    ){

        placeable = false

    }

    

    if(placeable){

      circles.push(

        {

          x: randX, y: randY, r: randR

        }

      )

    }

  }

  

  strokeWeight(2)

noFill()

  for(let circle of circles){

    ellipse(

      circle.x,

      circle.y ,

      circle.r*2

    )

  }

  

  noLoop()

}

https://openprocessing.org/sketch/1959720

 Particle System with Grid Lookup

by Ahmad Moussa || Gorilla Sun 

(  <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script> ) 

p5.disableFriendlyErrors = true;

let N_PARTICLES = 50;

let particles = [];

let grid;

function setup() {

  createCanvas(windowWidth, windowHeight);

  grid = new Grid(windowWidth, windowHeight, 22);

  for (let n = 0; n < N_PARTICLES; n++) {

    let particle = new Particle(new createVector(random(windowWidth), random(windowHeight)))

    particles.push(particle);

    grid.addParticle(particle);

  }

}

function draw() {

  background(220);

  if (mouseIsPressed) {

    for(let n = 0; n < 5; n++){

let particle = new Particle(new createVector(mouseX+random(-1,1), mouseY+random(-1,1)))

    particles.push(particle);

    grid.addParticle(particle);

}

  }

  textSize(30)

  textAlign(LEFT, TOP)

  let numCollisionChecks = 0

  let startneigh = performance.now();

  for (let p of particles) {

    let neighbors = grid.getNeighbors(p)

    numCollisionChecks += p.checkCollision(neighbors)

p.updateState();

  }

  let endneigh = performance.now();

  let coll = `${numCollisionChecks} collisions computed in ${ endneigh - startneigh} ms`

  let startup = Date.now();

  for (let p of particles) {

p.checkEdges();

    grid.removeParticle(p)

    grid.addParticle(p)

  }

  let endup = Date.now();

  let up = 'Grid updated in ' + round(endup - startup, 2) + ' ms'

noFill()

  let startd = Date.now();

  for (let p of particles) {

    p.display();

  }

  let endd = Date.now();

  let dr = 'Draw in ' + round(endd - startd, 2) + ' ms'

  fill(0)

  text('Particles: ' + particles.length, 10, 10)

  text(coll, 10, 50);

  text(up, 10, 90);

  text(dr, 10, 130);

}

class Particle {

  constructor(pos) {

    this.pos = pos;

    this.velocity = createVector(random(-1.25, 1.25), random(-1.25, 1.25));

    this.acceleration = createVector(0, 0);

    this.mass = random(3, 10)

    this.radius = this.mass;

    this.maxSpeed = 10;

  }

  updateState(newPos) {

    this.velocity.add(this.acceleration);

    this.velocity.limit(this.maxSpeed); // Limit the particle's speed

    this.pos.add(this.velocity);

  }

  checkEdges() {

    if (this.pos.x - this.radius < 0) {

      this.pos.x = this.radius; // Prevent from leaving the canvas from the left side

      this.velocity.x *= -1;

    } else if (this.pos.x + this.radius > width) {

      this.pos.x = width - this.radius; // Prevent from leaving the canvas from the right side

      this.velocity.x *= -1;

    }

    if (this.pos.y - this.radius < 0) {

      this.pos.y = this.radius; // Prevent from leaving the canvas from the top

      this.velocity.y *= -1;

    } else if (this.pos.y + this.radius > height) {

      this.pos.y = height - this.radius; // Prevent from leaving the canvas from the bottom

      this.velocity.y *= -1;

    }

  }

  checkCollision(otherParticles) {

let counter = 0

    for (let other of otherParticles) {

      if (this != other) {

        let distance = this.pos.dist(other.pos);

        let minDistance = this.radius + other.radius + 1;

        if (distance <= minDistance) {

          // Calculate collision response

          let normal = p5.Vector.sub(other.pos, this.pos).normalize();

          let relativeVelocity = p5.Vector.sub(other.velocity, this.velocity);

          let impulse = p5.Vector.mult(normal, 2 * p5.Vector.dot(relativeVelocity, normal) / 2);

          // Apply repulsion force to prevent sticking

          let repulsion = p5.Vector.mult(normal, minDistance - distance + 2).mult(1);

          // Update velocities

          this.velocity.add(p5.Vector.div(impulse, this.mass));

          other.velocity.sub(p5.Vector.div(impulse, other.mass));

          // Apply repulsion force

          this.pos.sub(p5.Vector.div(repulsion, this.mass));

          other.pos.add(p5.Vector.div(repulsion, other.mass));

        }

counter++

      }

    }

return counter

  }

  display() {

    ellipse(this.pos.x, this.pos.y, this.radius * 2);

  }

}

/*

  The lookup grid

*/

class Grid {

  constructor(i, t, s) {

    (this.cellSize = s),

    (this.numCols = Math.ceil(i / s)),

    (this.numRows = Math.ceil(t / s)),

    (this.cells = []);

    for (let e = 0; e < this.numCols; e++) {

      this.cells[e] = [];

      for (let l = 0; l < this.numRows; l++) {

        this.cells[e][l] = [];

      }

    }

  }

  addParticle(i) {

    let t = Math.floor(i.pos.x / this.cellSize);

    let s = Math.floor(i.pos.y / this.cellSize);

    this.cells[t][s].push(i)

    i.gridCell = {

      col: t,

      row: s

    }

  }

  removeParticle(i) {

    let {

      col: t,

      row: s

    } = i.gridCell

    let e = this.cells[t][s];

    let l = e.indexOf(i);

    e.splice(l, 1);

  }

  determineCell(i) {

    let t = Math.floor(i.pos.x / this.cellSize);

    let s = Math.floor(i.pos.y / this.cellSize);

    return {

      col: t,

      row: s

    }

  }

  getNeighbors(particle) {

    let top_left = [

      floor((particle.pos.x - particle.radius) / this.cellSize),

      floor((particle.pos.y - particle.radius) / this.cellSize),

    ]

    let bottom_right = [

      floor((particle.pos.x + particle.radius) / this.cellSize),

      floor((particle.pos.y + particle.radius) / this.cellSize),

    ]

    let neighbors = []

    for (let i = top_left[0]; i <= bottom_right[0]; i++) {

      for (let j = top_left[1]; j <= bottom_right[1]; j++) {

        if (i < 0 || j < 0 || i >= this.numCols || j >= this.numRows) continue

        let c = this.cells[i][j]

        for (let p of c) {

          // don't add the particle itself

          if (p != particle) neighbors.push(p)

        }

      }

    }

    return neighbors

  }

}

Quantum computing art (& fractals)

 

Visualizing Quantum Computing using fractals

https://github.com/wmazin/Visualizing-Quantum-Computing-using-fractals

Flexible Representation of Quantum Images (FRQI) and Novel Enhanced Quantum Representation (NEQR)

https://qiskit.org/

https://learn.qiskit.org/course/ch-applications/flexible-representation-of-quantum-images-frqi

Exhibition-ready quantum image processing

https://medium.com/qiskit/exhibition-ready-quantum-image-processing-4bb9fa8b52b5

Creating fractal art with qiskit

https://medium.com/qiskit/creating-fractal-art-with-qiskit-df69427026a0

Thermophones

 petite note retrouvée dans un carnet :

mkz.fr

Thermophones

J'explore un peu ce site web... où ai-je pu voir cela ?
Etait-ce aux Frigos, à Paris dans le 13ème, en 2017 ?