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

  }

}

git pre-commit hooks library

cf.  https://codimd.nomadic-labs.com/p/YcXmjg1qv#/4

pre-commit is a tool that helps to configure git pre-commit hooks, with an abundance of already configured scripts

pre-commit install and configuration

• Install in system

(apt-get / brew ) install pre-commit

• install in repo 

then in each repo clone (set-up pre-commit for this repo):

pre-commit install

• then (configure) edit .pre-commit-config.yaml

.pre-commit-config.yaml example  (from https://gitlab.com/tezos/tezos/-/blob/master/.pre-commit-config.yaml?ref_type=heads )

# See https://pre-commit.com for more information
# See https://pre-commit.com/hooks.html for more hooks
repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v3.2.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
  - repo: https://github.com/koalaman/shellcheck-precommit
    rev: v0.9.0
    hooks:
      - id: shellcheck
        args: [ "--external-sources" ]
  - repo: https://github.com/cisagov/pre-commit-shfmt
    rev: v0.0.2
    hooks:
      - id: shfmt
        # These settings must mirror the ones set in `scripts/lint.sh`.
        args: [ "-i", "2", "-sr", "-d" ]
  - repo: https://github.com/arenadotio/pre-commit-ocamlformat
    rev: 0439858
    hooks:
      - id: ocamlformat
        args: [ "-i" ]
  - repo: https://github.com/hadolint/hadolint
    rev: v2.9.3
    hooks:
      - id: hadolint-docker
  - repo: https://github.com/python-jsonschema/check-jsonschema
    rev: 0.28.0
    hooks:
      - id: check-gitlab-ci
        args: ["--verbose"]
        files: '(\.gitlab-ci\.yml|\.gitlab/ci/.*\.yml)'

General Notes about pre-commits

• runs only against staged files

 

• to run manually :

pre-commit run --all-files

• to run 1 check specifically  (example : run only  1 plugin (shfmt) )

pre-commit run shfmt







Conventional Commits specification

 https://www.conventionalcommits.org/en/v1.0.0/

The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.

for example, to be used with commitlint : 

https://github.com/conventional-changelog/commitlint 

example, on gitlab-ci : https://gitlab.com/gitlab-org/gitlab-vscode-extension/-/merge_requests/85#587d266bb27a4dc3022bbed44dfa19849df3044c

or, at changelog level :

https://github.com/conventional-changelog/conventional-changelog

also cf. commitzen  :

https://github.com/commitizen/cz-cli

The Not Rocket Science Rule Of Software Engineering: automatically maintain a repository of code that always passes all the tests

technicalities: "not rocket science" (the story of monotone and bors)

https://graydon2.dreamwidth.org/1597.html : 

The Not Rocket Science Rule Of Software Engineering:

automatically maintain a repository of code that always passes all the tests

Code verifications / provers

C code + ACSL annotations --( Frama-C )--> "WhyML" Why3 format Proofs  --( Why3 analyser )--> proven code

• ACSL By Example (good learning point with plenty of exmaples) Towards a Verified C Standard Library

https://www.mimuw.edu.pl/~alx/konstruowanie/ACSL-by-Example.pdf

• Frama-C code analyser (Framework for Modular Analysis of C programs)

https://frama-c.com/
 https://frama-c.com/html/documentation.html 

https://frama-c.com/2016/11/22/Frama-C-and-ACSL-are-on-GitHub.html

• Why3 / WhyML :

http://why3.lri.fr/

http://why3.lri.fr/doc/starting.html

Code Style

This tools allows you to reformat your code in order to respect some particular coding rules.
This is for example what you want to use as a trigger in your svn, git or clearcase repo ;-)

http://astyle.sourceforge.net/

Autour du code source et des programmes Java

SONAR :

Sonar est une plate-forme libre (LGPL v3) permettant de gérer la qualité du code source Java (exécution de tests unitaires, analyse de la couverture du code par ces tests, vérification du respect des règles de codage, complexité du code, etc.).

(depuis : dlfp )

http://sonar.codehaus.org/

FindBugs :

FindBugs is a program to find bugs in Java programs. It looks for instances of "bug patterns" code instances that are likely to be errors.

http://findbugs.sourceforge.net/
Éradiquer les lignes de code commentées

Forge des greffons Sonar


FindBugs serait en particulier beaucoup utilisé chez Google.

Quine : self-replicating program

Quines are programs who print their own source code when run.
For example in lua, this is a quine :

 s="s=%qprint(s:format(s))"print(s:format(s))

• Examples of Quines in Lua


• "The Quine page (self-reproducing code)"


• wikipedia:Quine_(computing)


• Johannes Lötzsch : (Multilanguage) Quines

SLOCCount, compter le nombre de lignes de code

SLOCcount, permet de compter le nombre de ligne de code dans un répertoire
en déterminant automatiquement grace à différentes heuristiques de quel langage il s'agit.

Page web :
SLOCcount