Myndir í p5

Skipunin loadImage("slóð á mynd") hleður inn myndinni. Slóðin þarf að sýna hvar myndin er vistuð. Ef myndin er vistuð í sömu möppu og p5 forritið er í er nóg að skrifa bara "mynd.jpg" (ef skráin heitir mynd.jpg). Ef myndin væri t.d. í möppu sem heitir images sem væri geymd á sama stað og forritið væri slóðin t.d. "/images/mynd.jpg". Myndinni er hlaðið niður inni í fallinu preload() til þess að hún sé tilbúin til notkunar þegar forritið er keyrt.

Breytan bike er glóbal breyta þar sem hún er skilgreind efst í forritinu, utan allra falla. Myndinni er hlaðið inn í bike í preload, en hún er notuð í draw. Skipunin image teiknar svo myndina sem geymd er í bike.

resize er notað til að koma myndinni í þá stærð sem óskað er. Ef annað inntakið í resize er 0 á að halda hlutfallinu á milli breiddar og hæðar.

var ship; //ship breytan geymir myndina.

function preload() { 
  //myndinni er hlaðið niður og hún geymd í “ship”
  //myndin er vistuð í sömu möppu 
  ship = loadImage("CK-12_spaceship.png"); 
}

function setup() {
  createCanvas(400, 400);
  ship.resize(100,0); 
}
function draw() {
  background(0);
  //myndin á að vera miðjuð
  imageMode(CENTER);  
  //myndin sem geymd er í ship er teiknuð í mouseX/Y
  image(ship, mouseX, mouseY); 
  //syntax: image( mynd, x, y);
}
  

Ef að resize heldur ekki hlutfallinu þurfið þið að reikna hlutfallið á milli hæðar og breiddar og nota það til þess að skala í setup:

  function setup() {
    createCanvas(400, 400);
    var ratio = bike.height/bike.width;
    var newWidth = 100;
    bike.resize(newWidth, ratio*newWidth);
  }
  

Myndir eru kassalaga

Ef að ég geri bakgrunninn hvítan sést að myndin af geimskipinu er í raun rétthyrningur.


  //sami kóði og fyrir ofan nema:
  background(255);
  //í stað background(0);
  
  
  
  
  
  
  

Hægt er að hafa suma pixlana gegnsæja í png myndum. Til þess að gera hluta af mynd gegnsæja þarf að opna hana í myndvinnsluforriti, gera þá gagnsæja og vista sem png. Allison Parrish er með lýsingu á hvernig má gera þetta á sinni síðu.

Mynd á hreyfingu

Á sama hátt og ellipsan var færð til á skjánum í hlutanum um hreyfingu, er hægt að láta myndina færast um skjáinn. Búnar eru til breyturnar x, y sem munu stýra því hvar myndin er teiknuð. Hægt er að breyta gildinu á þeim inni í draw, t.d. er hér slembitölu á bilinu frá -2 upp að 2 bætt við í hvert skipti sem farið er í gegn um draw þannig að geimskipið færist aðeins til. Hægt er að smella músinni til að fá það aftur í miðjuna.

var ship; 
// Glóbal breyturnar x og y
// geyma staðsetningu skipsins
var x, y;

function preload() { 
  ship = loadImage("CK-12_spaceship.png"); 
}

function setup() {
  createCanvas(400, 400);
  ship.resize(100,0); 
  //látum skipið byrja á miðjum skjánum
  x = width/2;
  y = height/2;
}
function draw() {
  background(0);
  imageMode(CENTER);  
  //teiknum skipið í x, y
  image(ship, x, y); 
  //færum það aðeins til
  x = x + random(-2,2);
  y = y + random(-2,2);
}

  

Tint()

Tint() er skipun sem hefur áhrif á myndir. Gefin eru amk. 3 gildi þ.e. fyrir rauðann, grænann og bláann. Ef gildið er 255 fyrir ákveðinn lit er honum öllum hleypt í gegn, en engu ef gildið er 0. Hér fyrir neðan er staðsetning músarinnar notuð til þess að ákvarða hversu mikið af grænum myndin mun sýna. Map fallið varpar gildunum á mouseX frá bilinu 0 upp í width yfir á bilið 0 upp í 255. Ef fjórða gildið er gefið í tint stýrir það hversu gegnsæ myndin er. Ef bara eitt gildi er gefið ræður það hversu björt myndin er.
var bike;

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

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
}
function draw() {
  background(255);
  // mouseX ræður hversu mikill grænn litur
  // er í myndinni
  var g = map(mouseX, 0, width, 0, 255);
  //allur rauði liturinn er sýndur,
  //en bara g af grænum.
  tint(255, g, 255);
  image(bike, width/2, height/2, 300 , 300);
}

  

Skoðið mögulegar aðgerðir á myndum á p5-reference síðunni. Til dæmis getur verið skemmtilegt að nota filter().

loadPixels(), pixels[] og get()

loadPixels hleður inn upplýsingum um RGB gildi allra pixla í mynd. Eftir að þeim hefur verið hlaðið inn er hægt að nota fallið get(x,y) til þess að fá upplýsingar um RGB lit myndarinnar í staðsetningunni x, y. Í forritinu hér fyrir neðan er myndin af hjólinu teiknuð bara þar sem músin hefur verið.

var mynd;
var dotColor;
function preload() {
  mynd = loadImage("bike.jpg");
}
function setup() {
  createCanvas(400, 400);
  mynd.loadPixels();
  background(0);
  noStroke();
  rectMode(CENTER);
}
function draw() {
  dotColor = mynd.get(mouseX, mouseY);
  fill(dotColor);
  ellipse(mouseX, mouseY, 2, 2);
}

  

Reyndar er fljótlegra að nálgast upplýsingarnar um litinn í listanum pixels. Þið hafið ekki lært um lista, en hér sýnir Shiffman hvernig nálgast má upplýsingarnar um litina í pixels og búa til sínar eigin reglur um hvernig á að "update"-a hvern pixil, þ.e. búa til sinn eigin filter (að vísu í processing en ekki p5). Ef ætlunin er að búa til mynd með því að nota get() gæti verið ráðlegt að nota saveCanvas() til þess að vista myndina og birta svo myndina sjálfa á síðunni í stað þess að keyra p5 á henni.

var mynd;
var gridx = 10;
var gridy = 10;


function preload(){
  mynd = loadImage("bea.jpg");
}

function setup() {
 createCanvas(windowWidth, windowHeight);
 background(220);
 mynd.resize(width, height);
 mynd.loadPixels(); 
 for (var i = 0; i < width/gridx; i++) {
      for (var j = 0; j < height/gridy; j++) {
        fill( mynd.get(i*(gridx),j*(gridy)));
        ellipse(gridx*i, gridy*j, 5,5);
      }
    }
}

function draw() {
   
}

  

Það er óþarfi að teikna myndina aftur og aftur, þannig að myndin er teiknuð í setup en ekki í draw.