11回目のp5.js

画像を使ったプログラミング

https://editor.p5js.org/yetirom/sketches/rJmA67fyV

let img;

function preload() {
  img = loadImage("img_0003.jpg")
}


function setup() {
  createCanvas(640, 480);
  colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  image(img, 0, 0);

  //pressImage
  image(img, 0, 0, width / 2, height / 2);



  // fill(random(150,250),100,100,random(50))
  // ellipse(random(width),random(height),50,50);
}

マウスの位置にある色を左上に表示し、RGBと透明度の数字を表示する。

https://editor.p5js.org/yetirom/sketches/S1IMzNf1V

let img;

function preload() {
  img = loadImage("img_0003.jpg");
}


function setup() {
  createCanvas(640, 480);
  colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  image(img, 0, 0);

  let c = img.get(mouseX, mouseY);
  fill(c);
rect(0,0,100,100);
  text(c,0,120);

}

マウスが右に行けば右に行くほど画像解像度が高くなる。

https://editor.p5js.org/yetirom/sketches/ByLI7EfyV

let img;
let num = 20;
let gridX;
let gridY;

function preload() {
  img = loadImage("img_0003.jpg");
}


function setup() {
  createCanvas(640, 480);
  // colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  image(img, 0, 0);

  num=map(mouseX,0,width,1,70); //インタラクティブ
  // num=frameCount*0.01; //自動
  
  gridX = img.width / num;
  gridY = img.height / num;

  for (let x = 0; x < img.width; x = x + gridX) {
    for (let y = 0; y < img.height; y = y + gridY) {
      let c = img.get(x, y);
      stroke(c);
      fill(c);
      rect(x, y, gridX, gridY);
      // text(c, 0, 120);
    }
  }
}

その点にある色をピックカラーで色を習得し、円のstrokeの方に着色（fillはなし）

https://editor.p5js.org/yetirom/sketches/BJZjqEfJE

function preload() {
  img = loadImage("img_0003.jpg");
}


function setup() {
  createCanvas(640, 480);
  // colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  for (let i = 0; i < 50; i = i + 1) {
    let x = random(width);
    let y = random(height);
    let c = img.get(x, y);
    let r = random(1, 5);
    stroke(c);
    noFill();
    ellipse(x, y, r, r);
  }
  // save();
  // noLoop();
}

上と同じように取った色を線に着色し、色の数値にランダム0~2度追加して傾ける。線の長さもランダムに決定する。

https://editor.p5js.org/yetirom/sketches/H1cYn4MyV

function preload() {
  img = loadImage("img_0003.jpg");
}


function setup() {
  createCanvas(640, 480);
  angleMode(DEGREES);
  // colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  for (let i = 0; i < 200; i = i + 1) {
    let x = random(width);
    let y = random(height);
    let c = img.get(x, y);
    let angle=hue(c)*random(2); //red(c),green(c),blue(c)
    let r = random(1, 20);
    
    stroke(c);
    noFill();
    
    push();
    translate(x,y);
    rotate(angle);
    strokeWeight(0.1);
    line(0,-r,0,r);
    pop();
    // ellipse(x, y, r, r);
  }
  // save();
  // noLoop();
}

課題で制作した滲むハムスター

function preload() {
  img = loadImage("hamstar.jpg");
}


function setup() {
  createCanvas(1399, 1399);
}

function draw() {
  for (let i = 0; i < 1000; i = i + 1) {
    let x = random(width);
    let y = random(height);
    let c = img.get(x, y);
    let r = random(frameCount/20);
    stroke(c);
    noFill();
    ellipse(x, y, r, r);
  }
}

画像をランダムに表示し、そのうちの1つを赤い四角で囲う

let img1;
let img2;
let img3;
let img4;
let img5;
let img6;
let img7;
let img8;
let img9;
let img10;
let pizza;
let count = 0;

let R; //ランダム値生成
let n; //分割数


function preload() {
  img1 = loadImage("1.png");
  img2 = loadImage("2.png");
  img3 = loadImage("3.png");
  img4 = loadImage("4.png");
  img5 = loadImage("5.png");
  img6 = loadImage("6.png");
  img7 = loadImage("7.png");
  img8 = loadImage("8.png");
  img9 = loadImage("hzr.png");
  img10 = loadImage("hzr2.png");
  pizza = loadImage("pizza.png");
}


function setup() {
  createCanvas(windowHeight, windowHeight);
  background(0, 0, 0);
  n = random(2, 4);
  n = floor(n);
  n = n * 2 + 1;
}

function draw() {

  for (let x = 0; x < height; x = x + height / n) {
    for (let y = 0; y < height; y = y + height / n) {
      R = random(10);
      if (R < 0.05) {
        image(pizza, x, y, height / n, height / n);
      } else {
        R = floor(R);

        if (R == 0) {
          image(img1, x, y, height / n, height / n);
        }
        if (R == 1) {
          image(img2, x, y, height / n, height / n);
        }
        if (R == 2) {
          image(img3, x, y, height / n, height / n);
        }
        if (R == 3) {
          image(img4, x, y, height / n, height / n);
        }
        if (R == 4) {
          image(img5, x, y, height / n, height / n);
        }
        if (R == 5) {
          image(img6, x, y, height / n, height / n);
        }
        if (R == 6) {
          image(img7, x, y, height / n, height / n);
        }
        if (R == 7) {
          image(img8, x, y, height / n, height / n);
        }
        if (R == 8) {
          image(img9, x, y, height / n, height / n);
        }
        if (R == 9) {
          image(img10, x, y, height / n, height / n);
        }
      }
    }
  }
  // save();
  count = count + 1;
  if (count > 10) {
    colorMode(HSB, 360, 100, 100);

    let n2 = random(n);
    let n3 = random(n);
    n2 = floor(n2);
    n3 = floor(n3);

    let x1 = height / n * n2;
    let y2 = height / n * n3;

    // rectMode(CENTER);
    noFill();
    stroke(0, 100, 100);
    strokeWeight(5);
    rect(x1, y2, height / n, height / n);

    noLoop();
  }
}

紙が焼けていく

let paper;
let a=0;

function preload() {
  peper = loadImage("paper.jpg");
}

function setup() {
  createCanvas(640, 881);
  image(peper, 0, 0);
}

function draw() {
  colorMode(HSB, 360, 100, 100, 100);
  tint(43, 50, 70, a/10);
  image(peper, 0, 0);
  // print(a); 
  a=a+0.1;
  if (a > 50) {
        textAlign(CENTER);
        textSize(40);
        fill(0,0,0);
        text("END",width/2,height/2);
    noLoop();
  }
}