Creative coding :: Full Stack Web Development

Creative Coding met p5js

Handige links:

Praktische info: Het doel

Creëer een creatief, visueel interessant project in p5.js. Er moet ook verplicht een interactief element inzitten bv. microfoonvolume om iets te bewegen, camera input, muis input, keyboard input …

Extra uitleg project

Het project bestaat uit het creëren van creatief materiaal aan de hand van p5.js. P5.js is een JavaScript library voor creative coding met de focus op programmeren zo toegankelijk en inclusief mogelijk te maken voor iedereen. Meer info over de hun visie is terug te vinden op hun website: p5js.org. De online web editor voorziet enkele boilerplate html, css en javascript code om snel van start te kunnen gaan met je eigen ideëen.

De afbeelding hieronder toont een afbeelding die geproduceerd is met code door gebruik te maken van p5.js.

Volgende links leiden naar verschillende bronnen om inspiratie op te doen over creative coding:

Een p5 sketch toevoegen aan je website

Om een p5 sketch toe te voegen aan je website heb je het volgende nodig:

Volgende imports in de head van de CDN’s van de p5.js source code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Voeg volgende CSS toe:

html,
    body {
      margin: 0;
      padding: 0;
    }

    canvas {
      display: block;
    }

Voeg ten slotte minstens volgende JavaScript code toe in een <script language="javascript">-tag onderaan je body:

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

function draw() {
  background(220);
}

P5.js workflow

Project voorbeelden

Hieronder is een voorbeeld terug te vinden van een dagproject dat gemaakt werd in p5 als voorbeeld voor de projectdag van de studenten. De code is terug te vinden

Creative coding