{"id":4299,"date":"2019-02-16T10:41:02","date_gmt":"2019-02-16T09:41:02","guid":{"rendered":"https:\/\/p1xel.berlin\/?p=4299"},"modified":"2019-02-17T18:47:35","modified_gmt":"2019-02-17T17:47:35","slug":"js-als-slider-experiment","status":"publish","type":"post","link":"https:\/\/p1xel.berlin\/en\/js-als-slider-experiment\/","title":{"rendered":"JS als Slider Experiment"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"4299\" class=\"elementor elementor-4299 elementor-bc-flex-widget\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c8baef8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c8baef8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0e93aa4\" data-id=\"0e93aa4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e596adc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e596adc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-fc8a344\" data-id=\"fc8a344\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-15e704a elementor--h-position-center elementor--v-position-middle elementor-arrows-position-inside elementor-pagination-position-inside elementor-widget elementor-widget-slides\" data-id=\"15e704a\" data-element_type=\"widget\" data-settings=\"{&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;transition&quot;:&quot;slide&quot;,&quot;transition_speed&quot;:500}\" data-widget_type=\"slides.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-swiper\">\n\t\t\t<div class=\"elementor-slides-wrapper elementor-main-swiper swiper-container\" dir=\"ltr\" data-animation=\"fadeInUp\">\n\t\t\t\t<div class=\"swiper-wrapper elementor-slides\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-repeater-item-42733c5 swiper-slide\"><div class=\"swiper-slide-bg\"><\/div><div class=\"swiper-slide-inner\" ><div class=\"swiper-slide-contents\"><div class=\"elementor-slide-heading\">Slide 1 Heading<\/div><div class=\"elementor-slide-description\">Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor<\/div><div  class=\"elementor-button elementor-slide-button elementor-size-sm\">Click Here<\/div><\/div><\/div><\/div><div class=\"elementor-repeater-item-9ebe8ae swiper-slide\"><div class=\"swiper-slide-bg\"><\/div><div class=\"swiper-slide-inner\" ><div class=\"swiper-slide-contents\"><div class=\"elementor-slide-heading\">Slide 2 Heading<\/div><div class=\"elementor-slide-description\">Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor<\/div><div  class=\"elementor-button elementor-slide-button elementor-size-sm\">Click Here<\/div><\/div><\/div><\/div><div class=\"elementor-repeater-item-8aab66a swiper-slide\"><div class=\"swiper-slide-bg\"><\/div><div class=\"swiper-slide-inner\" ><div class=\"swiper-slide-contents\"><div class=\"elementor-slide-heading\">Slide 3 Heading<\/div><div class=\"elementor-slide-description\"><div id=\"blocki\">Hello dit is blocki.<\/div>\n<p><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/0.7.3\/p5.min.js\" defer=\"\"><\/script><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/0.7.3\/addons\/p5.dom.min.js\" defer=\"\"><\/script><\/p>\n<div><script>var bg;\nvar tanzteam1 = [];\nvar tanzteam2 = [];\nvar colors = [\n      '#06aed5',\t\t\t\t\/\/ '#06aed5', hellblau\n      '#086788',\t\t\t      \/\/ '#086788', dunkelblau\n      '#f0c808',\t\t\t\t\/\/ '#f0c808', gelb\n      '#fff1d0',\t\t\t\t\/\/ '#fff1d0', wei\u00df\n      '#dd1c1a',\t\t\t\t\/\/ '#dd1c1a', rot\n];\nvar button;\nvar neuerT\u00e4nzer;\nvar paragraph;\nvar size;\nvar SIZE;\nvar legende;\nvar keith;\nvar leinwand;\nfunction setup() {\n      \/\/ GRUNDEINSTELLUNGEN\n      leinwand = createCanvas(windowWidth,windowHeight);\n      leinwand.parent('blocki');\n      leinwand.addClass('mr-1');\n      leinwand.addClass('resp');\n      frameRate(20);\n      bg = random(50);\n      tanzen();\n      \/\/ STEUERELEMENTE - USER INTERFACE      \n      \n      button = createButton('Let`s dance');\n      button.parent('blocki');\n      button.mousePressed(tanzen);\n      button.position(10,10);      \n      paragraph = createP('');\n      \/\/ paragraph.position(10, height-55);\n      paragraph.parent('unti'); \n      neuerT\u00e4nzer = createButton('Mehr T\u00e4nzer');\n      neuerT\u00e4nzer.parent('unti');\n      neuerT\u00e4nzer.mousePressed(mehrt\u00e4nzer);\n      \/\/ neuerT\u00e4nzer.position(10, height-40);\n      size = createSlider(10, 40, 20);\n      \/\/ size.position(150, height-39);\n      size.parent(paragraph);\n      \/\/ size.parent('blocki');\n      legende = createP('T\u00e4nzergr\u00f6\u00dfe');\n      legende.style('color', '#ffffff');\n      legende.style('font-size', '12px');\n      legende.parent(paragraph);\n      legende.position(255, height-35);\n}\nclass Tanzer {\n      constructor(x, y, D, farbe, farbe1) {\n            this.ort = createVector(x, y);\n            this.vel = createVector(0, 0);\n            this.besch = createVector(random(-0.5, 0.5), random(-0.5, 0.5));\n            this.d = D;\n            this.r = this.d * 0.65;\n            this.color = farbe;\n            this.color1 = farbe1;\n            this.w = 1;\n      }\n      \/\/ ZEICHNEN DES T\u00c4NZERS\n      darstellen() {\n            fill(this.color);\n            noStroke();\n            ellipse(this.ort.x, this.ort.y, this.d, this.d);\n            fill(this.color1);\n            ellipse(this.ort.x, this.ort.y, this.r, this.r);\n      }\n      \/\/ \u00c4NDERUNG DER BEWEGUNG \u00dcBER DIE ZEIT\n      update() {\n            this.ort.add(this.vel);\n            this.vel.add(this.besch);\n\n            if (this.ort.x + this.d \/ 2 > width || this.ort.x - this.d \/ 2 <= 0) {\n                  this.vel.x *= -1;\n            }\n            if (int(this.ort.y + this.d \/ 2) >= height || this.ort.y - this.d \/ 2 <= 0) {\n                  this.vel.y *= -1;\n            }\n            this.vel.mult(0.999);     \n            this.d += this.w;\n            if (this.d > 80 || this.d < -80) {\n                  this.w *= -1;\n            }\n      }\n      zentrieren() {\n            if (mouseIsPressed) {\n                  this.ort.x = width \/ 2;\n                  this.ort.y = height \/ 2;\n            } else {\n                  console.log(\"shit its\", false);\n            }\n      }\n}\nfunction draw() {\n      background(bg);\n      for (i = 0; i < tanzteam1.length; i++) {\n            tanzteam1[i].darstellen();\n            tanzteam1[i].update();\n      }\n      for (j = 0; j < tanzteam2.length; j++) {\n            tanzteam2[j].darstellen();\n            tanzteam2[j].update();\n      }\n}\nfunction tanzen() {\n      bg = random(99);\n\n      for (i = 0; i < 1; i++) {\n            tanzteam1[i] = new Tanzer(random(30, width - 30), random(30, height - 30), random(20, 60), random(colors), random(colors));\n      }      \n      for (j = 0; j < tanzteam2.length; j++) {\n            tanzteam2[j].zentrieren();\n      }\n}\nfunction mehrt\u00e4nzer() {\n      SIZE = size.value();\n      for (j = 0; j < 1; j++) {\n            tanzteam2.push(new Tanzer(random(30, width - 30), random(30, height - 30), SIZE, random(colors), random(colors)));\n      }\n}<\/script><\/div>\n\n<div id=\"unti\">Hello dit is unti.<\/div>\n<\/div><div  class=\"elementor-button elementor-slide-button elementor-size-sm\">Click Here<\/div><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-left\"><\/i>\t\t\t\t\t\t\t<span class=\"elementor-screen-only\">Previous<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-right\"><\/i>\t\t\t\t\t\t\t<span class=\"elementor-screen-only\">Next<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-85f34f8\" data-id=\"85f34f8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-85e899f\" data-id=\"85e899f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Slide 1 HeadingClick edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolorClick HereSlide 2 HeadingClick edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolorClick HereSlide 3 HeadingHello dit is blocki. Hello dit is unti. Click Here<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":[],"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/posts\/4299"}],"collection":[{"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/comments?post=4299"}],"version-history":[{"count":16,"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/posts\/4299\/revisions"}],"predecessor-version":[{"id":4341,"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/posts\/4299\/revisions\/4341"}],"wp:attachment":[{"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/media?parent=4299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/categories?post=4299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/p1xel.berlin\/en\/wp-json\/wp\/v2\/tags?post=4299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}