{"id":3472,"date":"2016-01-01T00:27:06","date_gmt":"2015-12-31T23:27:06","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3472"},"modified":"2017-10-10T15:23:29","modified_gmt":"2017-10-10T14:23:29","slug":"p5-js-p5-play-partie-3","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3472","title":{"rendered":"\/ p5.js \/ 23 \/ p5.play \/ partie 3"},"content":{"rendered":"

<\/p>\n

Collisions<\/h2>\n
var sprite1;\r\nvar sprite2;\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite1 = createSprite(width\/2, height\/2, 150, 150);\r\n sprite2 = createSprite(0, 0, 50, 50);\r\n sprite2.shapeColor = color(236,36,94);\r\n}\r\nfunction draw() {\r\n background(220);\r\n sprite2.velocity.x = (mouseX-sprite2.position.x)*0.2;\r\n sprite2.velocity.y = (mouseY-sprite2.position.y)*0.2;\r\n if (sprite2.overlap(sprite1)) {\r\n sprite1.shapeColor = color(36,236,94);\r\n }\r\n else {\r\n sprite1.shapeColor = color(236,36,94);\r\n }\r\n drawSprites();\r\n}<\/pre>\n
.collide<\/em><\/strong><\/p>\n
var sprite1;\r\nvar sprite2;\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite1 = createSprite(width\/2, height\/2, 100, 100);\r\n sprite1.shapeColor = color(236,36,94);\r\n sprite2 = createSprite(0, 0, 50, 50);\r\n sprite2.shapeColor = color(36,236,94);\r\n}\r\nfunction draw() {\r\n background(220);\r\n sprite2.velocity.x = (mouseX-sprite2.position.x)*0.2;\r\n sprite2.velocity.y = (mouseY-sprite2.position.y)*0.2;\r\n sprite2.collide(sprite1);\r\n drawSprites();\r\n}<\/pre>\n
.displace<\/em><\/strong><\/p>\n
var sprite1;\r\nvar sprite2;\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite1 = createSprite(width\/2, height\/2, 100, 100);\r\n sprite1.shapeColor = color(236,36,94);\r\n sprite2 = createSprite(0, 0, 50, 50);\r\n sprite2.shapeColor = color(36,236,94);\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n sprite2.displace(sprite1);\r\n drawSprites();\r\n}\r\n\r\nfunction keyPressed() {\r\n if (keyCode == RIGHT_ARROW) {\r\n sprite2.setSpeed(1.5, 0);\r\n }\r\n else if (keyCode == DOWN_ARROW) {\r\n sprite2.setSpeed(1.5, 90);\r\n }\r\n else if (keyCode == LEFT_ARROW) {\r\n sprite2.setSpeed(1.5, 180);\r\n }\r\n else if (keyCode == UP_ARROW) {\r\n sprite2.setSpeed(1.5, 270);\r\n }\r\n else if (key == ' ') {\r\n sprite2.setSpeed(0, 0);\r\n }\r\n return false;\r\n}<\/pre>\n
Group collisions<\/h3>\n
var murs;\r\nvar boites;\r\nvar joueur;\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n murs = new Group();\r\n boites = new Group();\r\n joueur = createSprite(100, 100, 40, 40);\r\n joueur.shapeColor = color(236,36,94);\r\n for (var i = 0; i < 5; i++) {\r\n var mur = createSprite(random(125, width-125), (height\/5)*i, random(10, 100), random(10, 100));\r\n mur.shapeColor = color(94,236,36);\r\n murs.add(mur);\r\n }\r\n for (var i = 0; i < 4; i++) {\r\n var boite = createSprite(random(50, 100), random(100, height-100),25, 25);\r\n boite.shapeColor = color(236,236,94);\r\n boites.add(boite);\r\n }\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n joueur.velocity.x = \r\n (mouseX-joueur.position.x)*0.1;\r\n joueur.velocity.y = (mouseY-joueur.position.y)*0.1;\r\n joueur.collide(murs);\r\n joueur.displace(boites);\r\n boites.collide(murs);\r\n boites.displace(boites);\r\n drawSprites();\r\n}<\/pre>\n
Collision callbacks<\/h3>\n
var pieces;\r\nvar joueur;\r\nvar score = 0;\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n pieces = new Group();\r\n for (var i = 0; i < 10; i++) {\r\n var piece = createSprite(random(10, width-10), random(10, height-10), 10, 10);\r\n piece.shapeColor = color(36, 236, 94);\r\n pieces.add(piece);\r\n }\r\n joueur = createSprite(50, 50, 40, 40);\r\n joueur.shapeColor = color(236,36,94);\r\n}\r\nfunction draw() {\r\n background(220);\r\n joueur.velocity.x = \r\n (mouseX-joueur.position.x)*0.1;\r\n joueur.velocity.y = \r\n (mouseY-joueur.position.y)*0.1;\r\n joueur.overlap(pieces, getPiece);\r\n drawSprites();\r\n fill(255);\r\n noStroke();\r\n textSize(72);\r\n textAlign(CENTER, CENTER);\r\n if (pieces.length > 0) {\r\n text(score, width\/2, height\/2);\r\n }\r\n else {\r\n text(\"Bravo !\", width\/2, height\/2);\r\n }\r\n}\r\nfunction getPiece(joueur, piece) {\r\n piece.remove();\r\n score += 1;\r\n}<\/pre>\n
Images & animations<\/h2>\n
\"\"sm0.svg<\/a><\/p>\n
var sm;\r\nvar smImg;\r\nfunction preload() {\r\n\u00a0 smImg = loadImage('sm0.svg');\r\n}\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(400, 400);\r\n\u00a0 sm = createSprite(width\/2, height\/2);\r\n\u00a0 sm.addImage(smImg);\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 background(255);\r\n\u00a0 sm.position.x = mouseX;\r\n\u00a0 sm.position.y = mouseY;\r\n\u00a0 if (mouseIsPressed) {\r\n\u00a0 \u00a0 sm.rotation += 2;\r\n\u00a0 \u00a0 noCursor();\u00a0 \r\n} else {\r\n\u00a0 cursor(CROSS);\u00a0 \r\n}\u00a0 \r\ndrawSprites();}<\/pre>\n
\"\"<\/a> \"\" \"\" \"\" \"\" \"\" \"\"<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
var sprite;\r\nvar spriteImg;\r\n\r\nfunction preload() {\r\n spriteImg = loadAnimation(\"sm0.svg\", \"sm1.svg\", \"sm2.svg\", \"sm3.svg\", \"sm4.svg\", \"sm5.svg\");\r\n}\r\n\r\nfunction setup() {\u00a0\r\n  createCanvas(400, 400);\r\n\u00a0 sprite = createSprite(width\/2, height\/2);\r\n\u00a0 sprite.addAnimation(\"default\", spriteImg);\r\n \u00a0sprite.rotateToDirection = true;\u00a0\r\n  sprite.maxSpeed = 2;\u00a0sprite.friction = .01;\r\n}\r\n\r\nfunction draw() {\r\n\u00a0background(255);\r\n\u00a0if (mouseIsPressed) {\r\n\u00a0sprite.attractionPoint(0.5, mouseX, mouseY);\u00a0\r\n}\u00a0\r\ndrawSprites();\r\n}<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3472"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3472"}],"version-history":[{"count":14,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3472\/revisions"}],"predecessor-version":[{"id":3510,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3472\/revisions\/3510"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}