codelab / Essai de texture

» codelab :    http://codelab.fr/accueil
» Forum : Processing :    http://codelab.fr/processing
» Essai de texture :    http://codelab.fr/4771

Ceci est la version imprimable d'un sujet du forum, pour retourner à la version complète : Essai de texture

windja — 2014-01-19 12:47:22

Bonjour,
toujours dans une optique de compréhention de la bête processing,
j'ai tenté de réalisé la texture ci-jointe.

void setup(){
  size(500, 500);
  stroke(255);
}

void draw(){
background(0);

for (int i = 50; i < 450; i = i + 15) {
  for (int j = 50; j < 450; j = j + 15) {
    line(i-5, j-5, i+5, j+5);
  }
}

}

Mais voilà ce n'est pas exactement ce que j'ai cherché a réalisé.
Ce que j'aimerais c'est qu'a partir du x et y qui correspond à i et j
dans mes deux répétitions, les lignes s'inclinent de 15 degrés, ainsi
les lignes feraient un tour complet entre le coin haut gauche et le coin
bas droit.

Merci d'avance.

Olivier — 2014-01-19 17:34:07

Hello...

Désolé, mais je ne suis pas sûr d'avoir compris ce que tu cherchais à faire... :/
Pourrais-tu faire un rapide schéma à main levé dans un éditeur graphique, histoire d'être sûr que nous parlions bien de la même chose ? :P
Merci.

Mushussu — 2014-01-19 20:00:52

Un truc comme cela ?

void setup(){
  size(460, 460);
  stroke(255);
noLoop();
}

void draw(){
background(0);

for (int i = 50; i <=360; i = i + 15) {
  for (int j = 50; j <=360; j = j + 15) {
pushMatrix();
translate(50 + i,50 + j);
rotate((i+j) * TWO_PI / 720);
    line(-5,-5, 5, 5);
popMatrix();
  }
}
}

windja — 2014-01-20 10:25:39

Oui parfait !

c'est la valeur TWO_PI que je n'avais pas essayé...

à quoi sert exactement le noLoop() ?

Mushussu — 2014-01-20 21:08:08

A rien, dans Processing, la méthode draw() est exécutée un certain nombre de fois par seconde. La fonction noLoop() stoppe ce processus. La fonction loop() remet cela en route.

windja — 2014-01-21 07:11:46

Ok cela nous permet donc de créer une partie fixe dans l'anime en plus du setup ?

windja — 2014-01-21 09:19:35

Alors voila, en "bidouillant" ton code j'ai obtenu ceci,

PImage img;
int[] t1;
int taillePixel;
int largeur, hauteur;

void setup() {
  size(640, 480);
  taillePixel = 10;
  largeur = width / taillePixel;
  hauteur = height / taillePixel;
  t1 = new int[largeur * hauteur];
  for (int i = 0; i < t1.length; i++) {
    t1[i] = 0;
  }
  img = loadImage("train.jpg");
  noLoop();
}

void draw() {
  background(0);
  fill(255);
  noStroke();
  img.loadPixels();
  for (int i = 0; i < img.pixels.length; i++) {
    t1[(i / (taillePixel * width)) * largeur + (i % width) / taillePixel] += img.pixels[i] >> 16 & 0xFF;
  }
  for (int i = 0; i < t1.length; i++) {
    ellipse(taillePixel / 2 + (i % largeur) * taillePixel, taillePixel / 2 + (i / largeur) * taillePixel, t1[i] / (taillePixel * taillePixel) /15, t1[i] / (taillePixel * taillePixel) / 15);
  }
  fill(0);
    for (int i = 0; i < t1.length; i++) {
    ellipse(taillePixel / 2 + (i % largeur) * taillePixel, taillePixel / 2 + (i / largeur) * taillePixel, t1[i] / (taillePixel * taillePixel) /30, t1[i] / (taillePixel * taillePixel) / 30);
  }
}

Dans l'ensemble c'est à peut près ce que je recherchais mais est-ce la bonne manière ? ai-je fait des erreurs ?

Mushussu — 2014-01-21 17:38:32

En fait tu lis uniquement la valeur de rouge pour en déduire la proportions de tes ellipses. Je te propose ceci :

    t1[(i / (taillePixel * width)) * largeur + (i % width) / taillePixel] += int(((img.pixels[i] >> 16 & 0xFF) + (img.pixels[i] >> 8 & 0xFF) + (img.pixels[i] & 0xFF)) / 3);

Qui indique la valeur de gris du pixel.
Le gris étant la moyenne des trois couleurs. Pour t'en convaincre :

size(640, 480);
PImage img = loadImage("train.jpg");
//image(img, 0, 0);
img.loadPixels();
for (int i = 0; i < img.pixels.length; i++) {
  img.pixels[i] = color(int(((img.pixels[i] >> 16 & 0xFF) + (img.pixels[i] >> 8 & 0xFF) + (img.pixels[i] & 0xFF)) / 3));
}
img.updatePixels();
image(img, 0, 0);

Sinon, tu aurais jouer sur la taille de l'ellipse et celle du pourtour avec strokeWeight(), mais je ne sais pas si c'est pertinent.
Tu peux modifier la valeur de la variable taillePixel pour modifier l'aspect du rendu.
On pourrait centrer les ronds dans leur "case".

Beau boulot.