p5.js案例01-行走的人

2018年06月06日

文章目录

声明: 本文由DataScience发表,未经允许不得转载。转载请注明本文链接mlln.cn, 并在文后留言转载.

本文代码运行环境:

windows10
jupyter notebook
p5.js 0.6.1

from IPython.core.magic import register_cell_magic
from IPython.display import IFrame

TEMPLATE = """
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>
<title>Notebook中显示P5.js页面</title>
</head>
<body>
<a href="http://mlln.cn"  target="_blank"><h5>p5.js效果展示: %(name)s</h5></a>
<script>
%(script)s
</script>
</body>
</html>
"""


@register_cell_magic
def p5(line, cell):
    file_id, kws = line.split(' ')[0], line.split(' ')[1:]
    kwargs = {}
    for kw in kws:
        k, v = kw.split('=')
        kwargs[k] = v
    filename = f"p5js-html/example-01-{file_id}.html"
    with open(filename, "w", encoding='utf8') as fp:
        fp.write(TEMPLATE % {"script": cell, "name": filename})
    if 'height' not in kwargs:
        kwargs['height'] = '200px'
    return IFrame(filename, width="100%", **kwargs)

del p5

%%p5 walking-man height=800


var data2 = [343.578,240.626,342.566,220.307,345.036,161.03,338.079,105.569,393.994,107.748,416.197,168.413,419.841,235.297,422.212,256.19,338.079,105.569,330.11,79.5909,327.501,57.3636,338.079,105.569,287.615,119.797,281.813,183.263,259.249,253.235,260.306,272.378,376.786,240.247,372.111,371.145,426.257,374.581,421.481,399.685,310.122,241.008,301.739,374.391,312.717,492.93,296.487,521.009,343.578,240.626,342.411,220.293,344.539,161.074,337.828,105.704,394.524,107.575,417.215,167.367,422.298,233.197,425.304,253.642,337.828,105.704,330.146,79.864,327.896,57.5828,337.828,105.704,285.889,119.952,275.74,186.252,250.698,259.567,250.541,280.528,376.903,239.885,365.776,377.178,420.797,379.866,415.67,405.612,309.985,241.373,305.77,371.795,319.224,487.056,303.411,514.733,343.578,240.626,342.24,220.299,344.025,161.137,337.563,105.835,394.637,107.671,417.483,166.985,423.492,232.079,426.906,252.231,337.563,105.835,329.905,80.0992,327.909,57.7585,337.563,105.835,284.891,119.763,271.838,187.734,244.93,262.94,243.623,285.256,376.946,239.605,360.892,380.672,415.622,387.084,409.557,413.688,309.934,241.655,308.507,369.834,323.621,482.736,308.105,510.152,343.578,240.626,341.725,220.36,342.51,161.343,336.523,106.215,394.318,108.053,416.879,166.441,424.626,229.856,428.842,249.364,336.523,106.215,329.314,80.6173,327.953,58.1199,336.523,106.215,282.342,119.102,263.552,189.869,232.806,267.474,228.614,292.178,376.927,238.984,350.565,385.56,399.846,416.187,390.14,445.053,309.957,242.281,314.46,365.006,332.915,472.412,317.999,499.321,343.578,240.626,341.497,220.407,341.85,161.452,336.064,106.419,393.982,108.387,416.271,166.517,424.467,229.364,428.873,248.674,336.064,106.419,328.948,80.8318,327.874,58.2619,336.064,106.419,281.639,118.649,260.943,190.146,228.747,267.909,223.371,293.135,376.885,238.766,347.165,386.54,391.347,433.682,379.802,463.251,310.007,242.5,316.956,362.816,336.733,467.698,322.025,494.412,343.578,240.626,341.089,220.552,340.804,161.72,335.22,107.018,393.338,109.248,414.663,166.882,423.144,228.832,427.577,247.824,335.22,107.018,328.642,81.3691,328.352,58.6174,335.22,107.018,280.458,117.923,256.467,190.521,222.307,267.737,214.728,293.275,376.742,238.535,342.81,387.224,367.431,481.503,351.432,511.224,310.174,242.732,322.699,357.536,345.781,455.557,331.472,481.787,343.578,240.626,341.006,220.616,340.696,161.812,335.151,107.281,393.235,109.701,414.099,167.208,422.429,228.97,426.666,247.894,335.151,107.281,328.757,81.6064,328.83,58.7748,335.151,107.281,280.473,117.68,255.575,190.48,221.088,267.364,212.803,292.811,376.664,238.594,342.401,387.11,355.996,501.905,338.159,530.754,310.267,242.671,325.127,355.174,349.776,449.754,335.631,475.738,343.578,240.626,341.044,220.709,341.358,161.844,336.013,107.649,393.809,110.682,413.42,168.211,420.886,230.098,424.264,248.977,336.013,107.649,330.171,81.9765,331.102,58.984,336.013,107.649,281.684,117.194,255.854,189.919,222.064,266.518,212.843,291.682,376.441,239.048,343.215,386.564,332.054,537.313,311.168,562.318,310.529,242.212,330.779,349.204,359.213,434.709,345.537,460.024,343.578,240.626,341.136,220.706,341.961,161.751,336.864,107.623,394.459,111.033,413.434,168.777,420.344,231.004,423.27,249.896,336.864,107.623,331.327,81.9896,332.589,58.9456,336.864,107.623,282.693,116.901,257.027,189.307,224.05,266.017,214.692,291.106,376.335,239.303,343.583,386.415,325.481,545.015,303.962,568.695,310.654,241.955,333.129,346.511,363.185,427.663,349.772,452.692,343.578,240.626,341.366,220.601,343.711,161.293,339.729,107.118,396.713,111.843,413.973,170.681,419.48,234.026,421.509,253.063,339.729,107.118,334.963,81.6293,336.872,58.5127,339.729,107.118,285.856,115.885,262.189,186.598,232.031,263.675,222.669,288.678,376.133,239.715,343.01,386.576,322.288,547.398,300.074,572.014,310.89,241.54,337.344,341.385,371.616,410.555,359.104,435.232,343.578,240.626,341.428,220.527,344.397,161.041,341.076,106.787,397.742,112.229,414.197,171.746,419.182,235.611,420.965,254.823,341.076,106.787,336.671,81.3488,338.799,58.2199,341.076,106.787,287.26,115.363,265.24,184.876,236.573,261.858,227.279,286.79,376.105,239.726,342.275,386.701,325.453,542.865,303.356,569.262,310.924,241.529,337.704,340.625,374.428,403.476,362.536,428.264,343.578,240.626,341.49,220.329,345.247,160.539,343.436,106.076,399.224,113.208,413.82,174.635,417.853,239.928,419.389,259.869,343.436,106.076,339.953,80.6346,342.441,57.504,343.436,106.076,289.749,114.104,273.283,179.711,248.311,254.88,239.565,279.234,376.134,239.481,340.968,386.293,337.452,524.188,317.03,553.98,310.89,241.775,331.637,344.932,377.144,389.47,367.813,415.115,343.578,240.626,341.505,220.244,345.323,160.409,343.895,105.881,399.324,113.572,413.159,175.893,416.867,241.882,418.379,262.197,343.895,105.881,340.897,80.3862,343.486,57.257,343.895,105.881,290.291,113.684,276.6,177.277,253.067,250.935,244.956,274.744,376.111,239.395,341.061,385.667,342.58,515.462,323.089,545.751,310.916,241.861,325.557,349.48,376.139,385.073,368.384,410.999,343.578,240.626,341.637,220.064,345.422,160.309,343.961,105.786,398.395,114.489,410.75,179.117,413.411,247.218,414.683,268.506,343.961,105.786,341.53,80.1059,344.198,56.9602,343.961,105.786,291.368,113.041,284.22,171.397,262.743,240.627,257.007,262.317,375.844,239.579,343.492,383.056,352.416,499.124,334.493,529.087,311.226,241.675,305.555,363.204,368.323,381.009,363.422,406.666,343.578,240.626,341.775,219.995,345.576,160.328,343.742,105.855,397.675,114.901,409.494,180.55,411.571,249.662,412.639,271.374,343.742,105.855,341.37,80.1155,343.961,56.9551,343.742,105.855,291.904,112.908,287.22,168.944,266.189,236.225,261.532,256.844,375.674,239.841,345.426,381.467,356.013,493.899,338.498,523.409,311.423,241.412,296.198,368.934,362.959,382.964,358.145,408.555,343.578,240.626,342.236,219.88,346.121,160.435,343.188,106.106,395.323,116.122,405.996,184.114,406.259,255.701,406.705,278.386,343.188,106.106,340.276,80.2669,342.276,57.0916,343.188,106.106,294.405,112.324,294.621,163.135,274.367,225.648,271.332,244.24,375.318,240.669,351.395,376.851,364.096,483.694,347.283,512.031,311.832,240.582,277.505,379.17,346.617,399.28,338.808,426.157,343.578,240.626,342.421,219.862,346.305,160.497,342.929,106.182,394.277,116.539,404.503,185.364,403.869,257.944,404.089,280.98,342.929,106.182,339.905,80.3458,341.47,57.1802,342.929,106.182,295.599,112.075,297.265,160.931,277.198,221.372,274.349,239.419,375.198,241.02,354.331,374.574,367.648,479.424,351.126,507.332,311.969,240.231,271.768,382.054,337.7,412.017,327.519,439.992,343.578,240.626,342.651,219.881,346.302,160.661,342.298,106.26,391.583,117.504,400.872,187.925,397.704,262.615,397.325,286.367,342.298,106.26,338.593,80.483,338.983,57.3647,342.298,106.26,298.867,111.337,303.712,156.306,283.924,211.825,280.987,228.864,374.996,241.564,361.31,368.858,376.341,468.297,360.592,495.452,312.199,239.688,264.388,386.022,311.088,453.235,294.175,483.495,343.578,240.626,342.646,219.898,346.034,160.741,341.868,106.241,390.647,117.686,399.78,188.489,395.527,263.839,394.918,287.799,341.868,106.241,338.006,80.5482,337.949,57.4455,341.868,106.241,299.572,111.265,305.464,154.92,285.653,208.574,282.669,225.176,374.964,241.616,364.119,366.325,380.202,462.856,364.825,489.742,312.236,239.637,263.641,386.871,297.431,473.546,277.645,503.954,343.578,240.626,342.472,219.914,344.877,160.894,340.598,106.094,388.594,117.889,397.663,189.175,390.346,265.706,388.92,290.04,340.598,106.094,335.861,80.61,335.14,57.5047,340.598,106.094,300.137,111.399,308.678,152.686,289.477,202.902,286.88,218.381,375.136,241.238,369.887,360.463,389.454,448.612,374.996,474.834,312.04,240.014,266.536,387.567,264.161,518.135,239.345,545.739,343.578,240.626,342.381,219.903,344.315,160.891,340,105.973,388.146,117.6,397.4,188.846,388.812,265.602,387.054,289.99,340,105.973,334.974,80.5398,334.125,57.4272,340,105.973,299.682,111.61,308.954,152.283,290.154,201.656,287.957,216.712,375.34,240.896,372.119,357.994,393.564,441.974,379.504,467.881,311.807,240.355,269.211,387.431,251.516,533.215,225.634,558.537,343.578,240.626,342.242,219.847,343.493,160.629,339.15,105.482,388.263,116.104,398.151,186.891,386.957,263.641,384.445,287.997,339.15,105.482,333.41,79.9871,332.446,56.8781,339.15,105.482,298.612,111.971,308.408,152.385,290.382,201.47,289.774,215.816,376.03,239.924,377.489,352.113,403.551,425.945,390.393,451.14,311.011,241.33,276.052,386.711,234.271,553.362,208.149,574.23,343.578,240.626,342.24,219.816,343.48,160.421,339.145,105.167,388.945,115.13,399.332,185.514,387.666,261.99,384.947,286.258,339.145,105.167,333.204,79.5856,332.228,56.493,339.145,105.167,298.231,112.142,307.497,153.083,289.368,202.816,289.577,216.997,376.359,239.536,379.836,349.675,407.975,418.99,395.207,443.948,310.627,241.722,278.168,386.605,233.495,556.031,207.832,576.685,343.578,240.626,342.397,219.757,344.299,159.849,340.031,104.262,391.38,112.726,403.564,181.768,392.732,257.151,389.949,281.106,340.031,104.262,333.629,78.4706,332.571,55.4563,340.031,104.262,297.744,112.787,304.575,156.679,285.578,209.121,287.3,223.331,377,238.989,384.243,345.965,417.961,402.993,406.201,427.809,309.871,242.277,279.391,387.412,244.538,552.029,220.636,576.437,343.578,240.626,342.535,219.729,344.971,159.605,340.768,103.833,392.669,111.705,405.811,180.031,396.23,254.751,393.719,278.512,340.768,103.833,334.177,77.9719,333.046,55.0118,340.768,103.833,297.578,113.217,303.08,159.104,283.56,213.084,285.592,227.539,377.198,238.927,385.437,345.996,421.709,396.698,410.434,421.707,309.635,242.341,278.97,387.885,252.92,546.424,230.106,573.127,343.578,240.626,342.778,219.914,346.066,159.809,341.036,103.957,394.046,110.165,408.526,177.113,402.333,250.046,400.803,273.324,341.036,103.957,334.005,77.8201,332.037,55.0563,341.036,103.957,295.636,115.261,299.994,165.466,280.796,222.832,282.698,238.213,377.149,239.586,386.5,348.867,427.614,386.538,417.357,412.11,309.692,241.675,279.617,387.234,272.526,528.71,252.476,558.501,343.578,240.626,342.842,220.002,346.212,160.007,340.748,104.15,394.205,109.601,409.943,175.571,405.482,247.461,404.677,270.351,340.748,104.15,333.379,77.9689,331.038,55.3227,340.748,104.15,294.355,116.386,297.948,168.704,278.841,227.717,280.669,243.519,377.053,239.902,386.01,351.133,429.562,382.654,420.042,408.418,309.806,241.356,282.027,385.904,280.523,521.232,261.524,551.359,343.578,240.626,342.841,220.159,346.018,160.498,339.703,104.719,394.057,108.689,412.466,172.537,411.53,242.258,412.138,264.3,339.703,104.719,331.812,78.5493,328.927,56.157,339.703,104.719,291.569,118.291,292.804,174.856,273.133,237.601,274.844,254.32,376.844,240.349,382.953,357.173,430.917,377.381,423.401,403.166,310.052,240.904,289.405,381.897,293.988,509.169,276.338,538.785,343.578,240.626,342.765,220.232,345.711,160.747,338.985,105.065,393.913,108.17,414.042,170.671,415.119,239.191,416.483,260.753,338.985,105.065,330.987,78.9485,328.06,56.6749,338.985,105.065,289.99,119.077,289.115,178.246,268.677,243.513,270.373,260.883,376.772,240.426,379.805,361.846,430.343,374.84,424.224,400.287,310.137,240.827,294.405,378.977,301.502,502.694,284.453,531.699,343.578,240.626,342.765,220.232,345.711,160.747,338.985,105.065,393.913,108.17,414.042,170.671,415.119,239.191,416.483,260.753,338.985,105.065,330.987,78.9485,328.06,56.6749,338.985,105.065,289.99,119.077,289.115,178.246,268.677,243.513,270.373,260.883,376.772,240.426,379.805,361.846,430.343,374.84,424.224,400.287,310.137,240.827,294.405,378.977,301.502,502.694,284.453,531.699];


