Programmoù gant processing.py 2021-22

Un nebeut programoù ber (<50 linenn kod) evit deskiñ programiñ gant Processing (yezh Python, Java pe Javascript)

Barr-livañ

Ur program gant Processing e mod « Java ». Tresañ war ar prenest grafik gant al logodenn, doare barr-livañ.

Evit mont pelloc’h : ouzhpennañ un doare da ziverkañ an tresadenn.

void setup() {
  size(1000, 900);
  background(255);  // Livañ ar prenest a-bezh e gwenn
  frameRate(500);   // Brasaat ar "framerate" evit brasaat spisder an barr-livañ
}

void draw() {
 stroke(0);     // Dibab a liv du
 
 float dx = mouseX - pmouseX;
 float dy = mouseY - pmouseY;
 float d = sqrt(dx*dx + dy*dy);  // Jediñ pellder ar logodenn e keñver ar "frame" diwezhañ
  
  if (mousePressed){
    strokeWeight(4 + d*0.3);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

Klogorennoù

Diskouezh kelc’hioù a liv disheñvel lec’hiet en un doare ankivil war ar skramm. Implijet e vez ar fonksion random e-leizh evit kaout talvoudoù ankivil.

Srivet gant Processing, doare Java.

void setup(){
  size(1000,800);
  background(255);
  noStroke(); 
}

void draw(){
  fill(255, 255, 255, 8);  // Adlivañ ar skramm gant gwenn treuzwelus
  rect(0, 0, width, height);
  
  fill(random(180,255), random(180,255), random(180,255)); // Dibab un liv ankivil
  circle(random(width), random(height), random(40, 80));  // Tresañ ur c'helc'h a ment ankivil en un lec'h ankivil
}

Mezennoù erc’h

Erru ar goañv met kentoc’h eget chom da gortoz e kouezfe an erc’h, klasket e vo krouiñ omp erc’h galloudel deomp ni. Evel-se e c’hallimp profitañ ouzh ar sell ha chom en tommder er memes koulz.

Skrivet gant Processing, doare Python.

mezennou_pos = []  # Evit dougenn daveenoù lerc'h ar mezennoù
mezennou_vel = []  # Evit dougenn vektorioù tizh ar mezennoù
#mezennou_liv = []

def setup():
    size(800, 800)
    noStroke()
    # Krouet e vez ur bochad mezennoù erc'h nevez
    for i in range(600):
        mezennou_pos.append(PVector(random(0, width),random(-600, 0)))
        mezennou_vel.append(PVector(0, 1))  # Roet e vez un tizh a orin
        #mezennou_liv.append(color(random(0,255),random(0,255),random(0,255)))

def draw ():
    background(0) 
    
    for i in range (600):
        mezennou_vel[i].x += random(-1, 1) * 0.01
        mezennou_vel[i].y += random(-1, 1) * 0.01
        mezennou_pos[i] += mezennou_vel[i]
        
        if mezennou_pos[i].y > height:  # Ma vez ar mezenn erruet e traoñ ar skramm...
            # Adlaket e vez en nec'h ar skramm
            mezennou_pos[i].y = 0
            mezennou_pos[i].x = random(0, width)
            # Adlaket e vez an tizh da 1 war-zu an traoñ
            mezennou_vel[i] = PVector(0, 1)
        
        # Tresañ ar mezenn
        #fill(mezennou_liv[i])
        circle(mezennou_pos[i].x, mezennou_pos[i].y, 8)

Pikseloù « Sparta »

Setu ur mennozh bet kinniget gant Paolig : ur bouchad pikseloù a loc’h eus traoñ ar skramm hag a pign tamm-ha-tamm. An uhelañ ma vezont, ar brasañ eo o chañs da vezañ « lazet » (da lavaret eo, adkregiñ diouzh traoñ ar skramm).

Ar program-mañ zo bet skrivet gant Processing e doare Python.

pos = []

def setup():
    global pos
    print(random(0, height))
    strokeWeight(2)
    
    size(500, 500)
    for i in range(10000):
        pos.append(PVector(random(0, width), height-1))

def draw():
    global pos 
    
    background(255)
    for daveennou in pos:
        point(daveennou.x, daveennou.y)
        daveennou.y -= random(0, 1)
        if random(0, daveennou.y) < 1:
            daveennou.x = random(0, width)
            daveennou.y = height-1

Morpioñs

bouestou = [0, 0, 0, 0, 0, 0, 0, 0, 0]

def setup():
    size(500, 500)

def draw():
    background(255)
    for i in range(9):
        print(i)

def mouseClicked():
    i = 3 * mouseX / width
    j = 3 * mouseY / height
    n = 3 * j + i
    print(i, j, n)

Deomp un tamm pelloc’h en eil lodenn :

bouestou = [0, 0, 0, 0, 0, 0, 0, 0, 0]
taol = 0

def setup():
    size(600, 600)
    noStroke()

def draw():
    background(255)
    for n in range(9):
        x = n % 3
        y = int(n / 3)
        if bouestou[n] == 1:
            fill(255, 0, 0)
            rect(x*width/3, y*height/3, width/3, height/3)
        elif bouestou[n] == 2:
            fill(0, 0, 255)
            rect(x*width/3, y*height/3, width/3, height/3)


def mouseClicked():
    global taol
    
    i = 3 * mouseX / width
    j = 3 * mouseY / height
    n = 3 * j + i
    
    if bouestou[n] == 0:
        if taol % 2 == 0:
            bouestou[n] = 1
        else:
            bouestou[n] = 2
        taol = taol+1

Ha setu (dam)echu ar poellad ! Ne chom nemet da kinklañ ar c’hinnig hervez ho c’hoant.

bouestou = [0, 0, 0, 0, 0, 0, 0, 0, 0]
taol = 0
gameover = False

def setup():
    size(600, 600)
    noStroke()
    textSize(80)


def draw():
    if gameover:
        return
    
    background(255)
    for n in range(9):
        x = n % 3
        y = int(n / 3)
        if bouestou[n] == 1:
            fill(255, 0, 0)
            rect(x*width/3, y*height/3, width/3, height/3)
        elif bouestou[n] == 2:
            fill(0, 0, 255)
            rect(x*width/3, y*height/3, width/3, height/3)


def mouseClicked():
    global taol
    global gameover
    global bouestou
    
    if gameover:
        gameover = False
        bouestou = [0, 0, 0, 0, 0, 0, 0, 0, 0]
        return
    
    i = 3 * mouseX / width
    j = 3 * mouseY / height
    n = 3 * j + i
    
    if bouestou[n] == 0:
        if taol % 2 == 0:
            bouestou[n] = 1
        else:
            bouestou[n] = 2
        taol = taol+1
    
    for p in range(1, 3):
        if bouestou[0] == bouestou[1] == bouestou[2] == p:
            gounezet(p)
        elif bouestou[3] == bouestou[4] == bouestou[5] == p:
            gounezet(p)
        elif bouestou[6] == bouestou[7] == bouestou[8] == p:
            gounezet(p)
        elif bouestou[0] == bouestou[3] == bouestou[6] == p:
            gounezet(p)
        elif bouestou[1] == bouestou[4] == bouestou[7] == p:
            gounezet(p)
        elif bouestou[2] == bouestou[5] == bouestou[8] == p:
            gounezet(p)
        elif bouestou[0] == bouestou[4] == bouestou[8] == p:
            gounezet(p)
        elif bouestou[2] == bouestou[4] == bouestou[6] == p:
            gounezet(p)

def gounezet(p):
    global gameover
    if p == 1:
        background(255, 0, 0)
        fill(255)
        text("GOUNEZET", 90, 300)
    elif p == 2:
        background(0, 0, 255)
    
    gameover = True
    #print("Gounezet e peus c'hoarier {}".format(p))
    print("Gounezet e peus c'hoarier", p)

Effedoù grafikel a bep seurt

Ur program berr bet graet gant Paolig gant Processing doare Python.

def setup():
    size(1500,1000)

def draw():
    #background(0)
    for i in range(100):
        circle(mouseY,mouseX,random(10,200))
        line(mouseY,mouseX,mouseX,mouseY)
        circle(mouseX,mouseY,random(10,200))

Skeudennoù-bev gant p5.js

Implijet e vo ar yezh p5.js evit deskiñ tresañ traoù war ar skramm. Ar yezh p5.js a zo diazezet war ar yezh javascript. Graet eo evit bezañ peurgaset diouzh ur merdeer hag aes eo da enframmañ ar poelladoù skrivet ganti e-barzh ur bajenn Web.

Ne’z eus ket ezhomm staliañ netra evit kregiñ da kodiñ gant p5.js. Tu ‘zo deoc’h implij un « éditeur » enlinenn, evel amañ.

Tresañ gant livioù

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

function draw() {
    background(200, 200, 255); // Livet e vez ar foñs
    
    fill(10, 220, 50); // Dibabet e vez un liv nevez (tost da gwer)
    rect(280, 100, 80, 80); // Treset e vez ur skouergornek
    
    fill(255, 60, 200); // Dibabet e vez ul liv nevez (tost da roz)
    ellipse(width/2, height/2, 100, 200); // Treset un elips
}

Ar fonksion background a servij da livañ ar prenestr grafik penn-da-benn gant al liv ho peus c’hoant. Diverket e vo pep tra a oa bet treset araok. Roet e vez dezhi 3 arguzenn : ur c’hementad a ruz (etre 0 ha 255), ur c’hementad a gwer (etre 0 ha 255) hag ur c’hementad a glas (etre 0 ha 255).
Bep gwech ma vez implijet ur fonksion gant livioù e vo roet 3 arguzenn (Ruz, Gwer, Glas) evel-se.

Ar fonksion fill a vez implijet evit dibab ul liv nevez. Gwellet e vo an disoc’h gant pep fonksion tresañ a teuio warlec’h.

Gant ar rect e vez treset ur skouergornek. Roet e vez dezhi 4 arguzenn : position x, position y, ment x ha ment y.

Gant ar fonksion ellipse e vez treset un elips. Roet e vez dezhi 4 arguzenn : position kreiz x, position kreiz y, ment x, ment y.

[[https://editor.p5js.org/lise_diwan/sketches/cLT-9X1Gg]]

Lakaat an traoù da fiñval

let x; // Krouiñ ur varienn 'x'
let y; // Krouiñ ur varienn 'y'
    
function setup() {
    createCanvas(400, 400);
    fill(255, 0, 0); // Dibab al liv ruz evit pep elfenn treset
    
    x = 20; // Deraouiñ ar varienn 'x'
    y = 20; // Deraouiñ ar varienn 'y'
}

function draw() {
    background(255); // Livet e vez ar foñs e gwenn kann
    
    ellipse(x, y, 50, 50); // Treset e vez ur c'helc'h d'an daveenoù 'x' ha 'y'
    
    x += 1; // Kemmet e vez ar varienn 'x'
    y += 1; // Kemmet e vez ar varienn 'y'
}

Amañ e vez krouet div varienn, x hag y evit derc’hel daveenoù ur c’helc’h. Bep gwech ma vez peurgaset ar fonksion draw (30 wech dre eilenn dre ziouer) e vo diverket ar prenest, treset ar c’helc’h gant an daveenoù x hag y hag cheñchet an deveennoù un tammig.

Klaskit cheñch an doare ma fiñv ar c’helc’h.

[[https://editor.p5js.org/lise_diwan/sketches/Y0rEj1ue5]]

Wrap around

Ur gudenn on eus. Ma’z a re bell hor c’helc’h e vo er maez eus hor prenestr. Implijet e vo ur framm konsision evit gwiriekaat daveenoù ar c’helc’h hag adlakaat anezho el lec’h mat ma’z eont kuit eus ar prenestr.

let x; // Krouiñ ur varienn 'x'
let y; // Krouiñ ur varienn 'y'
    
function setup() {
    createCanvas(400, 400);
    fill(255, 0, 0); // Dibab al liv ruz evit pep elfenn treset
    
    x = 20; // Deraouiñ ar varienn 'x'
    y = 20; // Deraouiñ ar varienn 'y'
}

function draw() {
    background(255); // Livet e vez ar foñs e gwenn kann
    
    ellipse(x, y, 50, 50); // Treset e vez ur c'helc'h d'an daveenoù 'x' ha 'y'
    
    x += 3.6; // Kemmet e vez ar varienn 'x'
    y += 2.2; // Kemmet e vez ar varienn 'y'
    
    if (x>width) {
        x -= width;
    }
    if (x<0) {
        x += width;
    }
    if (y>height) {
        y -= height;
    }
    if (y<0) {
        y += height;
    }
}

Gwirieket e vez 4 kondision gant ar stadamant if : Ma’z eo x er maez eus an tu kleiz x<0, ma’z eo x er maez eus an tu dehou x>width, ma’z eo y re izel y>height ha ma’z eo y re uhel y<0.

E-barzh ar variennoù width ha height e vez dalc’het ledander hag uhelder ar prenestr grafik.

Merzet ho peus maretez e oa tuet fall ax an uhelder. Gwir eo, war ur skramm, al linenn gant an daveen y=0 a zo en nec’h tout ha pa vez kresket an daveen y ez a izeloc’h an traoù. Ar poent 0, 0 a zo en nec’h en tu kleiz hag ar poent width, heigh a zo en traoñ hag en tu dehou eus ar prenestr.

[[https://editor.p5js.org/lise_diwan/sketches/kCFd7pKGe]]

Ur bern objedoù o fiñval

War un urzhiataer, pa vez graet un dra gant un elfenn n’eo ket diaes tre ober ar memes tra gant un niver bras tre a elfennoù eñvel.

let x = [4, 53, 233, 12, 300, 210]; // Krouiñ ul listenn 'x'
let y = [320, 111, 23, 201, 50, 15]; // Krouiñ ul listenn 'y'

function setup() {
    createCanvas(400, 400);
    fill(255, 0, 0); // Dibab al liv ruz evit pep elfenn treset
}

function draw() {
    background(255); // Livet e vez ar foñs e gwenn kann
    
    for (let i=0; i<x.length; i++) {
        ellipse(x[i], y[i], 50, 50); // Treset e vez ur c'helc'h d'an daveenoù 'x' ha 'y'
        x[i] += 1; // Kemmet e vez ar varienn 'x' el listenn
        y[i] += 5; // Kemmet e vez ar varienn 'y' el listenn
        if (x[i]>width) {
            x[i] -= width;
        }
        if (x[i]<0) {
            x[i] += width;
        }
        if (y[i]>height) {
            y[i] -= height;
        }
        if (y[i]<0) {
            y[i] += height;
        }
    }
}

Amañ e vez gwelet ur bern traoù nevez ha galoudus. Implijet e vez listennoù evit derc’hel meur a variennoù dameñvel. Implijet e vez ar rodell  »for » evit //iteriñ// war pep talvoud kavet e-barzh al listennoù.

Menozioù : Klaskit krouiñ 2 listennad nevez  »tizh_x » ha  »tizh_y » evit derc’hel un tizh disheñvel evit pep kelc’h. Al listennoù-se a vo ar memes ment eget ar re all (6 elfenn ma n’ho peus ket cheñchet an traoù).

[[https://editor.p5js.org/lise_diwan/sketches/vSCogDPDm]]

Let's get Crazy !

Termeniñ pep kelc’h dre dorn a zo skuizus. Penaos ober evit termeniñ un niver bras tre a kelc’hoù (pe traoù all) en un doare aes ? Implijet e vo ar rodell for en-dro evit-se.

let x = []; // Krouiñ ul listenn goulo 'x'
let y = []; // Krouiñ ul listenn goulo 'y'
let niver = 500; // Niver a elfennoù da grouiñ

function setup() {
    createCanvas(400, 400);
    fill(255, 0, 0); // Dibab al liv ruz evit pep elfenn treset

    // Amañ e vo leuniet al listennoù dre ur rodell 'for'
    for (let i=0; i<niver; i++) {
        x[i] = random(width);
        y[i] = random(height);
    }
}

function draw() {
    background(255); // Livet e vez ar foñs e gwenn kann

    for (let i=0; i<x.length; i++) {
        ellipse(x[i], y[i], 20, 20); // Treset e vez ur c'helc'h d'an daveenoù 'x' ha 'y'
        x[i] += 1; // Kemmet e vez ar varienn 'x' el listenn
        y[i] += 10; // Kemmet e vez ar varienn 'y' el listenn
        if (x[i]>width) {
            x[i] -= width;
        }
        if (x[i]<0) { x[i] += width; } if (y[i]>height) {
            y[i] -= height;
        }
        if (y[i]<0) {
            y[i] += height;
        }
    }
}

[[https://editor.p5js.org/lise_diwan/sketches/a7_tCZmO0]]

Spritesheets

Gant ar yezh p5.js ez eus tu enframmañ skeudennoù gif bev met pa ‘vez kalz a skeudennoù bev disheñvel da implij e-barzh ho poellad e c’hell dont da vezañ luziet buhan a walc’h.
Un doare all d’ober a zo lakaat ur bern tresadennoù bihan war ar memes skeudenn, anvet ur « spritesheet ». Evit krouiñ ur skeudenn bev e vo diskouezet nemet un lodennig eus ar skeudenn bras bep gwech.
Pouezus e vefe eus ar memes ment pep skeudennig eus ar spritesheet.

Ur skouer spritesheet eus ar re gentañ e istor mab den :
{{ https://upload.wikimedia.org/wikipedia/commons/4/4a/Muybridge_race_horse_gallop.jpg?nolink&400 }}

let img;
let img_size = 32;
let x_pos, y_pos;

let last_frame;
const frame_dur = 800;

const animation = [[0, 3], [1, 3]];
let frame_i;

function preload() {
    img = loadImage("data/toto.png");
}

function setup() {
    createCanvas(400, 400);
    imageMode(CENTER);
    x_pos = width/2;
    y_pos = height-4*img_size;
    last_frame = millis();
    frame_i = 0;
}

function draw() {
    background(255);
    
    if (millis() - last_frame >= frame_dur) {
        frame_i += 1;
        last_frame = millis();
        
        if (frame_i >= animation.length) {
            frame_i = 0;
        }
    }

    image(img, x_pos, y_pos,
    img_size*4, img_size*4,
    img_size*animation[frame_i][0],
    img_size*animation[frame_i][1],
    img_size, img_size);
}

[[https://editor.p5js.org/lise_diwan/sketches/gpLMaorbY5]]

Aotomata

Setu an teknik diwezhañ a vo gwelet evit krouiñ ur sekañs skeudennoù-bev o cheñch ingal.
Gant pep animasion e klot ur stad. Pep stad a zo liammet gant stadoù all ha pa ‘vez cheñchet stad ne c’heller nemet mont betek ar stadoù liammet d’ar stad diwezhañ.

Pa vez loc’het ar poellad e vez aet d’ar stad a-orin (an hini gwer war ar skeudenn). Pa ‘vez erruet d’ar stad fin (an hini ruz) e vez echu ar c’hoari (« Game Over »).
Evit cheñch stad e vez tenet un niverenn er sort (evel gant un diñs) hag hervez an disoc’h e vez aet betek ur stad pe ur stad all.

{{ :lise_diwan:aotomata.png?nolink&400 |}}

// Listenn ar skeudennoù evit pep animasion
const anim_dihunet = [[6, 1]];
const anim_dihun = [[0, 0]];
const anim_bazailhat = [[4, 4], [4, 4], [4, 4]];
const anim_kousket = [[0, 3], [1, 3]];
const anim_skrab = [[5, 2], [6, 2], [5, 2], [6, 2], [5, 2], [6, 2]];
const anim_marv = [[6, 4]];

// Ment pep skeudennig (e pixels)
const img_size = 32;

// Padelez pep skeudenn en animasion
const frame_dur = 400;

// Roadennoù all...
let anim;
let frame_i;
let last_frame;
let stad;
let rand;
let img;
let x_pos, y_pos;

function preload() {
    // Karg ar spritesheet e memor an urzhiataer
    img = loadImage("data/toto.png");
}

function setup() {
    createCanvas(400, 400);
    imageMode(CENTER);
    x_pos = width/2;
    y_pos = height-4*img_size;
    last_frame = millis();
    frame_i = 0;
    
    stad = "DIHUNET";
    anim = anim_dihunet;
}

function draw() {
    background(255);
    
    if (millis() - last_frame >= frame_dur) {
        // Tremen d'ar skeudenn da-heul
        frame_i += 1;
        last_frame = millis();
        
        if (stad == "DIHUNET") {
            rand = int(random(20));
            if (rand == 0) {
                // Bazailhat
                anim = anim_bazailhat;
                frame_i = 0;
                stad = "BAZAILHAT";
            } else if (rand == 1) {
                // En em skrabañ
                anim = anim_skrab;
                frame_i = 0;
                stad = "SKRAB";
            }
    
        } else if (stad == "DIHUN") {
            anim = anim_dihunet;
            frame_i = 0;
            stad = "DIHUNET";
        
        } else if (stad == "BAZAILHAT") {
            // Gortoz e vefe echu an animasion araok cheñch stad
            if (frame_i == anim.length) {
                if (random(6) < 1.0) {
                    // Mont da gousket
                    anim = anim_kousket;
                    frame_i = 0;
                    stad = "KOUSKET";
                } else {
                    // Dihunet
                    anim = anim_dihunet;
                    frame_i = 0;
                    stad = "DIHUNET";
                }
            }
        
        } else if (stad == "KOUSKET") {
            rand = int(random(100));
            if (rand == 0) {
                anim = anim_marv;
                frame_i = 0;
                stad = "MARV";
            } else if (rand < 6) {
                anim = anim_dihun; frame_i = 0; stad = "DIHUN";
            }
        
        } else if (stad == "SKRAB") {
            if (frame_i == anim.length) {
                anim = anim_dihunet;
                frame_i = 0;
                stad = "DIHUNET";
            }
            
        } else if (stad == "MARV") {
            anim = anim_marv;
        }
        
        // Distreiñ en penn kentañ an animation ma'z eo echu
        if (frame_i >= anim.length) {
            frame_i = 0;
        }
    }
    
    // Tresañ ar skeudenn
    image(img, x_pos, y_pos,
    img_size*4, img_size*4,
    img_size*anim[frame_i][0],
    img_size*anim[frame_i][1],
    img_size, img_size);
}

[[https://editor.p5js.org/lise_diwan/sketches/pOJwECXkE]]