Nama Wirawan Khairul Majid

NBI 1461900042
Kelas Pagi
Praktikum Komputer Grafik dan Visualisasi Data
Tugas Kegiatan Ke - 3 dan 4

Modul 3
1. Souce Code

function setup(){
createCanvas(700,700);
background(255);
}

function draw(){
background(255);

push();
//Matahari
translate(width/2, height/2);
rotate(millis()*0.001*radians(180));
fill(255, 94, 19);
rectMode(CENTER);
rect(0, 0, 130, 130);
//Bumi
push();
translate(190, 110);
rotate(millis()*0.001*10.0*radians(-45));
fill('#2A52BE');
rectMode(CENTER);
rect(0, 0, 50, 50);
pop();
//Bulan
push();
translate(185, 140);
rotate(millis()*0.0001*radians(210));
fill('#57595D');
rectMode(CENTER);
rect(50, 0, 25, 25);
pop();
pop();
}
 Hasil Output Program

Link P5js
https://editor.p5js.org/wirawankhairulmajid/sketches/sWg8rM8I9

2. Souce Code
let x, y;
let vx, vy;
function setup(){
createCanvas(600, 300);
background(255);
x = 50;
y = 50;
vx = 5;
vy = 5;
}
function draw(){
background(300);
x = x + vx;
y = y + vy;
strokeWeight(3);
fill('#5FD823');
// ellipse(x, y, ukuran, ukuran);
push();
translate(x, y);
rotate(millis() * 0.001 * radians(180));
rectMode(CENTER);
rect(0, 0, 100/2, 100/2);
pop();
if(x == 30 || x == 570) { vx = vx * -1; }
if(y == 30 || y == 270) { vy = vy * -1; }
}
Hasil Output Program

Link p5js
https://editor.p5js.org/wirawankhairulmajid/sketches/BYJV6Zk3o
 Modul 4

1. Source Code
let data = [];
let suhu = [];
function preload(){
data = loadStrings("data.txt");
}
function setup(){
createCanvas(1200,600);
background(255);
data = split(data[0],",");
for(let i in data){
suhu[i] = parseFloat(data[i]);
}
}
function draw(){
background(255);
translate(0,height);
scale(1,-1);
//Grafik Batang
for(let i = 0; i < suhu.length; i++){
fill(map(suhu[i],25 ,40 ,255, 0),0,0);
stroke(255);
strokeWeight(1);
rect(i*width/suhu.length,0,
width/suhu.length,
map(suhu[i], 25, 40, 0,height));
}
//Garis atau Line
for(let i=0; i < suhu.length-1; i++){
stroke(0);
strokeWeight(2);
line(i*width/suhu.length + 0.5*(width/suhu.length),//Koordinat x1
map(suhu[i], 25,40,0,height), //Koordinat y1
(i+1)*width/suhu.length + 0.5*(width/suhu.length), //Koordinat x2
map(suhu[i+1], 25,40,0,height)); //Koordinat y2
}
//Point dan Text Suhu
for(let i=0; i < suhu.length; i++){
stroke('blue');
strokeWeight(5);
point(i*width/suhu.length + 0.5*(width/suhu.length),
map(suhu[i], 25,40,0,height));
push ();
translate((i*width/suhu.length)+0.5*(width/suhu.length),
map(suhu[i],25,40,0,height));
scale(1, -1);
stroke('black');
textAlign(CENTER,CENTER);
textSize(15);
rectMode(CENTER);
strokeWeight(1);
fill(255);
rect(0,-20,50,20);
fill(0);
strokeWeight(0);
text(nf(suhu[i], 0, 2),0 ,-20);
pop ();

Hasil Output Program

}
}
function mousePressed() {
let fs = fullscreen();
fullscreen(!fs);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}

Hasil Output Program

Link P5js
https://editor.p5js.org/wirawankhairulmajid/sketches/tJNegU9sF