Categorie: Overig

Geplaatst op

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

Geplaatst op

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

Geplaatst op

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);
}
}

Geplaatst op

Light Switch game Wearymandrill1 en Alertrhino9

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

var switch1 = false;
var switch2 = false;
var switch3 = false;
var switch4 = false;
var switch5 = false;
var switch6 = false;

var light1 = false;
var light2 = false;
var light3 = false;
var light4 = false;
var light5 = false;
var light6 = false;

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

function draw() {
background(0);
fill(150);
//lightswitches
rect(100, 300, 60, 60);
rect(200, 300, 60, 60);
rect(300, 300, 60, 60);
rect(400, 300, 60, 60);
rect(500, 300, 60, 60);
rect(600, 300, 60, 60);

//lights

fill(150);
if (!light1) {
fill(150);
} else {
fill(255, 255, 0);
}

ellipse(130, 100, 60, 60);

if (!light2) {
fill(150);
} else {
fill(255, 255, 0);
}
ellipse(230, 100, 60, 60);

if (!light3) {
fill(150);
} else {
fill(255, 255, 0);
}
ellipse(330, 100, 60, 60);

if (!light4) {
fill(150);
} else {
fill(255, 255, 0);
}
ellipse(430, 100, 60, 60);

if (!light5) {
fill(150);
} else {
fill(255, 255, 0);
}

ellipse(530, 100, 60, 60);

if (!light6) {
fill(150);
} else {
fill(255, 255, 0);
}
ellipse(630, 100, 60, 60);
}

function mouseClicked() {
if (mouseX > 100 && mouseX < 160 && mouseY > 300 && mouseY < 360) {
light1 = !light1;
light2 = !light2;
}

if (mouseX > 200 && mouseX < 260 && mouseY > 300 && mouseY < 360) {
light2 = !light2;
light4 = !light4;
}

if (mouseX > 300 && mouseX < 360 && mouseY > 300 && mouseY < 360) {
light3 = !light3;
light2 = !light2;
}

if (mouseX > 400 && mouseX < 460 && mouseY > 300 && mouseY < 360) {
light4 = !light4;
light6 = !light6;
}

if (mouseX > 500 && mouseX < 560 && mouseY > 300 && mouseY < 360) {
light5 = !light5;
light2 = !light2;
light4 = !light4;
}

if (mouseX > 600 && mouseX < 660 && mouseY > 300 && mouseY < 360) {
light6 = !light6;
}
}

De oplossing is 1-3-5-6

Geplaatst op

Zelfbeoordeling p5.js unit 2 Wearymandill1 en Alertrhino9

WegingCijfer
Voortgang2x7
Light Switch Game2x7
Paint3x8.5
Writing Prompt1x8
Totaal8x7.7

Voortgang: We kwamen veel problemen tegen, en moesten vaak met wat tegenzin doorzetten, maar uiteindelijk hebben we op alle problemen een acceptabele of goede oplossing gevonden.

Light Switch Game: Deze opdracht veroorzaakte het meeste problemen. De code die nodig was om deze opdracht te maken hebben wij simpelweg niet geleerd in LA.1 of LA.2. voor veel van deze opdracht hebben we code van het internet gebruikt. Met heel veel moeite en na 3 verschillende versies hebben wij deze af gemaakt.

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

Paint: Deze opdracht was minder moeilijk, vanaf het begin maakte we goede progressie en we zijn weinig grote obstakels tegengekomen. Halverwege het proces moesten we wel opnieuw beginnen omdat we niet tevreden waren met wat we hadden. We zijn zeer tevreden met het eindproduct.

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

Geplaatst op

Al onze werkstukken + Zelfbeoordeling

