Infoklasse Coding Dokumentation_DainPark

List

Zeit_Visualisierung
Datei_Visualisierung
Storytelling
SVG_Animation

Zeit_Visualisierung

📍 Location : /zeit

Ich habe gelernt, wie man p5.js benutzen kann. Besonders für mich push(), pop() waren interessant.

    push();
    //code
    pop();
  
    push();
    //code
    pop();

und Ich habe auch beginShape(), Vertex(), endShape() gelernt.
-beginShape

beginShape();
    
    for(let i = 0; i < h; i++){
    let r = 350 + sin(i * time / 2) * 20;
    let x = 0;
    let y = -r;
    let a = 30 * i;
    push();
    rotate(a);

    
    let x2 = cos((i - 3) * 30) * r;
    let y2 = sin((i - 3) * 30) * r;
  
    vertex(x2, y2);
    
    if(1 <= h2 && h2 <= 12){
      push();
      fill(255);
      circle(x, y, 30);
      pop();
    }
    if(h2 > 12){
      push();
      fill(100);
      noStroke();
      circle(x, y, 30);
      pop();
    }
    
    pop();
  }
  endShape();

Datei_Visualisierung

📍 Location : /dateiv

Ich habe gelernt, wie man Datei mit CSV visualisieren kann.
Und Ich habe besonders viel über Array gelernt.

const array = [3,5,2,1,6,8,4];
array.sort((a, b) => a - b);
console.log(array);
// [1,2,3,4,5,6,8]

array.sort((a,b) => b - a);
console.log(array);
// [8, 6, 5, 4,3,2,1]

-Array Methods

Und Ich wollte auch selbst CSV file parsing machen, deswegen habe ich auch probiert. Für mich habe ich dafür Github gist benutzt

export CSV file und diese Datei kann ich im Github Gist hochladen
und danach wenn ich RAW klicken dann bekomme ich den LINK für Result
-RESULT mein CSV file durch URL

Storytelling

📍 Location : /storytelling

Ich habe besonders viel GSAP durch die Arbeit gelernt.

gsap.registerPlugin(ScrollTrigger);
var tl = gsap.timeline({visibility: "hidden"});

var tl1 = gsap.timeline({
  onStart :function() {console.log("start")},
  onComplete: function() {console.log("finished")},
    // scrollTrigger: { 
    //   trigger: '.main1',
    //   start: "10% top",
    //   markers: true,
    //   end: 'bottom top',
    //   snap: true, 
    //   toggleActions:"restart complete reverse reverse",
      
    // },
  });

visibility : "hidden" => Dadurch kann man zuerst elements stecken, bevor animation anfängt
onStart : function => Wenn timeline anfängt funktioniert
onComplete : function => Wenn timeline geendet wird, dann funktioniert.

scrollTrigger

gsap.registerPlugin(ScrollTrigger);
var tl = gsap.timeline({visibility: "hidden"});

var tl1 = gsap.timeline({
//   onStart :function() {console.log("start")},
//   onComplete: function() {console.log("finished")},
    scrollTrigger: { 
      trigger: '.main1',
      start: "10% top",
      markers: true,
      end: 'bottom top',
      snap: true, 
      toggleActions:"restart complete reverse reverse",
      
    },
  });

scrub: duration hängt von Scroll ab
snap: automatisch bewegt scroll zum element

Tween

xPercent vs x : xPercent is %

Inspiration

-01. onStart, onComplete
-02. onStart, onComplete, => HTML a href

Ich mag nicht persönlich JQuery, deswegen weiss ich nicht gut darüber. Allerdings ich vermute, er hat mit Jquery geschrieben, deshalb habe ich wieder als ES6 geschrieben.

const HrefArray =[
    "./zeit/index.html",
    "./dateiv/index.html",
    "./storytelling/index.html"
]

const boxLs = document.querySelectorAll(".test");

let lo = "";
boxLs.forEach((box) => {
    box.addEventListener("click", (e) => {
        e.preventDefault();

        if(e.target.id === "1"){
            console.log("d");
            lo = HrefArray[0]
        }
        if(e.target.id === "2"){
            lo = HrefArray[1]
        }
        if(e.target.id === "3"){
            lo = HrefArray[2]
        }
       

        tl.to(".boxLink", {
            y: 1000,
            duration: 1,
            opacity: 0,
            scale: 0.3,
            ease: "power3.out",
            stagger: {
                from: "random",
                amount: 0.2
            },
            
        },0).to("#nav", {
            yPercent: -100,
            duration: 1,
            opacity: 0,
            ease: "power3.out",
            onComplete: function(){
                window.location.href = lo;
            }
        },0.3)
    })
})

SVG_Animation

...
document.addEventListener("mousemove", (e) => {
    
     mouseX = e.pageX - (svgSize.clientWidth/2);
     mouseY = e.pageY - (svgSize.clientHeight/2);
    faceM.setAttribute("transform", `translate(${mouseX}, ${mouseY}) scale(1)`)
    faceL.setAttribute("transform", `translate(${100 + (mouseX /2.2)}, ${150 + (mouseY /4)})`)
    faceC.setAttribute("transform", `translate(${170 + (mouseX /1.5)}, ${280 + (mouseY/3)})`)
    
    
})

let moveUpDown = 0;
let time = 0;
function init(){
    time += 0.1;
    moveUpDown += Math.sin(time/2) * 2;
    faceM.setAttribute("transform", `translate(${mouseX}, ${mouseY + moveUpDown}) scale(1)`);
    window.requestAnimationFrame(init)
}

init();