Je eigen codepen project

Rommelen met mijn code is leuk. Maar op een gegeven moment wil je jouw eigen projecten maken en opslaan. Dan kun je wat je gemaakt hebt ook delen met familie en vrienden.

 

Een account in Codepen is gratis. Dat is alvast goed nieuws.

 

Het enige wat niet kan met een gratis account is plaatjes en geluiden uploaden.

Javascript bibliotheken laden

In deze cursus maken we gebruik van twee Javascript bibliotheken

 

Die moet je in je project laden. Anders raakt jouw computer compleet in de war.

stap 1: kopieëren

Ga naar https://zimjs.com/code.html

Hier vind je een voorbeeld van een HTML-document.

Zoek deze regels:

 

<script src="https://zimjs.org/cdn/1.2.3/createjs_min.js"></script>

<script src="https://zimjs.org/cdn/10.9.0/zim.js"></script>

Daarvan kopieer je wat tussen de aanhalingstekens staat.

Dus:

 

https://zimjs.org/cdn/1.2.3/createjs_min.js

en

https://zimjs.org/cdn/10.7.1/zim.js

 

Eén regel per keer.

 

stap 2: plakken

Nu ga je naar je Codepen-project.

In het tabblad HTML klik je op het tandwiel.

Dan klik je op JS (van Javascript)

 

Hier kun je de code die je net hebt gekopieerd plakken.

Als volgt:

stap 3: basiscode Javascript plakken

In het tabblad JS plak je deze basiscode:

 

const scaling = "fit";
const width = 1024;
const height = 768;
const color = light;
const outerColor = dark;

 

const frame = new Frame(scaling, width, height, color, outerColor);

frame.on("ready", () => {

zog("ready from ZIM Frame");

const stage = frame.stage;

let stageW = frame.width;

let stageH = frame.height;

 

new Circle(100, pink)

.center()
.drag();

 

stage.update();

});

De indentatie moet je zelf even aanbrengen

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Ik geef gelijk ook een e-book cadeau met tips over goede uitleg!

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn aanpak.

Wellicht wil je meer weten over mij.

illustratie van Frank Los
Frank Los
frank@weereenlos.nl06 430 466 58

TUSSEN DE OREN

uitleg die aankomt

Goede uitleg
is ontzettend lastig.

Deze tips helpen jou
keer op keer.
Download mijn gratis e-book
met poster!
illustratie van Frank Los
CookiesDisclaimerPrivacystatement