Ministerul Educației, Culturii și Cercetării al Republicii Moldova

Universitatea Tehnică a Moldovei

Facultatea Calculatoare Informatica și Microelectronică

RAPORT
Lucru idividual
Disciplina: „ Grafica pe calculator ”
Tema: Transformări geometrice și de vizualizare
asupra obiectelor 2D. Elemente de animație

A elaborat: Galinschii Serafim CR-201FR

A verificat: conf. univ., dr. Rotaru Lilia

Chișinău 2022
 Tema: Procesarea imaginilor 2D.

Sarcina: de creat o scena cu diferite primitive grafice și aplicarea atributelor

asupra acestor primitive.

Listingul programului:
let topColor;
let bottomColor;
let sun;
let mountainRanges = [];
let maxMountainRanges = 6;

function setup() {
createCanvas(1024, 600);
colorMode(HSB, 255);

topColor = color(255, 115, 150);

bottomColor = color(hue(topColor), saturation(topColor) * 0.9,
brightness(topColor) * 1.5);
sun = new Sun(topColor);

for (let i = 0; i < maxMountainRanges; i++) {

let mountainRange = new MountainRange(i, maxMountainRanges,
topColor);
mountainRanges.push(mountainRange);
}
smooth();
}

function draw() {
drawBackground(topColor, bottomColor);
sun.draw();

for (let i = mountainRanges.length - 1; i >= 0; i--) {

let mountainRange = mountainRanges[i];
mountainRange.draw();
}
}

function drawBackground(top, bottom) {

let ctx = drawingContext;
 let grd = ctx.createLinearGradient(0, 0, 0, width);
grd.addColorStop(0 + frameCount/100000, top);
grd.addColorStop(0.4 + frameCount/100000, bottom);

let oldFillStyle = ctx.fillStyle;

ctx.fillStyle = grd;
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = oldFillStyle;
}

class Shape {
constructor(x, y, width, height, strokeColor, fillColor) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.strokeColor = strokeColor;
this.fillColor = fillColor;
this.strokeWeight = 1;
}

getLeft() {
return this.x;
}

getRight() {
return this.x + this.width;
}

getBottom() {
return this.y;
}

getTop() {
return this.y + this.height;
}

contains(x, y) {
return x >= this.x &&
x <= (this.x + this.width) &&
y >= this.y &&
y <= (this.y + this.height);
}
}
class Sun extends Shape {
constructor(baseColor) {
let size = 150;
let xLoc = width * random();
let yLoc = size * random(-0.2, 0.5);
super(xLoc, yLoc, size, size);
}

draw() {
push()
noStroke();
fill(hue(topColor), saturation(topColor) * 0.9, brightness(topColor) * 1.6)
translate(0, frameCount/10)
ellipse(this.x, this.y, this.width, this.height);
pop()
}
}

class MountainRange extends Shape {

constructor(zIndex, numMountains, baseColor) {
let maxMountainHeight = (zIndex + 1) / numMountains * (height - height *
0.4);
maxMountainHeight += min(pow(zIndex, random(3.3, 4)), 100);

super(0, height - maxMountainHeight, width, maxMountainHeight);

let sat = map(zIndex, 0, numMountains, 0, saturation(topColor));

let bright = map(zIndex, 0, numMountains, 0, saturation(topColor));
this.fillColor = color(hue(topColor), sat, bright);

this.jaggedness = random(5, 10);

this.startNoise = zIndex * width + random(0, width / 2);

this.endNoise = this.startNoise + this.jaggedness;
this.zIndex = zIndex;
}

draw() {
fill(this.fillColor);
noStroke();
beginShape();
vertex(-20, height);
for (var x = 1; x < width + 20; x++) {
 let nx = map(x, 0, width, this.startNoise, this.endNoise);
let y = this.height * noise(nx);
vertex(x, height - y);
}
vertex(width + 21, height);
endShape();
}
}

Rezultatele primite în editor.p5js.org (screenshot) :