Tutorials p5.js

Dit zijn de tutorials die we hebben gebruikt om onze weather api te maken.

https://www.youtube.com/watch?v=GXNUdX5ptAY

https://www.youtube.com/watch?v=7YcW25PHnAA

https://www.youtube.com/watch?v=1yFggyk–Zo

https://www.youtube.com/watch?v=nGVoHEZojiQ&t=214s

https://www.youtube.com/watch?v=UjeXpct3p7M&t=242s

https://openweathermap.org/guide

https://web.stanford.edu/group/csp/cs22/using-an-api.pdf

-codegrepper.com/code-examples/whatever/openweathermap+api+tutorial

Werkstukken Unit 3 p5.js Wearymandrill1 en Alertrhino1

Wallpaper

https://editor.p5js.org/wearymandrill1/sketches/oVYnAczYZ

https://editor.p5js.org/wearymandrill1/sketches/VPFAVnrzs

https://editor.p5js.org/wearymandrill1/sketches/DEj0bWLru

Vision Board

https://editor.p5js.org/wearymandrill1/sketches/_ebFjcUs0

Kinetic Typing

https://editor.p5js.org/wearymandrill1/sketches/AF17n7IFi

Musical Keyboard

https://editor.p5js.org/wearymandrill1/sketches/AgjxvVhSt

Meme Generator

https://editor.p5js.org/wearymandrill1/sketches/bqeWjOboP

Lief dagboek

var oatmeal;
var expl1;
var expl2;
var expl3;
function preload() {
expl1 = loadImage(
“pngtree-fire-explosion-png-transparent-png-image_4199298.jpg”
);
expl2 = loadImage(“0457a2d79532a34.jpg”);
expl3 = loadImage(“fire-explosion-png_79999.jpg”);
oatmeal = loadImage(“oatmeal.jpg”);
}

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

function draw() {
background(220);
imageMode(CENTER);
image(oatmeal, 200, 200, 400, 400);
colorMode(HSB);
tint(30, 100, 100);
image(expl1, 50, 70, 350, 150);
tint(50, 100, 100);
image(expl2, 300, 300, 350, 150);
tint(0, 100, 100);
image(expl3, 50, 250, 50, 200);
textSize(50);

text(“”, 250, 205);
}

Paint Wearymandrill1 en Alertrhino9

https://editor.p5js.org/wearymandrill1/sketches/6U2tCnSK2

function setup() {
//setup
createCanvas(400, 400);
strokeWeight(0);
background(255);
fill(149);
rect(0, 315, 400, 55);
colorMode(HSB);
}

function draw() {
//clear
if (
mouseIsPressed &&
mouseX > 10 &&
mouseY > 325 &&
mouseX < 90 &&
mouseY < 360
) {
fill(255);
strokeWeight(0);
rect(0, 0, 400, 315);
}
//kleur balk
c = map(mouseX, 0, width, 0, 360);
strokeWeight(0);

for (var x = 0; x < width; x = x + 1) {
fill((x / 360) * 360, 100, 100);
rect(x, 370, 30, 30);
}

//lijn dikte

if (mouseIsPressed && keyIsPressed) {
if (key == “r”) strokeWeight(2.5);
}
if (mouseIsPressed && keyIsPressed) {
if (key == “t”) strokeWeight(7.5);
}
if (mouseIsPressed && keyIsPressed) {
if (key == “y”) strokeWeight(10);
}
if (mouseIsPressed && keyIsPressed) {
if (key == “u”) strokeWeight(12.5);
} else {
strokeWeight(5);
}
if (
mouseIsPressed &&
mouseX > 205 &&
mouseX < 224 && mouseY > 320 &&
mouseY < 355 ) { stroke(0); } if ( mouseIsPressed && mouseY > 320 &&
mouseY < 355 && mouseX > 235 &&
mouseX < 390
) {
colorMode(RGB);
stroke(random(255), random(255), random(255));
colorMode(HSB);
}

//gum
if (
mouseIsPressed &&
mouseX > 100 &&
mouseX < 180 && mouseY > 320 &&
mouseY < 355
) {
stroke(255);
}

//lijn
if (mouseIsPressed) {
//stroke(c,75,100)
line(mouseX, mouseY, pmouseX, pmouseY);
}

//knop menu
if (mouseX > 10 && mouseX < 20 && mouseY > 10 && mouseY < 20) { strokeWeight(0); fill(0); rect(0, 320, 400, 90); textSize(8); fill(255); text(“To draw, press and hold the mouse on the canvas.”, 10, 327); text( “To change color, click the bar below and pick the desired color.”, 10, 337 ); text(“To start over, press Clear. “, 10, 347); text( “To use the eraser, click eraser and click a color when you’re done.”, 10, 357 ); text( “To change the width of the line, hold one of the keys: R, T, Y, U.”, 10, 367 ); text(“To pick black, press B.”, 10, 377); text(“To randomize the color of your line, press Randomize.”, 10, 387); //knoppen } else { strokeWeight(0); fill(0); rect(0, 315, 400, 55); fill(255); strokeWeight(1); rect(10, 325, 80, 35); rect(100, 325, 95, 35); rect(205, 325, 20, 35); rect(235, 325, 155, 35); fill(0); textSize(30); text(“Clear”, 12.5, 352.5); text(“Eraser”, 102.5, 352.5); text(“B”, 205, 352.5); text(“Randomize”, 235, 352.5); fill(0); rect(10, 10, 10, 10); fill(255); textSize(8); text(“?”, 13, 18); } } //lijn kleur function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > height – 30 && mouseY < height) {
stroke(c, 75, 100);
}
}