Skip to content

Commit

Permalink
updates for p5.js 1.9.0
Browse files Browse the repository at this point in the history
  • Loading branch information
jdeboi committed Apr 5, 2024
1 parent d440e4b commit f519b37
Show file tree
Hide file tree
Showing 27 changed files with 2,185 additions and 2,101 deletions.
1 change: 0 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ p5.mapper is a projection mapping library for [p5.js](https://p5js.org/). This l

## Examples
* [basic](https://editor.p5js.org/jdeboi/sketches/EjUrc7RiP)
* [quads](https://editor.p5js.org/jdeboi/sketches/gPBajTX8Z)
* [lines](https://editor.p5js.org/jdeboi/sketches/v4zMGF-6n)
* [bezier](https://editor.p5js.org/jdeboi/sketches/hqTzdgULE)
* [video](https://editor.p5js.org/jdeboi/sketches/He2_OvO2p)
Expand Down
215 changes: 109 additions & 106 deletions dist/p5.mapper.min.js

Large diffs are not rendered by default.

36 changes: 17 additions & 19 deletions examples/basic/index.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<style>
body {
margin: 0;
}

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<style>
body {
margin: 0
}
header {
padding: 20px;
}
</style>
<meta charset="utf-8" />
</head>

header {
padding: 20px;
}
</style>
<meta charset="utf-8" />
</head>

<body>
<script type="text/javascript" src="../../dist/p5.mapper.min.js"></script>
<script src="sketch.js"></script>
</body>

</html>
<body>
<script type="text/javascript" src="../../dist/p5.mapper.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
239 changes: 118 additions & 121 deletions examples/basic/sketch.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/*
* p5.mapper
* https://github.com/jdeboi/p5.mapper
*
* Jenna deBoisblanc
* jdeboi.com
*
*/
* p5.mapper
* https://github.com/jdeboi/p5.mapper
*
* Jenna deBoisblanc
* jdeboi.com
*
*/

let pMapper;
let quadMap, triMap, lineMap, bezMap, polyMap;
Expand All @@ -16,148 +16,145 @@ let myFont;
let img;

function preload() {
img = loadImage("assets/catnap.jpg");
myFont = loadFont('assets/Roboto.ttf');
img = loadImage("assets/catnap.jpg");
myFont = loadFont("assets/Roboto.ttf");
}

function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
textFont(myFont);
initSelection();

// create mapper object
pMapper = createProjectionMapper(this);

polyMap = pMapper.createPolyMap(5);
triMap = pMapper.createTriMap(300, 300);
quadMap = pMapper.createQuadMap(400, 400);
lineMap = pMapper.createLineMap();
bezMap = pMapper.createBezierMap();


// loads calibration in the "maps" directory
pMapper.load("maps/map.json");
createCanvas(windowWidth, windowHeight, WEBGL);
textFont(myFont);
initSelection();

// create mapper object
pMapper = createProjectionMapper(this);
console.log(this);
polyMap = pMapper.createPolyMap(5);
triMap = pMapper.createTriMap(300, 300);
quadMap = pMapper.createQuadMap(400, 400);
lineMap = pMapper.createLineMap();
bezMap = pMapper.createBezierMap();

// loads calibration in the "maps" directory
pMapper.load("maps/map.json");
}

function draw() {
background(0);
displayFrameRate();

switch (mode) {
case "all":
lineMap.display(color('lime'));
quadMap.displayTexture(img);
triMap.displaySketch(rainbow);
bezMap.display(color('orange'));
polyMap.displaySketch(dots);
break;
case "solid":
lineMap.display(color('lime'));
quadMap.display(color('red'));
triMap.display(color('blue'));
bezMap.display(color('orange'));
polyMap.display(color('purple'));
break;
case "image":
lineMap.display(color('white'));
quadMap.displayTexture(img);
triMap.displayTexture(img);
bezMap.displayTexture(img);
polyMap.displayTexture(img);
break;
case "sketch":
lineMap.display(color('white'));
quadMap.displaySketch(drawCoords);
triMap.displaySketch(drawCoords);
bezMap.displaySketch(drawCoords);
polyMap.displaySketch(drawCoords);
break;
}
background(0);
displayFrameRate();

switch (mode) {
case "all":
lineMap.display(color("lime"));
quadMap.displayTexture(img);
triMap.displaySketch(rainbow);
bezMap.display(color("orange"));
polyMap.displaySketch(dots);
break;
case "solid":
lineMap.display(color("lime"));
quadMap.display(color("red"));
triMap.display(color("blue"));
bezMap.display(color("orange"));
polyMap.display(color("purple"));
break;
case "image":
lineMap.display(color("white"));
quadMap.displayTexture(img);
triMap.displayTexture(img);
bezMap.displayTexture(img);
polyMap.displayTexture(img);
break;
case "sketch":
lineMap.display(color("white"));
quadMap.displaySketch(drawCoords);
triMap.displaySketch(drawCoords);
bezMap.displaySketch(drawCoords);
polyMap.displaySketch(drawCoords);
break;
}
}

function drawCoords(pg) {
pg.clear();
pg.push();
pg.background(0, 255, 0);
pg.fill(0);

for (let i = 0; i < 1000; i += 50) {
pg.text(i, i, 150);
pg.text(i, 150, i);
}
pg.fill(255);
pg.ellipse(mouseX, mouseY, 50);
pg.pop();
pg.clear();
pg.push();
pg.background(0, 255, 0);
pg.fill(0);

for (let i = 0; i < 1000; i += 50) {
pg.text(i, i, 150);
pg.text(i, 150, i);
}
pg.fill(255);
pg.ellipse(mouseX, mouseY, 50);
pg.pop();
}

function dots(pg) {
randomSeed(0);
pg.clear();
pg.push();
pg.background("pink");
pg.fill(255);
pg.noStroke();
for (let i = 0; i < 60; i++) {
pg.ellipse(random(width), random(height), random(10, 80));
}
pg.pop();
randomSeed(0);
pg.clear();
pg.push();
pg.background("pink");
pg.fill(255);
pg.noStroke();
for (let i = 0; i < 60; i++) {
pg.ellipse(random(width), random(height), random(10, 80));
}
pg.pop();
}

function rainbow(pg) {
pg.clear();
pg.push();
pg.background('pink');
pg.colorMode(HSB, 255);

for (let i = 0; i < 1000; i++) {
pg.stroke(i % 255, 255, 255);
pg.line(i, 0, i, 300);
}
pg.pop();
pg.clear();
pg.push();
pg.background("pink");
pg.colorMode(HSB, 255);

for (let i = 0; i < 1000; i++) {
pg.stroke(i % 255, 255, 255);
pg.line(i, 0, i, 300);
}
pg.pop();
}



function keyPressed() {
switch (key) {
case 'c':
pMapper.toggleCalibration();
break;
case 'f':
let fs = fullscreen();
fullscreen(!fs);
break;
case 'l':
pMapper.load("maps/map.json");
break;

case 's':
pMapper.save("map.json");
break;
}
switch (key) {
case "c":
pMapper.toggleCalibration();
break;
case "f":
let fs = fullscreen();
fullscreen(!fs);
break;
case "l":
pMapper.load("maps/map.json");
break;

case "s":
pMapper.save("map.json");
break;
}
}

function initSelection() {
mode = "all"
sel = createSelect();
sel.position(10, 10);
sel.option('all');
sel.option('solid');
sel.option('image');
sel.option('sketch');
sel.changed(mySelectEvent);
mode = "all";
sel = createSelect();
sel.position(10, 10);
sel.option("all");
sel.option("solid");
sel.option("image");
sel.option("sketch");
sel.changed(mySelectEvent);
}

function mySelectEvent() {
mode = sel.value();
mode = sel.value();
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
resizeCanvas(windowWidth, windowHeight);
}

function displayFrameRate() {
fill(255);
noStroke();
text(round(frameRate()), -width / 2 + 15, -height / 2 + 50);
fill(255);
noStroke();
text(round(frameRate()), -width / 2 + 15, -height / 2 + 50);
}
Binary file added examples/bezier/assets/Roboto.ttf
Binary file not shown.
Binary file added examples/bezier/assets/catnap.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 17 additions & 19 deletions examples/bezier/index.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<style>
body {
margin: 0;
}

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
body {
margin: 0
}
header {
padding: 20px;
}
</style>
<meta charset="utf-8" />
</head>

header {
padding: 20px;
}
</style>
<meta charset="utf-8" />
</head>

<body>
<script type="text/javascript" src="../../dist/p5.mapper.min.js"></script>
<script src="sketch.js"></script>
</body>

</html>
<body>
<script type="text/javascript" src="../../dist/p5.mapper.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
Loading

0 comments on commit f519b37

Please sign in to comment.