function setup() {
  createCanvas(720, 800);
}

function draw() {
  
  background(0);
  fill(255);
  stroke(255);
  
  var frame = (int)(frameCount*0.5) % 30;
  var myPts =  [];//point[24]; // new Array(24)
  
  for (i = 0; i < 24; i++){
      myPts[i] = createVector();
      myPts[i].x =  data2[ frame*24*2 + i*2 + 0 ];
      myPts[i].y =  data2[ frame*24*2 + i*2 + 1 ];
  }
  
  
  for (i = 0; i < 24; i++){
    
    //line(myPts[i].x, myPts[i].y,mouseX, mouseY);
    //ellipse(myPts[i].x, myPts[i].y, 10, 10);
  }
  
   for (i = 0; i < 24; i++){
     i_p_1 = (i + 1) % 24; 
     line(myPts[i].x, myPts[i].y, myPts[i_p_1].x, myPts[i_p_1].y)
  }
  
  ellipse(myPts[18].x, myPts[18].y, 30,30);
  
  
}

输出:

注意
本文由jupyter notebook转换而来, 您可以在这里下载notebook
统计咨询请加QQ 2726725926, 微信 mllncn, SPSS统计咨询是收费的
微博上@mlln-cn可以向我免费题问
请记住我的网址: mlln.cn 或者 jupyter.cn

#p5.js

p5.js案例01-行走的人

赞助

赞助推荐

常用工具

p5.js

友商赞助