Ying-Yang logo

Deze les heb ik de eind opdracht gemaakt van hoofdstuk 1. Ik heb vorige les het normale Ying-Yang logo gemaakt, dus toen heb ik in deze vierde les een concept gemaakt van wat ik wil en daar een begin aan gemaakt, in mijn zelfbeoordeling laat ik het (bewegende) eindresultaat zien.

let snowflakes = [];
var angle = 0;

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

function draw() {
  //achtergrond
  background(166, 221, 237); 
  fill(242, 179, 240);
  rect(0,0,200,400);
  
  //kleur veranderen van neerslag
  let x = map(mouseX, 0, width, 0, 255);
  let y = map(mouseY, 0, height, 0, 255);
  fill(x,y,255);

  //genereren van sneeuwvlokken
  let t = frameCount / 30;
  
  for (let i = 0; i < random(0.1); i++) {
    snowflakes.push(new snowflake());
  }
    
  for (let flake of snowflakes) {
    flake.update(t); 
    flake.display();
  }
  
  fill(235)
  rect(0,0,200,30)
  fill(245)
  rect(200,0,200,30)

  //wolk
    noStroke();
  fill(244);
  ellipse(20,35,60,50);
  ellipse(50,25,60,50);
  ellipse(100,35,60,50);
  ellipse(40,55,60,50);
  ellipse(80,50,60,50);
  //wolk
  fill(240);
  ellipse(350,50,60,50);
  ellipse(380,40,60,50);
  ellipse(430,50,60,50);
  ellipse(370,70,60,50);
  ellipse(410,65,60,50);
  //wolk
  fill(238);
  ellipse(150,30,60,50);
  ellipse(180,20,60,50);
  ellipse(230,30,60,50);
  ellipse(170,50,60,50);
  ellipse(210,45,60,50);
  //wolk
  fill(245);
  ellipse(250,20,60,50);
  ellipse(280,10,60,50);
  ellipse(330,20,60,50);
  ellipse(270,40,60,50);
  ellipse(310,40,60,50);
  //bergen
  fill(220);
  triangle(155,400,555,400,355,100);
  fill(200);
  triangle(-90,400,160,400,60,200);
  
  //het laten draaien
  translate(width/2,height/2);
  rotate(angle);
  
  //grote basis cirkel
  fill('black');
  noStroke();
  ellipse(0,0,200,200);
  
  //witte staart
  fill('white');
  noStroke();
  arc(0,0,200,200,90,270);
  
  //witte kant logo
  noStroke();
  fill('white');
  ellipse(0,0+50,100,100);
  fill(166, 221, 237);
  noStroke();
  ellipse(0,0+50,60,60);
  fill('black');
  noStroke();
  ellipse(0,0+50,30,30);
  
  //zwarte kant logo
  fill('black');
  noStroke();
  ellipse(0,0-50,100,100);
  fill(242, 179, 240);
  noStroke();
  ellipse(0,0-50,60,60);
  fill('white');
  noStroke();
  ellipse(0,0-50,30,30);
  //angle voor draaien van logo
    angle--;
}
//Aanleggen van snowflake function
function snowflake() {
  this.posX = 0;
  this.posY = random(-50, 0);
  this.initialangle = random(0, 2 * 180);
  this.size = random(2, 5);

  this.radius = sqrt(random(pow(width / 2, 2)));

  this.update = function(time) {
    let w = 0.15;
    let angle = w * time + this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);

    this.posY += pow(this.size, 0.4);

    if (this.posY > height) {
      let index = snowflakes.indexOf(this);
      snowflakes.splice(index, 1);
    }
  };

  this.display = function() {
    ellipse(this.posX, this.posY, this.size);
  };
}

Ik heb hier erg mijn best op gedaan en heeft best veel tijd gekost, hier de link naar de zelfbeoordeling:

Ik vond dit een leuke les.