//setup
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//fase 1
if (mouseIsPressed)
{
fill(255)
ellipse(mouseX,mouseY,200)
fill(0)
arc(mouseX, mouseY, 200, 200, PI1.5, PI/2); strokeWeight(0) fill(255) ellipse(mouseX,mouseY+50,100,100) fill(0) ellipse(mouseX,mouseY+50,30) fill(0,0,0) ellipse(mouseX,mouseY-50,100,100) fill(255) ellipse(mouseX,mouseY-50,30) } //fase 2 else{ fill(0) ellipse(mouseX,mouseY,200) fill(255) arc(mouseX, mouseY, 200, 200, PI1.5, PI/2);
strokeWeight(0)
fill(0)
ellipse(mouseX,mouseY+50,100,100)
fill(255)
ellipse(mouseX,mouseY+50,30)
fill(255)
ellipse(mouseX,mouseY-50,100,100)
fill(0)
ellipse(mouseX,mouseY-50,30)}
}

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

//setup
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//hoofd
fill(252, 200, 63)
strokeWeight(5)
stroke(160,82,45)
ellipse(mouseX,mouseY,300,300)
stroke(139,69,19)
fill(160,82,45)
//fase 1
if (mouseIsPressed) {
//oog
strokeWeight(3)
ellipse(mouseX-50,mouseY-30,50,50)
ellipse(mouseX+50,mouseY-30,50,80)
strokeWeight(5)
line(mouseX-80,mouseY-70,mouseX-65,mouseY-80)
line(mouseX-65,mouseY-80,mouseX-20,mouseY-70)
line(mouseX+80,mouseY-95,mouseX+65,mouseY-105)
line(mouseX+65,mouseY-105,mouseX+20,mouseY-90)
//mond
strokeWeight(25)
line(mouseX-80,mouseY+50,mouseX+80,mouseY+50)
//fase 2
} else {
//blush
strokeWeight(0)
fill( 255, 182, 193)
ellipse(mouseX-70,mouseY+20,60,60)
ellipse(mouseX+70,mouseY+20,60,60)
//oog
stroke(211,211,211)
strokeWeight(1)
fill(255,255,255)
ellipse(mouseX-50,mouseY-30,70,70)
ellipse(mouseX+50,mouseY-30,70,70)
//pupil
fill(0,0,0)
strokeWeight(0)
ellipse(mouseX-50,mouseY-30,40,40)
ellipse(mouseX+50,mouseY-30,40,40)
//wenkbrauwen
strokeWeight(5)
stroke(160,82,45)
line(mouseX-90,mouseY-80,mouseX-60,mouseY-100)
line(mouseX+90,mouseY-80,mouseX+60,mouseY-100)
line(mouseX-60,mouseY-100,mouseX-40,mouseY-105)
line(mouseX+60,mouseY-100,mouseX+40,mouseY-105)
//mond
stroke(160,82,45)
strokeWeight(20)
line(mouseX-35,mouseY+75,mouseX+35,mouseY+75)
}
}

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

var a;
var b;
var r;
function setup() {
createCanvas(400,400);
a = 0
b = 200
r = random
}
//switch
function draw() {
colorMode(HSB)
if(mouseIsPressed){
a = a+1 }
switch(a %3) {
case 0: fill(r(270,360),r(100,100),r(50,100))
break;
case 1: fill(r(180,270),r(100,100),r(50,100))
break;
case 2: fill(r(90,180),r(100,100),r(50,100))}
//figuren
strokeWeight(0)
rect(r(300),r(300),r(400),r(400))
ellipse(r(400),r(400),r(400),r(400))
triangle(r(400),r(400),r(400),r(400),r(400),r(400))
//kleuren zon
colorMode(RGB)
fill(255,255,a)
strokeWeight(2)
stroke(255, 195, a)
//zon
ellipse(b,b,150,150)
triangle(175,115,225,115,b,60)
triangle(175,285,225,285,b,340)
triangle(285,175,285,225,340,b)
triangle(115,175,115,225,60,b)
triangle(243.083,120.425,298.994,98.994,278.438,155.378)
triangle(243.083,279.575,298.994,301.006,278.438,244.622)
triangle(156.917,120.425,101.006,98.994,121.562,155.378)
triangle(156.917,279.575,101.006,301.006,121.562,244.622)

}

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

35789
Ying YangX
EmojiX
Built in variablesX
Custom variablesX
Random featureX