diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e69de29 diff --git a/Day-1/index.html b/Day-1/index.html deleted file mode 100644 index acd1738..0000000 --- a/Day-1/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Sketch - - - - - - - - - - Rectangles Script - Labyrinth Script - - diff --git a/Day-2/image.js b/Day-2/image.js deleted file mode 100644 index dabd656..0000000 --- a/Day-2/image.js +++ /dev/null @@ -1,10 +0,0 @@ -let img; - -function preload() { - img = loadImage("Images/monitoring-miku.png"); -} - -function setup() { - createCanvas(720, 400); - image(img, 0, 0, 300, 300); -} \ No newline at end of file diff --git a/Day-2/pixels.js b/Day-2/pixels.js deleted file mode 100644 index 5b0a318..0000000 --- a/Day-2/pixels.js +++ /dev/null @@ -1,38 +0,0 @@ -let img; - -function preload() { - img = loadImage("Images/monitoring-miku.png"); -} - -function setup() { - createCanvas(600, 600); - pixelDensity(1); -} - -function draw() { - background(0); - image(img, 100, 100, 400, 400); - /* img.loadPixels(); - for (let i = 0; i < img.pixels.length; i += 4) { - let red = img.pixels[i + 0]; - let green = img.pixels[i + 1]; - let blue = img.pixels[i + 2]; - let alpha = img.pixels[i + 3]; - img.pixels[i + 0] = red; - img.pixels[i + 1] = green; - img.pixels[i + 2] = blue; - img.pixels[i + 3] = alpha; - } - img.updatePixels(); */ - img.loadPixels(); - for ( let y = 0; y < height; y++) { - for (let x = 0; x < width; x++) { - const index = (x + y * width) * 4; - img.pixels[index + 0] = mouseX; - img.pixels[index + 1] = mouseY; - img.pixels[index + 2] = y; - img.pixels[index + 3] = 100; - } - } - img.updatePixels(); -} \ No newline at end of file diff --git a/Images/sketch.js b/Images/sketch.js new file mode 100644 index 0000000..7f3d2bc --- /dev/null +++ b/Images/sketch.js @@ -0,0 +1,22 @@ +let img; + +function preload() { + img = loadImage("Images/monitoring-miku.png"); +} + +function draw() { + +} + +function setup() { + createCanvas(800, 800) + image(img, 0, 0, mouseX, mouseY); + + +loadPixels(); // loads pixels from canvas +img.loadPixels(); // loads pixels from img +img.updatePixels(); // updates the img pixels +updatePixels(); // updates the canvas pixels +} + + diff --git a/Day-1/LICENSE b/Week-1/LICENSE similarity index 100% rename from Day-1/LICENSE rename to Week-1/LICENSE diff --git a/Week-1/index.html b/Week-1/index.html new file mode 100644 index 0000000..c6e23ae --- /dev/null +++ b/Week-1/index.html @@ -0,0 +1,18 @@ + + + + + + + Sketch + + + + + + + + + + + diff --git a/Day-1/jsconfig.json b/Week-1/jsconfig.json similarity index 100% rename from Day-1/jsconfig.json rename to Week-1/jsconfig.json diff --git a/Day-1/labyrinth.js b/Week-1/labyrinth.js similarity index 100% rename from Day-1/labyrinth.js rename to Week-1/labyrinth.js diff --git a/Day-1/rectangles.js b/Week-1/rectangles.js similarity index 100% rename from Day-1/rectangles.js rename to Week-1/rectangles.js diff --git a/Day-1/script_labyrinth.html b/Week-1/script_labyrinth.html similarity index 63% rename from Day-1/script_labyrinth.html rename to Week-1/script_labyrinth.html index 2620549..cf961a4 100644 --- a/Day-1/script_labyrinth.html +++ b/Week-1/script_labyrinth.html @@ -1,15 +1,15 @@ - + - + Sketch - + - - + + diff --git a/Day-1/script_rectangles.html b/Week-1/script_rectangles.html similarity index 63% rename from Day-1/script_rectangles.html rename to Week-1/script_rectangles.html index 7cd8deb..b68b82d 100644 --- a/Day-1/script_rectangles.html +++ b/Week-1/script_rectangles.html @@ -1,15 +1,15 @@ - + - + Sketch - + - - + + diff --git a/Day-1/style.css b/Week-1/style.css similarity index 100% rename from Day-1/style.css rename to Week-1/style.css diff --git a/Week-2/Pictures/image.js b/Week-2/Pictures/image.js new file mode 100644 index 0000000..4891bee --- /dev/null +++ b/Week-2/Pictures/image.js @@ -0,0 +1,10 @@ +let img; + +function preload() { + img = loadImage("/Images/monitoring-miku.png"); +} + +function setup() { + createCanvas(720, 400); + image(img, 0, 0, 300, 300); +} diff --git a/Week-2/Pictures/images.html b/Week-2/Pictures/images.html new file mode 100644 index 0000000..a901605 --- /dev/null +++ b/Week-2/Pictures/images.html @@ -0,0 +1,18 @@ + + + + + + + Sketch + + + + + + + + + + + diff --git a/Week-2/Pictures/pixels.js b/Week-2/Pictures/pixels.js new file mode 100644 index 0000000..9c17c7f --- /dev/null +++ b/Week-2/Pictures/pixels.js @@ -0,0 +1,38 @@ +let img; + +function preload() { + img = loadImage("/Images/monitoring-miku.png"); +} + +function setup() { + createCanvas(600, 600); + pixelDensity(1); +} + +function draw() { + background(0); + image(img, 100, 100, 400, 400); + /* img.loadPixels(); + for (let i = 0; i < img.pixels.length; i += 4) { + let red = img.pixels[i + 0]; + let green = img.pixels[i + 1]; + let blue = img.pixels[i + 2]; + let alpha = img.pixels[i + 3]; + img.pixels[i + 0] = red; + img.pixels[i + 1] = green; + img.pixels[i + 2] = blue; + img.pixels[i + 3] = alpha; + } + img.updatePixels(); */ + img.loadPixels(); + for (let y = 0; y < height; y++) { + for (let x = 0; x < width; x++) { + const index = (x + y * width) * 4; + img.pixels[index + 0] = mouseX; + img.pixels[index + 1] = mouseY; + img.pixels[index + 2] = y; + img.pixels[index + 3] = 100; + } + } + img.updatePixels(); +} diff --git a/Day-2/styleSettings.js b/Week-2/Pictures/styleSettings.js similarity index 100% rename from Day-2/styleSettings.js rename to Week-2/Pictures/styleSettings.js diff --git a/Day-2/transformations.js b/Week-2/Pictures/transformations.js similarity index 100% rename from Day-2/transformations.js rename to Week-2/Pictures/transformations.js diff --git a/index.html b/Week-2/Shapes/interactive-shapes.html similarity index 68% rename from index.html rename to Week-2/Shapes/interactive-shapes.html index d8b43d3..fda2256 100644 --- a/index.html +++ b/Week-2/Shapes/interactive-shapes.html @@ -1,12 +1,12 @@ - + - + - Sketch + Following circles sketch - + diff --git a/Week-2/Shapes/moving-shapes.html b/Week-2/Shapes/moving-shapes.html new file mode 100644 index 0000000..220ff53 --- /dev/null +++ b/Week-2/Shapes/moving-shapes.html @@ -0,0 +1,18 @@ + + + + + + + Bouncing DVD-type sketch + + + + + + + + + + + diff --git a/Week-2/Shapes/random_sketch.js b/Week-2/Shapes/random_sketch.js new file mode 100644 index 0000000..92e3bbb --- /dev/null +++ b/Week-2/Shapes/random_sketch.js @@ -0,0 +1,82 @@ +const amountOfFormPoints = 5; +const stepSize = 1; +const initRadius = 150; +// const mouseAttraction = 1; let centerX, centerY; +let x = []; +let y = []; +posX = 1; +posY = 1; +let movement_angle; + +let xDirection = -1; +let yDirection = -1; + +function setup() { + createCanvas(windowWidth, windowHeight); + + // inital setup + centerX = width / 2; + centerY = height / 2; + const angle = radians(360 / amountOfFormPoints); + for (let i = 0; i < amountOfFormPoints; i++) { + x.push(cos(angle * i) * initRadius); + y.push(sin(angle * i) * initRadius); + } + movement_angle = random(360); + + // styling + stroke(0.75); + strokeWeight(5); + noFill(); +} + +function draw() { + background(255, 255, 255, 10); + // float towards random position + + if (centerX > windowWidth) { + xDirection = -1; + } + if (centerX < 0) { + xDirection = 1; + } + if (centerY > windowHeight) { + yDirection = -1; + } + if (centerY < 0) { + yDirection = 1; + } + posX = posX + 2 * xDirection; + posY = posY + 2 * yDirection; + + centerX = windowWidth / 2 + posX; + centerY = windowHeight / 2 + posY; + console.log(xDirection); + + // calculate new points + for (let i = 0; i < amountOfFormPoints; i++) { + x[i] += random(-stepSize, stepSize); + y[i] += random(-stepSize, stepSize); + // ellipse(x[i] + centerX, y[i] + centerY, 5, 5); + } + + // first controlPoint + beginShape(); + curveVertex(x[0] + centerX, y[0] + centerY); + + // only these points are drawn + for (let i = 0; i < amountOfFormPoints; i++) { + curveVertex(x[i] + centerX, y[i] + centerY); + } + + // Connect to the first poing again + // or use endShape(CLOSE); but result is different + curveVertex(x[0] + centerX, y[0] + centerY); + + // end controlPoint + curveVertex( + x[amountOfFormPoints - 1] + centerX, + y[amountOfFormPoints - 1] + centerY, + ); + endShape(); +} diff --git a/Week-2/Shapes/sketch.js b/Week-2/Shapes/sketch.js new file mode 100644 index 0000000..4366ab6 --- /dev/null +++ b/Week-2/Shapes/sketch.js @@ -0,0 +1,59 @@ +const amountOfFormPoints = 5; +const stepSize = 1; +const initRadius = 150; +const mouseAttraction = 1; +let centerX, centerY; +let x = []; +let y = []; + +function setup() { + createCanvas(windowWidth, windowHeight); + + // inital setup + centerX = width / 2; + centerY = height / 2; + const angle = radians(360 / amountOfFormPoints); + for (let i = 0; i < amountOfFormPoints; i++) { + x.push(cos(angle * i) * initRadius); + y.push(sin(angle * i) * initRadius); + } + + // styling + stroke(0, 75); + strokeWeight(0.5); + background(255); + noFill(); +} + +function draw() { + // float towards mouse position + centerX += (mouseX - centerX) * mouseAttraction; + centerY += (mouseY - centerY) * mouseAttraction; + + // calculate new points + for (let i = 0; i < amountOfFormPoints; i++) { + x[i] += random(-stepSize, stepSize); + y[i] += random(-stepSize, stepSize); + // ellipse(x[i] + centerX, y[i] + centerY, 5, 5); + } + + // first controlPoint + beginShape(); + curveVertex(x[0] + centerX, y[0] + centerY); + + // only these points are drawn + for (let i = 0; i < amountOfFormPoints; i++) { + curveVertex(x[i] + centerX, y[i] + centerY); + } + + // Connect to the first poing again + // or use endShape(CLOSE); but result is different + curveVertex(x[0] + centerX, y[0] + centerY); + + // end controlPoint + curveVertex( + x[amountOfFormPoints - 1] + centerX, + y[amountOfFormPoints - 1] + centerY, + ); + endShape(); +} diff --git a/Week-3/import-export/borderpatrol.html b/Week-3/import-export/borderpatrol.html new file mode 100644 index 0000000..319166f --- /dev/null +++ b/Week-3/import-export/borderpatrol.html @@ -0,0 +1,10 @@ + + + + Document + + + + ... + + diff --git a/Week-3/import-export/directExport.js b/Week-3/import-export/directExport.js new file mode 100644 index 0000000..448e01c --- /dev/null +++ b/Week-3/import-export/directExport.js @@ -0,0 +1,22 @@ +export const someString = "just a string"; +export const someNumber = 2; +export const someObject = { + name: "Oger", + rank: 1, + title: "Oger", + class: "Beast", + race: "Oger", +}; + +export function normalFunction() { + console.log("nomral function!"); +} + +export const arrowFunction = () => console.log("arrow function!"); + +export class SomePeron { + constructor(name, age) { + this.name = name; + this.age = age; + } +} diff --git a/Week-3/import-export/main.js b/Week-3/import-export/main.js new file mode 100644 index 0000000..4e84614 --- /dev/null +++ b/Week-3/import-export/main.js @@ -0,0 +1,47 @@ +import { printMood, printName } from "./student-Object.js"; + +const myStudent1 = { name: "Sven", mood: "Ruffy" }; + +console.log("myStudent:", myStudent1); +printName(myStudent1); +printMood(myStudent1); + +/* +import Student, { + printMood as printngMood, + printName as printngName, +} from "./student-Class.js"; + +const myStudent2 = new Student("Juerg", "Wanted"); + +console.log("myStudent:", myStudent); +printingName(myStudent2); +printingMood(myStudent2); +*/ + +import Student, { + printMood as renameFunction, + printName as printedName, +} from "./student-Class.js"; + +const myStudent = new Student("Nika", "God"); + +console.log("myStudent:", myStudent); +printedName(myStudent); +renameFunction(myStudent); + +import { + SomePeron, + arrowFunction, + normalFunction, + someNumber, + someObject, + someString, +} from "./directExport.js"; + +console.log(new SomePeron("someName", 22)); +arrowFunction(); +normalFunction(); +console.log(someNumber); +console.log(someObject); +console.log(someString); diff --git a/Week-3/import-export/student-Class.js b/Week-3/import-export/student-Class.js new file mode 100644 index 0000000..4e17e4e --- /dev/null +++ b/Week-3/import-export/student-Class.js @@ -0,0 +1,20 @@ +class Student { + constructor(name, mood) { + this.name = name; + this.mood = mood; + } +} + +function printName(student) { + console.log(`Student's name is: ${student.name}`); +} + +const printMood = (student) => console.log(`Student's mood is ${student.mood}`); + +//Multiline: +export default Student; +export { printName }; // export { printName as displayName }; +export { printMood }; // export { printName as displayMood }; + +// Or one liner (Only one export works though): +// export { Student as default, printName, printMood }; diff --git a/Week-3/import-export/student-Object.js b/Week-3/import-export/student-Object.js new file mode 100644 index 0000000..df43290 --- /dev/null +++ b/Week-3/import-export/student-Object.js @@ -0,0 +1,19 @@ +function printName(student) { + console.log(`Student's name is: ${student.name}`); +} + +const printMood = (student) => console.log(`Student's mood is $(student.mood)`); + +// Multiline +export { printName }; +export { printMood }; + +//Or one liner (Only one export works though): +// export { printName, printMood }; +/* +export { + Student as default, + printName as displayName, + printMood as displayMood, +}; +*/ diff --git a/sketch.js b/sketch.js deleted file mode 100644 index 93ceef1..0000000 --- a/sketch.js +++ /dev/null @@ -1,10 +0,0 @@ -let img; - -function preload() { - img = loadImage("Images/monitoring-miku.png"); -} - -function setup() { - createCanvas(800, 800) - image(img, 0, 0, mouseX, mouseY); -} diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..18db18c --- /dev/null +++ b/website/index.html @@ -0,0 +1,9 @@ + + + + + + Document + + +